Every developer eventually asks themselves: should I build a personal website? The answer is almost always yes — but the follow-up question is harder: how?
There are countless options. Static site generators like Hugo, Jekyll, or Astro. Full frameworks like Next.js or Nuxt. Managed platforms like Notion, Super, or Hashnode. Each has trade-offs, and each pushes you toward a particular set of decisions.
I chose none of them.
The Case for Vanilla
This site is built with plain HTML, CSS, and a small amount of vanilla JavaScript. No build step, no node_modules, no configuration files. Here's why:
- Simplicity — Every page is a self-contained HTML file. There's no mental model to learn beyond "edit a file, refresh the browser."
- Portability — The entire site can be deployed by copying a folder to any web server. Nginx, Caddy, Apache, S3, GitHub Pages — anything that serves static files.
- Longevity — HTML doesn't break. There are no dependency updates, no breaking changes, no "this worked last week." The site will work in 10 years exactly as it does today.
- Performance — Zero JavaScript frameworks means zero KB of framework runtime. The entire site loads in milliseconds.
Finding a Design Language
The hardest part of building a personal site isn't the code — it's the design. I discovered the awesome-design-md collection, which provides ready-to-use design systems extracted from real websites in the DESIGN.md format.
I chose a design system inspired by Vercel's visual language, which emphasizes:
- Shadow-as-border — Using
box-shadow: 0 0 0 1px rgba(0,0,0,0.08)instead of CSS borders, creating softer, more refined edges - Aggressive letter-spacing — Negative tracking at display sizes (-2.4px at 48px) creates that compressed, engineered feel
- Three-weight type system — 400 for reading, 500 for interaction, 600 for headings. No more, no less.
- Achromatic palette — Grays from #171717 to #ffffff are the foundation, with accent colors used sparingly and functionally
Structure That Scales
The portal uses a flat, directory-based URL structure where each page lives in its own
folder with an index.html. This gives clean URLs (/about/ instead
of /about.html) and makes the hierarchy self-documenting.
Adding a new page is dead simple:
- Create a new directory (e.g.,
/blog/new-post/) - Copy any existing page as a template
- Edit the content
- Add a link in the parent list page
No build step, no frontmatter, no routing config. Just files in folders.
Dark Mode Done Right
The theme system uses CSS custom properties with a data-theme attribute
on the <html> element. All colors, shadows, and surfaces are defined
as variables that swap when the theme changes. The preference respects the OS setting
on first visit and persists in localStorage after manual toggle.
What's Next
This is just the beginning. The portal is designed to grow incrementally — new projects, new blog posts, new sections can be added without touching existing code. Some ideas for the future:
- RSS feed for blog posts
- Search functionality with a lightweight client-side index
- More interactive project demos
- A /uses page documenting my tools and setup
- Reading list / bookmarks page
"The best time to plant a tree was twenty years ago. The second best time is now."
If you've been putting off building your own corner of the internet — start today. It doesn't have to be complex. It just has to be yours.