September 20, 2026

Hugo Portfolio & Blog.

Frontend
Hugo Tailwind CSS JavaScript

My personal site (fanny.dev) — a Hugo static site with a hand-written Tailwind v4 theme, blog, shelves, projects, resume, and more.

#staticsite #hugo #tailwindcss #blog #portfolio
Hugo Portfolio & Blog
Repository Live Demo Open in new tab

Description

Hugo Portfolio & Blog is my personal website at fanny.dev — part portfolio, part blog, part digital garden. It is a fast static site built with Hugo and a hand-written theme styled with Tailwind CSS v4, with a warm cream-and-ochre look and full light/dark mode.

The site is the home for everything you’re reading now: project case studies, articles, technical notes, a resume, an anime list, and more — all generated statically and deployed on Vercel.

Background

I wanted one place I fully own and control, instead of scattering my work across platforms. The design is a warm, blog-centric two-column layout inspired by taniarascia.com, rebuilt from scratch so the theme is entirely my own rather than a third-party Hugo theme.

Goal

Build a single, fast, maintainable home for my writing and projects — easy to extend with new content sections, pleasant to read on any device, and cheap to host as a static site.

Features

  • Projects — case studies and live frontend demos, with a client-side search + tech-stack filter.
  • Blog & Shelves — articles and technical notes, organized into folders.
  • Resume — an on-site CV with a designed and an ATS variant, plus print-to-PDF.
  • Anime list — a filterable grid generated from a JSON dataset.
  • Link-in-bio — a dedicated page for my content channel.
  • Dark mode — a custom Tailwind variant toggled via localStorage.
  • Comments — Giscus with a custom light and dark theme.
  • SEO — canonical URLs, Open Graph, Twitter cards, JSON-LD, sitemap, and robots.txt.

Technologies

  • Hugo — static site generator (content, templating, taxonomies).
  • Tailwind CSS v4 — design tokens via @theme, compiled from assets/css/main.css.
  • Vanilla JavaScript — theme toggle, filters, and small interactions.
  • Vercel — build and hosting via @vercel/static-build.

How to Run

npm install
npm run dev     # Hugo server + Tailwind watch at http://localhost:1313
npm run build   # production build (Tailwind minify + hugo --gc --minify)

Technical Decisions

  • Hand-written theme, no third-party Hugo theme — full control over layout and styling.
  • Tailwind v4 scanning hugo_stats.json — Hugo’s buildStats feeds Tailwind’s class detection, so utilities only ship when Hugo has emitted them.
  • Design tokens in @theme — a warm cream/ink/ochre palette with a custom dark variant, keeping the whole site theme-aware from one source.
  • Custom output format for the resume — the resume page renders both a designed HTML view and an ATS-friendly variant from the same content.
  • Static-first — no backend; dynamic touches (comments, latest videos) are handled by third-party embeds or build-time fetches.

What I Learned

  • Building a Hugo theme from scratch and wiring Tailwind v4 into Hugo’s build pipeline.
  • Designing a consistent, token-driven light/dark design system.
  • Using Hugo output formats to render the same content in multiple layouts.
  • Keeping a growing personal site organized as it accumulates many content sections.

Notes

Public repository, deployed at fanny.dev . This very page is served by the project it describes. A dedicated screenshot may be added later.

Hey! I’m Fanny, the software engineer tending to this digital garden. You can read more about me, or subscribe by email.

Comments