Building My Site, Part 1

09-14-2023

It took me a long time to get around to building my own website in React. It's a pretty daunting task, building a site from the ground up, especially since previously I'd only ever worked in existing React codebases. But I got laid off earlier this year, and that was a pretty good sign that it was time to make something that would both challenge me and prove my skills. And boy, has this project been both so far!

I started working on this site as part of my Meta React Certification course, and as is usually the case with me, I went a little overboard. But frankly, I just couldn't help myself! I used to have a site through Squarespace and I found it frustrating how limited I was in my ability to create cool webpages. So when I started this project, I knew I was going to go all-out.

The Design

Because I'm an artist just as much as I am a web developer, I wanted my site to have a strong design that speaks to my personal sense of style. I've always loved foxes (I know, me and everyone else), so I wanted one to feature on my site. I used Clip Studio Paint to draft up some concept art, then got to creating the bones of my site!

I'm not doing anything particularly crazy with the basic setup of my site at this point - it's all HTML, CSS, and React, with a few other libraries sprinkled in here and there. I'm a big fan of the styled-components library, which I learned to use at my first job writing React code, but aside from that I've been trying to keep things "pure" and code them all on my own with as little external help as necessary.

Once I had the basic HTML and CSS structure down, I used Inkscape to create the .svg files for my background trees and the fox on the main page. I spent a long time fiddling with the CSS for the trees to make sure they would look nice at many different aspect ratios, and I used a little Javascript to "glue" the fox to the same approximate place on the tree where he's sleeping. And that's about all there is to talk about with the basic structure of my site!

There's still a lot I'm looking forward to building, like incorporating animation into my pages, and building a custom static CMS using MDX, but those are for another post. Thanks for reading!