Schoenenberger Messer

Zusammen mit [Thomas Helbrecht](https://th-webdesign.com) habe ich diese Website für unseren Kunden entwickelt. Da der Kunde bereits Erfahrung mit WordPress hatte, wollte er, dass wir die Website mit WordPress schreiben.
Während Thomas' Arbeit darin bestand, die Seite zu gestalten und sie nach Kundenwunsch zu stylen, bestand meine Hauptarbeit darin, das Backend zu entwickeln und den Inhalt an das Frontend zu bringen.

Aufgrund von Kundenanforderungen haben wir ein WordPress-Projekt erstellt. Zusammen mit mehreren Plugins konnten wir eine komplexe Navigation realisieren.

Backend

Um die Implementierung des Designs möglichst einfach zu halten, haben wir uns auch in diesem Projekt für TailwindCSS entschieden.

Frontend

large_0.png

medium_0.png

small_0.png

thumbnail_0.png

0.png

large_7.png

medium_7.png

small_7.png

thumbnail_7.png

7.png

large_10.png

medium_10.png

small_10.png

thumbnail_10.png

10.png

large_3.png

medium_3.png

small_3.png

thumbnail_3.png

3.png

large_4.png

medium_4.png

small_4.png

thumbnail_4.png

4.png

large_9.png

medium_9.png

small_9.png

thumbnail_9.png

9.png

large_8.png

medium_8.png

small_8.png

thumbnail_8.png

8.png

large_1.png

medium_1.png

small_1.png

thumbnail_1.png

1.png

large_6.png

medium_6.png

small_6.png

thumbnail_6.png

6.png

large_5.png

medium_5.png

small_5.png

thumbnail_5.png

5.png

large_2.png

medium_2.png

small_2.png

thumbnail_2.png

2.png

Together with [Thomas Helbrecht](https://th-webdesign.com), I developed this Website for our client. Because the client already had experience with WordPress, he wanted us to build the website with WordPress.
While Thomas' work was to design the page and manage to style it to the customers requests, my main work was developing the backend and to bring the content to the frontend.

Tailwind CSS

TailwindCSS ist mein bevorzugtes "Framework" für Kundenprojekte. Es ist super einfach zu bedienen, hält die Benutzeroberfläche konsistent und ist auch sehr kompakt.

Wordpress

Ich habe Wordpress in einem Kundenprojekt verwendet, weil der Kunde es haben wollte. Ich mag es nicht, weil es in PHP geschrieben und im Vergleich zu Next.js-Projekten sehr langsam ist.

Nachdem ich meine Karriere als Webentwickler mit reinem HTML begonnen hatte, brauchte ich eine Möglichkeit, größere Websites zu schreiben, ohne Tausende von Zeilen von einer HTML-Datei in eine andere zu kopieren. Also habe ich PHP gelernt. Ich habe damit auch das Frontend meines ersten Smarthomes geschrieben.

Schönenberger Messer

Tim Bortscheller

Diese Website wirde im Rahmen eines Kundenauftrags für Tim Bortscheller erstellt. Er ist als fachlicher Berater in der Zerspanung zuständig und konnte mit Hilfe der Website sehr schnell wachsen.

Als Backend/CMS wird Strapi verwendet. Das ermöglicht das Einpflegen neuer Inhalte, ohne das Frontend neu bauen zu müssen.

Das Frontend ist zusammen mit TailwindCSS in Next.js implementiert.

This website was created as part of a customer order for Tim Bortscheller. As a technical consultant, he is responsible for machining and was able to grow very quickly with the help of the website.

TBW Werkzeuge

Next.js

Als ich die Hauptvorteile von Next.js sah, z.B den eingebauten Router und SSR/SSG war ich verliebt. Ich habe die meisten meiner privaten Projekte von React auf Next.js umgestellt und angefangen, es in Kundenprojekten zu verwenden.

TypeScript

Ins kalte Wasser geworfen, als ich eigene VS-Code-Erweiterungen entwickeln wollte, musste ich TypeScript lernen. Jetzt verwende ich es überall wegen seiner Typsicherheit und perfekten Codevervollständigung.

Docker

Dieses NPM-Paket enthält sechs kleine Funktionen zum einfachen Konvertieren von RGB/HEX/HSL-Farben.

large_code.png

medium_code.png

small_code.png

thumbnail_code.png

code.png

This NPM package contains six small functions to simply convert RGB/HEX/HSL colors.

Simple Color Convert Functions

Node.js

In Kombination mit React war es mein erster Kontakt mit moderner Webentwicklung.

Funktionen zur Konvertierung von Farben

Tobias Wälde

Diese Webapp ist die Steuerungsschnittstelle meines maßgeschneiderten Smart Homes.

Als MQTT-Broker habe ich einen Raspberry Pi verwendet. Ich habe Skripte für mehrere NodeMCUs (kleine leistungsstarke Boards mit WiFi) geschrieben, um auf MQTT-Nachrichten zu reagieren. Diese NodeMCUs senden serielle Signale an PWM-Servocontroller. Diese Controller sind mit Transistoren verbunden, die die Farbe und Helligkeit der LED-Streifen steuern und Relais ein- und ausschalten.

Hardware

In dieser Version meines Smarthomes habe ich nur ein Backend. Das Backend ist für die Authentifizierung zuständig, bündelt Fritz! API und Philips Hue API und verarbeitet MQTT-Nachrichten.

Das Frontend ist wieder eine React Webapp. Es verkürzt die Aktualisierungszeit für meine Eltern und ermöglicht mir so, mein Smarthome von jedem Gerät aus zu steuern.

large_tab-tobi-living-room.png

medium_tab-tobi-living-room.png

small_tab-tobi-living-room.png

thumbnail_tab-tobi-living-room.png

tab-tobi-living-room.png

large_tab-stats.png

medium_tab-stats.png

small_tab-stats.png

thumbnail_tab-stats.png

tab-stats.png

large_tab-preferences.png

medium_tab-preferences.png

small_tab-preferences.png

thumbnail_tab-preferences.png

tab-preferences.png

large_tab-living-room.png

medium_tab-living-room.png

small_tab-living-room.png

thumbnail_tab-living-room.png

tab-living-room.png

large_tab-home.png

medium_tab-home.png

small_tab-home.png

thumbnail_tab-home.png

tab-home.png

large_hardware-wireless-receiver.jpg

medium_hardware-wireless-receiver.jpg

small_hardware-wireless-receiver.jpg

thumbnail_hardware-wireless-receiver.jpg

hardware-wireless-receiver.jpg

large_tab-corridor.png

medium_tab-corridor.png

small_tab-corridor.png

thumbnail_tab-corridor.png

tab-corridor.png

large_tab-garden.png

medium_tab-garden.png

small_tab-garden.png

thumbnail_tab-garden.png

tab-garden.png

large_tab-bathroom.png

medium_tab-bathroom.png

small_tab-bathroom.png

thumbnail_tab-bathroom.png

tab-bathroom.png

large_hardware-wireless-doorbell.jpg

medium_hardware-wireless-doorbell.jpg

small_hardware-wireless-doorbell.jpg

thumbnail_hardware-wireless-doorbell.jpg

hardware-wireless-doorbell.jpg

large_hardware-led-controller.jpg

medium_hardware-led-controller.jpg

small_hardware-led-controller.jpg

thumbnail_hardware-led-controller.jpg

hardware-led-controller.jpg

large_hardware-rack-front.jpg

medium_hardware-rack-front.jpg

small_hardware-rack-front.jpg

thumbnail_hardware-rack-front.jpg

hardware-rack-front.jpg

large_hardware-rack-back.jpg

medium_hardware-rack-back.jpg

small_hardware-rack-back.jpg

thumbnail_hardware-rack-back.jpg

hardware-rack-back.jpg

large_hardware-bed-module.jpg

medium_hardware-bed-module.jpg

small_hardware-bed-module.jpg

thumbnail_hardware-bed-module.jpg

hardware-bed-module.jpg

large_hardware-raspberry.jpg

medium_hardware-raspberry.jpg

small_hardware-raspberry.jpg

thumbnail_hardware-raspberry.jpg

hardware-raspberry.jpg

This webapp is the control interface of my custom built smart home.

Smarthome (v3)

MQTT

Ich verwende MQTT in meinem Smarthome. Es bietet mir fast Kommunikation fast ohne Latenz zwischen meinem Backend und den Mikrocontrollern.

React

React war mein erster Kontakt mit moderner Webentwicklung. Im Laufe der Jahre verbrachte ich viel Zeit in mehreren Kursen, um alles darüber zu lernen.

 MaterialUI

Wird stark in meinem Smarthome verwendet, aber auch in vielen anderen Projekten aufgrund der Möglichkeiten und UI-Komponenten für fast alles in kleinen und großen Anwendungen.

Python

Zuerst verwendet, um das Backend meines Smart Home zu schreiben. Jetzt verwende ich Python nur noch in kleinen Skripten, z.B. um Informationen über verbundene VPN-Clients in meinem Smart Home zu erhalten.

Während meiner Berufsausbildung habe ich Firmware für Sensoren geschrieben. Aber ich nutze es auch in privaten Projekten, wie meinem Smarthome, um die Firmware für die Mikrocontroller zu schreiben.

Raspberry Pi (Icon)

Arduino (Icon)

Online gibt es viele Tools für fast alles. Anstatt Lesezeichen für die Tools hinzuzufügen, die ich regelmäßig verwende, habe ich einfach eine kleine WebApp erstellt, mit der ich das alles in einer App tun kann. Siehe unten für weitere Informationen über die Funktionalität.

Der Passwortgenerator hat mehrere Möglichkeiten, den Zeichensatz und die Länge des Passworts zu ändern. Ich habe auch ein Kontrollkästchen hinzugefügt, um schnell eine vordefinierte Voreinstellung zu verwenden. Durch Aktivieren von 'Auto Clipboard' wird das Passwort nach dem Generieren automatisch in die Zwischenablage kopiert.

Passwortgenerator

Im Abschnitt "Bcrypt" können Sie ein Passwort mit Bcrypt verschlüsseln und entschlüsseln.

Bcrypt

Im Abschnitt "Hash" können Sie Hashes mit einigen gängigen Hash-Algorithmen generieren.

Hash

Ich verwende dieses Tool hauptsächlich, um meine Kontaktdaten zu verschlüsseln, um sie auf Webseiten zu verwenden, ohne jeden Tag tausende E-Mails von Spambots zu erhalten.

Portfolio

Konkaktieren Sie mich

Nachricht senden