Atharva Jondhale's Portfolio

A modern, responsive portfolio website built with Next.js, TypeScript, and Tailwind CSS. It features a sleek, professional design with interactive animations, optimized performance, and a dark theme, showcasing my work as a UI/UX & Frontend Developer.

---

🌟 Features

• Modern & Professional Design

  • Clean layouts with smooth animations
  • Dark theme with professional color scheme

• Fully Responsive

  • Optimized for mobile, tablet, and desktop
  • Mobile-first approach for touch-friendly interactions

• Interactive Elements

  • Animated text effects in Hero section
  • Hover interactions and profile photo effects
  • Smooth transitions between sections

• Performance Optimized

  • Next.js Image optimization
  • Lazy loading of assets
  • Reduced animation overhead on mobile

• Accessibility & SEO Friendly

  • Proper ARIA labels for icons and buttons
  • Optimized color contrast for readability

---

🛠️ Tech Stack

• Framework: Next.js 13+ (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Animations: Framer Motion, CSS transitions, custom animations
• Icons: Lucide Icons
• Deployment: Vercel

---

🚀 Getting Started

1. Clone the repository

git clone https://github.com/Atharva2093/Portfolio.git
cd Portfolio

2. Install dependencies

npm install
# or
pnpm install

3. Run the development server

npm run dev
# or
pnpm dev

4. Open in browser

http://localhost:3000

---

📁 Project Structure

Portfolio/
├── app/                  # Next.js app directory
│   ├── layout.tsx        # Root layout
│   └── page.tsx          # Home page
├── components/           # React components
│   ├── ui/               # Reusable UI components
│   └── sections/         # Page sections (Hero, About, Projects, etc.)
├── public/               # Static assets
│   └── images/           # Image files
├── styles/               # Global CSS/Tailwind styles
└── types/                # TypeScript types

---

🎨 Components

• Hero Section: Professional intro with animated name and role effects

• About: Personal background, skills, and bio

• Experience: Work history and achievements

• Projects: Showcase of web development and UI/UX projects

• Contact: Professional contact information

• Custom UI Components:

  • Interactive buttons
  • Animated text effects
  • Professional cards
  • Social media links

---

🔧 Customization

Personal Information

Update the personalInfo object in your components to change:

• Profile details, location, and experience
• Social links and email
• Bio text

Theme Colors

Modify the themeColors object to customize:

• Background and accent colors
• Text colors
• Card backgrounds

Content

Edit component files to update:

• Project details
• Experience information
• Skills and technologies

---

📱 Responsive Design

• Mobile-first approach with three breakpoints:

  • Mobile: 320px - 768px
  • Tablet: 768px - 1024px
  • Desktop: 1024px+

• Optimized layout for each screen size

• Touch-friendly interactions and hover effects fallback

---

🔐 Security Features

• Secure external links (rel="noopener noreferrer")
• Protected file downloads with validation
• Sanitized user inputs
• Proper CORS headers for API calls

---

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS & Android)

---

📄 License

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

---

🤝 Contact

• LinkedIn: atharvajondhale7
• GitHub: Atharva2093
• Email: atharvajondhale7@gmail.com

---

🙏 Acknowledgments

• Icons: Lucide Icons
• Animations: Framer Motion
• Framework: Next.js