Skip to content

README.md

Latest commit

 

History

History
200 lines (149 loc) · 8.96 KB

README.md

File metadata and controls

200 lines (149 loc) · 8.96 KB

CHIMATA RAGHURAM

Typing SVG



React Three.js Framer Motion TypeScript Vite

Live Demo    LinkedIn


"A cinematic, 3D space-themed digital ecosystem redefining the professional portfolio. Engineered for zero compromise, blending high-performance WebGL graphics, real-time physics, interactive storytelling, and an integrated AI assistant to deliver a premium experience."

🌌 The Cinematic Universe

This portfolio has been completely reimagined as an interactive voyage through space. The experience includes:

  • Immersive 3D Preloader: Fly through a rotating solar system with hundreds of glowing stars before entering the portfolio universe.
  • Dynamic 3D Planetary Systems: Using React Three Fiber and Three.js, the background features massive, high-resolution planets (Earth, Moon, Neptune, Mars) that realistically morph and rotate as you scroll.
  • Parallax Starfields & Nebula Fogs: Deep, multi-layered parallax backgrounds that respond to your scroll and section transitions.
  • Glassmorphism 2.0: The UI floats beautifully above the 3D canvas with heavy blur backdrops, creating an ultra-premium aesthetic.

🖼️ Project Showcase

Visual evidence of the platform's high-fidelity design and interactive elements.

01. The Cinematic Hero Hub

Immersive WebGL dashboard featuring a massive, 3D rotating planetary body with high-resolution textures.


02. Tech Constellation & Skill Orbit

Interactive physics-based skill visualization floating in a deep space parallax environment.


03. Professional Internships

Career chronology presented through elegant glassmorphic cards over dynamic starlight trails.


04. The Project Vault

Premium 3D-tilt gallery showcasing real-world deployments against an atmospheric nebula backdrop.


05. Milestones & Achievements

Curated timeline of professional certifications and milestones seamlessly integrated into the cosmic theme.


06. Space Invaders Mini-Game

Custom 60FPS Canvas-based arcade experience seamlessly blending with the portfolio's universe.


07. Contact & Social Terminal

Central communication uplink with futuristic glass panels and an integrated AI assistant terminal.

🏗️ System Architecture

flowchart TD
    A[👤 User Browser] --> B[⚛️ React 19 + TypeScript]
    B --> C[🌌 Cinematic Universe\nThree.js & React Three Fiber]
    B --> D[✨ Framer Motion\nUltra-Smooth Animations]
    B --> E[🧠 Skill Orbit\nMatter.js 2D Physics]
    B --> F[🤖 TECHBOY AI\nOpenRouter Integration]
    B --> G[🎮 Space Invaders\nCustom Canvas Game Engine]
    C --> H[🌍 3D Textures\nRealistic Planet Rendering]
    F --> I[☁️ Vercel Serverless\nSecure API Proxy]
    I --> J[🔗 OpenRouter\nLlama 3.3 Engine]
    B --> K[🚀 Vercel Deployment]
Loading

⚡ Core Capabilities

Tip

Performance Optimized: This ecosystem is built on Vite 6 and React 19, utilizing Suspense and dynamic imports to ensure lightning-fast load times even with heavy 3D assets.

  • 🌍 WebGL 3D Engine: Uses Three.js and @react-three/fiber to render massive 3D planets, atmospheric scattering, and 3000+ interactive stars at 60FPS.
  • 🧠 Physics-Driven UI: Uses Matter.js to create an interactive "Skill Orbit" that responds to gravity and collision physics.
  • 🤖 Intelligence Layer: Integrated AI assistant that has deep knowledge of the developer's career history and project details.
  • 🎮 Micro-Game Integration: A custom 60FPS Space Invaders engine built natively on HTML5 Canvas provides active engagement and demonstrates complex state management.
  • ✨ Fluid Motion: framer-motion drives complex orchestrations, from the spaceship preloader sequence to scroll-triggered section reveals.

🛠 Tech Stack

The Core Engine

  • Framework: React 19
  • Build Tool: Vite 6
  • Logic: TypeScript
  • Styling: TailwindCSS + Vanilla CSS + Glassmorphism Shaders

The Specialized Layer

  • 3D Graphics: Three.js, React Three Fiber, React Three Drei
  • Animations: Framer Motion
  • 2D Physics: Matter.js
  • Icons: Lucide-React
  • AI: OpenAI / OpenRouter (Llama 3.3)
  • Game Engine: Custom HTML5 Canvas Logic

📁 Project Structure

PORTFOLIO/
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── universe/      # The 3D Three.js Engine & Cinematic backgrounds
│   │   │   ├── IntroScreen/   # The spaceship solar system preloader
│   │   │   └── ...            # Main UI modules (Hero, About, Projects, etc)
│   │   ├── hooks/             # Custom React hooks (useIsMobile, useActiveSection)
│   │   ├── utils/             # Helper functions (scrolling, sound engine)
│   │   ├── App.tsx            # Modular section aggregator & Lazy Loading
│   │   └── constants.ts       # Central Truth - All metadata (Projects, Skills, Stats)
│   ├── public/
│   │   └── planets/           # High-resolution WebGL planet textures
│   └── vite.config.ts         # Optimized build settings
├── backend/
│   └── chat.js                # Core API/chat logic & LLM integrations
└── api/                       # Vercel Serverless entry point (AI Proxy wrapper)

📜 Professional Ethics (License)

This project is licensed under the MIT License.

Important

Attribution Requirement: You are encouraged to study and fork this repository. However, proper attribution to Chimata Raghuram is mandatory. Do not represent this holistic design as your own original creation.

✍️ The Author

Chimata Raghuram
Python Full Stack Developer • AI/ML Enthusiast