A modern, responsive personal portfolio built with Hugo and the Hugo Noir theme.
It showcases my experience, projects, tech stack, and ways to get in touch — all in a clean dark-mode–friendly layout.
- Responsive Design – Optimized for mobile & desktop
- Dark & Light Mode – System-based + manual toggle
- Fast Performance – Hugo static site generation
- Minimal Professional Layout – Clean, readable, simple
- Tech Stack Icons – Quick overview of tools I use
- Experience Timeline – Featuring roles like Amazon SDE Intern
- Project Showcase – Full-stack and AI-focused projects
- Local Time Display – Real-time clock in the header
- SEO Optimized – Meta tags, sitemap, best practices
- Hugo — Static site generator
- Hugo Noir Theme — Minimal, dark-mode friendly theme
- Tailwind CSS — Utility-first CSS
- Go Modules — Dependency management
personal-portfolio/
├── .github/workflows/ # GitHub Actions for automatic deployment to GitHub Pages
│ └── pages.yml # Build + deploy pipeline
│
├── archetypes/ # Default content templates used by Hugo
│ └── default.md # Base template for new pages
│
├── content/ # Main site content (markdown pages)
│ ├── about.md # About Me page
│ ├── contact.md # Contact page
│ ├── experience.md # Experience timeline
│ └── projects.md # Project showcase
│
├── data/en/ # Structured TOML data for content sections
│ ├── author.toml # Author profile, social links, metadata
│ ├── experience.toml # Work experience entries
│ └── projects.toml # List of projects, descriptions, tech stack, links
│
├── layouts/ # Custom layout overrides for Hugo Noir
│ ├── _default/ # Default base templates
│ ├── index.html # Homepage layout customization
│ └── partials/ # Reusable components (navbar, footer, time display, etc.)
│
├── node_modules/ # Node dependencies (icons, tooling, build helpers)
│
├── portfolio/ # Portfolio-specific assets (images, icons, sections)
│
├── static/ # Static files served directly (bypasses Hugo processing)
│ ├── images/ # Photos, logos, project screenshots
│ └── assets/ # Additional static files
│
├── themes/hugo-noir/ # Hugo Noir theme (installed as a submodule)
│
├── config.yaml # Main Hugo site configuration (menus, params, SEO, baseURL)
├── package.json # Node package config (for icons, optional tooling)
├── package-lock.json # Node dependency lockfile
├── .gitignore # Ignored files and folders
└── .DS_Store # macOS metadata (ignored in Git)
- Hugo Extended version 0.92.0 or newer
- Git for version control
- Go 1.18+ (for Hugo)
-
Clone the repository
git clone https://github.com/yourusername/personal-portfolio.git cd personal-portfolio -
Initialize and update submodules
git submodule update --init --recursive
-
Install Hugo (if not already installed)
# macOS with Homebrew brew install hugo # Or download from https://gohugo.io/installation/
-
Run the development server
hugo server -D
-
Open your browser Navigate to
http://localhost:1313
The main configuration file contains:
- Site metadata (title, description, base URL)
- Theme settings
- Menu configuration
- Build parameters
Create new .md files in the content/ directory:
---
title: "Page Title"
date: 2023-03-15T10:30:00+05:30
draft: false
layout: "default"
description: "Page description for SEO"
---Edit data/en/experience.toml to update professional experience:
[[experience]]
company = "Company Name"
role = "Job Title"
period = "Start Date - End Date"
description = "Role description"
responsibilities = [
"Responsibility 1",
"Responsibility 2"
]Edit data/en/projects.toml to showcase projects:
[[projects]]
title = "Project Name"
description = "Project description"
tech = "Technology stack"
image = "/images/projects/project.png"
link = "https://github.com/username/project"The Hugo Noir theme has been customized with:
- Custom color schemes
- Enhanced typography
- Improved mobile navigation
- Local time display
- Tech stack carousel animations
Create assets/css/custom.css for additional styling:
/* Your custom CSS here */
.custom-class {
/* Custom styles */
}To override theme layouts, copy files from themes/hugo-noir/layouts/ to your site's layouts/ directory and modify them.
- Provide clear project descriptions
- List all technologies used
- Include links to live demos and source code
- Add high-quality project images
- Focus on achievements and impact
- Use action verbs and specific metrics
- Include relevant technologies and tools
- Keep descriptions concise but informative
The repository includes a deployment script (scripts/deploy.sh) that:
- Syncs the built site to a remote server
- Creates timestamped releases
- Updates the live site atomically
- Maintains deployment history
- Build the site:
hugo - Upload the
public/directory to your web server - Configure your web server to serve the static files
# Start development server with live reload
hugo server -D
# Build for production
hugo
# Build with specific environment
hugo --environment production# Add Go modules
go mod tidy
go mod download- Hugo Documentation - Official Hugo docs
- Hugo Noir Theme - Theme documentation
- Tailwind CSS - CSS framework docs
- My Tech Blog - Technical articles and tutorials
While this is a personal portfolio, I welcome:
- Bug reports and feature suggestions
- Documentation improvements
- Performance optimizations
- Accessibility enhancements
This project is licensed under the MIT License - see the LICENSE file for details.
- Pranam Shetty - Creator of the Hugo Noir theme
- Hugo Team - For the amazing static site generator
- Tailwind CSS - For the utility-first CSS framework
Built with ❤️ using Hugo and the Hugo Noir theme