I'm a 16 year old HS student - Feedback on my first personal website?

I use Firefox on Linux, for me, nothing is clickable and the "Peter Andringa" is overwriting the Resume headline.

Hm, take a look at the Bootstrap scrollspy for reference, IIRC it updates your url, provided you play nice with its data api? It also gives you a class to light up the dots on the lower left hand corner, but that's nothing you couldn't write yourself.

I also am not a big fan of the color change, scroll as you go site. The colors are especially distracting if you scroll really quickly, because the timing has to catch up and you'll see colors change all at once. Font is a bit hard to read, I had to get really close to the screen to pick up the thin font on green when the page loaded.

The introduction is a little verbose. Combine that with the font, I had a hard time getting invested in it. It's a very cute story, maybe put the part about learning to code in its own section, something people don't have to pay attention to, then what you're up to right now in its' own section?

I'm kind of digging what's going on at the bottom of the page, it's more constructed and has a more consistent color scheme going on - maybe that is something that you could let flow through the rest of the site more?

Great site! I like the minimalist look! Here are a few thoughts:

Since you are going responsive, you may want to look into doing a mobile first design. It is a lot easier to get your content looking good on a small screen and then slowly work your way up to a full screen experience. Going from full screen down to mobile is a lot harder. You will end up with more code, and find yourself fighting your existing styles to get things working on the small screen. Since you are using bootstrap, I'd recommend you use the built in grid system to help with this. (I fought grid systems for years... now, I wouldn't build a site without them.)

Another area I would concentrate on is typography. Choosing matching fonts can be tricky. A good rule of thumb is to pick two fonts that really contrast each other. In your case, the fonts basically look the same. Try picking a serif font for headings and sans-serif for body copy or the other way around. Google "font pairings" for more examples. I'd also bump up the body font size a bit and increase the line height. Aim for no more than 10 words per line for the best readability. (HN doesn't follow this and it is a pain reading long comments!) Again, Bootstrap has great defaults for type. I'd recommend sticking with them at first and then tweaking things as you finalize your layout.

Finally, I'd simplify your effects a bit. Every animation should serve a purpose and enhance the user experience. It is fun to dig in and make things move, but if not done properly, they become a huge turnoff. The hard part is making them feel natural and finely polished. Many times very subtle animations do so much more that large ones. Think "pat on the back" vs. "punch to the face". (Not saying your site is a punch to the face.... just repeating some advice a designer once gave me.) As your skills improve, you can add more complex animations and effects that add value to your site.

Overall you did great for your first site. Digging in and trying new things is the best way to learn. If you ever need assistance with anything, feel free to reach out.

I used node to build other parts of the site - namely the blog, a link shortener, and a few APIs I wrote just for my own other projects.

Thanks! I'll look into that.