Personal Website

A Hugo-based personal website with Refined Technical Minimalism design philosophy.

Development Commands

Core Development

# Development server (with drafts)
npm run dev
# or: hugo server

# Production build
npm run build
# or: hugo --minify --gc

# Preview with drafts and future content
npm run preview

# Development with example site
npm run dev:example

Theme Development

# Update theme modules
npm run update-modules

# Project setup
npm run project-setup

# Theme setup
npm run theme-setup

GitHub Pages Deployment

This website is configured for automatic deployment to GitHub Pages via GitHub Actions.

Prerequisites

• GitHub repository configured
• GitHub Pages enabled in repository settings

Deployment Process

1. Push changes to the main branch
2. GitHub Actions will automatically build and deploy the site
3. The site will be available at: https://claude-code.github.io/personal-website

Manual Deployment

# Build the site
npm run build

# Deploy to GitHub Pages (requires GitHub token)
npm run deploy

Project Structure

├── content/                    # Website content (Markdown)
├── themes/kross/             # Hugo theme with assets
│   ├── assets/scss/          # SCSS stylesheets
│   ├── assets/js/            # JavaScript files
│   └── assets/plugins/       # Third-party libraries
├── config/                   # Hugo configuration
├── assets/                   # Custom assets
│   ├── scss/                 # Custom SCSS overrides
│   └── js/                   # Custom JavaScript
├── .github/workflows/        # GitHub Actions workflows
└── package.json              # Node.js scripts and dependencies

Design Philosophy

• Refined Technical Minimalism: Clean, professional design
• Dark theme with single accent color: Distinctive visual identity
• Hybrid typography: Sans-serif (headings/body) + Monospace (code/highlights)
• Performance-first: Optimized for fast loading and accessibility
• Content-driven: Focus on technical identity and analytical depth

Configuration

Hugo Configuration

• baseURL: https://claude-code.github.io/personal-website
• theme: kross-hugo
• output formats: HTML, RSS, WebAppManifest
• caching: Optimized for development and production

GitHub Actions

• Trigger: Push to main branch
• Build: Latest Hugo version with minification and garbage collection
• Deployment: Peaceiris Actions for GitHub Pages
• Caching: Optimized for build performance

Content Strategy

Current Sections

• Home
• About
• Portfolio
• Skills
• Contact

Planned Future Sections

• Blog
• Publications
• Experiments

All content follows a Markdown-based structure for easy maintenance and version control.

Theme Information

This website uses the Kross Hugo theme, a modern, responsive Hugo theme designed for technical and professional websites.

Theme Features

• Dark/light theme support
• Responsive design
• Built-in animations
• SEO optimization
• Social media integration
• Contact forms
• Portfolio layouts

Customization

Theme customizations can be made in:

• assets/scss/ - SCSS overrides
• assets/js/ - JavaScript additions
• config/_default/ - Hugo configuration

Development Workflow

1. Content Updates: Edit Markdown files in content/
2. Preview: Use npm run dev for live reload
3. Build: Use npm run build for production
4. Deploy: Changes to main branch trigger automatic deployment

Performance & Optimization

• Hugo Minification: Enabled for production builds
• Garbage Collection: Enabled to remove unused files
• Caching: Optimized for images and assets
• Static Assets: Properly configured for CDN delivery

License

ISC License - See LICENSE file for details

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test locally with npm run dev
5. Submit a pull request

Support

For issues and questions:

• Check the project documentation
• Review the Hugo theme documentation
• Open an issue on the GitHub repository