jacob-j.com

Opsætning

Siden er bygget med SvelteKit og prerenderet til statiske filer. Der er ingen server, ingen database og intet UI komponentbibliotek.

Framework

SvelteKit 3, Svelte 5, adapter-static

Styling

Tailwind CSS 4, JetBrains Mono (selvhostet), Vesper-palette

Sprog

Engelsk og dansk med Paraglide

Hosting

Cloudflare Pages

Intet framework i browseren

Alle ruter bliver renderet til HTML, når siden bygges, og client-side rendering er slået fra. Browseren modtager HTML og CSS, ikke Svelte-runtimen.

// src/routes/+layout.ts
export const prerender = true;
export const csr = false;

Temaskift, den fastgjorte header, scroll-effekterne og billedvisningen håndteres af ét inline script i app.html. Scriptet ændrer kun attributter og CSS-variabler på siden. Selve udseendet og animationerne styres af CSS.

Scroll-styret tekst

På forsiden lyser teksten i højdepunkterne op ord for ord, mens man scroller. Scriptet skriver scroll-fremdriften til --p, og hvert ord har sin egen position i --w.

.word {
    opacity: clamp(0.25, calc((var(--p) - var(--w)) * 6 + 1), 1);
}

Skrifttyper og billeder

• Skrifttypefilerne indeholder kun latinske og danske tegn, hvilket reducerer hver fil fra 93 KB til 40 KB.
• Skærmbilleder genereres som AVIF og WebP i tre bredder, så en telefon henter en mindre fil end en computer. De ligger under den første skærm og indlæses derfor først, når den besøgende scroller hen i nærheden af dem, og ikke når siden åbnes.
• Mobilmenuen og billedvisningen bruger HTML Popover API i stedet for et script.

Søgning og deling

Hver side sætter sin egen titel, beskrivelse og sine egne Open Graph tags gennem ét komponent. Layoutet tilføjer sidens officielle adresse (canonical) og hreflang-links, så søgemaskiner opfatter den engelske og den danske version som samme side på to sprog.

• sitemap.xml er en prerenderet rute, der lister alle sider på begge sprog. Nye indlæg under /work bliver tilføjet automatisk.
• Forsiden indeholder JSON-LD, der beskriver en Person og et WebSite.
• Et billede på 1200 x 630 bruges som forhåndsvisning, når et link deles.

Arbejdsgang

Conventional Commits, én branch pr. ændring og pull requests ind i main. pnpm verify kører formatering, linting, build og typetjek.