A space-themed, fully animated portfolio built with React 19 + Vite + Framer Motion + Three.js
| Feature | Description |
|---|---|
| 🌌 Space Theme | Deep-space galaxy background with multi-layer parallax scrolling and twinkling stars |
| 🔮 3D Particle Field | Interactive WebGL particle system via @react-three/fiber — 700 animated spheres reacting to cursor |
| 🎬 Cinematic Home | Sequenced intro — expanding neon line → rising hero image → sliding panels → corner nav buttons |
| 🖼️ Crossfade Previews | Hover navigation buttons to crossfade hero images with smooth dual-slot transitions |
| ⌨️ Typing Effects | Custom TextType component with typewriter cycling and RotatingText spring animations |
| 🪐 Constellation Diagram | SVG solar system with orbiting planets representing core tech skills (React, Node, Java, TensorFlow, AI APIs, Cloud) |
| 📜 Laser Timeline | Scroll-driven education timeline with animated laser beam, glowing nodes, and lerp-smoothed progress |
| 🎠 Project Carousel | Auto-playing 3-card slideshow with expand/collapse, grid toggle, tech badges, and video demo modals |
| 🏆 Achievement Marquee | Infinite-scroll marquee of award cards with gold/silver badge tiers + LeetCode heatmap integration |
| 📜 Certificate Gallery | Touch/drag-enabled carousel with auto-play, dot indicators, and credential verification links |
| 📬 Contact Form | EmailJS-powered contact form with email, WhatsApp, and social profile links |
| 📱 Mobile Intro Overlay | Onboarding screen recommending desktop/laptop viewing for best 3D depth, fading out gracefully after 2 seconds |
| 🌠 Minimalist Footer | Sleek glassmorphic footer with gravity-themed interactive micro-animations, inline dot navigation, and clean layout controls |
| 📱 Fully Responsive | Optimized for all screen sizes with mobile-first touch interactions |
| Technology | Version | Purpose |
|---|---|---|
| React | 19.2 | UI framework with hooks-based architecture |
| Vite | 7.2 | Lightning-fast HMR dev server and build tool |
| Framer Motion | 12.40 | Declarative animations, viewport transitions, spring physics |
Three.js + @react-three/fiber |
0.184 | WebGL 3D particle background system |
| Tailwind CSS | 4.1 | Utility-first styling (via @tailwindcss/vite plugin) |
| Library | Purpose |
|---|---|
emailjs-com |
Client-side email sending for the contact form |
react-icons |
Icon library (Font Awesome, Simple Icons, etc.) |
gsap |
Advanced animation toolkit |
- Google Fonts: Orbitron · Space Grotesk · Syncopate
- Font Awesome 6.4 (CDN)
- react-icons (bundled)
Portfolio/
├── README.md
├── .github/
│ └── appmod/
│
└── portfolio/ # Vite + React application
├── index.html # Entry HTML (meta, fonts, favicon)
├── vite.config.js # Vite config (React + Tailwind plugins)
├── tailwind.config.js # Tailwind CSS configuration
├── postcss.config.js # PostCSS configuration
├── package.json # Dependencies & scripts
│
├── public/
│ ├── Icon.png # Favicon
│ ├── resume.pdf # Downloadable resume
│ ├── certificates/ # Certificate PNG images (6 files)
│ └── videos/ # Video demo files
│
├── src/
│ ├── main.jsx # React DOM root entry
│ ├── App.jsx # Root component (parallax + layout)
│ ├── App.css # Global app styles
│ ├── index.css # Base styles & design tokens
│ │
│ ├── assets/ # Hero preview images
│ │ ├── default.png
│ │ ├── about.png
│ │ ├── skills.png
│ │ ├── projects.png
│ │ └── contact.png
│ │
│ └── components/
│ ├── Navbar.jsx / .css # Responsive navigation bar
│ ├── Home.jsx / .css # Hero section with crossfade & typing
│ ├── TextType.jsx / .css # Typewriter text component
│ ├── RotatingText.jsx / .css # Spring-animated rotating text
│ ├── Antigravity.jsx # Three.js particle field (WebGL)
│ ├── About.jsx / .css # Bio, constellation, education timeline
│ ├── Skills.jsx / .css # Tech skills grid with directional pop-in
│ ├── Projects.jsx / .css # Project carousel & grid with video modals
│ ├── Experience.jsx / .css # Developer journey cards
│ ├── Achievements.jsx / .css # Awards marquee + coding profile stats
│ ├── Certifications.jsx / .css # Certificate carousel with drag/swipe
│ ├── Resume.jsx / .css # Resume viewer (currently disabled)
│ ├── Contact.jsx / .css # Contact form + social links
│ ├── HomeButton.jsx / .css # Floating home navigation
│ ├── MobileInfoScreen.jsx / .css # Mobile experience welcome screen overlay
│ └── Footer.jsx / .css # Minimalist glassmorphic footer with custom navigation
│
└── dist/ # Production build output
- Cinematic 6-step intro animation sequence
- Interactive navigation buttons with neon glow corners
- Crossfade image previews on hover (desktop) / tap (mobile)
- Typewriter-style name, traits, and role cycling
- Rotating "I Love to Design / Code / Innovate / Explore" text
- Social icon links: LinkedIn, GitHub, LeetCode, HackerRank, Email
- Personal overview with role description and feature pills
- Animated metrics: 200+ DSA problems · 10+ projects · AI systems
- Interactive SVG constellation with 6 orbiting tech planets
- Scroll-driven education timeline with laser beam animation
- Education: B.E. CSE (CGPA 8.45) · 12th (87.5%) · 10th (90%)
- Languages: HTML, CSS, JavaScript, Java, Python, C
- Frontend: React.js, Tailwind CSS
- Backend: Node.js, Express.js, Spring Boot
- Databases: MySQL, MongoDB, PostgreSQL
- DevOps: AWS, Docker, Git, GitHub, Vercel, Render, Linux
- AI/ML: TensorFlow, Hugging Face, NLP
- Tools: Jira, Trello
- Concepts: OOP/MVC, DSA, Problem Solving
| # | Project | Tech | Links |
|---|---|---|---|
| 1 | AI Puzzle Lab | React, TypeScript, Tailwind, Gemini AI | GitHub · Demo |
| 2 | Prompt Forge AI | React, Python, NLP, ML | GitHub · Demo |
| 3 | ChatBot Project | Python, React, NLP, ML | GitHub · Demo |
| 4 | EFFICACY Website | React, HTML, CSS, JS | GitHub · Demo |
| 5 | Social Media Monitor | Java, Spring Boot, MySQL, React | GitHub |
| 6 | Hanoi Arena | Java, React, Data Structures | GitHub · Demo |
| 7 | GCEE Website Redesign | HTML, CSS, JS, React | GitHub · Demo |
| 8 | TripSync | React, Python, Node.js, MySQL | GitHub · Demo |
| 9 | Standup Formatter | React, JS, Node.js | GitHub · Demo |
| 10 | AI Data Analyst Agent | Python, ML, NLP, React | GitHub · Video Demo |
| 11 | Student Management App | Java, JavaFX, Spring Boot, MySQL | GitHub |
| 12 | Mini Web Projects | HTML, CSS, JS | GitHub · Demo |
| 13 | Towers of Hanoi Solver | Java, React, Data Structures | GitHub · Demo |
| 14 | My Website | HTML, CSS | GitHub · Demo |
- AI Prompt Optimizer — published Edge Add-ons extension
- AgentVerse 2026 — Project Expo coordinator (30+ teams)
- Cloud Deployment — Render, Vercel, AWS (CI/CD pipelines)
- Class Seminars — Technical presentations & knowledge sharing
- 1st Prize in Budget Battle (GCEE)
- Multiple 2nd Prize wins — coding contests, paper presentations, trust chain (Kongu Engineering College)
- Top 5th team in AgentVerse AI Project Expo (30+ teams)
- LeetCode heatmap integration with live stats
- HackerRank: 5★ Gold in Java, C, SQL · 4★ Silver in Python
- Crash Course on Python (Coursera)
- Programming Foundations with JS, HTML & CSS (Coursera)
- Python Basic (HackerRank)
- C Programming (Coursera)
- Problem Solving Basic (HackerRank)
- Java Basic (HackerRank)
- Email integration via EmailJS
- WhatsApp direct message link
- Social profiles: LinkedIn, GitHub, LeetCode, HackerRank
- Graceful 2-second experience overlay recommending desktop/laptop viewing for optimal 3D/parallax effects
- Automatic fade-out animation and body scroll unlock
- Glassmorphic slate container (
backdrop-filter: blur(8px)) with subtle ambient Cyan & Purple glows - Single-row horizontal navigation items separated by inline dots
- Clean borderless social vectors with branding hover glows and transforms
- Compact arrow indicator with rise-up hover transition for smooth page top navigation
- Node.js ≥ 18
- npm ≥ 9
# Clone the repository
git clone https://github.com/Kishore-Krish19/Portfolio.git
# Navigate to the app directory
cd Portfolio/portfolio
# Install dependencies
npm install# Start the development server
npm run devThe app will be available at http://localhost:5173
# Build for production
npm run build
# Preview the production build
npm run preview
Made with 💙 by Kishore E