Personal Webpage


● Live

The Project itself

This site is itself a project — a hand-built, no-framework portfolio designed as a living demonstration of my frontend skills and a platform that grows alongside my career as a software developer.

What I Built & Why

Rather than using a template or site builder, I built this portfolio from scratch to develop a genuine understanding of how the web works. The goal was to create a professional digital CV that showcases both my work and my ability to build clean, accessible, responsive interfaces without relying on any third-party frameworks.

Starting from pure HTML and CSS, I progressively enhanced the site as my skills grew — adding JavaScript for mobile responsiveness, improving layout, and continuing to refine it as an ongoing exercise in good engineering practice.

Key Implementation Details

  • Fully responsive layout using CSS media queries and a custom mobile hamburger menu built in vanilla JavaScript — no libraries or frameworks
  • Multi-page architecture with shared navigation, consistent breadcrumb trails, and a modular CSS structure split across purpose-specific stylesheets
  • Hosted on GitHub Pages with CI/CD via GitHub Actions — every push to main automatically deploys
  • Semantic HTML throughout for accessibility and SEO, with appropriate meta tags on every page
  • Lightweight by design — no build tooling, no bundlers, no unnecessary dependencies

What I Learned

HTML & CSS Fundamentals

Deeply understood the box model, specificity, positioning, and how to structure semantic, accessible markup.

Responsive Design

Built mobile-first layouts from scratch using media queries, without relying on utility frameworks like Bootstrap.

JavaScript DOM

Implemented interactive UI components (mobile nav, dynamic menus) through direct DOM manipulation.

Git & CI/CD

Managed version control with Git and configured automated deployment via GitHub Actions and GitHub Pages.

Tech Stack

  • HTML5
  • CSS3
  • JavaScript (ES6)
  • GitHub Pages
  • GitHub Actions

Development Timeline

  • Foundation - Built initial site structure with HTML and CSS; homepage, navigation, and core layout established.
  • Mobile Support - Introduced JavaScript for the hamburger menu and responsive behaviour across all screen sizes.
  • Content Expansion - Added Projects, Employment, Skills, and Story pages with consistent design and breadcrumb navigation.
  • Ongoing - Continuously refined as new skills are acquired — this site is a living document of my progress as a developer.

Source Code

View on GitHub