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

• Interactive Career Timeline: Showcase your professional journey with a visually appealing timeline
• 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. Experiences: Add your work experiences in config/experience.ts
4. Career Timeline: Customize your career journey in config/career.ts
5. Colors & Theme: Modify the theme in tailwind.config.js

🌟 Features In Detail

Career Timeline

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

Skills Showcase

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

Project Gallery

Display your projects with detailed information, technologies used, and live demo links.

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 Harsh Gupta
• 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.