A modern, fully customizable developer portfolio built with Next.js 13, TypeScript, and Tailwind CSS. Features a unique VS Code-inspired design with an interactive code showcase, blog integration, and complete project showcase. Welcome to my portfolio repository! This website showcases some of my projects and skills as a full-stack web developer. It was built using Next.js, TailwindCss, and MongoDB, which are modern and popular technologies in the web development world.

My name is Jeevan Kumar, and I am a full-stack web developer based in India with over 5 years of experience. I have a strong skillset in technologies such as JavaScript, React.js, Next.js, Node.js, and Python, and I am always eager to learn and grow as a developer. In my spare time, I enjoy sharing my love for technology, coding, and development through my YouTube channel. I am passionate about working on projects that allow me to utilize my skills and knowledge to create innovative solutions.

• 🎨 VS Code-Inspired Design - Clean, modern developer-friendly interfaceHere are some of the features of this portfolio website:

• 💻 Interactive Code Showcase - Syntax-highlighted code samples on the homepage

• 📝 Integrated Blog - Write posts in Markdown with syntax highlighting- Home page with a brief introduction and links to my social media profiles.

• 💼 Project Showcase - Display your work with GitHub integration- Projects page with a list of some of my recent projects, including descriptions, technologies used, and live links (where available).

• 📱 Fully Responsive - Perfect on desktop, tablet, and mobile- Skills page with a list of my technical skills and proficiency levels.

• ⚡ Fast & Optimized - Built with Next.js 13 App Router- Contact page with a simple form for visitors to send me a message or inquiry.

• 🎯 100% Customizable - Configure everything via a single JSON file

• 🔍 SEO Optimized - Built-in metadata and OpenGraph support## Installation

• 📧 Contact Form - Integrated email functionality

To run this website locally on your machine, you will need to follow these steps:

Clone this repository to your local machine.

git clone https://github.com/g1mishra/nextfolio.git

If you have any feedback or suggestions for improvement, feel free to open an issue or pull request on this repository. I welcome any contributions or collaborations from the community, and I am always looking for ways to improve my skills and projects.

pnpm install
# or
npm install
# or
yarn install

This is the most important step! Copy the example configuration file:

cp portfolio.example.json portfolio.json

Edit portfolio.json with your information. This single file controls all the content on your portfolio!

Create a .env.local file in the root directory:

# Email Configuration (for contact form)
GMAIL_USER=your-email@gmail.com
GMAIL_PASSWORD=your-app-specific-password

# GitHub Gist ID (optional - for code snippets display)
GIST_ID=your-gist-id

# MongoDB (optional - for projects from database)
MONGODB_URI=your-mongodb-connection-string

pnpm dev
# or
npm run dev

Open http://localhost:3001 to see your portfolio!

All portfolio content is configured through the portfolio.json file. Here's a complete breakdown:

{
  "name": "Your Name",
  "username": "yourusername",
  "tagline": "Full stack web developer, content creator",
  "bio": "Your detailed bio (displays on About page)...",
  "location": "Your Country",
  "yearsOfExperience": "5"
}

{
  "seo": {
    "title": "Your Name - Your Professional Title",
    "description": "Your meta description for search engines",
    "canonicalUrl": "https://yoursite.com",
    "keywords": ["keyword1", "keyword2", "keyword3"]
  }
}

{
  "homePage": {
    "greeting": "Hi there 👋 I am",
    "typedStrings": ["> Full-stack Developer", "> Your Specialty", "> Your Passion"],
    "githubComment": "// find it on my github page.",
    "githubLink": "https://github.com/yourusername/portfolio"
  }
}

{
  "contact": {
    "email": "your.email@example.com",
    "phone": "+1234567890",
    "availability": "Available for freelance work"
  }
}

{
  "socialLinks": {
    "github": "https://github.com/yourusername",
    "linkedin": "https://linkedin.com/in/yourusername",
    "twitter": "https://twitter.com/yourusername",
    "youtube": "https://youtube.com/@yourchannel",
    "instagram": "https://instagram.com/yourusername"
  }
}

{
  "experience": [
    {
      "jobTitle": "Software Engineer",
      "companyName": "Company Name",
      "period": "Jan 2023 - Present",
      "description": "Description of your role and technologies used..."
    }
  ]
}

