Overview

This project involves the architecture and development of a centralized digital hub to document my journey in cybersecurity and advanced mathematics. It serves as a professional portfolio and a technical blog, engineered to be lightweight, secure, and easily maintainable.

The site is built using Hugo, a static site generator, ensuring that the content is served as pre-built HTML files, which drastically reduces attack surface areas compared to dynamic CMS solutions like WordPress.

Problem

Standard portfolio templates and dynamic Content Management Systems (CMS) often suffer from “bloat,” slow loading times, and potential security vulnerabilities. As a security researcher and developer, I required a platform that offered total control over the source code, minimal resource usage, and a “docs-as-code” workflow that aligns with technical writing standards.

Solution

The solution was to build a custom static site using the Hugo framework:

  1. Architecture: Adopted a JAMstack approach (JavaScript, APIs, Markup) for decoupling the frontend from the backend.
  2. Performance: Utilized Hugo’s blistering build speeds and optimized assets (minified CSS/JS) to achieve sub-second load times.
  3. Design: Created a responsive, accessible UI with modular components, adhering to modern web standards and SEO best practices.

Technologies

  • Engine: Hugo (Go-based Static Site Generator).
  • Frontend: HTML5, CSS3 (Custom styling), Vanilla JavaScript.
  • Deployment: Netlify (CI/CD pipeline).
  • Content: Markdown (for writing articles and documentation).

Key Features

  • High Performance: Achieved perfect or near-perfect Lighthouse scores (100/100) for Performance and Best Practices.
  • SEO Optimization: Implemented structured data (Schema.org), meta tags, and semantic HTML for superior search engine visibility.
  • Modular Design: Reusable code components for project cards, headers, and footers to ensure maintainability.
  • Accessibility: Designed with WCAG guidelines in mind, ensuring contrast ratios and keyboard navigability.

Results

  • Speed: Site load time reduced to under 1 second on average networks.
  • Security: Zero-vulnerability surface due to static architecture (no database to inject).
  • Organization: Established a clear taxonomy (Tags/Categories) for organizing complex technical topics.