(05 / 05)
Diese Seite.
Vorher. Nachher. Viele Tabs.
Der schwierigste Kunde
bin ich selbst.

(01) Überblick
Alte Seite. Neue Tabs.
Die alte Seite lief auf WordPress: dunkles Grün, runde Ecken und die Überschrift „Digital Designer & WordPress Developer“. Solide, aber sie hätte auch jemand anderem gehören können.
Also einmal alles neu, mit einer Idee statt vieler Effekte: die offenen Tabs in meinem Kopf. Dazu große Typo, eckige Pixel, ein Grün und ein paar Memes.
MEIN PART Konzept, Design, Texte und Umsetzung, mit Claude als Sparringspartner beim Code.
(02) Marke
Runde Ecken raus. Pixel rein.
Vorher: dunkles Grün, ein blasses Gelbgrün, runde Karten und eine Schrift, die man aus hundert Templates kennt. Nachher: ein System, das nach mir aussieht.
Phudu für alles, was laut sein darf, DM Sans für alles, was man lesen soll. Ein kräftiges Grün als einzige Akzentfarbe, Beige statt Schwarz als Grund. Dazu eckige Pixel statt Rundungen und Fenster mit Tab-Leiste als roter Faden durch jede Seite.
(03) Website
Eine Projektseite. Zweimal gebaut.
Früher war jedes Projekt ein dunkler Kasten mit „Kunde:“, „Details:“ und einer Liste. Alles drin, aber nichts, was hängen bleibt.
Heute bekommt jedes Projekt eine eigene Bühne: großer Name, eine Aussage in Grün, Bilder in Fenstern, ein Vorher-Nachher-Schieber, eine Leiste zum Springen und am Ende der nächste Tab, der sich beim Weiterscrollen von selbst öffnet.
(04) Entstehung
Erst Moodboard. Dann Code. Dann nochmal.
Zieh die Linie durch das Bild.
Jede Seite lief gleich ab: Referenzen bei Maxi Best Of und Osmo sammeln, Moodboard und Entwurf in Pen, dann einbauen. Und danach so lange nachschleifen, bis aus „fast“ ein „genau so“ wurde.
Gebaut mit Astro und GSAP. Jede Animation muss etwas erklären, sonst fliegt sie raus.


(05) Ergebnis
Auch in der Hosentasche.
Die meisten schauen ein Portfolio zuerst am Handy an. Deshalb ist jede Seite auch mobil gestaltet und nicht nur kleiner gerechnet: eigene Größen, eigene Abstände, Wischen statt Hover.
Dazu alles, was man nicht sieht: statisch mit Astro gebaut, ohne Tracker und fremde Schriften, mit der Tastatur bedienbar, für Screenreader beschriftet, auf Deutsch und Englisch.
(06) Fazit
DER NÄCHSTE TAB.
(01 / 05)
NÜA.
Eine Marke, die es nicht gibt. Ein Projekt, das ziemlich echt wirkt.
ODER EINFACH WEITERSCROLLEN

Tom Jacob © 2026











