Webdesign, Webentwicklung und SaaS aus Traunstein
Ich bin Quoc Khanh Nguyen und arbeite unter dem Namen khanhsdesktop als Einzelunternehmer in Traunstein, Bayern. Ich gestalte und entwickle Websites, Onlineshops und Web-Apps, vom ersten Entwurf bis zum Betrieb auf dem Server. Mein Portfolio läuft als funktionierender Desktop im Browser: Jede App darauf ist ein Projekt, das sich öffnen und ausprobieren lässt.
Leistungen
Webdesign
Websites und Landingpages, die zur Marke passen und auf dem Handy genauso funktionieren wie am großen Bildschirm. Ich arbeite mit Designsystemen statt mit Einzelseiten: Farben, Schrift und Bausteine werden einmal festgelegt und überall gleich verwendet, damit eine Seite auch nach der dritten Erweiterung noch aus einem Guss ist. Gestaltet wird in Figma, Affinity Designer und Canva.
Webentwicklung
Schnelle Websites mit Astro, React und Preact auf sauberem HTML, CSS und JavaScript. Dazu das, was nach dem Design kommt: Hosting und Deployment auf Hetzner mit Cloudflare, Nginx oder Apache und Docker, Formulare mit eigenem Backend und die Pflege nach dem Start.
SaaS- und Web-App-Entwicklung
Dashboards, Kundenportale und interne Werkzeuge, die Menschen jeden Tag benutzen: Ticketsysteme, Planungs-Boards, Bestellprozesse, Team-Chat und Auswertungen aus ERP-Daten. Die Oberfläche entsteht in React oder Preact, das Backend auf Wunsch individuell mit Node.js, Next.js und Prisma auf PostgreSQL, MariaDB oder SQLite.
E-Commerce und Shopware
Onlineshops mit Shopware 6, Shopify und WordPress, einschließlich eigener Shopware-Plugins mit PHP, Twig und SCSS. E-Commerce ist mein Studienfach, und im Beruf entwickle ich Shopware-Erweiterungen für einen Industriebetrieb.
Datenschutz von Anfang an
Websites ohne unnötige Drittanbieter: selbst gehostete Schriften, keine Tracker, die ohne Einwilligung laden, Impressum und Datenschutzerklärung vollständig. Diese Website ist selbst so gebaut.
Projekte
Nicht jedes Projekt ist ein Kundenauftrag: Manche sind live und im Einsatz, manche fertig und kurz vor dem Start, manche Redesigns bestehender Marken, die ich zur Übung gebaut habe.
- wolfram: More than just Tungsten. Die überarbeitete Landingpage der Wolfram Industrie, eines familiengeführten Wolfram-Herstellers: ein dunkler, cineastischer Auftritt mit geschrägten Industrie-Kacheln, einem lebendigen Funken-Hero und einem Teal-Akzent.
- UniSalzburg: Eine Universität, von beiden Seiten. Die Universität Salzburg, zweifach neu gestaltet. Am Anfang steht eine Wahl: die Website, die um Sie wirbt (Startseite und der Joint-Master Human-Computer Interaction, ein Grün, harte Kanten, eine ruhige Lesespalte und das vollständige Zulassungs-Infoblatt), oder das Bewerbungsportal, das über Sie entscheidet. Das Portal führt in sechs vorausgefüllten Schritten bis zur schriftlichen Entscheidung, und beide Bescheide lassen sich öffnen, denn ein System bemisst sich auch daran, wie es die behandelt, denen es absagt.
- drivingschool: Eine Fahrschule im Nachtmodus. Die Landingpage der Zuhra Fahrschule: ein fast schwarzer Auftritt in Chrom und Pink mit Kurskarten, Führerscheinklassen und einem Theorie-Spotlight, hier als lebendige Seite nachgebaut.
- lamplighter: Ein Lampenladen, brennend verkauft. The Lamplighter, ein Lampenbauer und Reparaturbetrieb, gesetzt wie eine gealterte Zeitung: Pergament, kontrastreiche Display-Serife, Schreibschrift-Unterzeilen und Text in Spalten. Die zwei Modi sind der Laden bei Tag und der Laden nach Ladenschluss, der Lichtschalter im Kopf verdunkelt also den Raum und schaltet jede Lampe auf der Seite ein. Die Bildplätze sind leere Platzhalter, jeder mit dem Motiv beschriftet, für das er bemessen ist.
- cafe: Ein Café, bei dem man den Tisch deckt. Milk & Matcha, ein Erdbeer-Matcha-Café in Creme, Rosa und Grün. Bestellt wird nicht per Warenkorb, sondern per Tisch: Drei feste Plätze tragen ein Getränk, einen Kuchen und etwas Herzhaftes, und ein zweites Getränk ersetzt das erste, statt hinzuzukommen, sodass das Bild auf dem Tisch immer die Bestellung ist. Alles ist 2D, freigestellte Produktbilder auf einer fotografierten Tischplatte, und jeder Bildplatz ist ein Platzhalter, bemessen für das Foto, das ihn ersetzen wird.
- Wineshop: E-Commerce, neu gepixelt. Ein frisch gepixelter Onlineshop für einen regionalen Weinhändler. Katalog, Warenkorb und Checkout, neu gebaut für Tempo und etwas Wärme.
- archive: Ein redaktionelles Rezensionsarchiv. Marten’s Archive, ein kuratiertes Archiv stiller Lieblinge: Bücher, Filme und Alben und die Gedanken, die sie hinterlassen. Ein WordPress-Projekt in Pergament und Tinte, hier als lebendige Landingpage nachgebaut.
- MuseumTrip: Ein Museum in drei Dimensionen. KhanhMuseum, ein dunkles, warm beleuchtetes Museum für Skulpturen und kuriose Antiquitäten. Die Sammlung ist eine lebendige three.js-Halle aus 3D-Objekten zum Drehen, mit Zeitfenster-Buchung. Nach einem vorgegebenen Design gebaut.
- workplace: Fünf Werkzeuge, ein angemeldeter Arbeitsplatz. Workplace ist das Firmenportal, in dem die übrigen Bürowerkzeuge sitzen: Sie kommen angemeldet an, auf einem Dashboard, das zeigt, was auf Sie wartet und welchem Team Sie zugeordnet sind. Chat, Planboard, Helpdesk, Workwear und Transcribe öffnen sich im Rahmen statt in eigenen Fenstern, sodass Seitenleiste, Konto und Hausstil beim Wechseln bestehen bleiben. Nach einem realen internen Portal nachgebaut, hier als eigenständiges Mock.
- chat: Eine Social-Chat-App. Chatter, ein kleiner Social-Messenger: Gruppenchats und Direktnachrichten, angeheftete Notizen, ein Dringend-Flag und ein Buzz-Ping. Aus einem Firmen-Kommunikationstool als eigenständiges Mock nachgebaut.
- studio: Ein Designstudio im Browser. Studio, ein kleiner Design-Editor: eine Galerie von Designs und eine Arbeitsfläche mit Werkzeugleiste, Markenfarben, Ebenen und Live-Eigenschaften. Aus einem Firmen-Designtool als eigenständiges Mock nachgebaut.
- planboard: Ein Task-Board für Teams. Planboard, ein Task-Board im Trello-Stil: Boards, Listen und Karten zum Verschieben, mit Labels, Fälligkeiten, Checklisten, Mitgliedern und Kommentaren. Aus einem Firmen-Tool als eigenständiges Mock nachgebaut.
- helpdesk: Ein Support-Ticketsystem. Helpdesk, ein Support-Ticketsystem: Tickets erstellen, gesendete verfolgen und eingehende für das Team verwalten, mit Status, Priorität, Zuweisung, Notizen und Konversationsverlauf. Aus einem Firmen-Tool als eigenständiges Mock nachgebaut.
- workwear: Ein Arbeitskleidung-Shop. Workwear Store, ein interner Bestell-Shop: Katalog durchsehen, Größen und Mengen wählen, Anfrage senden und per Status verfolgen. Ein Admin-Schalter wechselt in die Teamleiter-Ansicht, um Anfragen freizugeben, abzulehnen und auszugeben. Aus einem Firmen-Tool als eigenständiges Mock nachgebaut.
- digitalmenu: Eine vietnamesische Speisekarte für den Tisch. Khanh’s Restaurant ist eine vietnamesische digitale Speisekarte, die mit einem simulierten QR-Scan am Tisch beginnt. Sechzehn Gerichte und Getränke sind in vier Gänge gegliedert, die meisten fotografiert, jeweils mit vietnamesischem Namen, Portionsgröße, Schärfe und Allergenen. Gäste können ihr Tablett bearbeiten, eine Bestellung senden und sie von der Küche bis an den Tisch verfolgen.
- transcribe: Live-Transkription. Scribe, ein Live-Transkriptionstool: Sprachen und Audioquelle wählen und eine Besprechung als zeitgestempelte Segmente mit Übersetzung und laufender Zusammenfassung mitlesen. Transkript kopieren oder herunterladen. Als eigenständiges Mock nachgebaut (kein Mikrofon oder Backend).
- geometry: Geometrie, die ihre Regeln hält. Geometry, ein Offline-Board mit Konstruktionsaufgaben: eine Zeichenfläche je Aufgabe, von den Basiswinkeln im gleichschenkligen Dreieck bis zu Thales, dem Umfangswinkelsatz und dem Mittendreieck. Eine Figur mit Punkt, Strecke, Kreis und Mittelpunkt bauen und ihr dann Regeln geben (Punkt auf Kreis, gleiche Längen, gleiche Bögen, parallel, senkrecht, feste Länge oder Winkel). Wird ein Punkt gezogen, baut ein Constraint-Solver die Figur neu auf oder lehnt die Bewegung ab und nennt die Regeln, die sich widersprechen. Winkel lassen sich messen, ohne sie festzuhalten, sodass man einem Satz beim Gelten zusehen kann.
- academy: Ein Community-Forum. Wolfram Academy, eine geschlossene Community für die Schweißkunden der Wolfram Industrie: ein Chat mit Schweißexperten, ein Beitrags-Feed und ein filterbares Benachrichtigungscenter. Deutschsprachige Oberfläche, gebaut auf dem Design-System des Unternehmens (Wolfram-Grün, Source Sans Pro, klare Kanten).
Kontakt
E-Mail: [email protected], LinkedIn: Khanh Nguyen. Quoc Khanh Nguyen, khanhsdesktop, 83278 Traunstein.
Webdesign, Webentwicklung und SaaS aus Traunstein
Ich bin Quoc Khanh Nguyen und arbeite unter dem Namen khanhsdesktop als Einzelunternehmer in Traunstein, Bayern. Ich gestalte und entwickle Websites, Onlineshops und Web-Apps, vom ersten Entwurf bis zum Betrieb auf dem Server. Mein Portfolio läuft als funktionierender Desktop im Browser: Jede App darauf ist ein Projekt, das sich öffnen und ausprobieren lässt.
Leistungen
Webdesign
Websites und Landingpages, die zur Marke passen und auf dem Handy genauso funktionieren wie am großen Bildschirm. Ich arbeite mit Designsystemen statt mit Einzelseiten: Farben, Schrift und Bausteine werden einmal festgelegt und überall gleich verwendet, damit eine Seite auch nach der dritten Erweiterung noch aus einem Guss ist. Gestaltet wird in Figma, Affinity Designer und Canva.
Webentwicklung
Schnelle Websites mit Astro, React und Preact auf sauberem HTML, CSS und JavaScript. Dazu das, was nach dem Design kommt: Hosting und Deployment auf Hetzner mit Cloudflare, Nginx oder Apache und Docker, Formulare mit eigenem Backend und die Pflege nach dem Start.
SaaS- und Web-App-Entwicklung
Dashboards, Kundenportale und interne Werkzeuge, die Menschen jeden Tag benutzen: Ticketsysteme, Planungs-Boards, Bestellprozesse, Team-Chat und Auswertungen aus ERP-Daten. Die Oberfläche entsteht in React oder Preact, das Backend auf Wunsch individuell mit Node.js, Next.js und Prisma auf PostgreSQL, MariaDB oder SQLite.
E-Commerce und Shopware
Onlineshops mit Shopware 6, Shopify und WordPress, einschließlich eigener Shopware-Plugins mit PHP, Twig und SCSS. E-Commerce ist mein Studienfach, und im Beruf entwickle ich Shopware-Erweiterungen für einen Industriebetrieb.
Datenschutz von Anfang an
Websites ohne unnötige Drittanbieter: selbst gehostete Schriften, keine Tracker, die ohne Einwilligung laden, Impressum und Datenschutzerklärung vollständig. Diese Website ist selbst so gebaut.
Projekte
Nicht jedes Projekt ist ein Kundenauftrag: Manche sind live und im Einsatz, manche fertig und kurz vor dem Start, manche Redesigns bestehender Marken, die ich zur Übung gebaut habe.
- wolfram: More than just Tungsten. Die überarbeitete Landingpage der Wolfram Industrie, eines familiengeführten Wolfram-Herstellers: ein dunkler, cineastischer Auftritt mit geschrägten Industrie-Kacheln, einem lebendigen Funken-Hero und einem Teal-Akzent.
- UniSalzburg: Eine Universität, von beiden Seiten. Die Universität Salzburg, zweifach neu gestaltet. Am Anfang steht eine Wahl: die Website, die um Sie wirbt (Startseite und der Joint-Master Human-Computer Interaction, ein Grün, harte Kanten, eine ruhige Lesespalte und das vollständige Zulassungs-Infoblatt), oder das Bewerbungsportal, das über Sie entscheidet. Das Portal führt in sechs vorausgefüllten Schritten bis zur schriftlichen Entscheidung, und beide Bescheide lassen sich öffnen, denn ein System bemisst sich auch daran, wie es die behandelt, denen es absagt.
- drivingschool: Eine Fahrschule im Nachtmodus. Die Landingpage der Zuhra Fahrschule: ein fast schwarzer Auftritt in Chrom und Pink mit Kurskarten, Führerscheinklassen und einem Theorie-Spotlight, hier als lebendige Seite nachgebaut.
- lamplighter: Ein Lampenladen, brennend verkauft. The Lamplighter, ein Lampenbauer und Reparaturbetrieb, gesetzt wie eine gealterte Zeitung: Pergament, kontrastreiche Display-Serife, Schreibschrift-Unterzeilen und Text in Spalten. Die zwei Modi sind der Laden bei Tag und der Laden nach Ladenschluss, der Lichtschalter im Kopf verdunkelt also den Raum und schaltet jede Lampe auf der Seite ein. Die Bildplätze sind leere Platzhalter, jeder mit dem Motiv beschriftet, für das er bemessen ist.
- cafe: Ein Café, bei dem man den Tisch deckt. Milk & Matcha, ein Erdbeer-Matcha-Café in Creme, Rosa und Grün. Bestellt wird nicht per Warenkorb, sondern per Tisch: Drei feste Plätze tragen ein Getränk, einen Kuchen und etwas Herzhaftes, und ein zweites Getränk ersetzt das erste, statt hinzuzukommen, sodass das Bild auf dem Tisch immer die Bestellung ist. Alles ist 2D, freigestellte Produktbilder auf einer fotografierten Tischplatte, und jeder Bildplatz ist ein Platzhalter, bemessen für das Foto, das ihn ersetzen wird.
- Wineshop: E-Commerce, neu gepixelt. Ein frisch gepixelter Onlineshop für einen regionalen Weinhändler. Katalog, Warenkorb und Checkout, neu gebaut für Tempo und etwas Wärme.
- archive: Ein redaktionelles Rezensionsarchiv. Marten’s Archive, ein kuratiertes Archiv stiller Lieblinge: Bücher, Filme und Alben und die Gedanken, die sie hinterlassen. Ein WordPress-Projekt in Pergament und Tinte, hier als lebendige Landingpage nachgebaut.
- MuseumTrip: Ein Museum in drei Dimensionen. KhanhMuseum, ein dunkles, warm beleuchtetes Museum für Skulpturen und kuriose Antiquitäten. Die Sammlung ist eine lebendige three.js-Halle aus 3D-Objekten zum Drehen, mit Zeitfenster-Buchung. Nach einem vorgegebenen Design gebaut.
- workplace: Fünf Werkzeuge, ein angemeldeter Arbeitsplatz. Workplace ist das Firmenportal, in dem die übrigen Bürowerkzeuge sitzen: Sie kommen angemeldet an, auf einem Dashboard, das zeigt, was auf Sie wartet und welchem Team Sie zugeordnet sind. Chat, Planboard, Helpdesk, Workwear und Transcribe öffnen sich im Rahmen statt in eigenen Fenstern, sodass Seitenleiste, Konto und Hausstil beim Wechseln bestehen bleiben. Nach einem realen internen Portal nachgebaut, hier als eigenständiges Mock.
- chat: Eine Social-Chat-App. Chatter, ein kleiner Social-Messenger: Gruppenchats und Direktnachrichten, angeheftete Notizen, ein Dringend-Flag und ein Buzz-Ping. Aus einem Firmen-Kommunikationstool als eigenständiges Mock nachgebaut.
- studio: Ein Designstudio im Browser. Studio, ein kleiner Design-Editor: eine Galerie von Designs und eine Arbeitsfläche mit Werkzeugleiste, Markenfarben, Ebenen und Live-Eigenschaften. Aus einem Firmen-Designtool als eigenständiges Mock nachgebaut.
- planboard: Ein Task-Board für Teams. Planboard, ein Task-Board im Trello-Stil: Boards, Listen und Karten zum Verschieben, mit Labels, Fälligkeiten, Checklisten, Mitgliedern und Kommentaren. Aus einem Firmen-Tool als eigenständiges Mock nachgebaut.
- helpdesk: Ein Support-Ticketsystem. Helpdesk, ein Support-Ticketsystem: Tickets erstellen, gesendete verfolgen und eingehende für das Team verwalten, mit Status, Priorität, Zuweisung, Notizen und Konversationsverlauf. Aus einem Firmen-Tool als eigenständiges Mock nachgebaut.
- workwear: Ein Arbeitskleidung-Shop. Workwear Store, ein interner Bestell-Shop: Katalog durchsehen, Größen und Mengen wählen, Anfrage senden und per Status verfolgen. Ein Admin-Schalter wechselt in die Teamleiter-Ansicht, um Anfragen freizugeben, abzulehnen und auszugeben. Aus einem Firmen-Tool als eigenständiges Mock nachgebaut.
- digitalmenu: Eine vietnamesische Speisekarte für den Tisch. Khanh’s Restaurant ist eine vietnamesische digitale Speisekarte, die mit einem simulierten QR-Scan am Tisch beginnt. Sechzehn Gerichte und Getränke sind in vier Gänge gegliedert, die meisten fotografiert, jeweils mit vietnamesischem Namen, Portionsgröße, Schärfe und Allergenen. Gäste können ihr Tablett bearbeiten, eine Bestellung senden und sie von der Küche bis an den Tisch verfolgen.
- transcribe: Live-Transkription. Scribe, ein Live-Transkriptionstool: Sprachen und Audioquelle wählen und eine Besprechung als zeitgestempelte Segmente mit Übersetzung und laufender Zusammenfassung mitlesen. Transkript kopieren oder herunterladen. Als eigenständiges Mock nachgebaut (kein Mikrofon oder Backend).
- geometry: Geometrie, die ihre Regeln hält. Geometry, ein Offline-Board mit Konstruktionsaufgaben: eine Zeichenfläche je Aufgabe, von den Basiswinkeln im gleichschenkligen Dreieck bis zu Thales, dem Umfangswinkelsatz und dem Mittendreieck. Eine Figur mit Punkt, Strecke, Kreis und Mittelpunkt bauen und ihr dann Regeln geben (Punkt auf Kreis, gleiche Längen, gleiche Bögen, parallel, senkrecht, feste Länge oder Winkel). Wird ein Punkt gezogen, baut ein Constraint-Solver die Figur neu auf oder lehnt die Bewegung ab und nennt die Regeln, die sich widersprechen. Winkel lassen sich messen, ohne sie festzuhalten, sodass man einem Satz beim Gelten zusehen kann.
- academy: Ein Community-Forum. Wolfram Academy, eine geschlossene Community für die Schweißkunden der Wolfram Industrie: ein Chat mit Schweißexperten, ein Beitrags-Feed und ein filterbares Benachrichtigungscenter. Deutschsprachige Oberfläche, gebaut auf dem Design-System des Unternehmens (Wolfram-Grün, Source Sans Pro, klare Kanten).
Kontakt
E-Mail: [email protected], LinkedIn: Khanh Nguyen. Quoc Khanh Nguyen, khanhsdesktop, 83278 Traunstein.