DEV Community

Cover image for Introducing my new personal site, a static SPA built without a framework 🚀

Introducing my new personal site, a static SPA built without a framework 🚀

Ben Holmes
GA Tech grad and full stack web dev all about good design, good music, and good code
Originally published at Updated on ・2 min read

Visit the site to boost my SEO ✨

Check out the repo to see how I tackled this challenge 👨‍💻

After months of over-engineering and nitpicky designing, I'm excited (and relieved) to show off this baby to the world 😁

This was a much more difficult undertaking than it may seem, or even needed to be. Rather than using a sexy static site generator like Hugo or Gatsby, I challenged myself to pull off...

Static page generation for quick page loads

Client-side routing for that single page app (SPA) feel

Progressive enhancement so the entire site still works without JS enabled

Page transitions for added spice

... all without frameworks or component libraries.

I still leaned on a couple libraries like SCSS and Pug templating to make my life a little easier. But in the end, it's just a bunch of vanilla JS, a build script, and some probably bad practices keeping this thing together.

So why did you kill yourself reinventing the wheel?

Well, to be honest, I was tired of sitting on the shoulders of giants to build feature-rich, hyper-optimized websites. It's so easy to get lost in the docs of your favorite framework that you forget all the fundamentals actually tying everything together. Plus, it was nice to tackle all of these problems on my own, since now I don't have to check back on someone else's framework in a year to see what breaking changes I need to fix!

I also had that naive thought of "how hard can it be?" that I just couldn't shake. Answer: extremely hard. Please don't try this at home unless you have some time and a healthy dose of insanity on your hands 😬

Needless to say, this was an absolutely incredible learning experience on how all of these concepts actually work under the hood. And now, I'm ready to share all my learnings with you. I just posted my first major takeaway from this experiment which you can find below. More entries soon to come!

Discussion (3)

seemcat profile image
Maricris Bonzo

COOLIO! Btw, do you mind sharing the code for that step-by-step widget of links at the end of your article?

sharadcodes profile image
Sharad Raj (He/Him)

Looks great

bpedroza profile image

Awesome! I love it. Great work. The portfolio randomizer section is really neat.