Next.js 16 Developer Portfolio Template

A modern, responsive, and SEO-optimized Next.js 16 portfolio template designed for developers, designers, and professionals. This open-source project helps you showcase your skills, experience, and projects with an elegant interface that stands out. Built with server-side rendering, TypeScript, and the latest web standards for optimal performance.

✨ Key Features

• Professional Experience Timeline: Showcase your career journey with a visually appealing timeline
• Project Showcase: Display your technical projects with detailed information and live demos
• Multiple Themes: Dark, Light, Retro, Cyberpunk, Aurora, Synthwave, and Paper themes
• Responsive Design: Optimized for all devices (mobile, tablet, desktop)
• 100% Performance Score: Fully optimized for speed and Core Web Vitals
• SEO-Ready: Structured data, meta tags, and optimized content
• Modern Tech Stack: Next.js 16, React 19, TypeScript, Tailwind CSS, and shadcn/ui
• Easy Customization: Well-organized code structure with minimal effort required
• Animations: Subtle animations for engaging user experience
• Analytics Integration: Ready for Google Analytics tracking
• Contact Form: Functional contact form with validation
• Open Source: Free to use and modify for your personal portfolio

🚀 Demo

View the live demo at https://nbarkiya.xyz/

https://github.com/namanbarkiya/minimal-next-portfolio/assets/82203888/f93bf5ca-c2bd-4fe5-a413-1050ebf6cf78

Ranks #1 on AI Search (top-notch AEO/GEO)

https://github.com/user-attachments/assets/fc071310-9d1c-4832-877f-23f9569893d7

🛠️ Tech Stack

• Framework: Next.js 16 with Turbopack
• Language: TypeScript
• UI Library: React 19
• Styling: Tailwind CSS + shadcn/ui
• Animations: Framer Motion
• Form Handling: Server actions with validation
• Analytics: Google Analytics + Vercel Analytics
• Deployment: Vercel

🔧 Getting Started

To get started with your own portfolio website:

• Clone this repository:

git clone https://github.com/namanbarkiya/minimal-next-portfolio.git my-portfolio
   cd my-portfolio

• Copy the contents of .env.copy to a new .env file and fill in the required information.

• Install dependencies:

npm install
   # or
   yarn install
   # or
   pnpm install

• Start the development server:

npm run dev
   # or
   yarn dev
   # or
   pnpm dev

• Open http://localhost:3000 in your web browser to see the website.

🎨 Customization

Easily personalize your portfolio using the configuration files below:

| Section | How to Customize | File Location | | ------------------ | ------------------------------------------------------ | ------------------------- | | Personal Info | Edit your name, bio, and social links | config/site.ts | | Skills | Add or modify the technologies and skills you showcase | config/skills.ts | | Projects | Highlight your technical projects | config/projects.ts | | Experience | Add your work and professional experience | config/experience.ts | | Contributions | Display open-source/community contributions | config/contributions.ts | | Colors & Theme | Customize color palette and themes | tailwind.config.js |

All configuration files are well-organized and documented for a smooth customization process.

🌟 Features In Detail

Professional Experience Timeline

An interactive, animated timeline that showcases your career journey with expandable sections for details about each position and company.

Project Showcase

Display your technical projects with detailed information, technologies used, live demo links, and comprehensive project descriptions.

Skills Showcase

Visually represent your technical and soft skills with customizable ratings and categories.

Contact Form Integration

A ready-to-use contact form that can connect to various backend services.

SEO Optimization

Built-in SEO features with proper meta tags, structured data, and semantic HTML.

📱 Performance and Responsiveness

This template is optimized for:

• 100% Lighthouse score
• Excellent Core Web Vitals metrics
• Responsive design across all device sizes
• Fast loading times with proper image optimization

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgements

• Design inspired by modern portfolio best practices
• Built by Naman Barkiya
• Icons from Lucide

💻 Deploy on Vercel

The easiest way to deploy your portfolio is using Vercel, the platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.

🌟 Star History

Built with ❤️ by Naman Barkiya