Portfolio: Fra design til kode med AI

En god portfolio er vanskeligere enn den virker. PDF-formatet blir fort tungt å navigere i. Plattformløsninger som Squarespace er enkle å bruke, men begrenser designfriheten. Adobe Portfolio falt bort da jeg byttet abonnement, og i WordPress møtte jeg betalingsmurer for selv enkle endringer.

Jeg hadde behov for en løsning jeg selv eier og kontrollerer, både visuelt og teknisk. I stedet for å lete etter riktig verktøy, bestemte jeg meg for å lære meg å bruke AI til å kode nettsiden selv. Ved hjelp av Claude Code kunne jeg jobbe som en slags hybrid mellom designer og utvikler: stille spørsmål, få forslag, teste, feile og iterere i mitt eget tempo.

Jeg hadde allerede utviklet en visuell profil som føltes riktig for meg, personlig, men samtidig nøytral nok til å la prosjektene stå i fokus.

Derfra begynte jeg med struktur. Jeg planla hvordan prosjektene skulle presenteres, skrev tekster, og brukte dette som grunnlag for å designe moduler.

Siden jeg ønsket å bruke Sanity som CMS, designet jeg prosjektsidene med en tydelig struktur: en header med tittel, tag og bilde, etterfulgt av en ingress med nøkkelinformasjon. Resten av siden ble bygget som en fleksibel sidebygger.

Jeg utviklet et modulbibliotek med to hovedkategorier:

• Tekstmoduler (med variasjoner i størrelse og hierarki)
• Bildemoduler (ulike formater og størrelser)

Alle modulene ble bygget som komponenter i Figma med Auto Layout, basert på de samme prinsippene som brukes i kode.

Til slutt designet jeg også moduler for prosjekt-preview, samt header og footer. Med dette på plass var det enkelt å skalere systemet til resten av sidene – som “Om meg”, forside og kontakt.

Da prototypen var ferdig, begynte jeg å kode nettsiden ved hjelp av Claude Code.

Jeg startet med å gi tydelige prompts tilpasset mitt nivå, og fikk hjelp til å sette opp en steg-for-steg prosess for hele prosjektet. Dette inkluderte oppsett av Sanity som headless CMS, deploy via Vercel, og versjonskontroll med GitHub.

Videre eksperimenterte jeg med hvordan Claude Code kunne oversette design til kode. Jeg satte opp en MCP-kobling fra Figma, som jeg brukte direkte i Cursor. Dette ga Claude Code mer detaljert informasjon om hver komponent, og gjorde det enklere å generere presis kode basert på designet.

For hver modul jobbet jeg slik:

1. Bygget innholdsstrukturen i Sanity studio med tilpassede felter
2. Sendte inn MCP-koblingen fra modulen i Figma
3. Testet med ekte innhold
4. Justerte til designet oppførte seg riktig

Da strukturen var på plass, gjenstod innholdet. All tekst var allerede skrevet i prototypen, men å legge det inn manuelt i CMS var tidkrevende.

Jeg eksperimenterte derfor videre med Claude code, og fikk hjelp til å lage et script som kunne hente tekst og bilder fra Figma og importere det til Sanity.

Dette fungerte etter noen runder med prøving og feiling, særlig med bildeplassering i riktige moduler.

Kontaktsiden var opprinnelig tenkt som enkel informasjon, men etter hvert ønsket jeg å utfordre meg selv enda mer med å bygge et kontaktskjema.

Skjemaet er koblet til en API-rute i Next.js som validerer input og sender e-post via Resend. Når noen sender en melding, mottar jeg den direkte i innboksen min, med avsenderens e-post klar til svar.

Resultatet ser du her! En portfolio som er fullt ut min egen, både i uttrykk og i hvordan den er bygget. Jeg har fått full kontroll over designet, samtidig som jeg kan oppdatere og strukturere innholdet på en fleksibel måte.

Gjennom prosessen har jeg fått en mye bedre forståelse for hvordan design oversettes til kode, og hvordan et godt designsystem gjør det enklere å bygge konsistente løsninger. Jeg har også lært hvordan jeg kan bruke Claude Code som et aktivt verktøy i arbeidsprosessen, ikke bare som støtte, men som en samarbeidspartner.

For meg er ikke resultatet bare nettsiden i seg selv, men også kompetansen jeg har opparbeidet meg underveis. Jeg står igjen med en arbeidsmåte som gjør meg mer selvstendig som designer, og bedre rustet til å jobbe i skjæringspunktet mellom design og utvikling.