Buildfolio
A modern developer portfolio template — dark/light mode, glassmorphism, and a handful of interactive components. This page covers the folder structure, design tokens, components, and how to make it yours.
Getting Started
Buildfolio is a static template — no build step, no framework, no dependencies to install. Clone it, open index.html, and start editing.
git clone https://github.com/rikiag/buildfolio.git
cd buildfolio
open index.htmlFor live reload while editing, serve the folder with any static server (e.g. the VS Code "Live Server" extension, or npx serve) — this also avoids the rare browser restriction on clipboard access when opening files directly via file://.
Folder Structure
.
├── assets/
│ ├── css/
│ │ ├── style.css // design tokens + components
│ │ └── animation.css // keyframes + reveal/stagger
│ ├── js/
│ │ └── app.js // all interactive behavior
│ ├── images/
│ └── icons/
│ └── favicon.svg
├── pages/
│ ├── about.html
│ ├── projects.html
│ ├── project-detail.html
│ ├── blog.html
│ ├── blog-article-read.html
│ ├── lab.html
│ ├── resume.html
│ └── contact.html
├── docs.html // this page
├── index.html // home page
└── README.mdindex.html and docs.html live at the project root; every other page lives under pages/. That's the only thing to keep in mind when linking or moving files: pages inside pages/ reference assets and the root pages one level up, with ../.
Design Tokens
Every color, radius, and font is a CSS custom property defined once in assets/css/style.css, split into a dark set (default) and a light set under [data-theme="light"]. Change a value in one place and it updates everywhere.
Color palette
| Token | Dark | Light | Used for |
|---|---|---|---|
| --bg | #09090B | #F8FAFC | Page background |
| --card | #111827 | #FFFFFF | Card / surface background |
| --border | rgba(255,255,255,.08) | #E2E8F0 | Card & input borders |
| --text | #F8FAFC | #0F172A | Headings, primary text |
| --text-dim | #CBD5E1 | #475569 | Body copy |
| --text-faint | #94A3B8 | #64748B | Labels, meta text |
| --blue / --cyan | #3B82F6 / #06B6D4 | #2563EB / #06B6D4 | Accent, gradient, links |
Typography & shape
| Token | Value |
|---|---|
| --font-heading | Space Grotesk |
| --font-body | Inter |
| --font-mono | JetBrains Mono |
| --radius | 20px (cards) |
| --radius-sm | 12px (buttons, inputs, chips) |
| --maxw | 1180px (container width) |
Components
Every component is a plain CSS class — no build tooling, so you can copy a block of HTML from any page and it'll carry its styling with it.
| Class | What it is | Find an example in |
|---|---|---|
| .card | Base surface — border, radius, hover lift, mouse-spotlight glow | every page |
| .btn .btn-primary / .btn-ghost | Gradient and outline buttons | hero, forms |
| .tag / .pill / .difficulty | Small status & category badges | projects, blog |
| .terminal-card | Hero "whoami" terminal widget with typing effect | index.html |
| .metrics-panel | Live-metrics bento panel with progress bars | index.html, pages/lab.html |
| .service-card-v2 | Icon + category + status + uptime service card | pages/lab.html |
| .tech-card | Skill card with rating, years, hover-reveal description | index.html |
| .timeline / .timeline-h | Vertical and horizontal journey timelines | pages/about.html, index.html |
| .prose | Long-form article typography, code blocks, blockquotes | docs.html, pages/blog-article-read.html |
| .toc-aside | Sticky table of contents with scrollspy | pages/blog-article-read.html |
JS Features
Everything interactive lives in assets/js/app.js — one file, no dependencies, split into small self-contained blocks:
- Theme toggle — follows system preference by default, persists a manual choice to
localStorage, no flash on load. - Scroll reveal + stagger — sections fade up via
IntersectionObserver; card grids reveal one-by-one. - Counters — animated number count-up, including a live GitHub public-repo count with a static fallback.
- Search & filter — powers the Projects category filter and the Blog search box from the same code path.
- Contact form — demo submit flow with a success-state panel (wire up your own backend or a service like Formspree).
- Copy-code buttons — auto-attached to every code block inside
.prose. - Reading progress bar & TOC scrollspy — active on article pages.
- Page fade transitions & mouse-spotlight card glow — small, GPU-cheap polish applied site-wide.
Customization
Colors & fonts
Edit the two :root blocks at the top of assets/css/style.css — one for dark, one under [data-theme="light"]. Swap the Google Fonts <link> in every page's <head> to change typefaces.
Projects
Duplicate a card in pages/projects.html, then duplicate pages/project-detail.html for its full case study. Update data-category and data-name attributes so search and filtering keep working.
Blog posts
Duplicate pages/blog-article-read.html. Add id attributes to your headings and matching links in the .toc-list to get the sidebar and scrollspy for free.
Social links & contact
Social URLs and the contact form's destination live in pages/contact.html and the footer of every page. The contact form currently only simulates a submit — connect it to your own backend or a form service to actually receive messages.
Live GitHub stat
Open assets/js/app.js and find GITHUB_USERNAME near the top of the counters block — replace the placeholder with your real GitHub username to pull a live public-repo count on the homepage.
License
Buildfolio is released under the MIT License — use it, modify it, and ship it for personal or commercial projects. See README.md for the full license text.