Introduction
The website is built with NextJS, TypeScript, and React and hosted on AWS Amplify, featuring robust testing and linting. The project involved repurposing an old cPanel hosted website with only HTML, CSS, and some JavaScript to a modern, scalable, and reusable website with dynamic features.
Planning and Research
My portfolio website was built with reusability, scalability, and SEO in mind. To optimize browser caching and improve search engine visibility, I decided to generate the site statically using Next.js and YAML files for content management.
To further ensure the code quality and maintainability, I implemented Git flow early on in the project. I created feature branches for each new functionality, then merged them into the master branch after code review and testing.
To make development smoother and faster, I set up a strict linting system and pre-commit hooks to keep the code clean and consistent.
Implementation
After creating a rough mockup of the website's structure and components, I started building the site using Next.js and React. I later migrated the codebase to TypeScript for better type safety and maintainability.
To improve site performance, I implemented dynamic routing for each case study to fetch data from YAML files. This not only optimized browser caching but also helped with SEO by allowing search engines to crawl and index the site's content more efficiently.
I also added Bootstrap to minimize the time spent on custom styling and created a testing backbone to run tests before pushing commits
Go-live
To host the website, I connected it to AWS Amplify and set up continuous deployment from the master branch of the repository. This made updating the site seamless and easy.
Currently, the site is live and running smoothly. However, I am constantly working on improving it, and I am currently in the process of a v3 redesign that will involve even more dynamic features and a modern design.
On going efforts
Currently, I'm not a fan of the styling in the app and will be replacing it with a design system in the future