Hvordan jeg bygde om porteføljen min. Piksel for piksel
Jeg bygde den gamle porteføljen i 2022. Slik ble den nye til: målene, stegene, valgene og altfor mange Easter Eggs.
Publisert 5 min
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 syntes.
Så med litt hjelp av Claude Code, bygde jeg den opp fra bunnen av. Jeg begynte en søndag formiddag, og var ferdig ved leggetid. I dette innlegget skal jeg fortelle litt om hvordan det var, og valgene jeg tok.
Målene
Det første jeg gjorde var å skrive ned hva jeg ville oppnå med siden, og noen tanker om hvordan den skulle oppleves.
- 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 å henge igjen litt.
- Respektere brukeren. Rask, tilgjengelig og uten sporing.
- Lett å skrive for. Hvert innlegg og hver case er en vanlig tekstfil, på norsk og engelsk.
Stegene
Jeg jobbet i iterasjoner, med fokus på ulike elementer.
- Steg 1Grunnmur
- Steg 2Pikselspråk
- Steg 3Portrett
- Steg 4Temaer
- Steg 5Hemmeligheter
- Steg 6Finpuss
Overgangen til ny teknologi var det enkleste. Portering fra Gatsby til Next.js med TypeScript og hele greia. Språk og innhold lå der fra før. Etter det handlet hver iterasjon om masse designvalg i ulike skalaer; interaksjoner, visualiseringer, hierarkier, mønstre, animasjoner; hvordan det føltes. Og moro da. Flere digitale ting bør ha en dose moro.
Et visuelt språk av firkanter
Logoen min var fire firkanter. Den lille detaljen ble inspirasjonen for konseptet.
Mye av grensesnittet er inspirert av piksler. Hver illustrasjon er en liten sprite, tegnet som et fargelagt rutenett. På forsiden, i hver artikkel, på «Om meg»-siden. På en side trekker de frem lidenskapen min for videospill, og gaming. Samtidig viste pikslene seg å være en fin begrensning. Det er lite plass til detaljer, og detaljene som er igjen må være intensjonelle.
Prøv selv · Mal en sprite
Klikk eller dra for å male. Tastatur: piltastene flytter, mellomrom maler, delete visker ut, 1 til 4 velger tone.
Velg en tone og mal.
Portrettet
Jeg ville ha en pikselversjon av meg som faktisk lignet 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. Hold musepekeren over henne på Om meg-siden, så blunker hun tilbake.
Åpen
Halvt
Lukket
Blunk
Tema, med en dose Pride
Mørkt tema er standard, fordi galaksen er finest om natten. Lyst-tema finnes også hvis du foretrekker det. I tillegg la jeg til tre som betyr noe for meg: 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
Selv om jeg liker å lære om brukeratferd, syns jeg det er unødvendig å samle inn data man ikke trenger. Derfor var det lett å velge at jeg ikke ville ha noe analyse, sporing og tredjeparts-skript på siden min. Da trengs heller ikke noe cookie-banner.
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 noen easter-eggs rundt omkring?
Prøv en klassisk juksekode. Gi logoen min litt oppmerksomhet. Gi sløyfa/hjertet på forsiden litt hjerte-lunge-redning. Besøk sider som ikke finnes, eller ta en tur med raketten på bunnen av siden. Finner du alle hemmelighetene må du dele det med meg på LinkedIn!
- ????Løkka på forsiden har en hemmelighet. Hold musa over den, og klikk. Se etter
- ????En gammel juksekode virker overalt på siden. Opp, opp …
- ????Temamenyen oppe i hjørnet har flere farger enn du tror. Prøv alle.
- ????Noen sider finnes ikke. Finn en av dem.
- ????Scroll helt til bunnen av en side, og ta snarveien opp igjen.
- ????Staffeliet i innlegget om hvordan denne siden ble bygget om, vil ha mer maling. Se etter
0 av 45 funnet · Prestasjoner
Du kan også klikke på den store illustrasjonen øverst i hver case og hvert innlegg. Staffeliet i denne artikkelen er intet unntak (gå og prøv).
En dose optimalisering
Piksler er billige, men kode er ikke alltid det. Til slutt tok jeg en runde for å optimalisere sånn at hver side ikke bare hadde det visuelle uttrykket jeg ønsket, men også hastigheten.
| 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.
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 stil: 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
Hva 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. Når siden både er personlig, og til en viss grad, sårbar, er det lett å overanalysere og ikke tørre å putte den ut sånn at folk kan se den.
Det er også fantastisk å endelig føle at jeg har et verktøy for å skape mer moro i designet jeg lager. Tidligere har jeg vært begrenset av kodekunnskaper og blyanten; nå er begrensningen token-linja som fordufter og kreativiteten min. Det fører med seg et nytt paradigme for måten jeg utøver design i digitale flater; et behov for å sette gode begrensninger i en ny verden der «alt» er mulig.
Da trenger man det som hjelper i alle produktteam og prosjekter. Tydelige mål. Små steg du kan teste. Skrive ned valgene. Og muligheten til å bare prøve, teste og lære ting fort. Å strategisk tørre, og en dose god smak.
Takk for at du tok deg tid til å lese. Nå kan du klikke på staffeliet (eller raketten i bunnen av siden).