Folio
A developer portfolio.
A portfolio for engineers who ship. A 3D dot field in the hero ripples under the pointer and carries your initials like a buoy in the swell; under it, the numbers that prove your work, selected projects with real case studies, your stack, experience, writing and a contact section with copy-email and a CV download. Press Ctrl K (Cmd K on a Mac) anywhere to jump to any page, project or post.
- For
- Developer portfolio
- Built with
- HTML, CSS, JavaScript (ES modules), three.js; no build step
- Pages
- 7 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
Screens from the template
Every page is laid out for a 390 pixel phone as well as for tablet and desktop.
More pages
The 3D moment
A 3D dot field that ripples under the pointer, with the developer's initials surfacing in the swell.
What you get
Straight from the template's README, the same file you will find in the repository.
- Hero with a signature 3D moment: a three.js dot field on two slow swells that rises from flat on arrival, then your initials surface in it. The pointer drops ripples. It loads lazily, caps pixel ratio at 2, pauses off screen and in background tabs, holds still with reduced motion, and has a matching still image underneath for when WebGL is not available.
- Proof row: years, projects shipped and open-source stars, counting up once.
- Selected work: one featured project and a staggered pair, each opening a full case study.
- Case study pages with the problem, the stack and why, an architecture diagram drawn in SVG from plain data (boxes, arrows, a legend, and a "read as a list" version for screen readers), results and links. The cover grows into the page as you open it.
- Projects index with tag filters, a live result count, shareable filter links (
#/projects?tag=open-source) and an empty state. - Writing: an index grouped by year and a post template with headings, lists, pull quotes and code blocks with syntax highlighting (TypeScript, JavaScript, JSON, CSS, HTML, shell) and a copy button. The highlighter is 5 KB and written for this template.
- Uses page, an About and stack section with a portrait slot, an experience timeline, testimonials, and a contact section with copy-to-clipboard (with a fallback where the clipboard is blocked) and a PDF CV download.
- Command palette (Ctrl K, Cmd K or
/): pages, projects, posts, tags and actions (switch theme, copy email, download CV). Fully keyboard driven, screen reader labelled, and on phones it doubles as the menu. - Light and dark themes that follow the system until the visitor picks one; the switch opens as a circle from the button.
- 404 in the app and a standalone
404.htmlfor your host, which also forwards path-style links such as/projects/tidepoolto the right page. - Responsive from 320 px to wide screens, visible focus everywhere, skip link, reduced motion respected, no layout shift, AA colour contrast (checked by a script), print styles.
- One file for all your words:
content.js.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Projects
- Project case study
- Writing
- Post
- Uses
- 404
Stack
- HTML
- CSS
- JavaScript (ES modules)
- three.js; no build step
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
