)
A high-performance personal portfolio website built with Next.js 16 and Sanity.io.
🔴 View Live Demo (Coming Soon) »
Report Bug
·
Request Feature
- Overview
- Built With
- Features
- Getting Started
- Environment Variables
- Project Structure
- Performance
- Contact
- Acknowledgements
This repository hosts the source code for my personal portfolio. It is designed to be a showcase of modern web development practices, focusing on performance, accessibility, and dynamic content management.
Unlike static portfolios, this site uses a "Headless CMS" architecture. This means I can update my projects, blogs, and experience details instantly via Sanity Studio without touching a single line of code or redeploying the site.
This project leverages the latest features of the React ecosystem:
- Next.js 16 - The React Framework for the Web (App Router).
- Tailwind CSS - Utility-first CSS framework for rapid UI development.
- Sanity.io - Headless CMS for managing structured content.
- TypeScript - For type safety and better developer experience.
- 🎨 Modern UI/UX: Clean, dark-themed aesthetic with responsive layouts.
- 🚀 Dynamic Content: Projects and About sections are fetched in real-time from Sanity.
- ⚡ Server Side Rendering (SSR): Optimized for SEO and fast initial page loads.
- 📱 Fully Responsive: optimized for Mobile, Tablet, and Desktop.
- 🖼️ Image Optimization: Uses
next/imagewith Sanity's image CDN.
To run this project locally, follow these steps.
You need Node.js installed. I use pnpm for package management because it is faster and more efficient.
- Install pnpm (if you don't have it):
Installation
npm install -g pnpmClone the repository
git clone https://github.com/haider-kashan/portfolio.gitNavigate to the project folder
cd portfolioInstall dependencies
pnpm installRun the development server
pnpm devOpen http://localhost:3000 in your browser.
The easiest way to deploy this app is to use the Vercel Platform.
- Push your code to a GitHub repository.
- Import the project into Vercel.
- Add your environment variables (
NEXT_PUBLIC_SANITY_PROJECT_ID, etc.) in the Vercel dashboard. - Click Deploy.
This project uses Sanity.io. To run it locally, you must create a .env.local file in the root directory and add the following keys:
Code snippet
NEXT_PUBLIC_SANITY_PROJECT_ID=your_project_id_here
NEXT_PUBLIC_SANITY_DATASET=production
NEXT_PUBLIC_BASE_URL=http://localhost:3000
Note: You can find your Project ID in your Sanity Dashboard..
├── app/ # Next.js App Router
│ ├── (portfolio)/ # Main portfolio routes (Route Group)
│ │ ├── page.tsx # Homepage
│ │ └── ... # Legal pages (Privacy, Terms)
│ ├── (sanity)/studio/ # Sanity Studio CMS embedded route
│ ├── actions/ # Server Actions (Contact form, Draft mode)
│ └── globals.css # Global styles & Tailwind directives
├── components/ # React Components
│ ├── sections/ # Major page sections (Hero, About, Projects)
│ ├── ui/ # Reusable UI atoms (Buttons, Cards, Animated elements)
│ ├── FloatingDock.tsx # Navigation components
│ └── ThemeProvider.tsx # Dark/Light mode context
├── sanity/ # Sanity CMS Configuration
│ ├── schemaTypes/ # Data models (Projects, Experience, Blogs)
│ ├── lib/ # Sanity client & image url builder
│ ├── env.ts # Environment variable validation
│ └── structure.ts # Custom Studio desk structure
├── hooks/ # Custom React Hooks
├── public/ # Static assets (images, icons)
├── biome.json # Linter and Formatter configuration
├── next.config.ts # Next.js configuration
├── sanity-cli.ts # Sanity CLI configuration
└── pnpm-lock.yaml # Dependency lock fileI focused heavily on Core Web Vitals. Here are the Lighthouse scores for the live build:(To be updated)
Kashan Haider
- GitHub: haider-kashan
- LinkedIn: Kashan Haider
- Email: kashanhaider0209@gmail.com
Resources and people that inspired this project:
- Sanity Documentation
- Next.js Documentation
- Sonny Sangha (For the inspiration)
- Tailwind UI