Back

How I Built My Portfolio Using Next.js, Tailwind CSS, and Sanity CMS

3 months ago

As a full-stack developer, having a well-structured and visually appealing portfolio is crucial. I recently built my portfolio using Next.js, Tailwind CSS, ShadCN, and Sanity CMS. In this blog, I'll walk you through my journey, the challenges I faced, and how I solved them.

Why I Chose Next.js

Since I was new to Next.js, I wanted to learn its concepts while building something useful. Next.js offers features like:

Server-side rendering (SSR) and static site generation (SSG) for better performance.
Built-in support for API routes.
Great SEO capabilities.
Easy integration with headless CMS solutions like Sanity.

Design Inspiration

I took inspiration from StepCV, which had a clean and modern UI. I wanted to implement a similar aesthetic while ensuring my portfolio had a personal touch.

Tech Stack

Next.js – For building the portfolio with server-side rendering and static generation.
Tailwind CSS – For styling and ensuring responsiveness.
ShadCN – For UI components with a modern and minimalistic look.
Sanity CMS – For managing content dynamically.
next-themes – For implementing light and dark mode based on the system theme.

Setting Up the Project

1. Initializing the Next.js Project

I started by creating a new Next.js project using:

npx create-next-app@latest my-portfolio
cd my-portfolio

2. Installing Dependencies

After setting up Next.js, I installed the required dependencies:

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then, I added Tailwind to my global CSS file.

I also installed Sanity for content management:

npm install @sanity/client @sanity/image-url

3. Implementing Light and Dark Mode

For theme switching, I used next-themes:

npm install next-themes

I configured it in layout.tsx:

import { ThemeProvider } from "next-themes"; function MyApp({ Component, pageProps }) { return ( <ThemeProvider attribute="class" defaultTheme="system"> <Component {...pageProps} /> </ThemeProvider> ); } export default MyApp;

4. Integrating Sanity CMS

I set up a Sanity project using:

npx sanity init

Then, I structured my content schema to include projects, blog posts, and personal details.

5. Creating Reusable Components

I used ShadCN for components like buttons, modals, and cards to maintain UI consistency.

Example button component:

import { Button } from "@/components/ui/button"; export default function CustomButton({ text }) { return <Button className="bg-[#FFD700] hover:bg-[#D4AF37]">{text}</Button>; }

Challenges and Solutions

1. Learning Curve with Next.js

Since I was new to Next.js, understanding server-side rendering and API routes took time. Reading the official documentation and following tutorials helped a lot.

2. Styling Consistency

Maintaining a uniform design was a challenge. Using a fixed color palette and ShadCN components helped me keep everything consistent.

3. CMS Integration

Fetching data from Sanity required setting up GROQ queries properly. Testing queries in Sanity Studio before implementing them in Next.js made debugging easier.

Final Thoughts

Building my portfolio with Next.js was a fantastic learning experience. Not only did I create a professional-looking portfolio, but I also gained hands-on experience with modern technologies like Sanity CMS and ShadCN.

Check out my portfolio here (Link to be added)!

Let me know your thoughts in the comments or connect with me on Twitter for more insights into my journey as a full-stack developer.

Articles & publications