Finally having a space

It’s been quite the challenge moving away from mock-ups and pdfs to coding something that I’m actually proud of. Not having written code in more than a year, I knew I had my work cut out for me.

I used to have a static site but I wanted to start actually writing and sharing the stuff that I collect (bookmarks, articles → general stuff that I find interesting) with friends, colleagues and the world.

I already have them in my Notion space but it's not built for sharing.

The plan

I have a vision in my mind in what direction I want to go with and I knew that it would take me more than a week (or even a month) to execute it, so I started writing down a list of what that vision entails.

I jot down and collected every idea that resonated with me and soon found myself with a huge list goodies. I quickly realised I won’t be able to have it all for the initial launch, so I took a page from the Product Manager's book:

Cut scope

I revised and revised and came to a v1 list I was happy with. With a clear plan on what I want to achieve, the next challenge to figure out was...

The style

The number one thing I knew for the site is — I want it to look like an application. Things that inspire me are native iOS and Android applications as well as similar websites like the ones of Brian Lovin ↗, Rauno Freiberg ↗ and Paul Stamatiou ↗.

The technology part

I’ll maybe have a more in-depth part on this section but I’m not a good source of credibility on the matter.

The stack I chose is:

• Next JS ↗
• Styled components ↗
• MDX ↗
• Framer motion ↗

Next JS

Since moving away from writing vanilla HTML, React has been my flavour of choice. I have some other sites built in Gatsby but Next JS just kinda clicked for me in the past year.

Styled components

I’ve been using them since they first came out. Moving away from SASS was not an easy choice since there is nothing wrong with it. I saw styled components, gave it a try and I just never stopped.

MDX

This was the hardest part to figure out how to actually make it work. It took me several long nights and weekends to get there but now whenever I want to bring in some cool components inside my Markdown files, I can.

Framer motion

I hadn’t touched anything other than simple css transforms in a while. Previously, when I was still developing Twitch alerts and overlays, I used GreenSock (GSAP) ↗ extensively but I’ve always found it difficult to work with it in React. To be honest, I’m not sure about Framer motion as well. It hasn't clicked with me yey but it’s stil much easier to manipulate UI elements than GSAP.

The future

I plan on crossing off a lot of the things in my list for this site and expanding on it. If that's something that interests you, make sure to follow on Twitter ↗ where I'll be posting more.