Portfolio Website

You are currently viewing exploring my portfolio website, built using NextJS. NextJS is a hybrid framework which supports traditional Static Site Generation (SSG) but is better known for features like Server Side Rendering (SSR) and Incremetal Static Regeneration (ISR).

Since NextJS is based on React, the capabilites of Client Side Rendering (CSR) with React are also available. However, in practice one should strive to use SSR over CSR because with SSR, content is pre-rendered on the server and served directly to the client. This allows for much better Search Engine Optimization (SEO) and page load speeds.

Of course it is not always possible to pre-render everything on the server, especially dynamic parts of a website. For example, if users are able to toggle between light and dark mode, there's no way the server knows the user's theme preference. Typically, this is accessed from localStorage. In fact, this was a challenge I faced in this project which helped me understand how SSR and CSR often work together. The solution was to wrap the site in a "provider" client-side component (this does not mean the site gets converted to CSR!), and only render UI which depends on the current them once the page has mounted. Doing this introduces a "hydration warning", because the HTML on the server no longer matches the HTML generated on the client - but in this case it is fine (and recommended) to suppress the warning.

I'm also enjoying experimenting with UI libraries like Motion (previously Framer Motion) for animations, and tsParticles for adding some subtle character to websites. Building the Record Collection project and integrating it directly into this portfolio site (didn't make much sense to have it hosted independently for the time being) was also great fun. Enjoy your time here!