The Start

Introduction

This is probably one of my plans to kick start all my goals/aspirations to learn things. There's a lot that I want to learn, especially on the web. I thought creating a website (which is essentially a blog) would be a good first step towards that. I'm buzzing with inspiration seeing all the things that are possible on the web. I want to make those. Starting off working at an agency has really got me curious on the creative side of things and it'd be cool to start getting better at that stuff. This website is really just a way for me to write about everything, and my outlet to show how I can improve. I spent a lot of time thinking about making things, but I'm still realizing that the only way you get really good at things, is to do the thing. A lot. Sounds obvious, but I'm prone to falling in the trap after reading online course descriptions that I'll be really great at whatever that thing is in no time. I fall into that because it sounds nice! It doesn't involve much effort and struggle. Those kinds of dreams are always nice, but they're definitely not gonna get you anywhere. I asked my career developer at work how do you get good at this software thing, and he said "by making a lot of software" and that kind of summarizes how it all goes. You get good at learning a language by immersing yourself all the time, you get good at making software by making a lot of software. Always ends up about putting in the work. This is an attempt to kickstart the work, and showing it to others. Anyway, here's some thoughts about the site.

Tech Used

Coding Challenges

Page Change Animations

I went with Framer Motion because I heard that the API was really simple. It was! ( Primarily, because I took it from somebody's GitHub). The only real hurdle here was the way the Gatsby treats its layout component. It would end up rerendering a new Layout file for each Page component change and so the underline animations for the NavItems would be abruptly cut due to it rendering a new Layout component. The fix was that you had to wrap each page with the layout component as opposed to each page containing the layout.

MDX

Following the tutorial docs, you would end up using Markdown files to generate blog pages. I wanted to add images, and in the future possibly change the default tags to different styled components. The solution for this was MDX. At the time it seemed difficult and I couldn't make the switch from markdown to MDX right away, but there was no secret sauce here. Just have to go through the docs, follow it well, and do a classic debug until these plugins work.

Design Challenges

This was my first time designing a website. I designed everything with Figma, except for the home page. I was coding the design on the fly, and I think it came out pretty well. One of my goals is to be come a better designer and so intentionally recreated the page on Figma, and continued to design the rest of the pages you see on the website. A prototyping tool is much faster than code, and you can see if you don't like things ahead of time. Definitely looking forward to getting better at it.

Conclusion

I've come out of this project with a lot of inspiration. Also business ideas on how to live the Kent C. Dodds life (a lot of inspiration was taken from his website). I'm really pleased that I finished the project, but this should be a small part relative to what I want this to be. I hope the content here is primary, and that I use it as my driving factor to learn new things all the time. I'm excited to get this going!