Hand-Coded React Portfolio

https://github.com/Contrick64/portfolio

This website is all about recursion. It was a hard lesson, but it was well-learned. The site is built on a YAML config file that describes the nested navigation list you see here.

I wrote a function to go through the data recursively, giving everything a unique ID and other tweaks to make it a useful state, then renders it using a recursive component.

The site then uses .MDX files to render each project page, which allows for easy editing without limiting customizability to just vanilla markdown.

Challenges

My biggest challenge was dynamically loading .MDX files into the <Layout> component based on the path. I used React Router to use the path in my component, and then lazy-loaded the corresponding .MDX file.