Aafu

Aafu

Aafu is a modern, responsive portfolio and blog theme for the Hugo static site generator, styled with Tailwind CSS 4.x and built around an accordion-style homepage layout. It is maintained by Darshan Baral and available on GitHub at github.com/darshanbaral/aafu, with a live demo at aafu.darshanbaral.com.

What is Aafu?

Aafu is a Hugo theme that produces a personal portfolio site with an integrated blog. It takes Markdown content from Hugo's content folder and renders it into a responsive single-page portfolio with accordion sections for profile, skills, experience, and blog posts, plus a separate blog layout. The theme runs on Hugo and uses Tailwind CSS 4.x for styling, and it includes Pagefind integration for static-site search.

Key Features

• Accordion portfolio sections — The homepage displays content in accordion panels; config.yaml lets you define which sections appear, their order, and which one starts expanded.
• Tailwind CSS 4.x — Styling is built on Tailwind CSS 4.x utility classes and configured through tailwind.config.js, so you can adjust the design without writing custom CSS.
• Light, dark, and auto modes — Set params.theme.mainTheme to light, dark, or null; the null option follows the visitor's device color scheme.
• Pagefind search — Run hugo -b https://your_base_url/; npx -y pagefind --site public before deploy to build a searchable index of all public pages.
• Profile image swap — Drop a new file named profile.jpg into static/images to replace the profile picture displayed on the portfolio.
• Two installation paths — Clone the repo as a standalone Hugo site, or add it as a git submodule under themes/aafu and copy config.yaml, package.json, tailwind.config.js, assets/, and static/ into your own project.
• Blog support — The repository's own description labels it a "Portfolio theme with blog," so it ships with both a portfolio homepage and a blog post layout.

Who is it for?

• Freelancers and creatives — Build a compact, fast-loading portfolio that presents work history and skills in accordion sections instead of a long scrolling page.
• Bloggers using Hugo — Publish Markdown posts in the included blog section and add client-side search with the provided Pagefind command.
• Developers who customize themes — Because the theme is built on Hugo's config and Tailwind utility classes, users can reorder sections and restyle colors by editing config.yaml and tailwind.config.js.
• Static-site hosts — Since Hugo renders plain HTML, the generated public folder can be deployed to any static hosting service; the README's build command uses hugo -b with a base URL.

What can you do with Aafu?

• Create a personal profile page: Replace profile.jpg, add your details, and control which accordion sections (skills, experience, etc.) are visible.
• Publish searchable blog posts: Write posts in Markdown, run the Pagefind indexing command before deployment, and let visitors search your content without a backend.
• Reskin the design quickly: Use Tailwind CSS 4.x classes and the provided config to adjust spacing, color scheme, and layout behavior across the site.
• Develop locally with Hugo: Run npm install then hugo server to preview changes in real time before building the final static site.

How does Aafu work?

Two setups are documented. For a standalone project, clone the repository, run npm install, and start hugo server — the repo works as a complete Hugo site. To use it as a theme in an existing project, add the repo as a git submodule, copy the listed config and asset files into your project root, set theme: aafu in config.yaml, and run npm install and hugo server.

FAQ

How do I change the profile image on aafu?

Replace the file profile.jpg in the static/images directory with your own picture. The theme expects that filename and location, so keep the same name and path after you swap the image.

Does aafu support dark mode?

Yes. Set params.theme.mainTheme in config.yaml to light, dark, or null. The null (auto) mode adjusts the site to match the visitor's device setting.

How do I add search to an aafu site?

Aafu integrates Pagefind. After building the site, run hugo -b https://your_base_url/; npx -y pagefind --site public to generate a search index for the public folder before deploying.

Can I use aafu without installing Node dependencies?

No — the README instructs running npm install before hugo server, because the theme depends on Tailwind CSS tooling from the npm ecosystem.