🚀 Developer Portfolio

A modern, responsive portfolio built with Next.js 15

---

✨ Features

• 🎨 Modern UI/UX - Clean, professional design with smooth animations
• 📱 Fully Responsive - Optimized for all devices and screen sizes
• ⚡ Fast Performance - Built with Next.js 15 and optimized for speed
• 🎭 Interactive Animations - Engaging Lottie animations and Framer Motion effects
• 📧 Contact Form - Integrated email functionality with reCAPTCHA protection
• 🌓 Dynamic Sections - Hero, About, Experience, Skills, Projects, Education, Contact
• 🎯 SEO Optimized - Meta tags and Google Tag Manager integration

🛠️ Tech Stack

Framework & Core:

• Next.js 15.1 - React framework with App Router
• React 19 - UI library
• Tailwind CSS - Utility-first CSS framework
• SCSS - Enhanced styling capabilities

Libraries & Tools:

• Framer Motion - Animation library
• Lottie React - Lottie animations
• React Icons - Icon library
• React Toastify - Toast notifications
• React Fast Marquee - Scrolling animations
• EmailJS & Nodemailer - Email services
• Google reCAPTCHA - Spam protection

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher)
• Git
• npm, yarn, or pnpm package manager

Verify your installations:

node --version
git --version

🚀 Getting Started

1. Fork & Clone the Repository

Click the Fork button at the top right of this page, then:

git clone https://github.com/<YOUR_GITHUB_USERNAME>/portfolio.git
cd portfolio

2. Install Dependencies

npm install
# or
yarn install
# or
pnpm install

3. Run Development Server

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 to view your portfolio.

🎨 Customization Guide

Update Personal Information

Navigate to utils/data/personal-data.js and update:

export const personalData = {
  name: "YOUR NAME",
  designation: "YOUR TITLE",
  description: "YOUR BIO",
  email: "your@email.com",
  // ... other fields
}

Modify Content Sections

All editable content is located in the utils/data/ directory:

File	Description
personal-data.js	Personal info, contact details, social links
experience.js	Work experience data
projects-data.js	Project showcase items
skills.js	Technical skills & technologies
educations.js	Education background

📁 Project Structure

portfolio/
├── app/
│   ├── api/              # API routes
│   ├── components/       # React components
│   │   ├── homepage/     # Page sections
│   │   └── helper/       # Utility components
│   ├── css/              # Global styles
│   └── page.js           # Main page
├── utils/
│   └── data/             # Content data files
├── public/               # Static assets
├── docker-compose.yml    # Docker orchestration
└── next.config.js        # Next.js configuration

🎯 Purpose of This Project

This portfolio website helps:

1. Recruiters quickly understand your skills
2. Developers explore project structure and code style
3. Create a strong personal brand online
4. It is suitable for Frontend Developers, React Developers, and JavaScript Engineers.

This portfolio is designed to:

1. Showcase personal projects and skills
2. Act as an online resume
3. Give recruiters and developers a quick overview of work and capabilities

🤝 Contributing

Contributions are welcome! Feel free to:

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

📝 License

This project is open source and available for personal and commercial use.

💬 Support

If you find this project helpful, please give it a ⭐ on GitHub!

For questions or issues, feel free to open an issue in the repository.

---

Made with ❤️ using Next.js and React
View Live Demo