Portfolio

Dynamic showcase of my evolving journey as a front-end engineer. Here, you'll find a curated collection of my projects and a glimpse into my ever-expanding technical repertoire.

Next.js
React
TypeScript
JavaScript
TailwindCSS
HTML
CSS
Jest
Cypress

Current Portfolio Homepage

Current Portfolio Homepage


Versions

Static HTML

My interest in web development was sparked by the initial version of this website which was created whilst I was studying at university, but was never made public. It started off as a simple static site using HTML, Sass, and Bootstrap. Then as I gained further knowledge during my studies, components were replaced with Materialize CSS.

PHP

The next iteration of the website was reconstructed with PHP to aid maintainability, promote code reuse, and to further my knowledge with PHP. This allowed the creation of various reusable components such as pagination, navigation bar, footer, and skill progress bars.

GitHub Repository

Create React App, JavaScript, Materialize

Migration of the website to React in marked the start of my React journey. The site was built with create-react-app and effort was taken to replicate most of the previous functionality and styling. Materialize was retained for UI components with the help of vanilla CSS and CSS-in-JS.

GitHub Repository

Create React App, TypeScript, TailwindCSS

In January 2022, another major update was undertaken to replace Materialize with TailwindCSS which has now become my personal favourite CSS framework for web development. During this period, considerable effort and research was taken to improve and understand responsiveness, page speed, SEO, accessibility, and best practices.

Next.js, TypeScript, TailwindCSS

In November 2022, the latest major update to the website replaced the create-react-app framework with Next.js as well as switching deployment hosts from Heroku to Vercel. This update included many updates to security headers, project structure, path aliases, and images.

GitHub Repository


Screenshots

Portfolio project page version 1
Portfolio project page version 1
Portfolio about page version 1
Portfolio about page version 1
Portfolio project page version 2
Portfolio project page version 2
Portfolio project page version 3
Portfolio project page version 3
Current Portfolio Homepage
Current Portfolio Homepage
Current Portfolio About Page
Current Portfolio About Page
Current Portfolio Projects Page
Current Portfolio Projects Page
Current Portfolio Project Showcase
Current Portfolio Project Showcase