Hi everyone,
I wanted to share my personal site/technical blog, built with Hugo and hosted on GitHub Pages:
Live site: https://farokhpakbaz.github.io
Source: GitHub - farokhpakbaz/farokhpakbaz.github.io: Personal engineering portfolio and technical blog built with Hugo, exploring DevOps, Linux, infrastructure, software, and interactive web experiments. · GitHub
I’m a DevOps / systems engineer, so I wanted the site to feel closer to an engineering console than a conventional portfolio template. The visual direction is partly inspired by the focused atmosphere of musicForProgramming, but the layouts, interaction system, and site components are custom.
There is no frontend framework or pre-built Hugo theme behind it. Hugo handles the content and static generation, while the interactive parts are implemented with HTML, CSS, and JavaScript.
Some of the things I experimented with:
-
Responsive, terminal-inspired interface with section-aware navigation and keyboard-friendly controls
-
Persistent light/dark theme
-
Reading progress and article outline for longer technical notes
-
Focus Radio, with the episode list refreshed from an external RSS feed during Hugo builds
-
A fully local Frequency Lab using the Web Audio API, with binaural/stereo frequency modes and several sound profiles
-
A configurable Matrix/WebGL mode
-
Ambient mode keeps the actual website usable underneath the animation
-
Immersive mode turns it into a full-screen Matrix experience
-
animation speed, trails, glyph size, colors, bloom, brightness, quality, scanlines, etc. can be adjusted
-
reduced-motion preferences are respected
-
-
An installable PWA called “Systems & Signals”
-
provides a separate workspace for Matrix, Focus Radio, and Frequency Lab
-
Matrix and locally generated audio work offline
-
direct PWA shortcuts are available for the individual modes
-
-
Browser-local persistence for UI and audio preferences
-
Automated deployment through GitHub Actions
-
Hugo currently builds the site with Hugo Extended 0.165.0
-
A scheduled GitHub Actions build refreshes the music feed daily
One design goal was to keep the normal portfolio/blog experience fast and understandable even though some fairly unusual interactive features are available. The audio and Matrix features are therefore optional rather than something visitors are forced to load.
The homepage itself is focused on my engineering background—Linux, Kubernetes, automation, CI/CD, platform engineering, databases, and observability—while the Notes section is where I plan to publish more technical material.
The entire source is public, so feel free to inspect or borrow ideas from it.
I’d particularly appreciate feedback from the Hugo community on:
-
the overall design and navigation
-
how well the interactive features fit with a static Hugo site
-
accessibility / reduced-motion behavior
-
the separation between the normal site and PWA workspace
-
Hugo structure or templating improvements you notice in the repository
-
anything that feels unnecessarily complicated or could be implemented more idiomatically with Hugo
Hugo has been a very nice fit for this project because I can keep the content and core site completely static while still experimenting quite heavily on the browser side.
Thanks for taking a look — feedback, criticism, and Hugo-specific suggestions are very welcome.
