Developer Portfolio Template

What's Included

Code snippet omitted: it ships with the download.

No build step. Open index.html and it runs.

Quick Start

1. Open index.html and replace the placeholder engineer with yourself: name, headline, spec strip, projects, tenets, notes, and contact details.
2. Update the <title> and <meta name="description">, and remove <meta name="robots" content="noindex, nofollow"> when you go live.
3. Change the workbench snippets to code you actually want to show (see below).
4. Deploy the folder anywhere that serves static files.

Fonts load from Google Fonts and GSAP from a CDN. To go fully self-hosted, download both and update the tags in <head>.

The Workbench (the signature)

Each demo is one [data-demo] block containing a code panel and a stage. On startup the script splits every snippet into per-character spans and records which character index finishes each line marked data-step. A single tween then drives an index from zero to the character count, revealing characters, firing step milestones, and moving the caret. When it finishes, the demo's real GSAP timeline runs.

Adding or changing a demo

Two places, kept deliberately in sync:

1. The markup. Copy a [data-demo] block and give it a name and a filename:

Code snippet omitted: it ships with the download.

2. The RUNNERS map in script.js, keyed by the data-demo name:

Code snippet omitted: it ships with the download.

Return the tween or timeline so the script can kill it when the visitor switches demos.

Also update the 1 / 3 count in the bench bar.

Code markup

Lines are <span class="ln">, with token spans inside: .tok-fn, .tok-str, .tok-num, .tok-prop, .tok-punc, .tok-key, .tok-com. Indentation is real spaces inside the .ln, which preserves them without needing a <pre>.

data-step="1" and data-step="2" on a line tell the stage to add .step-1 or .step-2 when the typing passes that line. The stylesheet uses those to bring preview elements from hidden, to ghosted, to solid, so the picture assembles in time with the code. Add more steps by extending the CSS rules; the script applies any step number it finds.

Keeping the demos honest

The point of the panel is that the code shown is the code running. When you change a snippet, change its runner to match. If the two drift apart, the section quietly stops being the thing that sells the page.

Headline Distortion

The hero headline ([data-distort]) pushes back under the cursor: characters near the pointer are displaced by an amount that falls off with distance, then settle. It makes the page's claim about interfaces behaving like objects true in the first viewport, rather than only asserting it.

Tune it at the top of the module in script.js:

• STRENGTH (22) — how far a character travels when the cursor is on it
• RADIUS (150) — how far the influence reaches, in pixels

It runs only where it makes sense: motion allowed, and (hover: hover) and (pointer: fine), so touch devices skip it entirely rather than reacting to taps. The split waits for the intro reveal to finish, so characters are measured at rest.

Three details worth keeping if you edit it:

• Text nodes are split in place, so inline markup such as <em> keeps its element and its styling. Rebuilding from textContent would flatten it.
• Words are wrapped in .distort-word with white-space: nowrap, because per-character inline-blocks would otherwise let a line break mid-word.
• The heading keeps a visually hidden copy of its text, and the visible characters are aria-hidden, so assistive tech reads one clean string instead of spelling it out.

Sections & Options

• Spec strip (.spec): the four label/value pairs under the hero. Real working detail (availability, timezone, stack) does more for a reader than another paragraph of positioning.
• Projects (.project): each pairs a graded photograph, a written description, and one headline metric. Pick a number you can defend in an interview.
• Notes (.note): a writing list. Point the links at your posts, or delete the section.
• Scroll reveals ([data-reveal]): one-time fade-up, batched. Add or remove the attribute on any element.

Photography

The three project images are bundled, optimised WebP derivatives, not hotlinks. The art direction is baked into the pixels: each is desaturated and duotoned to a warm stone tint so mixed source photography reads as one campaign against the graphite ground. Total weight is roughly 100KB.

Swapping in your own

Either replace the files in assets/img/ directly, keeping the same names and a 800 x 560 ratio, or edit assets/img-manifest.json and regenerate:

Code snippet omitted: it ships with the download.

The manifest holds each source URL, the output name, the dimensions, and the grade block (desaturate, tint, brightness, gamma). Per-image brightness compensates for source exposure, which is why the marine shot is set lower than the other two: matching perceived brightness matters more than matching numbers.

If you swap the palette, retint the photography to match, or the images will be the one thing on the page still wearing the old scheme.

Credits

Original photographs from Unsplash, free to use under the Unsplash licence. The shipped files are altered, graded derivatives.

Smooth Scrolling

Lenis is wired in and optional. Remove the CDN tag and the lenis block at the top of script.js to drop it. The code panels carry data-lenis-prevent so a long line scrolls natively inside the panel instead of being swallowed by the smooth scroller.

Accessibility

• Workbench controls are real buttons with labels, reachable and operable by keyboard.
• Focus is visible throughout, against the ember accent.
• prefers-reduced-motion skips the typing entirely: the full snippet is shown and the preview sits in its finished composition, with no loops running.
• Without JavaScript, all three workbench demos render stacked, each showing its complete snippet and completed preview, and the switching controls are hidden rather than left dead. Characters are visible by default and hidden only while typing is active, so a script failure degrades to readable code.

Palette

One ground, two raised surfaces, one accent. Change this block in :root and the whole site reskins; nothing else in the stylesheet hardcodes a colour.

Code snippet omitted: it ships with the download.

It is warm graphite rather than the cool blue-black that developer portfolios default to, and the code panel separates its tokens by luminance before hue, so a snippet reads as a block instead of as a rainbow.

Pair	Ratio	Where
Bone on void	15.11:1	body copy
Bone on panel	13.71:1	properties in code
Dim on void / panel / panel-2	9.05:1 / 8.21:1 / 6.30:1	secondary type
Accent-2 on panel	6.12:1	strings
Accent-3 on void / panel / panel-2	6.57:1 / 5.97:1 / 4.58:1	identifiers
Comment on panel	4.86:1	code comments
Accent on void	4.55:1	ember type, ground only

Two rules to keep if you reskin.

--accent is a ground-only text colour. It clears AA on --void at 4.55:1 and fails on both raised surfaces (4.13:1 on --panel, 3.17:1 on --panel-2). Treat ember as an interface colour — the caret, the status dot, borders, focus rings — and reach for --accent-3 whenever you want ember-coloured words on a panel. --accent-deep is a pressed state only; it is below AA on everything.

--comment on --panel at 4.86:1 is the tightest pair on the page and has no headroom. Darkening --panel past #2E2B28, or dimming --comment further, drops the code comments below AA.

Customisation Notes

• Colour: the token block at the top of style.css is the whole palette; nothing else hardcodes a colour, so swapping that block reskins the site. --void and --accent carry the identity; change those two first. The syntax colours (--accent-2, --accent-3, --comment) are scoped to the code panel, where they mean something. Retint the photography to match (see Photography above).
• Type: --font-display (Newsreader), --font-body (Manrope), --font-mono (Fira Code). Update the Google Fonts link when you swap them.
• Sections are independent: the script skips any section it cannot find, so delete what you do not need.

Dependencies

• GSAP 3.15.0 (core)
• ScrollTrigger
• Lenis 1.3.17 (optional)