Navneet Raj - Personal Portfolio

A modern, responsive personal portfolio website for Navneet Raj built with React + Vite and Tailwind CSS.

🚀 Features

• Modern Design: Clean, responsive design that works on all devices
• Interactive UI: Smooth animations using Framer Motion
• Dark Theme: Custom color scheme with primary and accent colors
• Section-Based Layout: Organized content into distinct, navigable sections
• Hidden Easter Eggs: Several interactive surprises throughout the site
• Performance Optimized: Fast loading times and smooth interactions
• Standardized Components: Consistent styling across all sections

🌐 Live Demo

View the live portfolio at: https://mionacs.github.io/Portfolio

🏠 Sections

• Hero: Animated intro with developer information
• About: Personal details, education, and experience
• Projects: Showcasing featured projects with interactive cards
• Skills: Visual representation of technical skills with animation
• YouTube: Embedded YouTube content
• Community & Club: Information about BitLinguals coding club
• Contact: Form and social media links

💻 Tech Stack

• Frontend: React 18, Tailwind CSS
• Build Tool: Vite
• Animation: Framer Motion
• Routing: React Router DOM
• Type Effects: Typewriter-effect
• View Detection: React Intersection Observer

🛠️ Installation

1. Clone the repository:

   git clone https://github.com/yourusername/portfolio.git
   cd Portfolio

2. Install dependencies:

   npm install

3. Start development server:

   npm run dev

4. Build for production:

   npm run build

5. Preview production build:

   npm run preview
   

📁 Project Structure

/
├── public/          # Public assets
├── src/
│   ├── components/  # React components
│   │   ├── About.jsx
│   │   ├── Community.jsx
│   │   ├── Contact.jsx
│   │   ├── Footer.jsx
│   │   ├── Hero.jsx
│   │   ├── Navbar.jsx
│   │   ├── Projects.jsx
│   │   ├── SectionHeading.jsx
│   │   ├── Skills.jsx
│   │   └── YouTube.jsx
│   ├── assets/      # Images and other assets
│   ├── App.jsx      # Main App component
│   ├── App.css      # Global styles
│   ├── index.css    # Tailwind directives
│   └── main.jsx     # Entry point
└── ...config files

📱 Responsive Design

Fully responsive with optimizations for:

• Mobile devices (< 640px)
• Tablets (640px - 1024px)
• Desktops (> 1024px)

🌐 Browser Compatibility

Tested and works on:

• Chrome
• Firefox
• Safari
• Edge

📝 License

This project is open source and available under the MIT License.

👤 Author

This project is open source and available under the MIT License.