Next.js 14 Developer Portfolio Template

A modern, responsive, and SEO-optimized Next.js 14 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
• Dark/Light Mode: Professional appearance with theme support
• 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 14, 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/

portfolio.mp4

🛠️ Tech Stack

• Framework: Next.js 14
• Language: TypeScript
• 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:

1. Clone this repository:

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

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

3. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

4. Start the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

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

🎨 Customization

The portfolio is designed to be easily customizable:

1. Personal Information: Update your personal info in config/site.ts
2. Skills: Add your skills in config/skills.ts
3. Projects: Add your technical projects in config/projects.ts
4. Experience: Customize your professional experience in config/experience.ts
5. Contributions: Showcase your contributions in config/contributions.ts
6. Colors & Theme: Modify the theme in tailwind.config.js

🌟 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