Back to all Projects

Portfolio

undefined featured image

  • Next.js

  • Sanity CMS

  • Tailwind CSS

  • ShadCN

  • Framer Motion

Tech Stack & Features

  • Next.js / React
  • Sanity CMS
  • Tailwind CSS / ShadCN

Integrations:

  • Next.js

  • Sanity CMS

  • Tailwind CSS

  • ShadCN

  • Framer Motion

About this Project

This portfolio site is a fully custom build powered by Next.js, Tailwind CSS, and shadcn/ui, with all content managed through Sanity CMS and delivered via fast, flexible GROQ queries. Framer Motion is used throughout to add smooth animations and polished transitions, enhancing the user experience. The site is designed to be a clean, responsive showcase of my work, with structured content, reusable components, and seamless performance across every page. Combining Sanity’s headless CMS with modern React tooling allows me to update projects, posts, and metadata effortlessly while keeping the frontend lightweight, accessible, and highly maintainable.

Challenges

  • CMS Integration & Data Fetching

    Structuring content in Sanity and writing efficient GROQ queries to fetch data dynamically can be tricky, especially when handling nested or conditional content.

  • Server-Side Rendering & Static Generation

    Balancing SSR, SSG, and client-side fetching in Next.js to optimize performance while keeping content up-to-date.

  • Animation Performance

    Using Framer Motion for smooth transitions without introducing layout shifts, jank, or blocking rendering on larger pages.

  • Responsive Design & Tailwind Complexity

    nsuring layouts, typography, and media scale properly across devices while maintaining a clean and maintainable Tailwind setup.

  • Dynamic Routing & Component Reusability

    Creating reusable components for project cards, blog posts, and pages while managing dynamic routes and fallback states.

  • SEO & Metadata Management

    Dynamically generating SEO-friendly meta tags, Open Graph images, and page titles for portfolio projects and blog posts.

  • Content Updates & Live Preview

    Managing Sanity CMS content updates without breaking live site features, including previewing unpublished content safely.

  • Type Safety & Validation

    Ensuring data fetched from Sanity matches expected types, avoiding runtime errors, and handling missing or malformed data gracefully.

  • Performance Optimization

    Lazy-loading images, videos, and components while keeping bundle size minimal and page load times fast.

  • Accessibility & UX

    Designing interactive elements, navigation, and transitions to be keyboard- and screen-reader-friendly while maintaining visual polish.

What I Learned

Building this portfolio gave me hands-on experience with Sanity CMS and introduced me to writing GROQ queries to fetch structured content efficiently. I also gained practical skills in implementing layout animations and transitions using Framer Motion, learning how to enhance the user experience without sacrificing performance. Throughout the project, I strengthened my understanding of Next.js and Tailwind CSS, improving my ability to create responsive, reusable components and dynamic pages while maintaining clean, maintainable code.