Portfolio
–
Personal developer site with project write-ups, career background, and contact details. Online since 2016 and updated periodically. Implemented in Next.js and TypeScript.
Homepage with rocket animation
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.
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.
Create React App, TypeScript, Tailwind
In January 2022, another major update was undertaken to replace Materialize with Tailwind 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, Tailwind
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.