Building a High-Performance Developer Portfolio & CMS Architecture
Project Overview To establish a strong digital presence as an IT Service Manager, I built a fast, secure, and easily maintainable personal portfolio website. The objective was to combine technical aesthetics—featuring a dynamic dark mode, interactive terminal UI, and work experience timeline—with a non-technical management interface via a Headless Content Management System (CMS). Key Features & Capabilities
- Dynamic Code Terminal UI: Designed an interactive, syntax-highlighted Hero section using
Typed.jsto showcase core competencies, track record, and technical philosophy. - Work Experience Timeline: Built a visual timeline complete with company tags, role descriptions, and highlighted skill chips (e.g., ITIL, Azure, Cloud Governance).
- Direct CMS Integration: Configured Sveltia CMS via GitHub OAuth to allow real-time editing of site settings, certifications, work experience, and blog posts directly through a web browser.
- Cross-Platform Social Connectivity: Embedded unified social links for LinkedIn, X, Instagram, and Email with vector-based SVG icons for reliable rendering across all browsers.
- Lightweight & High-Performance: Leveraged static site generator (SSG) technology with Hugo to achieve minimal latency, zero server maintenance costs, and optimal SEO performance.
Technical Architecture & Stack
| Component | Technology Used | Description |
|---|---|---|
| Static Site Generator | Hugo (Go-based SSG) | Compiles Markdown and YAML data into static HTML/CSS |
| Hosting & CI/CD | GitHub Pages & Workflows | Automatic build and deployment on git push |
| Content Management | Sveltia CMS | Decoupled Git-based CMS interface using OpenAuthor |
| Data Structure | YAML (data/site.yaml) | Structured datasets for site navigation, experience, and certifications |
| Frontend Utilities | Typed.js, Custom CSS Grid/Flexbox | Custom responsive layouts tailored for desktop and mobile |
Implementation Milestones
- Architecture & Repository Setup: Configured Hugo directory structure, created Git repositories, and configured custom GitHub Pages deployment pipelines.
- Schema & CMS Mapping: Drafted
static/admin/config.ymlto map CMS widgets to YAML data sources, enabling seamless content edits without touch-editing code files. - UI/UX Customization: Designed a dark terminal theme, styled SVG social button components, and implemented an adjustable CSS timeline grid.
- Validation & Optimization: Replaced external third-party CDN assets with inline SVG vector code to overcome browser ad-blocking constraints and ensure reliable icon rendering.