000
Built once at deploy —
served as plain HTML.
Developer portfolio template · Next.js · MIT

quietfolio

A minimal, fast, accessible, SEO-first developer portfolio — projects, case studies, a blog and a résumé, from one data file and two JSON files.

Use this template ↗Open the live demo ↗
STACK NEXT.JS · TAILWIND v4
BUILD STATIC · 0 SERVERS
LICENCE MIT
T 00:00.000
FPS —
Scroll
Next.jsApp Router
✦
TailwindCSS v4
✦
0backend · fully static
✦
7JSON-LD types
✦
⌘Kcommand palette
✦
RSS+ llms.txt + sitemap
✦
/resumeprintable, from your data
✦
MITfork it, keep it
✦
01 / WHAT YOU GET

One-page home.
Case studies. Blog. Résumé.

Built with Next.js App Router, Tailwind CSS v4 and Framer Motion. Fully static, no backend. The home page holds about, filterable projects, experience, tech stack and your GitHub activity. Around it: /work/[slug] case studies, a /blog and a printable /resume.

◫

Projects with filters

All / Web / Mobile / Desktop / Tooling filters, featured flags, LIVE / WIP / PRIVATE status, tags, live and repo links, and an optional case-study link. Try the live port below.

lib/data.ts → home
❐

Case studies

Long-form write-ups in content/work.json, rendered with the same block system as the blog. Three samples ship: Northwind Dashboard, Pocket Budget and Plainfile CLI.

/work/[slug]
✎

A blog that validates

Posts with per-post Open Graph images and an RSS feed. npm run validate catches broken internal links, missing images and duplicate slugs before you deploy.

content/blog.json
⌘

⌘K command palette

Searches sections, case studies, posts and your links. Keyboard-operable and escapable, and it returns focus where it was. Press ⌘K / Ctrl+K on this page.

keyboard-first
◐

Theme with no flash

Dark and light themes. The choice is saved, and a tiny inline script applies it before first paint, so a light theme never flashes dark.

pre-paint script
▤

Printable résumé

A /resume page generated from the same data as the home page. Print it from the browser, or run npm run resume to regenerate public/resume.pdf.

/resume
LIVE PORT — THE HOME FILTERS
Northwind DashboardWeb · 2026 · LIVE
Pocket BudgetMobile · 2025 · LIVE
Plainfile CLITooling · 2025 · LIVE
Orbit NotesDesktop · 2026 · WIP
02 / THE LOOK

Quiet,
not plain.

The template's signature details, sketched live in your browser. Drag or scroll sideways to travel through them.

01 — PIXEL-ART BANNER

An animated banner, generated.

scripts/make_banner.py renders the hero banner as WebP and GIF, plus a static PNG that reduced-motion visitors get instead. Edit the script to change the scene.

02 — CURSOR FX

Pixel trail and focus reticle.

One canvas draws a pixel trail, click sparks and camera-style brackets that lerp to the cursor and snap to links and buttons. Fine pointers only.

03 — GITHUB ACTIVITY

Your contribution graph, on the home page.

Set profile.githubUser and the home page shows your last year of contributions. It's the only outside origin the CSP allows.

04 — REDUCED MOTION

Motion that knows when to stop.

With prefers-reduced-motion set, the banner turns static and the cursor effects never start. Nothing important depends on animation.

05 — BRAND ASSETS

Favicon, Apple icon and social image.

make_brand_assets.py "Name" "Role" "domain" rebuilds them from your avatar, so shared links look like you, not like the template.

quietfolio social card
app/icon.png · app/apple-icon.png · app/opengraph-image.png
03 / CONTENT → SHIP

Write JSON.
Get a site, a feed, a résumé.

Blocks are h2 h3 p ul ol quote code img table. Inline: **bold** *italic* `code` [links]. One validator, one checklist, and a static export or a Node build.

