Zurück zum Portfolio
Die Startseite: die Zeile „Multidisciplinary creative“, der Name „Bill Kirtsos“ in großen, schmalen Versalien und der Satz „I make things people use, watch, hear, and play.“, rechts ein Slider mit „Code“ und „Websites, web apps, and games.“ über sechs Punkten, darunter ein breites, abgedunkeltes Foto von Bill Kirtsos mit Brille und Schiebermütze, das Kinn auf die Hand gestützt, hinter ihm Schlagzeug und Gitarren, dazu ein terrakottafarbener Button „See my work“, ein umrandeter Button „Get in touch“ und der Hinweis „Open to work and relocation“.
bill.savage.design in neuem Tab öffnen

Persönliches Portfolio — Erkundbare Projektkarte

Überblick

Ich habe mein Portfolio von Grund auf neu gebaut. Die alte Website war eine dunkle neo-brutalistische Seite, die ein Tailwind-CDN-Skript über ein JSON-Raster laufen ließ; diese ist ein statischer Astro-5-Build mit React-Islands nur dort, wo die Interaktion sie verlangt. Herzstück ist die Arbeitsseite — ein kartenartiges Board, auf dem 36 Projekte in fünf Territorien liegen, eines je Disziplin. Das Mausrad zoomt am Cursor, Ziehen schwenkt mit Schwung, zwei Finger zoomen per Pinch, und die Filter-Chips fliegen die Ansicht zu einer Kategorie und dimmen den Rest. Beim Hineinzoomen werden aus Pins Karten. Jeder Knoten ist ein echter Link, sodass jedes Projekt auch als eigene statische Seite gebaut wird, die bereits mit geöffnetem Dialog erscheint. Die Startseite ist eine Folge scrollgesteuerter Abschnitte: ein gepinntes Hero mit einem Sechs-Slide-Karussell, ein Über-mich-Abschnitt, dessen Absätze sich Buchstabe für Buchstabe füllen, während sich ein Bildstapel aufbaut, ein Fisheye-Reel mit Kurzfakten, ein Skills-Akkordeon und ein Projekt-Reel, dessen Spur beim Herunterscrollen seitwärts läuft — auf Telefonen ebenso wie auf Desktops. Alle Inhalte liegen in einer einzigen JSON-Datei. Es gibt kein CMS, keine Datenbank und keine Server-Laufzeit.

Herausforderungen

Eine erkundbare Karte wird schnell desorientierend und schnell unzugänglich. Zugleich musste es ein statischer Build ohne Server bleiben und 36 Projekten dennoch echte, teilbare URLs geben — und die Bewegung musste auf dem Telefon standhalten.

Lösungen

Jeder Kartenknoten ist ein Anker auf eine zur Build-Zeit erzeugte Seite, sodass das Board navigierbar, teilbar und crawlbar bleibt — auch ohne JavaScript. Der Detailgrad ersetzt beim Zoomen Pins durch Karten, und die Filter-Chips fliegen die Ansicht, statt sie neu zu laden. Abschnitte werden mit GSAP ScrollTrigger gepinnt und über die Scrollposition statt über einen Ticker gesteuert, was sie auf Touch-Geräten ehrlich hält. Die gesamte Seite wird als statisches HTML aus Astro ausgeliefert, React läuft nur in der einen Komponente, die es wirklich braucht.

