Kernel

Kernel is a portfolio for an independent developer: freelancers, consultants, engineers between jobs, studios of one or two. It is set like a file open in an editor at night: a near-black editor (or warm paper in the light theme) with a faint rule under every line, a gutter of line numbers down the left edge and one phosphor accent, a sharp grotesk for headings and a mono for labels, readouts and code. The home page opens on one desk, photographed from the same spot from night to morning, while a project is built on its monitor as you scroll, with the status line, the headline, one line, Start a project and See the work over it from the first frame. The demo is a fictional developer, Mara Lindqvist, and her fictional clients.

Kernel comes in two variants, chosen when you create the site: files/Sanity (static pages, any host) and EmDash (--cms emdash, rendered on request on Cloudflare). The pages are the same in both.

Pages and their content

Page	Edit it in
Home	Pages → Home page (a list of sections)
Work (every project as a wide row, a filter by kind)	Pages → Work page
A case study (a page each: the brief, constraints, results before and after, the story, screens, a quote, links, credits)	Content → Work
Services (shown on the home and contact pages)	Content → Services
About (portrait and facts, CV, how you work, experience, Uses, questions)	Pages → About page
Writing	Content → Writing (one post can be members-only)
Contact (the enquiry form, an intro call, the code review, services, questions)	Pages → Contact page
Name, handle, role, location, time zone, availability, navigation, profiles	Pages → Site settings
Buttons, labels, chat, emails, game texts	Content → Interface texts
Privacy, terms	Pages → Legal

In headlines, words wrapped in *stars* sit on a selection band, like selected code, as in “I build *fast, quiet* websites”. The band sweeps in as the heading scrolls into view.

The hero

The hero is the site’s signature. Three photos of the same desk from exactly the same spot (Pages → Home page → Hero → Photos: night, blue hour, morning) fade into each other as you scroll, while the camera moves in on the monitor and a project is built on its screen:

1. The editor: your code types itself line by line, coloured like an editor (Hero → The screen → Code). The first lines are there from the first frame; the night photo is the page’s largest image, so it loads first.
2. The build: the command and the build log ticking green while blue hour comes up.
3. The site: a browser opens on the client’s site (its address and headline from the content) and its blocks come in one by one as the morning sun reaches the wall.
4. The scores: four rings close at 100.

A readout shows each stage’s command and the captions follow in a glass card with a progress line; write your own in the hero’s four stages. The screen is not in the photos: it is HTML laid exactly over the monitor, drawn in your colors, so it follows your accent. The later photos load after the page has loaded. With reduced motion, or in a browser without scroll-driven animations, the hero is one still: the desk in the morning with the finished site on the screen, the four stages listed under it.

To use your own desk, take three photos from a tripod with the monitor facing the camera and its screen dark (or generate one and edit it into the other two so nothing moves), then set Screen position in the hero to where the screen sits in the photos, in percent of the photo’s width and height.

Work

Each project has a kind (web app, website, performance, open source, or your own): the work page filters by it without any JavaScript. A case study has the client, your role and the year, the stack with its logos, the cover in a browser window (it morphs in from its card), the brief beside what made it hard, the results as a diff (the old number struck through, the new one in the accent), the story, more screens, what the client said, links and credits. The first result is the one shown on the card. Search engines get each project as a schema.org CreativeWork.

Services, the call and the code review

Each service has a price and a note, how long it takes and what’s included (shown as the added lines of a diff). The home page shows as many as its section says, featured first; the contact page shows all of them. Book a free intro call with Cal.com (it loads on click; until it’s connected the page shows a preview of the calendar with your times). The code review is paid with Stripe (a one-time Price id) or Lemon Squeezy (a variant id) in Pages → Contact page → Code review. Without keys the buttons explain how to switch them on.

Enquiries

The contact page’s enquiry form asks for a name, email, an optional company, what’s needed, a budget and when it should be live, each picked from a short list you set in Pages → Contact page → Enquiry form, and a message. The choices are written above the message in the email you receive (Resend, to the email in Site settings).

Integrations

Everything works without keys; each feature switches on with its variables in .env.example.

Feature	Where	Service
Book an intro call	Contact page, loads on click; a preview of the calendar until connected	Cal.com
Code review	Contact page (one-time payment)	Stripe or Lemon Squeezy
Newsletter	Home and writing pages, with a welcome email	Supabase or Mailchimp
Enquiries	Contact page; to the email in Site settings	Resend
AI chat	Every page; answers about services, prices, work, experience and availability	Claude or OpenAI
Members-only post	Writing	Clerk
Search	⌘K or the search button: work, writing, about, contact	built in, or Algolia
Analytics	Every page; Google Analytics only after consent	Plausible, Umami, Google Analytics, PostHog
Photos	Production builds	Cloudinary (optional)

Sections

The home page is built from these sections, in any order: Hero, Selected work (one wide row per project, the screenshots alternating sides), Services and prices, Career as a git log (commits newest first, side projects on a branch that forks off and merges back; the short hashes are made from the messages), The stack (tool logos in columns by group), What clients say (quotes between block-comment marks), Latest writing, Newsletter (a terminal pane) and Closing call (a prompt, the headline and a photo, dark in both themes).

Tool and profile logos come from Simple Icons: give each tool its slug from simpleicons.org (for example astro, typescript, postgresql). A brand Simple Icons doesn’t have gets a neutral mark.

Colors and brand

src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent (phosphor green: buttons, the cursor, links, marks and the selection bands), the second (the desk lamp’s amber: line numbers, eyebrows, hashes and tags) and the third (slate: the members badge). A light accent gets dark text on its buttons, a dark one white text; in the light theme the buttons are a deeper shade with white text. Every color is adjusted for each theme until it reads, and one that can’t get there stops the build with a message. Brand also sets the fonts (text, headings and code) and the corners (square by default, or softly rounded). The site opens in its dark theme even when the visitor’s system is light; the toggle switches to paper and ink and the browser remembers it.

Availability and your local time

Site settings → Availability turns the light in the header and the footer green (taking on work) or grey, with your line next to it. The footer’s status bar shows where you are and your local time, from Site settings → Time zone.

Languages

Kernel is ready for more languages: see Languages.

The 404 page

A small game, Green build: a project’s packages, each taking a few seconds and needing some of the others, drawn as a graph over two build cores. Pick a ready package (tap it, or press its number, 1–9; U undoes) and it starts on whichever core is free first, as soon as everything it needs is built. A dashed line on the cores marks the fastest possible build, found by trying every order; you score 100 × that ÷ your time. Three projects of 6, 8 and 10 packages; the best score is kept in the visitor’s browser.

AI assistants and search engines

• AGENTS.md describes the project for coding assistants (Claude Code reads it through CLAUDE.md, Cursor through .cursor/rules/).
• /llms.txt lists your pages, work, services and writing for AI assistants, in every language.
• Pages carry JSON-LD: you as a Person (your role, where you are, your profiles, your services as offers and your experience), projects as CreativeWorks, questions as a FAQPage, and each post as a BlogPosting.

Commands

pnpm dev                     # local site, editor at /keystatic
pnpm build                   # production build
pnpm cms sanity schema|seed  # move content to Sanity (see Content → Sanity)

In the EmDash variant: npm run dev, npm run deploy (Cloudflare) and npm run emdash:schema (after changing the content model).