
## 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](https://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](/img/posts/personal-website-2023/learn-gsap.gif)

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](https://vercel.com/templates/next.js/blog-starter-kit),
as well as
[this template](https://github.com/wutali/nextjs-netlify-blog-template), and
found them much more elegant. I found
[this tutorial](https://blog.nrwl.io/read-and-render-md-files-with-next-js-and-nx-89a85c1d9b44)
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](https://2022.bellalee.com/),
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

- GSAP & animations
  - [Learn GSAP in 23 Minutes](https://www.youtube.com/watch?v=m6PDUIF24v4)
  - [Introducing ScrollTrigger for GSAP](https://www.youtube.com/watch?v=X7IBa7vZjmo)
  - [How SVG Line Animation Works](https://css-tricks.com/svg-line-animation-works/)
- MDX blog structure
  - [Vercel Blog Starter Kit](https://vercel.com/templates/next.js/blog-starter-kit)
  - [Next.js blogging template for Netlify](https://github.com/wutali/nextjs-netlify-blog-template)
  - [Create a Next.js and MDX blog](https://blog.logrocket.com/create-next-js-mdx-blog/)
  - [Read and render MD files with Next.js and Nx](https://blog.nrwl.io/read-and-render-md-files-with-next-js-and-nx-89a85c1d9b44)
- Assets
  - Bee image on loading screen by
    [Freepik](https://www.freepik.com/free-vector/hand-drawn-stencil-element-collection_32177634.htm#query=bee&position=38&from_view=keyword&track=sph)


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

#site-documentation

Personal Website 2023 — UX Design, Learning Process