linstan1.github.io

One-page personal site — pixel/terminal brand, no build step, no dependencies.

Deploy to GitHub Pages

Create a repo named linstan1.github.io (that exact name gives you the root domain https://linstan1.github.io), then from this folder:

git init && git add -A && git commit -m "Add personal one-pager" && git branch -M main && git remote add origin git@github.com:linstan1/linstan1.github.io.git && git push -u origin main

Then in the repo: Settings → Pages → Source: Deploy from a branch → main / root. Live in about a minute.

Any other repo name works too — the site just lands at https://linstan1.github.io/<repo-name>/ instead. All paths are relative, so it works either way.

Files

File	What it is
index.html	The main page — markup only; the shared CSS sits in assets/site.css
lifecycle.html	Worked example: the five-phase token design lifecycle, with CSS diagrams
assets/site.css	Shared brand CSS (tokens, bar, cards, buttons, tables of both pages)
COPY.md	Every string on the page, in page order, for editing
assets/avatar.png	Pixelated portrait, green duotone (32×32 upscaled 16×)
assets/avatar-ink.png	Alternate: grey/blue duotone
assets/avatar-natural.png	Alternate: natural colours, pixelated
assets/favicon.png	Browser tab icon
assets/og.png	Link-preview card (1200×630)
.nojekyll	Stops GitHub Pages running Jekyll over the folder

To swap the avatar, point <img class="avatar"> at one of the alternates.

Brand

• Type — JetBrains Mono for everything readable, Silkscreen for the small pixel labels. Both from Google Fonts.
• Colour — near-black ground, one accent green (#7FD3A5 dark / #1F7A52 light) and one warn amber (#E0A75E dark / #9A5B12 light). Auto light/dark via prefers-color-scheme; the palette lives in the :root block at the top of assets/site.css.
• Geometry — 8px grid, 2px borders, hard offset shadows, no rounded corners, steps() transitions so hovers snap rather than fade.
• Portrait — downsampled to 32×32, luminance mapped onto a 6-step green ramp. Reads as a portrait, not as a face.

Regenerating the avatar or preview card

pixelate2.py (avatar ramps) and og.py (link-preview card) sit one level up from this folder. Both need Pillow. Change the block count in pixelate2.py for a coarser or finer portrait — lower is more anonymous.