Project Overview
- Tested, built, and maintained a mobile-responsive website using React, TypeScript, Tailwind CSS, Jest, and React Testing Library, to effectively highlight my personal and professional accomplishments as a software developer.
Project Challenges
In early 2023, I constructed a basic landing page using React. Upon updating my portfolio in 2024, I identified and rectified several flaws in the project and encountered a few challenges while implementing my latest updates.
I encountered an issue when I pasted my project page URL (Eg: /projects/dobsonpartners) directly into the search bar, the page would load with a 404 not found error thrown by Netlify, my hosting provider. Netlify would redirect all pages back to the home page instead of handling routing through my single page application, via an index.html file, using React Router. The solution was to add a _redirects.txt file to my application so that Netlify knows to redirect all routes back to the index.html file, allowing React Router to handle the route correctly.
My initial CSS code was written using CSS modules, which was a bit cumbersome having switch between the .jsx and module.css files every time I had to make a styling change. So, I refactored almost all existing CSS code using Tailwind CSS, making it much easier to manage the styling. Similarly, to enhance type inference and reduce debugging time, I introduced TypeScript to the project.
In 2024, as my skills list grew, it began to occupy more space on the page. To address this, I implemented a collapsible menu that toggles when clicked. Additionally, I utilized CSS grid to display all items responsively across various resolutions.
In overcoming these challenges, I gained valuable experience in refactoring, troubleshooting, and optimizing my projects. Each obstacle presented an opportunity for growth and learning, ultimately leading to a more polished and efficient portfolio. Moving forward, I am better equipped to tackle similar issues and continue refining my skills as a developer.