aafu is a modern, responsive portfolio and blog theme built with Hugo and powered by Tailwind CSS 4.x.
Experience the theme in action: https://aafu.darshanbaral.com
The repository functions as a complete Hugo site out of the box. To run it locally:
# Clone the repository
git clone https://github.com/darshanbaral/aafu.git
cd aafu
# Install dependencies
npm install
# Start the development server
hugo serverTo use aafu as a theme within your own Hugo project:
-
Add the theme:
git submodule add https://github.com/darshanbaral/aafu.git themes/aafu
-
Copy the following files/folders from
aafu/to your project root:- Files:
config.yamlpackage.jsontailwind.config.js
- Folders:
assets/static/
The project structure should look something like:
your-hugo-project/ ├── config.yaml ├── package.json ├── tailwind.config.js ├── assets/ ├── content/ ├── static/ ├── themes/ │ └── aafu/ - Files:
-
Enable the theme by setting the theme in
config.yaml:theme: aafu
-
Install dependencies and start development server:
npm install hugo server
Customize the theme by modifying the config.yaml.
Key customization options:
- Define which sections appear in the accordion.
- Control the order of sections.
- Choose which section should be expanded by default.
Replace profile.jpg in static/images with your own profile picture.
To configure the theme mode, modify the params.theme.mainTheme attribute in config.yaml.
- Light Mode (
light) - Dark Mode (
dark) - Auto Mode (
null- adjusts based on user’s device settings)
This theme supports search functionality using Pagefind. Before deploying, index your content using the following command:
hugo -b https://your_base_url/; npx -y pagefind --site publicIf you encounter any bugs or have feature suggestions, please open an issue.
Enjoy using aafu! 🚀