Project built using React. Serves frontend functionality of my personal portfolio.
It is a (mostly) single page application, although also shows detailed project writeups where a writeup exists dynamically via react-routing.
I wanted to put restrictions on myself. It is tempting as a junior developer to try to incorporate technology without being taken to task to justify its inclusion. The point of developing this portfolio was twofold: one, to platform past work that I am proud of; and two, to learn React.
Ultimately, I set about deciding on some restrictions for myself to ensure I could get the project in a ready enough stage to deploy quickly. These included:
- Use Create React App (CRA) since I would be able to find support more easily;
- Standard CSS rather than some CSS extension like SASS, Styled Components, or a CSS framework like Tailwind;
- Javascript rather than Typescript, so to keep my focus on learning React;
- Frontend only (for now);
- Single Page Application (SPA);
- HTML
- CSS
- Javascript
- NodeJS
- React
Deployed using Netlify.
It was important for me to design a system so that components across the site would be styled consistently. I am not an experienced UI designer, so I am sure there is room for improvement in terms of choosing colours, but once I had set some colours I made sure to keep it consistent. This meant deciding primary, secondary, neutral, and utility colours. I also decided primary, secondary, and body fonts.
This design system should allow me to design a dark mode theme more easily, and to update colours easily in the future.
There is room for improvement. It is my plan to refine my portfolio and to keep on adding and tweaking to improve the user experience. However, I also wish to work on other projects and experiment with other technology in parallel, so I am not opposed to the idea of a complete code rewrite at some point in the future.
With that in mind, here are some ideas I have for the future of this project:
- Theme options (e.g., light and dark mode toggle)
- Introduce subtle animations
- Serve data from a backend
For a live list of features I am working on, see my open issues.
To end, what I think worked great was setting about restrictions on the project scope. This allowed me to achieve a balance between acquiring new knowledge and developing greater confidence in my abilities. With the numerous blog posts and videos about "The Great New Framework You Must Try!", it can be easy to miss the forest from the trees.