Developer Portfolio Template Template
A one-page portfolio for a solo engineer, built around a workbench panel where each snippet types itself out character by character while the preview beside it builds, then runs the exact code you just read.
About This Template
A production-ready one-page site for solo developers, freelance engineers, and technical contractors, art-directed away from the usual dark terminal portfolio: a warm graphite ground, raised panels, one ember accent, bundled project photography graded to match, and a high-contrast serif carrying the headlines instead of the monospace every other developer site reaches for. The signature is the workbench. Each of three snippets is split into characters and typed out by a single tween, the preview beside it assembles as the typing passes marked milestones in the code, and on completion the demo runs the same animation the snippet describes, so the panel is a live thing rather than a screenshot. Around it sit a masked hero reveal, a spec strip of real working detail, project entries with a headline engineering metric each, and a notes list. Swap the placeholder name, projects, and snippets for your own and deploy anywhere as static files.
What's Included
- Complete deployable one-page site: nav, hero with spec strip, workbench, selected work, approach, notes, contact, footer
- Signature workbench: code types itself character by character while the preview builds alongside it, then runs the exact animation shown
- Preview milestones driven by data-step attributes on the code lines, so the stage assembles in time with the typing
- Three self-contained demos (stagger grid, orbit with function-based values, bounce ease) with previous, next, and replay controls
- Typing starts when the workbench scrolls into view, so the moment is seen rather than missed
- Hero headline pushes back under the cursor, character by character, turning the page's claim about interfaces behaving like objects into a demonstration in the first viewport
- Add your own demo by copying one markup block and adding a matching entry to the RUNNERS map
- Project entries pairing bundled graded photography with a written description and a single headline engineering metric
- Photography ships as optimised WebP derivatives with the warm grade baked into the pixels, regenerated from a manifest, total weight around 100KB
- Serif display type against monospace data, inverting the usual developer-portfolio pairing
- Lenis smooth scrolling wired in and fully optional, with the code panels excluded so they scroll natively
- Accessible: real buttons throughout, visible focus, reduced motion gets the finished code and a static preview, and without JavaScript the first demo shows its full snippet and completed preview
Perfect For
- Solo developer, freelance engineer, and contractor portfolios
- Technical consultants who need to show craft rather than describe it
- Engineers applying for roles where the site is part of the application
- Open-source maintainers presenting a body of work
- Learning how to build a typewriter effect that drives a live preview rather than decorating text
How It Works
One script initialises each section inside a single gsap.context with gsap.matchMedia, skipping any section it cannot find. The workbench splits each snippet's text nodes into per-character spans once at startup, recording which character index completes each line marked with data-step. A single tween then drives an index from zero to the character count: on each update it reveals the newly passed characters, applies any step classes the preview is waiting on, and moves a caret to the last revealed character using its offset position. On completion the snippet's entry in the RUNNERS map builds the real GSAP timeline, so what runs is what was typed. Switching demos kills the running timeline, clears the inline properties it left behind, and retypes the new snippet. The hero headline adapts the text-hover-distortion effect: text nodes are split into per-character spans in place, so inline markup keeps its styling, and characters near the cursor are pushed away by an amount that falls off quadratically with distance. Words are kept whole so per-character inline-blocks cannot break a line mid-word, the split waits until the intro reveal has finished so nothing is measured mid-transform, and a visually hidden copy of the heading keeps one clean string for assistive tech. Characters are visible by default and hidden only while typing is active, which means reduced motion and a JavaScript failure both leave the full snippet readable, with the preview showing its finished composition via CSS rather than script.