Porteføljeside

Oversikt

Porteføljesiden er bygget for å støtte jobbsøking og gjøre prosjektene mine enklere å forstå. Målet er ikke bare å vise en pen forside, men å forklare arbeid, prosess, teknologi, begrensninger og læring på en ryddig måte.

Nettsiden er strukturert som en case-study-portfolio i stedet for en enkel CV-side. Den samler cybersikkerhetsarbeid, utviklingsprosjekter og teknisk refleksjon på ett sted, med egne prosjektsider for mer kontekst.

Problem og hvorfor det betyr noe

En vanlig CV viser ofte hva man har gjort, men ikke hvordan man tenker teknisk. Cybersikkerhetsprosjekter kan også være vanskelige å vurdere hvis de bare listes som titler uten rolle, scope, metode og resultat.

Porteføljen trengte derfor å vise mer enn prosjektoverskrifter. Den måtte forklare prosess, verktøy, avgrensninger, sikkerhetsfokus og hva jeg lærte, samtidig som designet skulle føles moderne uten å bli distraherende eller fake hacker-neon.

Min rolle

Jeg planla innholdsstrukturen, valgte hvilke prosjekter som skulle løftes frem, formet den visuelle retningen og kontrollerte hvordan prosjektene ble presentert offentlig.

Implementasjonen ble utviklet iterativt med Codex/AI som praktisk støtte. Min rolle var å styre retning, avgrense oppgaver, gjennomgå endringer, rette innhold, teste resultatet og sikre at teksten var ærlig, arbeidsgivervennlig og trygg for en offentlig cybersikkerhetsportfolio.

Implementation

Teknisk implementasjon

Nettsiden er bygget med Next.js App Router, TypeScript-komponenter og Tailwind CSS. Strukturen skiller mellom ruter, sideklienter, prosjektkomponenter, seksjoner, delt data og providers for global oppførsel.

Prosjektdata ligger sentralisert, slik at homepage-teasere, prosjektoversikt, 3D-galleri og project cards kan bruke samme kilde. Case-study-sidene gjenbruker samme layout, men har egne innholdswrappere for språk og prosjektspesifikk tekst.

• App Router-ruter for homepage, prosjektoversikt og individuelle case studies.
• Gjenbrukbar CaseStudyLayout for konsistent struktur, metadata, seksjoner og visuelle plassholdere.
• Tailwind-basert mørk visuell stil med glasskort, subtile borders og rolig teknisk atmosfære.
• Shared project data som driver project grid, gallery cards og homepage teaser.
• NO / EN språkvalg med delt LanguageProvider og localStorage-basert persistens.
• Desktop project gallery kombinert med lesbar grid/list som fallback og tilgjengelig oversikt.

Designprosess

Designet startet med en minimal, filmatisk hero som skulle gi en tydelig førsteopplevelse uten å fylle den med for mye tekst. Mer innholdstunge deler ble plassert lenger ned på siden og på egne prosjektsider.

21st.dev-inspirerte visuelle komponenter ble brukt som referansepunkt, men demoidentiteter og generisk innhold ble fjernet. Komponentene ble tilpasset Thomas sin profil, prosjekter og et mørkt, premium uttrykk for en cybersikkerhets- og utviklerportfolio.

• Heroen holder fokus på navn, portrett, kort tagline og minimal navigasjon.
• Homepage introduserer profil og utvalgte prosjekter uten å bli en full CV-side.
• /projects fungerer som dedikert prosjektbrowser med både visuell gallery-opplevelse og lesbar liste.
• Case studies er skrevet for å forklare prosjekt, rolle, metode, vurderinger og læring.
• Designet ble raffinert gjennom små kontrollerte iterasjoner i stedet for store redesigns.

Prosjektarkitektur

Arkitekturen er bevisst enkel og statisk først. Den skal være lett å oppdatere med nye prosjekter, case studies, bilder og kontaktinformasjon uten å introdusere unødvendig backend-kompleksitet.

Strukturen skiller mellom innhold, presentasjon og delt tilstand. Dette gjør det enklere å holde prosjektsidene konsistente, samtidig som hver case study kan ha sitt eget fokus.

• Homepage: hero, profil/prosjektteaser og fremtidige seksjoner for ferdigheter og kontakt.
• /projects: visuell 3D gallery for desktop og normal prosjektgrid for lesbarhet.
• /projects/[project]: individuelle case studies med gjenbrukbar layout.
• data/projects.ts: delt prosjektdata for titler, kategorier, tags, beskrivelser og hrefs.
• components/projects: case-study layout, gallery wrapper og prosjektspesifikke klientkomponenter.
• components/providers: delt språkprovider som holder NO / EN-valg på tvers av ruter.

Språk og innholdssystem

Porteføljen støtter norsk og engelsk, med norsk som standard. Språkvalget lagres lokalt og følger brukeren mellom homepage, prosjektoversikt og case-study-sider.

Språktoggle er delt i stedet for at hver side har sin egen isolerte state. Det gjør siden mer brukbar både for norske arbeidsgivere og internasjonale lesere uten å legge inn et tungt i18n-rammeverk.

Utfordringer

Den største utfordringen var å balansere visuell effekt med lesbarhet. Porteføljen skulle føles moderne og minneverdig, men ikke bli så designstyrt at prosjektene og forklaringene forsvant.

• Unngå generisk template- og demo-innhold.
• Gjøre den interaktive prosjektgallerien interessant uten å skade brukervennlighet.
• Holde prosjektbeskrivelser ærlige, konkrete og trygge for offentlig visning.
• Unngå overclaiming av cybersikkerhetserfaring.
• Holde språkstate konsistent på tvers av ruter.
• Gjøre flere case-study-sider strukturerte uten at de føles identiske.

Hva jeg lærte

Prosjektet lærte meg å tenke på en portfolio som et produkt, ikke bare som en nettside. Innhold, struktur, visuell retning, navigasjon og ærlig prosjektkommunikasjon må fungere sammen.

• Hvordan strukturere en portfolio rundt case studies og felles prosjektdata.
• Hvordan bruke gjenbrukbare komponenter uten at alle sider føles like.
• Hvordan tilpasse visuelle referanser uten å kopiere demoidentitet eller demo-innhold.
• Hvordan bygge enkel bilingual UI-state uten et tungt i18n-oppsett.
• Hvordan presentere cybersikkerhetsprosjekter offentlig uten sensitive detaljer eller overclaiming.
• Hvordan bruke Codex/AI som kontrollert implementeringsassistent og fortsatt eie retning, innhold og kvalitet.

Resultat

Porteføljesiden demonstrerer frontend-utvikling, komponentbasert struktur, visuell vurderingsevne, innholdsarkitektur og evnen til å presentere cybersikkerhetsarbeid på en tydelig, arbeidsgivervennlig måte.

Prosjektet er fortsatt levende og kan utvides med flere case studies, ferdighetsseksjoner, kontaktinformasjon, CV-lenke og ekte screenshots etter hvert som innholdet blir klart.