React Portfolio

My first portfolio site, created in ReactJS/NextJS utilising Typescript, TailwindCSS and Firebase.
Created in June 2023, my Portfolio project was intended to present my skills and experience to employers to assist in me attaining my first Graduate/Junior role.
Produced using ReactJS, utilising Typescript, TailwindCSS & SCSS styling collecting data from a Firebase Cloud Firestore Database using a REST API structure. This project was designed to show off my skills, mainly focussed around my most recent fascination React and React Native Development. This site enabled me to show off key aspects of development that employers are looking for.
;
;

Implementing "design first", so I didn't run into the coding of the project. I started off with designing most of the details of the site. Understanding that the design would change and have to adapt to limitations and pitfalls of the tech stack during development.

As was a personal project I didn't put huge amounts of work into the Figma design, only enough to have a good idea of what I was aiming for. As I was not presenting this design to a wider team I didn't need to make it look "neat" or professional as I would not need to explain this design to someone else to take forward. This enabled me to get a MVP off the ground very quickly. As you can see, the site has changed loads since this initial design. With many of the features I have yet to add in still on the design. There are also many parts of this design that were modified due to requests and feedback on my Portfolio site. One such change was adding a Github link to see the source code of my project on the site to help people find it and critique it.

This project used Typescript, TSX, SCSS and TailwindCSS for the main codebase. With some JavaScript being used to create the API and link to the Firebase Cloud Firestore endpoints.
I had not used Typescript in a project before this, but I have been informed a few times by others in the tech industry that Typescript is preferred in industry as it is type checked at compilation. This doesn't prevent all errors, but it does ensure that most errors, the ones I was most likely to make as a Graduate/Junior developer, were caught before deployment. It also added a feature uncommon in other programming languages I have learnt, type checking. This enabled me to have a safety net with the code I was producing, ensuring I account for undefined values.
The TSX is used just like JSX and in ReactJS, enables HTML tags to be combined with inline JavaScript to dynamically alter the Virtual DOM and change the website's content or structure.
The SCSS and TailwindCSS were used together to enable all the styling and changes between a mobile and computer/laptop screen for viewing the site using media tags. The TailwindCSS enabled very quick and inline CSS modifications that could get the just of what I wanted the site to look like. Using SCSS to complement and further refine these initial styles.
;
;

This project has four main folders:

A components folder, containing all the folders and .tsx files related to components on each of the pages of the site. 

A pages folder, containing the .tsx files related to each of the page roots and accessible pages, utilising dynamic rooting. This also included an api folder which included the .js file to access firebase. 

A public folder, initially used to hold the images and pdf files for the site.

And a styles folder, containing all the CSS and SCSS files for the site.

This project used Github and Kanban boards to enforce a from of agile development. This enabled me to show off not just my awareness of this system, but to show off what I think is a strong and suitable use of the method. This enabled me to add Complications and Todo tickets and to keep track on what I had developed and what was next to add/develop. Using Github enabled me to work on parts of the project independently on separate branches. It also enabled integration with Vercel to deploy the project using a production branch.

;
;
I have encountered many issues during this project. Enabling the site to look good on Mobile devices and deploying to Vercel and an accessable domain to name a few. But I have overcome these challenges. I have percervered throught this project and I will continue to do so throught my carear, I have learnt about spread operators, the media tags and how to develop in Typescript. All skills I aim to take forward and use in later projects and hopefully in my job.
Now this project is far from over, as you can probably tell from the design I will be adding bit and peices onto this site for a while. Acting on the feedback I get to improve the impact of my Portfolio.

Redundant 

 

June 5th 2023 - December 2023