My Portfolio Website

I put everything inside a single page.js file when I first started. But as the site grew, it became clear that this structure would be hard to maintain and scale, so I began looking for better ways to organise the code. I was able to refactor the project into multiple routes and components. Thanks to Next.js’s detailed documentation and its file-system based routing, the process turned out to be much simpler than I expected.

After that, I began experimenting with animations. I first explored some React animation libraries, and later integrated Lenis for smoother scrolling and Framer Motion for page transitions. These additions helped the interactions feel more natural and continuous, improving the overall browsing experience.

Of course, the development process had its challenges. Some features took considerable time and experimentation to get right. For example, implementing the page transitions required understanding Framer Motion's animation lifecycle and carefully coordinating the timing between route changes and visual effects. Similarly, integrating Lenis with Next.js's routing system needed careful attention to ensure smooth scrolling worked seamlessly across page navigations.

Although it took several weekends and multiple iterations, when I saw the animations finally come to life, the sense of accomplishment was truly fulfilling. I learned so much over the past few months. I now feel more comfortable designing and building static websites on my own. And even when I come across something unfamiliar, I'm much more confident that by reading documentation, relying on online resources, I'll be able to figure it out.