OVERVIEW
After five years since I first created my basic custom-built WordPress portfolio, I've revamped my portfolio to showcase my passion for web design, animations, and user interaction.
DEVELOPMENT
Underneath the surface, the website's foundation is built on the Next.js framework, providing a range of advantageous features such as lazy loading, dynamic imports, PWA capabilities, Static Page Generation, and SEO optimization.
For seamless and performant animations, I employed GSAP, recognized as the top-performing library in this domain.
While Next.js isn't inherently optimized for page transitions like Nuxt/Vue, I overcame this challenge through diligent research and testing. By utilizing the React Transition Group package in conjunction with GSAP, I achieved visually appealing page transitions with a 3D effect. The previous page gracefully scales down with a blur filter, creating an illusion of a 3D space, while the new page smoothly scales up from the bottom, covering the window and revealing content.
To ensure smooth scrolling with text reveals, I developed a custom code solution.
For content management, I integrated Sanity.io as the Headless CMS of choice. It seamlessly integrates with Next.js Static Page Generation, allowing retrieval of data content from Sanity at build time using Sanity Graph-Relational Object Queries. Subsequently, Next.js exports each page to static HTML, eliminating the need for data fetching on each user request.
In terms of hosting, I opted for Vercel due to its simplicity and minimal configuration requirements. Vercel offers valuable site optimization tools such as caching and CDN, complementing Next.js Static Generation to ensure highly responsive and fast-loading websites. Additionally, Vercel's seamless integration with Git repositories enables rapid deployment and easy updates to the site.
