Building My Personal Website

A full-stack development project to create a modern, performant personal website and digital portfolio.

The Challenge

I wanted a website that would serve multiple purposes: showcase my portfolio, host my personal blog, and demonstrate my technical skills. The challenge was to build a site that was:

Highly performant with fast loading times
Easy to manage and update via WordPress CMS
Fully responsive across devices
Optimized for SEO
Structured in a maintainable, scalable way for future growth

Additional challenges included:

Integrating a headless WordPress backend with Next.js frontend
Implementing a modular, reusable component system
Ensuring content updates were immediately reflected on the live site
Optimizing images, caching, and code for top performance

The Solution

The project was approached with a modern full-stack workflow:

Frontend: Built with Next.js 15 and React, using TypeScript for type safety and SCSS for a modular design system
Backend: Headless WordPress with GraphQL API, custom post types for projects, skills, hobbies, and blog posts, plus Advanced Custom Fields for structured content
Performance: Next.js Image optimization, dynamic imports, ISR, caching strategies, and bundle optimization for fast loading
Component Architecture: Modular, reusable components for sections, cards, headers, and footers with proper TypeScript interfaces
Deployment: Automated Git deployment via Plesk, PM2 for process management, and scripts for streamlined workflow
SEO & Analytics: Optimized with RankMath and prepared for Google Analytics integration