Personlig Portfolio — Udforskeligt Projektkort
Overblik
Jeg byggede min portfolio helt om fra bunden. Det gamle site var en mørk neo-brutalistisk side, der kørte et Tailwind-CDN-script over et JSON-grid; dette er et statisk Astro 5-build med React-islands kun dér, hvor interaktionen kræver dem. Omdrejningspunktet er arbejdssiden — et kortlignende board, hvor 36 projekter ligger i fem territorier, ét pr. disciplin. Hjulet zoomer ved markøren, træk panorerer med momentum, to fingre kniber, og filterchipsene flyver visningen hen til en kategori og dæmper resten. Zoom ind, og nålene bliver til kort. Hver node er et rigtigt link, så hvert projekt bygges også som sin egen statiske side, der åbner med dialogen allerede på skærmen. Forsiden er en række scroll-drevne sektioner: en fastgjort hero med et karrusel på seks slides, en om-sektion hvis afsnit fyldes bogstav for bogstav, mens en billedstak vokser, et fisheye-bånd med hurtige fakta, en harmonika af kompetencer, og et projektbånd, hvis spor scrubber sidelæns, når man scroller ned — på telefoner såvel som på computere. Alt indhold ligger i én JSON-fil. Der er intet CMS, ingen database og ingen server-runtime.
Udfordringer
Et udforskeligt kort bliver hurtigt desorienterende og hurtigt utilgængeligt. Det skulle samtidig forblive et statisk build — uden server — og alligevel give 36 projekter rigtige, delbare URL'er, og bevægelsen skulle holde på en telefon.
Løsninger
Hver knude på kortet er et anker til en side, der genereres ved build-tid, så boardet forbliver navigerbart, delbart og crawlbart — også med JavaScript slået fra. Detaljeniveauet skifter nåle ud med kort, efterhånden som man zoomer, og filterchipsene flyver visningen i stedet for at genindlæse den. Sektioner fastgøres med GSAP ScrollTrigger og styres af scrollpositionen frem for en ticker, hvilket holder dem ærlige på touch-enheder. Hele sitet leveres som statisk HTML fra Astro, med React monteret på den ene komponent, der faktisk har brug for det.
Galleri
Hero — Et navn, et løfte og seks discipliner på skift
Om — Scrollytelling, der fyldes bogstav for bogstav
Quick Facts — Én fakta ad gangen, forstørret i forbifarten
Skills — Åbn én disciplin, hold musen over en anden og se dens værktøjer
Yndlingsprojekter — Et spor, der glider sidelæns
Kontakt — Den afsluttende oversigt
Projektkort — Zoom ind, og nålene bliver til kort
Projektdialog — Åbnes på stedet, med sin egen URL
Hero — Samme åbning, stablet til tablet
Om — På tablet flyder historien, og så lander citatet
Yndlingsprojekter — Det sidelæns bånd kører også på tablet
Filtreret visning — En chip flyver kortet hen til én kategori
Projektdialog — Hele casen uden at forlade kortet
Menu — Et ark i fuld skærm, der holder CV'et inden for rækkevidde
Quick Facts — Et penselstrøg åbner for fotoet
Yndlingsprojekter — Styret af scroll, også på mobilen
Projektkort — Knib for at zoome, og hver nål bliver til et kort
Projektdialog — En komplet case, der passer til en telefon
Kontakt — Hver kanal ét tryk væk
