Overview & Impact
This project is a high-performance, custom-engineered Static Site Generator (SSG) built to power a professional Cyber Security portfolio. By eschewing heavy modern frameworks like NextJS in favor of a vanilla JavaScript architecture, the engine ensures maximum performance, and zero client-side bloat.
Additionally, this website acts as an active knowledge base, summarising:
- Professional Resume: Acts as a central hub for professional history, technical skills, and certifications, designed with a dark-theme aesthetic tailored to offensive security culture.
- Project Writeups: Detailed summaries and documentation of technical development projects.
- CTF Walkthroughs: An active repository of step-by-step Capture The Flag (CTF) solutions, and lab reports.
The performance-first, open-source approach has achieved the following metrics:
- Lighthouse Preformance: 100%
- GitHub Stars: 1
Architecture & Features
The core of the SSG is a NodeJS-based build pipeline that transforms raw JSON data into semantic, SEO-optimized HTML.
Custom Block Parser: Features a specialised blockParser.js that routes content blocks (headings, codeblocks, tables, etc.) to specific HTML renderers.Dynamic Metadata & Statistics: Includes a fetchStats.js utility that integrates with the GitHub and NPM APIs. This allows the SSG to inject real-time 'live stats' (like stars or download counts) into static pages during the build process using a placeholder replacement system.JSON-Driven Content Pipeline: Utilises a structured data approach where writeups and projects are stored as JSON objects, allowing for programmatic sorting, filtering, and consistent rendering across the site.
Key Features
Zero Client-Side Bloat: Delivers pure HTML and CSS with no massive hydration bundles, ensuring the fastest possible load times for technical readers.Automated Portfolio Routing: Automatically generates an overview grid for both projects and writeups, featuring dynamic filtering by platform (e.g., SUCSS, TryHackMe) and difficulty level.Security-First Design: Adopts a dark-theme aesthetic tailored to offensive security culture, with logic that sanitizes and escapes HTML to prevent XSS.
Project Structure
├── src/
│ ├── content/ # Project writeups, CTF walkthroughs, and JSON data
│ ├── templates/ # HTML logic for the custom SSG
│ └── assets/ # CSS (Dark Theme), JS, and Images
├── public/ # Compiled output (ignored by Git)
└── .github/ # CI/CD and Community files
Repository & Links
The compiled static site is hosted entirely through Google's Firebase Hosting for speed and reliability, and the custom SSG source code is openly available.
Live Website: https://www.liamskinner.co.uk
GitHub Repository: https://github.com/ThatsLiamS/my-site