New website
For years, I’ve been using Hugo as my go-to static site generator. It’s fast, flexible, and makes maintaining a website incredibly easy. However, as my needs evolved, I wanted a cleaner, more accessible, and SEO-friendly setup. That’s why I decided to rebuild my website - still using Hugo, but this time with TailwindCSS and improved accessibility features.
Why TailwindCSS?
Previously, my Hugo theme relied on traditional CSS and some custom styling, which worked fine but became difficult to scale and maintain. With TailwindCSS, I now get:
- A utility-first approach – Faster development with reusable styles
- Better responsiveness – Simple, flexible grid and flexbox utilities
- Dark mode support – Built-in classes for theme switching
- Optimized performance – Only necessary styles are included, thanks to PurgeCSS integration
Enhancing Accessibility (a11y)
One of my main goals was to ensure that my website is usable for everyone. This meant improving:
- ARIA landmarks – To help assistive technologies navigate the content more efficiently
- Better contrast and focus states – Ensuring elements are visible and usable
- Keyboard navigation – Making sure all interactive elements work smoothly
- Semantic HTML – Using the right elements for structure and meaning
SEO & Meta Improvements
A website isn’t just about looks; it also needs to be discoverable. I optimized my Hugo setup by:
- Adding dynamic meta tags for social media previews
- Structuring Open Graph (OG) and Twitter Card metadata
- Improving page speed by optimizing images and scripts
- Including canonical URLs to avoid duplicate content issues
Final Thoughts
By combining Hugo + TailwindCSS, I now have a lightweight, fast, and accessible website that is easier to maintain. The new design reflects my focus on performance, usability, and modern web standards.
The source code is, as always, available on GitHub. Let me know what you think! 🚀