Immersive Personal Portfolio Built with React 19: AI Voice Navigation & Cyberpunk Aesthetics

This is a production-grade personal portfolio built by developer Arup Das using React19, integrating artificial intelligence, modern front-end technologies, and immersive user experience. The project adopts a hybrid data strategy (real-time GitHub API, Firebase Firestore CMS, Cloudinary storage) to enable dynamic content updates. It features AI voice navigation, a cyberpunk welcome interface, Three.js starfield background, and other distinctive functions, combining technical demonstration with practical value.

Project Background

This portfolio is not only a platform to showcase technical capabilities but also an experiment in the deep integration of AI, front-end technologies, and immersive experiences. It uses a hybrid data strategy: combining real-time GitHub API data, Firebase Firestore content management system, and Cloudinary image storage to enable dynamic content updates without rebuilding.

Core Tech Stack

UI Layer: React19 component-based architecture, React Router v6 routing, Tailwind CSS + CSS variable design token system

Motion System: Framer Motion page transitions, GSAP ScrollTrigger scroll animations, Canvas 2D particle effects, Three.js + @react-three/fiber 3D starfield

Data Layer: GitHub REST API v3 real-time data, Firebase Firestore CMS, Firebase Authentication admin authentication, Cloudinary image storage

AI Features: AI voice navigation powered by Web Speech API, with playbackEngine.js for context-aware explanations

Innovative Features

AI Voice Navigation Assistant

• Glassmorphism floating panel (desktop) / bottom drawer (mobile) interface
• Waveform visualizer and real-time subtitles
• Chapter navigation map and context-aware explanations

Cyberpunk Welcome Interface

• Typewriter-style terminal command sequence
• 3D tilted cards and purple particle effects
• CRT grid scanline visuals

Three.js Starfield Background

3000 stars rotating slowly, optimized for low-power GPU mode and DPR limits, automatically disabled on touch devices

Internship & Academic Showcase

• Internship section: GSAP animations + glassmorphism layout
• Paper publications: DOI links + PDF downloads
• Certificate display: Lightbox effect gallery

Responsive Design

Desktop: Futuristic coding monitor, real-time typing terminal, Three.js starfield background

Mobile: Pulsating AI light sphere + orbital rings, glassmorphism title bar + AI navigation button

Device detection uses pointer events to ensure accurate identification of device types

Built-in CMS System

Login methods: Double-click avatar or Firebase email/password

Features:

• Homepage management: Edit name, bio, social links, etc.
• About page: Upload avatar, edit bio and skill tags
• Project management: Set repo priority levels, add descriptions and tags
• Gallery management: Photo CRUD + Cloudinary upload
• Service cards: Edit content, colors, and tags

All updates are synced to Firestore in real time, no rebuild required

Performance Optimization

• Animation performance: CSS @property gradient borders, Canvas 2D particles using requestAnimationFrame, Three.js low-power mode

• Data fetching: GitHub API pagination, parallel requests for language stats, dual-source calculation of contribution days

• Image optimization: Cloudinary automatic format conversion and size optimization

• Code splitting: Component-level lazy loading to reduce first-screen load time

Technical Insights

1. AI-UX integration: Voice navigation combines user data to generate personalized explanations
2. Immersive design: Cyberpunk aesthetics + glassmorphism + Three.js 3D elements
3. No-code CMS: Firestore allows non-technical users to update content easily
4. Balance between performance and experience: Device detection + low-power mode ensure smooth operation

This project is a valuable reference for learning React19 new features, AI voice API applications, and modern portfolio construction.