Please excuse the lack of content - this site is still a work in progress! I'm coding it everyday! 😆

matthewhan.com

August 28, 2024

Quick Summary: Welcome to my personal website! This writeup will explain my motivation to code this website, the tech I used, and the rationale behind some of the creative and technical decisions that I made to help bring this website to life.

Why did I originally decide to make this website?

…Because I needed a job.

On April 30th, 2024, in the middle of my paid time off in South Korea, I got laid off from my Product Manager role at Koneksa Health (a health-tech startup). My day went from enjoying delicious Korean BBQ with my girlfriend’s family, to joining a Zoom call with my (former) manager notifying me that: “Effective immediately, you will no longer be an employee with Koneksa Health.”

At that time, I severely underestimated the current state of the job market. I figured that I would land a role in a month or so after returning back home. I decided to not let the bad news ruin the rest of my vacation, and continued eating and sightseeing my way through South Korea with my girlfriend.

I’m writing this on August 24th. It has almost been 4 months since I got laid off, and I still have yet to receive a job offer.

On top of a myriad of other things, I thought that a website may help my application stand out from the competition. I intentionally avoided platforms like Squarespace and Webflow, because I didn’t want to be locked into a specific platform to maintain my website moving forward, and I didn’t want to sign up for yet another subscription.

So, I decided to code it myself, and figure things out along the way.

My goals for this website

I set out to accomplish the following with my website:

Getting Started

Admittedly, it took me a while to figure out where to start. Using React felt like overkill. I learned Vue years ago, but that is pretty similar to React and also overkill. I contemplated just going with vanilla HTML, CSS, and JavaScript, but that felt too barbaric.

By chance, I stumbled onto Hugo, and it looked promising. Hugo supported many of the usecases I had in mind, and its Markdown-based content system reminded me of Obsidian, the note-taking tool that I love using.

So with that, I jumped into Hugo’s documentation and got started on my website.

Early problems

Very quickly, I realized how rusty my front-end development skills were. It also didn’t help that Hugo’s documentation sucks. No, really, I think it sucks. It seems my opinion isn’t really a hot take either, I found similar comments online.

I found myself effectively relearning HTML, CSS, JavaScript, and the intricacies of Hugo. In retrospect, I should have tried to refresh these things individually, rather than get overwhelmed by new concepts like Go templating while not understanding whether to use flex or grid.

Nonetheless, the fact that you’re reading this means that I (somewhat) figured things out. The book Build Websites with Hugo by Brian P. Hogan helped a lot, although it is a bit outdated since Hugo has had some changes since the time the book was published.

The YouTuber Kevin Powell was also extremely helpful in refreshing my understanding of CSS, and what actual good CSS looks like. Both of these resources helped me tremendously.

The Design

Figuring out a design was the hardest part. When I first started, I tried to just freestyle it and make things up on the fly. This didn’t look great, and I eventually scrapped a lot of the initial CSS I coded.

What eventually gave me direction was a LinkedIn post from Duolingo that linked to this blog post from Rive . I have some experience using Lottie for animations, but Rive looked even more interesting (and fun) to me. I knew I wanted to try learning Rive, and to build my site around it.

After going through a bunch of Rive tutorials, the first non-tutorial animation I created was a recreation of Duolingo’s character Falstaff. I learned how to utilize Rive’s “Pointer Move” listener to allow the character’s eyes to follow the user’s mouse pointer. You can play with my animation here on Rive’s community files area.

My next non-tutorial creation was the alligator animation that is currently on my website’s homepage. Do I particularly like alligators? Not really, but for some reason I felt like making one and now it will live on my homepage for the foreseeable future.

With that, I decided to build my design around my Rive animation elements. I wanted to make it fun, with a goal of mine being to incorporate interactivity. All of the animations on this site have some sort of pointer interaction: follow the cursor, react to hover, or do something when clicked.

The Future

This website is nowhere near done, but I’m proud of its initial state. I hope to extend upon the functionality I have here, get even better at Rive, and populate the website with more content as I keep creating and learning about new things.

If you have any constructive feedback, or suggestions, please feel free to navigate to the contact page and reach out to me! Better yet, if you want to hire me, that would be even better (can you tell I need a job)?