My Portfolio

Check out my portfolio here.

Design

This is a simple website just to showcase my most recent projects. The main design goal was to make it as quick and responsive to load as possible as well as being responsive on all devices.

One part of this project that I really enjoyed was writing the snippet to fade in projects as you scroll down. Since I tend to use React more than regular JS and HTML to interact with the DOM for more recent projects it was kind of fun to explore some parts of the DOM that I don’t usually touch.

Google’s Lighthouse tool was also particularly helpful in polishing the app at the end. It gave me a lot of great suggestions for improving my initial page load and helped me trim many hundreds of miliseconds off of the load overall, so that was a good learning experience.

Beyond that I was able to make use of one of my favorite CSS features ( :target) to build the video popup modals for the project components. By simply clicking the HTML link to watch the demo it activates the css classes for the modal without needing any JavaScript at all. I wrote a short post about this technique here so give it a read if that sounds interesting to you.

Downloading the Code

The code for it is available on GitHub here as well.