The original motivation behind this project was simple: I wanted to build a website to showcase my work, and also wanted a place to post some writings. However, as I dug into front-end more, what started as a simple vanilla HTML/CSS/JS webpage soon turned into a hunt to better understand all the tools in the world of front-end development, because... why not?

When I created the first version of my website using pure vanilla tools, many limitations frustrated me, so I looked for answers. I didn't want to copy and paste codes for the same component - there came React/Next. I want better page transitions - Framer motion hopped into sight. Scrolling feels too rigid - Locomotive scroll joined the tool stack.

As I tackled the unknown, I slowly understood why all the frameworks and libraries were there. With one and a half month left before the summer ends, I just told myself: why not learn all of them? So I completely redesigned the content and layout, and started learning Next.js. Now here I am at the end of the journey, equipted with skills I wouldn't have imageined having a months ago. All I remember was a thought that popped into my head, then sleeves up, heads down, done.

The project is a static and responsive website built using Next.js as framework, SCSS (module SCSS) for styling, Framer Motion and GSAP for animation, Locomotive for smooth scroll, and Pipedream for email service. This is designed as place for me to showcase my projects, and post some philosophical reflections as blogs. The website has a custom Content Management System (CMS) integrated from scratch so any future addition of contents can happen with zero coding.

The very first question you might ask is, why Next.js? It certainly does feel like an overkill, as Next.js is often used for more complex and dynamic tasks. Well, I chose Next because of three reasons:

1) I want to learn something new that can give me a better understanding of the modern front-end frameworks. With Next, I also learn React - two bird with one stone.

2) Server-side rendering seems like an interesting concept, and I want to look into it more so in the future if I need to build more complex things, I understand how it works. It also makes pages load faster, which is a plus.

3) I like Next's page/app routing layout. It is clean, convenient, and has very detailed documentations.

I used module SCSS so I don't have to worry about coming up with unique class names. It also makes my file hierarchy more organized.

I used a mix of Framer Motion and GSAP because they are simple and useful in their own ways. There is a heavier lean on Framer Motion though.

Locomotive Scroll is the standard for smooth scroll (newest version incorporates Lenis Scroll), and pipedream is chose because how beautifully simple it is.

I always believe the best way to learn something is to do it before I knew anything, so I actively avoided tutorials. I like the process of trying to figure out why things work the way they do.

There were countless problems that costed me hours to solve: exit page animations with Next.js app router, F.O.U.C (flash of unstyled-content) with module scss when exit animations are present, svg animations with custom initial and target path, etc. However, I found my way around them. Obviously it would be difficult to go through every detail (I will put design-related information in a blog post), but the point is I learn a lot in the past month as I conquered these issues. Now, I can comfortably and quickly design and develop static sites, it is time to aim for more ambitious goals!

If you have any questions regarding the building of this website, or are just generally curious about anything, feel free to reach out to me.