🚀 Harsh Pratap Singh | Full-Stack Portfolio

Welcome to my professional portfolio! This is a high-performance, responsive web application designed to showcase my journey as a Full-Stack Developer and CSS Specialist. It features a modern tech stack and an integrated AI assistant to help visitors learn more about my work.

🌟 Key Features

• 🧠 Gemini AI Assistant: A custom-trained AI chatbot powered by the @google/genai (Gemini 3 Flash) that answers questions about my projects, skills, and professional background in real-time.
• 📱 Ultra-Responsive Design: A mobile-first approach using Tailwind CSS, ensuring a seamless experience across all devices.
• ✨ Sleek Animations: Smooth transitions and interactive elements powered by custom CSS and Framer Motion concepts.
• 🛠️ Professional Roadmap: A detailed timeline of my experiences at CodePen, Codingal, and Einstein’s Square.
• 📂 Project Showcase: Deep dives into my major installations like the EduTech LMS and Airline Reservation System.

🛠️ Tech Stack

Frontend & Styling:

• React 19: Utilizing the latest features for optimal performance.
• Vite: Ultra-fast build tool and development server.
• Tailwind CSS: Utility-first styling for a unique, modern aesthetic.
• Lucide React: Beautiful, consistent iconography.

AI Integration:

• Google Gemini API: Powering the intelligent portfolio assistant.

Development Tools:

• TypeScript: Ensuring type-safety and robust code.
• PostCSS: Advanced CSS processing.

🚀 Getting Started

Prerequisites

• Node.js: Ensure you have the latest LTS version installed.
• npm or yarn: Package managers for dependency handling.

Installation

1. Clone the repository:

   git clone https://github.com/harshu0001/my-portfolio.git
   cd my-portfolio

2. Install dependencies:

   npm install

3. Configure Environment Variables: Create a .env file in the root directory and add your Google Gemini API key:

   VITE_API_KEY=your_google_gemini_api_key_here

   Note: You can get a free API key from Google AI Studio.

4. Start the development server:

   npm run dev

5. Build for production:

   npm run build

📂 Project Structure

├── src/
│   ├── App.tsx          # Main application component & Layout
│   ├── index.tsx        # Entry point for React
│   ├── index.css        # Tailwind directives & global styles
│   ├── constants.ts     # Centralized resume data (Skills, Exp, Projects)
│   ├── types.ts         # TypeScript interfaces
│   └── vite-env.d.ts    # Type definitions for Vite
├── index.html           # HTML template with ESM import map
├── tailwind.config.js   # Style configurations
└── vite.config.ts       # Build and environment configuration

🤝 Contact

I'm always open to discussing new opportunities, collaborations, or technical challenges.

• Email: prataph229@gmail.com
• GitHub: github.com/yourusername

---

Built with ❤️ by Harsh Pratap Singh