Idee

Da ich aktuell meine Portfolio-Website überarbeite, hat es sich angeboten für das Projekt die neue Seite zu verwenden. Die Idee ist es dabei, einen QR-Code auf die Visitenkarte zu packen. Ein QR-Code auf Visitenkarten bietet eine einfache Möglichkeit, auf das Portfolio zu verlinken. Besonders bei Messen, Expos oder im Alltag erleichtert dies den Zugang zu digitalen Inhalten. Mit einem schnellen Scan können potenzielle Kund:innen direkt auf die Website gelangen, was die Kontaktaufnahme vereinfacht und die Interaktion fördert.

Technische Umsetzung

Die technische Umsetzung des Projekts basiert auf Nuxt.js 3 und TailwindCSS und wird mittels einer automatischen CI/CD-Pipeline über GitHub direkt auf Netlify gehostet. Die “About”-Seite der Website hebt sich besonders hervor, da sie als interaktives Dungeons & Dragons-Charactersheet gestaltet ist. Dieses digitale Charactersheet bietet Funktionen wie Würfelrollen und das Verfolgen von Lebenspunkten, was reale Spielmechaniken simuliert. TailwindCSS unterstützt derzeit die mobile Optimierung, wobei zukünftig eine Responsivität auf vier Breakpoints geplant ist, um eine flexible Darstellung auf verschiedenen Bildschirmgrößen zu gewährleisten. Der QR-Code auf der Visitenkarte verlinkt direkt auf diese interaktive Seite und erleichtert so den Zugang für mobile Nutzer:innen.

Design

Das Design der Seite ist in monotonenen Blautönen gehalten mit 3 Ebenen, welche sich durch einen immer heller werdenden Hintergrund unterscheiden. Dadurch können Elemente zusammengruppiert werden. Die Seite verwendet zwei gehostete Google Fonts. als Auflockerung wird zwischendruch spärlich eine grüne Akkzentfarbe verwendet.

Die Visitenkarte spiegelt auf der Rückseite mit den Farben und dem Logo das Design der Website wider. Die Vorderseite enthält neben den Kontaktinfos auch den QR-Code, welcher auf die About-Seite verlinkt. Ein Handy-Icon soll auch Digital Nomads erläutern, wie mit dem Code umzugehen ist. Außerdem weißt ein Call to Action darauf hin, dass der QR-Code zu weiteren Infos führt.

Hier geht es zur verlinkten Portfolio-Website
Hier geht es zum Code-Repository

The post Print2Mobile – Zur Portfolio-Seite direkt von der Visitenkarte appeared first on Mobile USTP MKL.