← All Notes

👋 Hello World, Once Again

Ooops, I did it again. This is my 6th personal website revamp in the last 4 years because I just can't seem to make a commitment and stick to it long term 🙈

Why make a new one?

My last site was a Jekyll site that held aging college projects. I now want to build a platform where I can document my journey in the product and tech industry as it unfolds. But here's the big takeaway from all these years of building stuff: if something takes too much effort to maintain, I'm very unlikely to keep up with it for too long.

I really don't want to go through the cycle of creating a properly formatted markdown file → adding metadata/front matter to it → pushing it to a Github branch, every single time I want to publish something.

Hypothesis: If I minimize the friction between me writing in Notion and publishing it online, I'll end up writing a lot more and build the habit this way.

Okay, but how?

Since I was already writing stuff in Notion and it practically ran on the web, I decided to try automating as much of my publishing process as I could, and take away all my excuses once and for all.

And what better way to learn the basics of React, dive deep into all the sweet animation stuff I've been wanting to build for so long, and a neat, hire-worthy portfolio while I'm at it. Time to build.

A scalable website that is light on design but painless to maintain. One that will grow right alongside me as I navigate my career.

What you're currently looking at, is my progress so far. A super simple blog made with Gatsby NextJS, that's almost entirely managed from within Notion. While it's far from complete, here's some of my wins so far that I'm very proud of:

  1. Built a strong foundational understanding of React (came in with zero experience)
  1. Data handling and web automation aren't as intimidating as they were before
  1. Implemented a truly 'fluid' responsive type-scale that more closely aligns with my vision of how the web should be built
  1. Live-streamed a majority of the process and planning on Youtube, worked great for public accountability, kept me on track and built confidence!

Tech nitty-gritties

The entire project is open sourced on my Github and you're welcome to clone/fork your own to use as you wish. No need for attribution, but will be appreciated 🙂. Here's a quick rundown of the tech I've worked with so far:

  1. Started with Gatsby as I wanted a static site but because Notion integration and page-generation happened at each build, it was painfully slow to work with.
  1. I used a pre-existing Gatsby-Notion plugin, but wrote my own renderer because I couldn't find any that were up to par on semantics or styles. The plugin was very limited in how you could structure your data in Notion itself. Not ideal.
  1. Migrated the whole project to NextJS, didn't take as long as I'd thought and used a different, more flexible API endpoint, notion-api-worker, to fetch data from Notion and was able to structure my entire site's IA from there itself.
  1. Next handles SSG a little differently. Your project isn't 'static' until you 'export' it. Thankfully, it means no more long wait times for dev builds. I've been really spoilt over the years by Jekyll.
  1. gatsby-image was too damn good, the new next/image is not there yet in terms of features or functionality, but hopefully it'll get there soon.
  1. Trying to use Framer Motion for animations as much as possible because it's performant with React but I can't choreograph animations, nor can I manipulation any JS-level values, the same way I could with Anime.js or GSAP. Bummer 😢

As you can tell, I'm using this entire project as an excuse to explore a bunch of new technologies and frameworks, but whether this adventure will prove or disprove my original hypothesis still remains to be seen. I've got a good feeling about this 😁

Features I'm still working on:

About Page
Now Page
Playground Page (in design phase)
Custom Page transitions
Case Study Folio (writing my first one!)
Dedicated Blog Posts Page
Tags/Categories for Posts
Shenanigans, Animations (i've got some ideas)

Thanks for reading!