Slik bygde jeg om porteføljen, én piksel om gangen

Jeg bygde den gamle porteføljen min i Gatsby. Det var i 2022 og begynner å bli en stund siden. Den gjorde jobben sin, men ble stående urørt, og det synes.

Så jeg bygde den på nytt fra bunnen av. Samme innhold i bunn, alt annet nytt. Jeg bygde den sammen med Claude Code, en KI-agent som skriver kode, og det gikk fort. Men valgene tok jeg selv, og det er dem dette innlegget handler om.

Målene

Før jeg programmerte noe, skrev jeg ned hva siden skulle gjøre. Ikke funksjoner. Følelser.

• Vise hvordan jeg jobber, ikke bare hva jeg har laget. Halvparten av det jeg har gjort de siste årene er under taushetsavtale, så siden må vise hvordan jeg tenker.
• Føles som meg. Leken, litt nerdete, rolig. Et sted man har lyst til å bli et minutt.
• Respektere brukeren. Rask, tilgjengelig og uten sporing.
• Lett å skrive for. Hvert innlegg og hver case er en vanlig tekstfil, på norsk og engelsk.

Alt etterpå ble sjekket mot de fire linjene.

Stegene

Jeg jobbet i iterasjoner, med fokus på ulike elementer.

1. 1Steg 1Grunnmur
2. 2Steg 2Pikselspråk
3. 3Steg 3Portrett
4. 4Steg 4Temaer
5. 5Steg 5Hemmeligheter
6. Steg 6Finpuss

Grunnmuren var den kjedelige, men viktige delen: Next.js, begge språkene og alt innhold over i filer. Etter det handlet hver iterasjon mest om design.

Et visuelt språk av firkanter

Logoen min er fire firkanter som blir til et pikselhjerte når du holder musepekeren over den. Den lille detaljen ble inspirasjonen for det meste videre.

Hver illustrasjon er en liten sprite, tegnet som et rutenett av tegn i koden, i fire toner: omriss, skygge, grunnfarge og aksent. Én ting per illustrasjon, ingen svart eller hvit, og god luft rundt. Løkken på forsiden er også piksler. Klikk på den, så blir den et hjerte som slår.

Piksler er en fin begrensning. Det er lite plass til detaljer, så hvert valg må telle.

Portrettet

Jeg ville ha en pikselversjon av meg som faktisk ligner på meg. Det tok tid.

Det endelige portrettet er laget med Retro Diffusion, med et bilde av meg som utgangspunkt. Før det prøvde jeg morfede bilder, håndtegnede ansikter, anime-rødme, alt i lilla og filtre på bilder. Ingen av dem så ut som noen du ville tatt en kaffe med.

Så måtte hun kunne blunke. Øyelokkene er tegnet piksel for piksel i hudtonene mine. Et flatt, mørkt lokk så ut som solbriller, og et flatt, lyst så påklistret ut. Hold musepekeren over henne på Om meg-siden, så blunker hun tilbake.

1. Åpen
2. Halvt
3. Lukket
4. Blunk

Temaer, med litt stolthet

Mørkt tema er standard, fordi galaksen er finest om natten. Lyst finnes hvis du vil. I tillegg er det tre morsomme: Pride, Trans og Norge.

Prøv i vei! Fargene synes best i illustrasjonene og nyansene på siden, men også hjertet og byen nederst skifter farge. Én lærdom: det norske korset er altfor rotete i så liten størrelse, så små ting får flaggets farger i stedet for mønsteret.

Ingen sporing, ikke noe cookie-banner

Dette var det letteste valget, og det jeg er mest fornøyd med. Ingen analyse, ingen sporing og ingen skript fra tredjeparter. Da trengs heller ikke noe cookie-banner.

Jeg vurderte et verktøy som måler hastigheten for ekte besøkende, men sa nei. Jeg vil heller ikke vite enn å følge med på folk.

Nettleseren din husker bare det du selv velger eller bruker: språk, tema, prestasjoner og hvor du var på siden. Det står også nederst på siden.

Hemmeligheter og prestasjoner

En portefølje kan fort oppleves som kjedelig og seriøs. Så hvorfor ikke gjøre den litt mer morsom? Jo, tenkte jeg. Hva om vi gjemmer en del ting rundt omkring?

Den klassiske juksekoden virker. Logoen elsker oppmerksomhet. Et hjerte trenger hjerte-lunge-redning. Sider som ikke finnes, har en UFO. Det er over tretti prestasjoner, og finner du alle, får du en krone.

Du kan også klikke på den store illustrasjonen øverst i hver case og hvert innlegg. Staffeliet i denne artikkelen også (gå og prøv).

En by i bunnen

Nederst på hver side ligger en liten pikselby om natten som bygger en rakett sammen. Trykk på «Til toppen», så letter raketten og tar deg med opp.

Byen var vanskeligst å få riktig størrelse på. På mobil må den være liten, og på store skjermer kan den ikke bli til kjempeklosser. Nå er pikslene like skarpe helt opp til 8K-skjermer, og byen fortsetter bare videre mot venstre.

Gjøre den lett

Piksler er billige, men kode er ikke alltid det. Mot slutten målte jeg hvor mye hver side veier, og fant noen tunge ting som lå rett foran meg.

Forsiden (HTML)−56 %

677 kB

298 kB

Forsiden, komprimert−70 %

153 kB

46 kB

Tegningen av byen i bunnen−93 %

1 350 kB

93 kB

Sidevekt etter oppryddingen

	Før	Etter
Forsiden (HTML)	677 kB	298 kB
Forsiden, komprimert	153 kB	46 kB
Tegningen av byen i bunnen	1 350 kB	93 kB

Målt på min egen maskin. Hver rad har sin egen skala.

Grepene var lite glamorøse: logoer som egne små filer, stilark nettleseren kan mellomlagre, og en smartere måte å tegne byen på, med større former og nøyaktig de samme pikslene. Ytelsespoengene i Lighthouse gikk fra 83 til 88 lokalt.

Delingskort

Når noen deler en lenke, er forhåndsvisningen ofte det første folk ser. Derfor har hver side sitt eget kort i samme galakse: portrettet mitt på forsiden, en egen sprite for hver case og hvert innlegg, og UFO-en for sider som ikke finnes.

• Delingskort for forsiden
• Delingskort for dette innlegget
• Delingskort for en case
• Delingskort for en side som ikke finnes

Dette ville jeg gjort igjen

Det jeg lærte

Å bygge om sin egen portefølje er ikke lett. Det handler om å selge meg selv og skille meg ut. Samtidig skal den som besøker siden, få et innblikk i hvem jeg er og personligheten min. Da er det lett å drukne i detaljer og gå ned i flere rabbit holes.

Det som hjalp, var det samme som hjelper i alle prosjekter. Tydelige mål. Små steg du kan teste. Skrive ned valgene. Og muligheten til å bare prøve, teste og lære ting fort. Å tørre.

Nå kan du klikke på staffeliet (eller raketten i bunnen av siden).