Will Borysiak’s Portfolio

Purpose of the Website/App:

To serve as a portfolio for my web development experience.

Technology used

React

NextJS

Tailwind CSS

Contentful

How The Application Works

• The application uses NextJS to render the site and its components.
• Tailwind CSS was used to style the page and apply the dark mode functionality.
• Contentful provides the data for the page such as the project, about and experience sections.

What I Learnt

• First usage of NextJS and its SSG/SSR/CSR functionality.
• Continued development of my React knowledge and my initial usage of global state with useContext / Context API.
• Further usage of Typescript with React including usage of generics and interfaces.
• First implementation of a ‘dark mode’ toggle via the context API and the tailwind dark: selector.
• Creating a parallax background using fixed properties and the z index via CSS.
• Customising the tailwind config to create simple animations used in the background.
• How to host the project on Vercel using continuous deployment and enviromental variables.

What Was The Biggest Challenge

The biggest challenge was getting the parallax background to render correctly. Firstly I had to get the background to stick behind the components and allow them to scroll over it. Secondly I had to make the moving elements of the background fit on all screen size hence the tailwind config having a large number of values. I also ran into some hydration issues with the dark mode and had to use the context api / scripts to iron out all of the issues. Once it was optimised, the background works perfectly and blends into the footer just as I wanted.