Revamped Site and Moved to Hugo

I haven’t updated my personal site in years and a lot of my previous blog posts were scattered across numerous services, so I’ve decided to gather them all here. After jumping between different static site generators, I’ve settled on Hugo with a customized Nightfall theme. Nothing revolutionary here - just some fun tweaks and personal touches.

The Fun Stuff I Added

Konami Code Easter Egg

Try pressing ↑↑↓↓←→←→BA on any page (or Ctrl+Shift+T if you’re lazy). You’ll get a retro terminal mode complete with:

• Matrix-style green-on-black theme with glow effects
• CRT scanline overlay for that authentic retro feel
• Typewriter text animations for page titles
• Toast notifications with custom messages
• Console ASCII art when you open developer tools

The implementation uses a state machine in JavaScript and toggles a retro-mode class. All the styling lives in a separate SCSS file with CSS animations for the scanlines and glow effects.

Custom 404 Page

The 404 page is styled as a terminal session gone wrong:

• Shows the attempted path in a simulated ls command
• Includes bash-style command outputs (like whoami returning “lost_user”)
• Professional “system diagnostics” section with error analysis
• Animated glitch effect on the error text
• Quick navigation buttons to get back on track

ASCII Art in Page Source

View the page source and you’ll find ASCII art headers with build metadata. It supports custom ASCII art via Hugo params and includes easter eggs in the comments. Small detail, but it makes me smile.

Language Switcher with Flags

Built a proper language switcher that:

• Shows flag icons (SVG, not emoji for consistency)
• Preserves the current page when switching languages
• Highlights the active language
• Works with Hugo’s built-in i18n system

Big thanks to flag-icons for the beautiful SVG flags!

Series Navigation

For connected blog posts, I added a series navigation partial that:

• Shows all posts in the same series
• Highlights the current post with a “(current)” label
• Styled with the theme color for consistency

Terminal-style Animations

The homepage greeting has a blinking cursor effect, and the navigation shows an active page indicator. Small touches, but they add personality.

Enhanced Typography System

Instead of just using the theme defaults, I implemented a complete typography system:

• Variable font weights (200-900) using Source Sans 3
• Separate font stacks for different languages with proper fallbacks
• Global font smoothing for better rendering
• Custom heading hierarchy with visual markers for h2/h3

Technical Notes

CSP Headers Need Work

The Content Security Policy is pretty basic right now - had to allow inline scripts for the comment system:

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self' 'unsafe-inline' https://cusdis.com"
/>

Using 'unsafe-inline' isn’t great for security. Should probably fix that at some point.

Some Useful Patterns

The navigation active states needed a bit of JavaScript for multilingual paths. Nothing fancy - just checks the current URL and adds a class.

CSS custom properties made the Japanese font stack reusable:

[lang="ja"] {
  --ja-font-stack: "M PLUS Rounded 1c", "M PLUS 1p", "Noto Sans JP", sans-serif;

  header,
  nav,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--ja-font-stack) !important;
  }
}

Hugo’s built-in SCSS compilation just works - no webpack configs or build tool drama.

For Japanese content, a few quirks:

• removePathAccents only works for Latin characters
• You need explicit slugs for CJK URLs
• Different fonts need different line-height adjustments
• Font weight 300 in Japanese looks very different from English

The :has() selector came in handy for the post navigation alignment - no JavaScript needed for that.

The Setup

Pretty standard CI/CD pipeline:

1. GitHub - Source control with branch protection rules
2. GitHub Actions - Builds Hugo assets and runs checks on every PR
3. Netlify - Deploys from the main branch after all checks pass

This way, nothing breaks when the blog is published to production.

What’s Next?

Just small improvements:

• More easter eggs (they’re fun to build)
• Dark/light mode toggle
• Fix those CSP headers properly
• Maybe some WebGL experiments

The theme modifications are open source if you want to use them. Cheers!