Personal Portfolio Website

A modern, responsive portfolio website built with Next.js, TypeScript, and TailwindCSS, featuring animated UI components and a clean design.

🌟 Features

• Animated Hero Section

  • Dynamic text animations with word flip effects
  • Animated grid pattern background
  • Social media dock with hover animations

• Interactive Navigation

  • Smooth scrolling to sections
  • Active section highlighting
  • Responsive navbar with tubelight effect

• Project Showcase

  • Hover effect cards with gradient animations
  • GitHub repository links
  • Live demo links (where available)
  • Technology icons

• Professional Timeline

  • Education history with progress tracking
  • Work experience with detailed descriptions
  • Custom progress bar colors

• Technical Skills

  • Animated logo carousel
  • Technology stack visualization
  • Smooth transitions and hover effects

• Contact Form

  • Email integration
  • Form validation
  • Success/error notifications
  • Newsletter subscription option

🛠️ Tech Stack

• Framework: Next.js 14
• Language: TypeScript
• Styling: TailwindCSS
• UI Components:
  • Framer Motion
  • Radix UI
  • Tabler Icons
  • Lucide Icons
• Email: Nodemailer
• Animations: Custom animations using Framer Motion

🚀 Getting Started

1. Clone the repository

   git clone https://github.com/yourusername/portfolio-website.git
   cd portfolio-website

2. Install dependencies

   npm install

3. Set up environment variables Create a .env.local file in the root directory:

   EMAIL_USER=your-email@gmail.com
   EMAIL_PASS=your-app-specific-password

4. Run the development server

   npm run dev

5. Open your browser Navigate to http://localhost:3000

📝 Environment Variables

• EMAIL_USER: Your Gmail address
• EMAIL_PASS: Your Gmail app-specific password

📱 Responsive Design

• Mobile-first approach
• Breakpoints:
  • Mobile: < 640px
  • Tablet: 640px - 1024px
  • Desktop: > 1024px

🎨 UI Components

• NavBar: Tubelight effect navigation
• Timeline: Custom timeline with progress bars
• LogoCarousel: Animated technology stack display
• FeatureSection: Project cards with hover effects
• ContactForm: Email-integrated contact form
• BackgroundBeams: Animated background effects
• Dock: macOS-style social media dock

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👤 Author

Prashant Choudhary

• GitHub: @Mr-Dark-debug
• GitHub: @pschoudhary-dot
• LinkedIn: Prashant Choudhary

🙏 Acknowledgments

• Icons from Tabler Icons and Lucide
• UI Inspiration from various sources
• Next.js team for the amazing framework