Source of truth
What it becomes
lib/data.ts — name, role, bio, links, projects, experience, stack
The home page, the ⌘K palette and the printable /resume
content/work.json — case studies with slug, title, date, cover, blocks
/work/[slug] pages with BreadcrumbList and TechArticle JSON-LD
content/blog.json — posts in the same block format
/blog, per-post Open Graph images and RSS at /feed.xml
public/img/ — avatar, banner and project covers
Regenerable: make_sample_assets.py · make_banner.py · optimize_images.py
0sample case studies
0sample blog posts
0sample projects
0servers needed
04 / SEO · A11Y · HARDENING
Found by search.
Read by machines.
Every page gets metadata, a canonical URL and structured data. Crawlers, feed readers and LLMs all get a file made for them. And it works with a keyboard alone.
0JSON-LD types
0Content block types
0CI checks
0Third-party scripts
SEO · AEO · GEOlib/seo.ts
Person · WebSite · ProfilePage
TechArticle · BlogPosting · Blog
BreadcrumbList — escaped, per route.
Open Graph + Twitter cards, generated per post,
canonical URLs, sitemap.xml, robots.txt,
RSS, llms.txt + llms-full.txt.
HARDENED BY DEFAULTnext.config.ts
Security headers + strict CSP on Node hosts,
no third-party scripts, X-Powered-By removed.
a11y: skip link, landmarks, AA contrast,
visible focus, keyboard palette and filters.
CI: lint → typecheck → validate → build → audit.
sitemap.xml ✓robots.txt ✓feed.xml ✓llms.txt ✓llms-full.txt ✓security.txt ✓manifest ✓
⌘K palette
The template's palette lists sections, links, the résumé, every case study and every post. This page has a working miniature with the sample content — open it with the button or ⌘K / Ctrl+K, type to filter, ↵ to jump.
indexes: sections · links · /resume · /work/* · /blog/*
Theme toggle, no flash
Dark, the default.
Saved to localStorage, applied before first paint.
05 / SEE IT MOVE
The template, in 23.5 seconds.
A launch film of the sample site: the live build, the theme toggle, the ⌘K palette and the mobile layout. Pick a chapter to jump to it.
LAUNCH FILM · 23.5s
0.0 – 3.0s · TITLE
Letters drop in.
The title lands while the focus reticle from the template locks on.
3.0 – 5.9s · MANIFESTO
minimal. fast. open source.
The three-word thesis, over the same pixel cursor trail the template ships.
5.9 – 10.9s · LIVE SITE
The real build, browsed.
Footage of the sample site: projects, a case study and the blog.
10.9 – 13.9s · THEME
Dark to light.
A real click on the theme toggle.
13.9 – 17.4s · ⌘K
The palette, searching.
A live ⌘K search across sections, case studies and posts.
17.4 – 19.9s · MOBILE
Three phones, live scrolls.
The responsive layout, captured on mobile.
19.9 – 23.5s · END CARD
The URL types itself.
Where to get it.
06 / MAKE IT YOURS
Seven steps.
Then it's yours.
The template ships with neutral sample content — Alex Morgan, a fictional full-stack developer — so your copy starts clean. Click Use this template, work through the checklist, deploy.
Step · where
What you change
1 · You — lib/data.ts
Name, role, bio, links, projects, experience and tech stack. Set profile.githubUser for the activity graph.
2 · Writing — content/work.json · content/blog.json
Case studies and posts. Run npm run validate to catch broken links, missing images and duplicate slugs.
3 · Images — public/img/
Replace the avatar and project covers. make_sample_assets.py regenerates neutral placeholders.
4 · Brand — make_brand_assets.py "Name" "Role" "domain"
Regenerates the favicon, Apple icon and social image from your avatar.
5 · SEO — NEXT_PUBLIC_SITE_URL · lib/site.ts
Your canonical URL, description, keywords and Twitter handle.
6 · Résumé — npm run resume
/resume is generated from your data; this rebuilds public/resume.pdf.
7 · Banner — make_banner.py
Edit the script to change the animated pixel-art scene.
SAMPLE EXPERIENCE (REPLACE WITH YOURS)
Senior Full Stack Developer · Acme Corp
Lead a small team building customer-facing web products, from architecture and APIs to CI/CD and performance budgets.
Full Stack Developer · Globex
Built and shipped internal tools and a public dashboard used by thousands of people every week.
Use this template ↗Sample /resume ↗
Languages · sample stack
TypeScript · JavaScript · Python · SQL
Frontend · sample stack
React · Next.js · Tailwind CSS · Framer Motion
Backend · sample stack
Node.js · PostgreSQL · Redis · GraphQL · REST
DevOps & Cloud · sample stack
Docker · GitHub Actions · Vercel · Netlify
Tools · sample stack
Git · Figma · Playwright · Vitest