{
  "education": [
    {
      "degree": "Bachelor of Computer Science",
      "university": "University Name",
      "period": "2018 - 2022",
      "description": "Brief description of your education..."
    }
  ]
}

{
  "skills": [
    {
      "name": "JavaScript",
      "iconClassName": "devicon-javascript-plain"
    },
    {
      "name": "React",
      "iconClassName": "devicon-react-plain"
    }
  ]
}

Finding Icon Class Names: Skills use Devicon for icons. To find the right class name:

1. Visit devicon.dev
2. Search for your technology
3. Copy the class name (e.g., devicon-javascript-plain)

{
  "gist": {
    "username": "yourgithubusername"
  }
}

nextfolio/
├── app/                    # Next.js 13 App Router
│   ├── about-me/          # About page
│   ├── blog/              # Blog pages
│   ├── contact-me/        # Contact page
│   ├── projects/          # Projects showcase
│   └── api/               # API routes (contact form)
├── components/            # React components
│   ├── about-me/         # About page components
│   ├── contact-me/       # Contact page components
│   ├── footer/           # Footer component
│   └── navbar/           # Navigation components
├── lib/                   # Utility functions
│   ├── config.ts         # Configuration loader
│   ├── constants.tsx     # Exported constants
│   └── common.ts         # Common utilities
├── posts/                # Blog posts (Markdown files)
├── public/               # Static assets
├── types/                # TypeScript type definitions
├── portfolio.json        # 🎯 YOUR PORTFOLIO DATA
└── portfolio.example.json # Example configuration template

Create Markdown files in the posts/ directory:

---
title: 'Your Awesome Blog Post'
date: '2024-01-15'
excerpt: 'A brief description of your post'
author: 'Your Name'
---

Your blog content here with **Markdown** support!

### Code Example

\`\`\`javascript
console.log('Hello, World!');
\`\`\`

Blog posts automatically appear on the /blog page.

The portfolio uses Tailwind CSS. Customize theme in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#your-color',
        secondary: '#your-color',
        // Add your custom colors
      },
    },
  },
};

The contact form uses Gmail SMTP. Here's how to set it up:

1. Go to your Google Account settings
2. Enable 2-Step Verification

1. Visit App Passwords
2. Select "Mail" and "Other (Custom name)"
3. Copy the 16-digit password

GMAIL_USER=your-email@gmail.com
GMAIL_PASSWORD=your-16-digit-app-password

The easiest way to deploy:

Manual deployment:

1. Push your code to GitHub
2. Import repository in Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

1. Connect your GitHub repository to Netlify
2. Set build command: npm run build
3. Set publish directory: .next
4. Add environment variables
5. Deploy!

Compatible with any Next.js hosting:

• AWS Amplify
• Railway
• DigitalOcean App Platform
• Cloudflare Pages

Edit styles/globals.css or tailwind.config.js to change the color scheme.

Create new routes in the app/ directory following Next.js 13 conventions.

All components are in the components/ directory. They're well-organized by feature.

Projects can be added through:

1. MongoDB (configure in .env.local)
2. Directly in code (modify lib/projects.ts)

The default port is 3001. If it's in use, change it in package.json:

"dev": "next dev -p 3002"

• Verify Gmail credentials in .env.local
• Check if 2-Step Verification is enabled
• Ensure App Password is correct (not your regular password)

• Verify internet connection (Devicon loads from CDN)
• Check icon class names at devicon.dev

Contributions make the open-source community amazing! Any contributions are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Distributed under the MIT License. See LICENSE for more information.

• Design inspired by VS Code
• Icons from Devicon
• Built with Next.js
• Styled with Tailwind CSS

Need help or have questions?

• 📧 Email: g1mishra.dev@gmail.com
• 🐛 Issues: GitHub Issues
• 💼 LinkedIn: linkedin.com/in/g1mishra
• 🐦 Twitter: @g1mishra

If you found this project helpful, please consider:

• Giving it a ⭐️ on GitHub
• Sharing it with others
• Contributing to make it better

Made with ❤️ by Jeevan Kumar

Happy coding! 🚀