Developer Portfolio Template
£10 Standard License Unlimited projects
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.
Read the full template overview
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
The typing workbench
One script initialises each section with a single setup and teardown path and one motion branch, 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.
Running what was typed
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 headline distortion
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, and the push fades the further a character sits from it. 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 character positions are never read while the text is still moving, and a visually hidden copy of the heading keeps one clean string for assistive tech.
When typing is off
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.
Plugins ScrollTrigger
Difficulty Intermediate
Smooth Scroll Lenis Integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates
Questions about this template
Does the workbench run real code or is it a video?
Real code. Each snippet types itself out character by character, the preview builds alongside it driven by data-step attributes on the code lines, and then it runs the exact animation you just read. Nothing is prerecorded, which is the whole argument the section is making.
Can I add my own demos to the workbench?
Yes, and it is designed for it. Copy one markup block for the code and preview, then add a matching entry to the RUNNERS map in the script. Three demos ship (stagger grid, orbit with function-based values, bounce ease) as working examples of the shape.
What does someone see if they arrive with JavaScript off?
The first demo shows its complete snippet and its finished preview rather than an empty panel. Under reduced motion you get the finished code and a static preview too. The section never renders as a blank stage waiting for an animation that will not come.
I am not a GSAP developer. Is this still usable?
Yes, though it flatters people who write front-end code. The demos are self-contained and swappable for whatever you want to show, but the section is built around showing craft rather than describing it, so it suits engineers and technical consultants more than a generalist CV.
Will the typing animation have finished before anyone scrolls to it?
No, it waits. Typing starts when the workbench scrolls into view rather than on page load, so the moment is actually seen instead of having already happened by the time a visitor arrives.
