Harshith Kumar Mannepally - AI-First Full Stack Developer | AI/ML Engineer | Innovation Enthusiast
This is the repository for Harshith Kumar's professional developer portfolio showcasing expertise in Full Stack Development, Artificial Intelligence, and Machine Learning.
This repository houses the source code for Harshith Kumar's high-performance, motion-driven developer portfolio. Designed to sit at the bleeding edge of Artificial Intelligence and Modern Web Development, the architecture is built for extreme speed, fluid cinematic animations, and unparalleled visual storytelling.
It utilizes an advanced glassmorphic UI, bento-style grid layouts, and a dynamic macOS-style floating dock to deliver a premium user experience.
The portfolio is architected using a modern decoupled frontend pattern, prioritizing edge delivery and client-side rendering performance.
flowchart TB
subgraph Client["Client Tier (Browser)"]
UI["React 18 Components"]
Motion["Framer Motion Engine"]
Styles["Tailwind CSS + PostCSS"]
UI <--> Motion
UI <--> Styles
end
subgraph Hosting["Deployment & Edge Delivery"]
Vercel["Vercel Edge Network"]
CDN["Global CDN Caching"]
Vercel --> CDN
end
subgraph Services["External Integrations"]
Supabase[/"Supabase (Backend/State)"/]
GitHub[/"GitHub Actions (CI/CD)"/]
end
CDN -.->|Serves Static Bundle| Client
UI -->|API Requests| Supabase
GitHub -->|Automated Deployments| Vercel
### Component Hierarchy
The UI is built on atomic design principles:
- **Core Layout**: `App.jsx` handles routing, lazy loading, and core state.
- **Sections**: Modularized into `Hero`, `Projects`, `Skills`, `CTASection`.
- **Primitives**: Reusable micro-components (`mac-os-dock`, buttons, cards) styled via Tailwind utility classes and animated via Framer variants.
---
## ✨ Premium Features
<img align="right" src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Star-Struck.png" alt="Star Struck" width="45" />
* 🎨 **Sophisticated UI**: Dark-themed glassmorphism using deep custom CSS utility variables for a highly premium, liquid look.
* ⚡ **Cinematic Animations**: Micro-interactions powered by Framer Motion, utilizing exact spring physics and staggered DOM reveals.
* 📱 **Fluid Responsiveness**: Mobile-first grid systems with pixel-perfect scaling across all device viewports.
* 🛠️ **Optimized Engineering**: Lazy loading, intelligent code splitting, and extreme asset optimization for sub-second load times.
* ♿ **Inclusive Design**: ARIA-labeled interactive elements and semantic HTML for perfect screen reader compatibility.
* 🚀 **Smart Navigation**: A custom-built, scroll-aware macOS style floating dock that dynamically tracks viewport intersections.
---
## 🛠️ Technical Ecosystem
<img align="right" src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Laptop.png" alt="Laptop" width="45" />
### Core Technologies
| Layer | Tech Stack | Purpose |
| --- | --- | --- |
| **Frontend Framework** | React 18 | Component architecture & fast virtual DOM |
| **Styling Engine** | Tailwind CSS | Utility-first rapid styling and responsive design |
| **Animation Engine** | Framer Motion | Declarative physics-based animations |
| **Build Tooling** | Vite | Lightning-fast HMR and optimized production bundles |
| **Icons** | React Icons / Lucide | Lightweight, scalable vector icons |
---
## 📂 Project Structure
```bash
My-Portfolio/
├── public/ # Static global assets (Images, CV, PWA Service Workers)
├── src/
│ ├── components/ # High-level React components
│ │ ├── layout/ # Structural components (Navbar, Footer, FloatingDock)
│ │ ├── sections/ # Page sections (Hero, Projects, Skills)
│ │ └── ui/ # Reusable primitives (Buttons, Cards, Modals)
│ ├── lib/ # Utility functions and standard helpers (cn, formatters)
│ ├── App.jsx # Root layout & composition logic
│ └── index.css # Global CSS tokens, reset, and custom animations
├── index.html # Entry point
└── vite.config.js # Vite build and plugin configuration
git clone https://github.com/Harshithk951/My-Portfolio.git
cd My-Portfolionpm install
# or
yarn installnpm run devOpen http://localhost:5173 in your browser.
The portfolio is continuously audited to maintain perfection across core web vitals.
| Category | Score | Metric Focus |
|---|---|---|
| Performance | 🟢 98+ | FCP, LCP, TBT optimization |
| Accessibility | 🟢 100 | Contrast, ARIA labels, semantic tags |
| Best Practices | 🟢 100 | HTTPS, secure dependencies, no console errors |
| SEO | 🟢 100 | Meta tags, robots.txt, dynamic sitemap |
Harshith Kumar Mannepally (also known as Harshith or harshithkumar) is an AI-First Full Stack Developer and AI/ML Engineer passionate about building innovative digital solutions.
- Full Stack Development: React, Node.js, JavaScript, TypeScript
- Artificial Intelligence & Machine Learning: Python, TensorFlow, scikit-learn
- Web Technologies: Vite, Tailwind CSS, Framer Motion, Web Design
- Cloud & DevOps: Database Design, Cloud Architecture, Performance Optimization
- ResumeOptima: AI-powered resume optimization platform
- Crew Wellness AI: Intelligent wellness management system
- Portfolio Projects: Showcasing expertise in modern web development and AI integration
- Portfolio: harshithkumar.in - Official portfolio website
- LinkedIn: Harshith Kumar - Professional profile
- GitHub: Harshithk951 - Open source contributions
- Email: harshithkumar.dev@gmail.com
Search for "Harshith", "Harshith Kumar", or "harshithkumar" to find more about this developer's work and portfolio.
Harshith Kumar Mannepally
AI-First Full Stack Developer | Building the future with code and intelligence.
⭐ If you like this project or find it helpful, please give it a star! ⭐