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!
Top comments (3)
Wow great job, looks amaze. I'm also about to finally build my updated portfolio and after months of overthinking, this is exactly what I needed to read. Might do a generator just cuz I need it up like, now. Anyway thanks for the inspo!
COOLIO! Btw, do you mind sharing the code for that step-by-step widget of links at the end of your article?
Looks great