Bella Lee
Back

Personal Website 2023 — UX Design, Learning Process

2 min read • Published on: Jul 1, 2023 • Tags: #featured,#site-documentation,#projects

Process, attributions, and takeaways from designing and developing the 2023 version of my personal website.

Process

Learning GSAP

I created my website from scratch last year to learn React, but I was new to web development, so I didn't know animation frameworks existed. I ended up using CSS animations and Javascript to figure out scroll-triggered animation. Earlier this year, I emailed my favorite web design studio, Antinomy Studio to ask how they do their animations. Their technical director, Baptiste, kindly got back to me and let me know that they work with Nuxt.js and GSAP. I was surprised (and very touched) that I got a reply, and promptly looked into their tools of trade. Since my priority was designing cool animations, I decided to learn GSAP first, hence this website rebuild.

I learned GSAP by making this atrocity!

gif of my first GSAP attempt

Since I had experience with animation timelines and keyframes from fiddling with CSS last year, the framework was intuitive and easy to pick up. I was relieved that GSAP has pretty clear documentation and examples on its website and learned the importance of clear, concise technical writing.

At first, it was challenging to figure out how to get animations to work with React's useEffect hook. The solution provided in the docs did not work for me, so I had to comb through the forums to mix and match other solutions. I also added infinite scrolling to my blog using ScrollTrigger.

The Blog

I found that the features from the simple tutorial I followed weren't sophisticated enough for my liking. I took a look at the Next.js blog starter template, as well as this template, and found them much more elegant. I found this tutorial that showed me how to use frontmatter just the way I wanted to. However, I don't know Typescript yet (it's on my to-do list), so I had to figure out how to identify key elements and replicate them in Javascript. I learned a lot about how Next.js works and how to use API calls, getStaticProps, and getStaticPaths.

Conclusion

My code is way cleaner than last year's iteration, but I aim to do even better next time. I won't stop until my code is clean, concise, and an organization-freak's dream.

I can't help but compare my work to those amazing websites I see on awwwards.com, but I have to remind myself that I'm just starting out, and I'll get there eventually.

References & Attributions