/* Sida som sel meg som tilsett, ikkje som leverandør. * * Resten av nettstaden snakkar til ein kunde som skal kjøpe noko. Denne snakkar til ein som skal * tilsetje nokon, og det er eit anna menneske som leitar etter noko anna. Difor eiga side og ikkje * ein seksjon på om-meg. * * `.dev-hero` er MEDVITE ikkje definert her. Han står i den grupperte regelen i styles.css saman med * dei seks andre heroane, fordi notatet der forklarer kva som skjer når same regel finst i sju filer. */ :root { /* Same gule som den midtarste prikken i terminal-chromen, så «det eg tok feil om» får eit eige signal utan at sida får ein farge ho ikkje hadde frå før. */ --amber: #febc2e; --amber-dim: rgba(254, 188, 46, 0.12); --amber-border: rgba(254, 188, 46, 0.35); } /* INNHALDET MÅ VERE SYNLEG SJØLV OM AVSLØRINGA ALDRI KJEM. * * RETTING. Her stod det at `onComplete` aldri fyrer under «reduser rørsle». Det er USANT, og eg * skreiv det utan å sjekke. Skippet nedst i scripts.js stemplar berre `data-static-text` inn i * `.typed-text` på `DOMContentLoaded`; det hindrar aldri at skrivemaskina blir konstruert, og ho * startar frå ein tidlegare `DOMContentLoaded`-lyttar som køyrer FØRST. Innan 100ms er den statiske * teksten overskriven, animasjonen går, og `onComplete` fyrer heilt som vanleg. * * Vakta står likevel, av to grunnar som faktisk held: * * 1. Utan JS, eller om `scripts.js` ikkje lastar, blir `.reveal` aldri sett av nokon. Då er heile * CV-en usynleg på ei side som skal lesast av folk som vurderer å tilsetje meg. `.js`-klassen * blir sett av eit inline-skript i ``, så han er PÅ sjølv når scripts.js manglar. * 2. Den dagen nokon fikser reduser-rørsle-skippet ordentleg, slik han var meint, blir premissen * i den gamle kommentaren sann. Då er denne sida den einaste som overlever det. * * Merk kva som følgjer av punkt 2: `.terminal-output`, `.about-image`, `.about-content`, * `.daw-output`, `.services-section` og `.blog-section` har INGEN slik vakt. Blir skippet fiksa, * blir dei permanent usynlege for dei brukarane. Det er ei felle som ventar, ikkje ein bug i dag. */ .js .dev-section { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; } .dev-section.reveal { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .js .dev-section { opacity: 1; transform: none; } } .dev-section { max-width: 820px; margin: 0 auto; padding: 0 var(--space-md) var(--space-xl); display: flex; flex-direction: column; gap: var(--space-xl); } /* INTRO OG DEI ANDRE TERMINALVINDAUGA * * Ingen av dei har klassen `terminal-output`, og det er med vilje: `initTerminals()` i scripts.js * plukkar opp `.terminal-window:not(.terminal-output)` og toner inn linjene når du scrollar forbi. * Då slepp sida å eige si eiga avsløringslogikk. */ .dev-intro, .dev-honest { max-width: 100%; } .dev-intro .terminal-body, .dev-honest .terminal-body { font-size: 0.9rem; line-height: 1.9; } /* SAKER */ .dev-cases-intro h2, .dev-stack h2, .dev-bg h2, .dev-cta h2 { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; margin: 0 0 var(--space-sm); } .dev-cases-intro p, .dev-bg p, .dev-cta p { color: var(--text-secondary); margin: 0 0 var(--space-xs); line-height: 1.8; } .dev-note { border-left: 2px solid var(--blue); padding-left: var(--space-sm); margin-top: var(--space-sm) !important; } .case { background: var(--glass); backdrop-filter: blur(24px) saturate(200%); -webkit-backdrop-filter: blur(24px) saturate(200%); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 16px 48px rgba(0, 0, 0, 0.25); padding: var(--space-lg); transition: var(--transition); } .case:hover { border-color: rgba(255, 255, 255, 0.25); transform: translateY(-2px); } .case-head { border-bottom: 1px solid var(--glass-border); padding-bottom: var(--space-sm); margin-bottom: var(--space-md); } .case-num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--blue); font-weight: 600; letter-spacing: 0.1em; } .case-head h3 { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; margin: var(--space-xs) 0 var(--space-xs); line-height: 1.4; } .case-stack { font-size: 0.75rem; color: var(--text-secondary); margin: 0; letter-spacing: 0.02em; } .case-body { margin: 0; } .case-body dt { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--blue); font-weight: 600; margin-bottom: var(--space-xs); } .case-body dd { margin: 0 0 var(--space-md); color: var(--text); font-size: 0.9rem; line-height: 1.8; } .case-body dd:last-child { margin-bottom: 0; } /* `nowrap` SKAR EIN FEILMELDING UT AV SKJERMEN, OG HAN KUNNE IKKJE HENTAST TILBAKE. * * Fire av dei fem snuttane på sida er identifikatorar utan mellomrom, og for dei er `nowrap` rett: * `AXEnhancedUserInterface` skal ikkje delast over to linjer. Den femte er ei heil setning, * `new row violates row-level security policy`, og `nowrap` hindrar broting på MELLOMROM òg. 42 teikn * blei éin ubrytande sekvens på rundt 320px, i eit kort som er 244px innvendig på ein 390px skjerm. * * Det verste var ikkje at han stakk ut. `html, body` har `overflow-x: clip`, så dei siste teikna blei * KLIPTE og det fanst ingen måte å scrolle til dei. Ei feilmelding som er poenget i saka, usynleg. * * `anywhere` og ikkje `nowrap`: dei fire identifikatorane får framleis stå heile så lenge det er * plass, og bryt heller enn å forsvinne når det ikkje er det. */ .case-body code { font-family: var(--font-mono); font-size: 0.85em; background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; } /* Den delen folk hugsar. Gul fordi det er signalfargen, ikkje raud fordi det ikkje er ein feil å skjule. */ .case-body dt.wrong { color: var(--amber); } .case-body dd.wrong { background: var(--amber-dim); border-left: 2px solid var(--amber-border); padding: var(--space-sm) var(--space-md); border-radius: 0 var(--radius) var(--radius) 0; } .case-body dd.wrong em { font-style: normal; color: var(--amber); } /* STACK */ .stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .stack-col h4 { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--blue); font-weight: 600; margin: 0 0 var(--space-xs); } .stack-col p { margin: 0; font-size: 0.85rem; line-height: 1.8; color: var(--text-secondary); } /* CTA */ .dev-cta .cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); } @media (max-width: 768px) { .dev-section { gap: var(--space-lg); padding-bottom: var(--space-lg); } .case { padding: var(--space-md); } .stack-grid { grid-template-columns: 1fr; gap: var(--space-sm); } .case-body dd.wrong { padding: var(--space-sm); } }