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.
- 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
View the live demo at https://nbarkiya.xyz/
portfolio.mp4
naman-portfolio-search.mp4
- 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
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.copyto a new.envfile 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.
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.
An interactive, animated timeline that showcases your career journey with expandable sections for details about each position and company.
Display your technical projects with detailed information, technologies used, live demo links, and comprehensive project descriptions.
Visually represent your technical and soft skills with customizable ratings and categories.
A ready-to-use contact form that can connect to various backend services.
Built-in SEO features with proper meta tags, structured data, and semantic HTML.
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
This project is open source and available under the MIT License.
- Design inspired by modern portfolio best practices
- Built by Naman Barkiya
- Icons from Lucide
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.
Built with ❤️ by Naman Barkiya
