Portfolio
Et headless portfolio bygget med Next.js og Umbraco, udviklet som et personligt projekt for at udforske moderne frontend-arkitektur og få praktisk erfaring med teknologier, som jeg gerne ville arbejde mere med.
Projektet
Dette portfolio er både en personlig hjemmeside og en legeplads, hvor jeg kan udforske nye teknologier.
Umbraco bruges som et headless CMS, mens Next.js står for frontenden. De to applikationer hostes hver for sig, idet Umbraco kører på Simply, og Next.js-frontend’en er hostet på Vercel.
Indholdet er opbygget af genbrugelige komponenter, som gør det muligt at sammensætte forskellige sidetyper og layouts ud fra de samme byggesten. Det giver en fleksibel frontend og gør det nemt at oprette nye sider og cases.
Arkitektur
Frontenden er udviklet med Next.js og React og henter indhold fra Umbraco via Delivery API.
Der anvendes TypeScript i hele frontenden, hvor API-typerne genereres automatisk ud fra Umbracos OpenAPI-specifikation. Dette sikrer, at frontend-modellerne følger API’et nøje.
Custom preview
Da frontenden er helt adskilt fra CMS’et, har jeg implementeret en custom preview-visning mellem Umbraco og Next.js.
En custom URL provider i Umbraco genererer preview-URL’er til den tilsvarende Next.js-route. URL’en indeholder indholdsstien og et delt token, hvilket gør det muligt for Next.js at hente og vise udkast til indhold uden først at offentliggøre det.
Frontend
Frontenden er næsten udelukkende bygget med Tailwind CSS, mens shadcn/ui anvendes til et lille antal UI-komponenter.
Jeg ønskede at undersøge, hvor langt jeg kunne gå med en utility-first-tilgang, samtidig med at komponentstrukturen forblev enkel og genanvendelig.
Til sidens scroll-animationer implementerede jeg et lille, tilpasset Intersection Observer-værktøj i stedet for at indføre et dedikeret animationsbibliotek. Det registrerer elementer, når de bliver synlige på skærmen, og anvender den relevante animationstilstand.