Galerie

  • Die Startseite: die Zeile „Multidisciplinary creative“, der Name „Bill Kirtsos“ in großen, schmalen Versalien und der Satz „I make things people use, watch, hear, and play.“, rechts ein Slider mit „Code“ und „Websites, web apps, and games.“ über sechs Punkten, darunter ein breites, abgedunkeltes Foto von Bill Kirtsos mit Brille und Schiebermütze, das Kinn auf die Hand gestützt, hinter ihm Schlagzeug und Gitarren, dazu ein terrakottafarbener Button „See my work“, ein umrandeter Button „Get in touch“ und der Hinweis „Open to work and relocation“.

    Hero — Ein Name, ein Versprechen und sechs Disziplinen im Wechsel

  • Der Über-mich-Abschnitt mitten im Scrollen: die Zeile „The short story“, die Überschrift „About Me“ neben einem Fortschrittsring mit 3/4 und ein Absatz, der mit „Because I learned every craft by hand“ beginnt – die ersten Zeilen in dunkler Schrift, der Rest noch blass –, daneben ein Stapel aus drei abgerundeten Fotos; das vorderste zeigt Bill Kirtsos in rostfarbenem Hemd und Schiebermütze am Laptop in einem warm beleuchteten Studio.

    Über mich — Scrollytelling mit Füllung Buchstabe für Buchstabe

  • Ein dunkles Foto über die volle Breite: Bill Kirtsos mit Brille und Schiebermütze spielt E-Bass, abgedunkelt hinter weißem Text – das kleine terrakottafarbene Label „Quick fact 2“ über „Running savage.design since 2019“ in großer Schrift, oben rechts ein Fortschrittsring mit 2/4.

    Quick Facts — Ein Fakt nach dem anderen, vergrößert im Vorbeiziehen

  • Das Skills-Akkordeon: „Design“ geschlossen mit Pluszeichen, „Web & Development“ geöffnet mit Minuszeichen, darin ein Absatz, der mit „I build websites, web apps, and games by directing AI tools, mainly Claude Code and DeepSeek“ beginnt, und eine Reihe terrakottafarbener Tags von Next.js & React bis SEO; darunter „Audio & Video“, unter dem Mauszeiger sandfarben hinterlegt, mit einem schieferblauen Tooltip, der die Werkzeuge auflistet, von Musikkomposition und Premiere Pro bis Suno, ElevenLabs und Kling.ai, und ganz unten „Marketing“ geschlossen.

    Skills — Eine Disziplin öffnen, über die nächste fahren und ihre Werkzeuge sehen

  • Das Reel der Lieblingsprojekte mitten im Scrollen: die Zeile „Selected work“ und die Überschrift „Favourite Projects“ über einer Kartenreihe, die an beiden Rändern angeschnitten ist: das Ende einer Karte links, greeksimmers.com mit einer Flugsimulator-Website und dem Satz „Ready to Take the Controls?“, SANCO Open Bin 5LT mit einem bronzenen, zylindrischen Behälter und den Worten „Luxury Bathroom Bin“ und der Anfang von Magic Admin, jeweils mit Untertitel und kurzer Beschreibung, unten rechts ein terrakottafarbener Button „See my work“.

    Lieblingsprojekte — Eine Spur, die seitwärts läuft

  • Der Kontaktabschnitt auf Anthrazit: die Zeile „Start a conversation“ und die Schlagzeile „Let's make something useful.“ in riesigen weißen, schmalen Versalien über vier Zeilen, daneben Zeilen für E-Mail, Telefon, LinkedIn und YouTube, jeweils mit rundem Symbol, Adresse oder Namen und einem Pfeil; die E-Mail-Zeile ist unter dem Mauszeiger cremefarben hinterlegt.

    Kontakt — Das abschließende Register

  • Die Projektkarte, hineingezoomt ins Territorium Products & Platforms: drei Projektkarten auf einem hellen Punktraster um den verblassten Territoriumstitel – What Do You Do, ein KI-erzähltes RPG, mit dunklem Spielbildschirm; Paper86, eine Plattform für den Restaurantbetrieb, mit einem Menü-Editor, terrakottafarben umrandet und mit vergrößertem Bild unter dem Mauszeiger; und Magic Admin, Website-Verwaltung per Gespräch, mit einem Chat neben einer Website-Vorschau. Links die Zoom-Buttons, unten die Filterleiste mit ausgewähltem „Products & Platforms“.

    Projektkarte — Hineinzoomen, und aus Pins werden Karten

  • Ein Projektdialog über der abgedunkelten Karte: ein großer Screenshot der Startseite von prestigecmn.gr, ein goldenes „P“-Monogramm auf Schwarz neben der Schlagzeile „We elevate your business Prestige“, darunter ein Tag „Web development“, der Titel „prestigecmn.gr“, der Untertitel „Bilingual marketing agency website“ und die Rolle „Designer & Developer“ neben dem Zeitraum „Launched September 2026, ongoing“, oben rechts ein runder Schließen-Button.

    Projektdialog — Öffnet an Ort und Stelle, mit eigener URL

  • Die Startseite auf einem Tablet: die Zeile „Multidisciplinary creative“, der Name „Bill Kirtsos“ und der Satz „I make things people use, watch, hear, and play.“ links untereinander über einem abgedunkelten, abgerundeten Foto von Bill Kirtsos mit Brille und Schiebermütze, das Kinn auf die Hand gestützt; an dessen unterem Rand die Buttons „See my work“ und „Get in touch“ und der Hinweis „Open to work and relocation“.

    Hero — Derselbe Auftakt, gestapelt fürs Tablet

  • Der Über-mich-Abschnitt auf einem Tablet, einspaltig: die letzten beiden Absätze der Geschichte in großer, leichter Schrift, das Zitat „I learned each craft by hand, so I can guide AI tools with judgment and taste.“ fett mit einer terrakottafarbenen Linie links davon, darunter eine schwarze Pinselstrich-Kante, die sich auf ein dunkles Foto von Bill Kirtsos mit Brille und Schiebermütze öffnet – dort beginnt der nächste Abschnitt.

    Über mich — Auf dem Tablet fließt die Geschichte, dann folgt das Zitat

  • Das Reel der Lieblingsprojekte auf einem Tablet: die Zeile „Selected work“ und die Überschrift „Favourite Projects“ über drei hohen Karten – greeksimmers.com vom linken Rand angeschnitten, SANCO Open Bin 5LT mit seinem bronzenen Behälter vollständig, Magic Admin vom rechten Rand angeschnitten –, jeweils mit Untertitel und kurzer Beschreibung, unten rechts ein Button „See my work“.

    Lieblingsprojekte — Das seitliche Reel läuft auch auf dem Tablet

  • Die Projektkarte auf einem Tablet, zum Territorium Graphic Design geflogen: eine gestrichelte Ellipse um den verblassten Territoriumstitel mit drei beschrifteten Pins – Four Elements Productions, Prestige Communications und Bora's New Start –, unten rechts das geöffnete Filterpanel mit allen Kategorien, „Graphic Design“ terrakottafarben ausgewählt, über einem runden Schließen-Button; links die Zoom-Buttons, unten der Hinweis „Scroll to zoom · Drag to move“.

    Gefilterte Ansicht — Ein Chip fliegt das Board zu einer Kategorie

  • Ein Projektdialog auf einem Tablet: ein Screenshot der Website von FitRoom Experience, ein blau beleuchteter Trainingsraum hinter der Schlagzeile „Training becomes experience“, darunter ein Tag „Web development“, der Titel „FitRoom Experience“, der Untertitel „Gym site & membership platform“, die Rolle „Designer & Developer“, der Zeitraum „5 weeks to launch, ongoing“ und die ersten Absätze der Fallstudie, oben rechts ein runder Schließen-Button.

    Projektdialog — Die ganze Fallstudie, ohne die Karte zu verlassen

  • Das geöffnete Menü auf einem Smartphone: ein bildschirmfüllendes anthrazitfarbenes Blatt mit sechs nummerierten Links in großen, schmalen Versalien – Home, About, Quick Facts, Skills, Portfolio und Contact –, ein umrandeter Button „Download CV“ und vier runde Buttons für E-Mail, Telefon, LinkedIn und YouTube; oben rechts der terrakottafarbene Schließen-Button, in der unteren Ecke ein warmer Schimmer.

    Menü — Ein Vollbild-Blatt, das den Lebenslauf griffbereit hält

  • Quick Facts auf einem Smartphone: eine schwarze Pinselstrich-Kante oben, die sich auf ein dunkles Foto von Bill Kirtsos mit Brille und Schiebermütze öffnet, darauf mittig das kleine terrakottafarbene Label „Quick fact 1“ und „Based in Kassel, Germany“ in Weiß.

    Quick Facts — Ein Pinselstrich gibt das Foto frei

  • Das Reel der Lieblingsprojekte auf einem Smartphone: die Überschrift „Favourite Projects“ über zwei Zeilen, die Karte von greeksimmers.com mit einer Flugsimulator-Website und dem Satz „Ready to Take the Controls?“, dem Untertitel „Full-stack web application“ und einer kurzen Beschreibung, links der Rand der vorigen Karte, darunter ein Button „See my work“.

    Lieblingsprojekte — Auch auf dem Smartphone per Scrollen gesteuert

  • Die Projektkarte auf einem Smartphone, so weit gezoomt, dass aus einem Pin eine Karte geworden ist: prestigecmn.gr mit einem Screenshot eines goldenen „P“-Monogramms auf Schwarz und der Schlagzeile „We elevate your business Prestige“, einem Tag „Web development“, dem Titel „prestigecmn.gr – Bilingual marketing agency website“ und einer kurzen Beschreibung, allein auf einem hellen Punktraster; unten links die Zoom-Buttons, unten rechts ein runder, terrakottafarbener Filter-Button.

    Projektkarte — Mit zwei Fingern zoomen, und jeder Pin wird zur Karte

  • Ein Projektdialog auf einem Smartphone: ein Screenshot des Shops kaloni.gr mit Kollektionskacheln und einer Reihe neu eingetroffener Schuhe, darunter ein Tag „Web development“, der Titel „kaloni.gr“, der Untertitel „Bilingual Laravel footwear e-commerce“, die Rolle „Full-Stack Developer & Designer“, der Zeitraum „8 weeks“ und der Anfang der Fallstudie, oben rechts ein runder Schließen-Button.

    Projektdialog — Eine vollständige Fallstudie, die aufs Smartphone passt

  • Der Kontaktabschnitt auf einem Smartphone: die Zeile „Start a conversation“, die Schlagzeile „Let's make something useful.“ in riesigen weißen, schmalen Versalien über drei Zeilen und Zeilen für E-Mail, Telefon und LinkedIn, jeweils mit rundem Symbol, Bezeichnung, Adresse oder Namen und Pfeil; am unteren Rand beginnt die YouTube-Zeile.

    Kontakt — Jeder Kanal nur einen Tipp entfernt