🌟 Er. Vishnu Ramachandra — Executive Portfolio Source

AI Engineer • Agentic AI & Automation • Cyber-Physical Robotics • B2B Manufacturing
Academic Distinction: 10th University Rank across Visvesvaraya Technological University (VTU) • 9.11 CGPA Honours
Live Production Website: https://vishuu77.github.io/

---

🏛️ Architecture Overview

This repository contains the complete frontend and full-stack source code for Er. Vishnu Ramachandra's Executive Portfolio, built using modern Swiss-inspired Mondragon layout principles, tactile 3D elements, real-time spatial audio, and interactive agent telemetry.

Vishuu77.github.io/
├── src/
│   ├── components/
│   │   └── portfolio/
│   │       ├── MondragonHeader.tsx       # Multi-column brand navigation, audio toggles & quick links
│   │       ├── MondragonHero.tsx         # Asymmetric editorial typography, live IST clock & distinctions
│   │       ├── HeroGlobe3D.tsx           # Tactile 3D magnetic tilt & animated crimson signature
│   │       ├── MondragonMarquee.tsx      # High-speed telemetry ticker strip
│   │       ├── AboutSection.tsx          # Engineering philosophy, academic rank & bio
│   │       ├── FeaturedProjects.tsx      # Flagship cases with live portal & GitHub source links
│   │       ├── ProjectDetailModal.tsx    # In-depth architectural case studies & technical challenges
│   │       ├── ArchitectureDiagram.tsx   # Interactive SVG cyber-physical system blueprint
│   │       ├── AIAgentSandbox.tsx        # Live autonomous agent reasoning & digital twin sandbox
│   │       ├── SkillsBento.tsx           # Categorized engineering disciplines & protocol bento
│   │       ├── ExperienceTimeline.tsx    # Industry experience (Learner's Byte, Venttup Ventures)
│   │       ├── ContactSection.tsx        # Direct FormSubmit delivery, native mail fallback & WhatsApp chat
│   │       ├── CommandPalette.tsx        # Universal Ctrl+K launcher & portal switcher
│   │       ├── ResumeModal.tsx           # ATS-optimized interactive CV viewer & downloader
│   │       ├── VoiceGreetingBar.tsx      # Bilingual 360° spatial audio greeting (Kannada & English)
│   │       ├── SoundFX.ts                # Futuristic Web Audio API synthesizer sound engine
│   │       └── signaturePathData.ts      # Vector bezier paths extracted from authentic signature
│   ├── config/
│   │   └── portfolioImages.ts            # High-resolution optimized asset references
│   ├── App.tsx                           # Master application controller & dual-portal multiplexer
│   ├── index.css                         # Tailwind CSS v4 styling & typography rules
│   └── main.tsx                          # React 19 application entrypoint
├── public/                               # Static imagery, audio greetings & SVG assets
├── customer-portal.html                  # Amazon/Flipkart inspired retail storefront
├── employee-crm.html                     # Real-time warehouse fulfillment CRM
├── server.ts                             # Node.js backend engine with WebSocket multiplexer
├── package.json                          # Dependencies & build scripts
├── tsconfig.json                         # Strict TypeScript configuration
└── vite.config.ts                        # Vite bundler configuration

---

🛠️ Technology Stack

Layer	Technologies
Frontend Framework	React 19 • TypeScript • Vite
Styling & Design System	Tailwind CSS v4 • Custom Editorial Swiss Typography • Lucide React
3D & Vector Graphics	Three.js • SVG Bezier Calligraphy Paths • Kinetic Motion
Audio Synthesis	HTML5 Web Audio API • 360° Spatial Kannada & English Audio Greetings
Backend & Concurrency	Node.js (native --experimental-strip-types) • Express • WebSockets (ws)
Storage & Persistence	Google Sheets CSV Engine with Atomic In-Memory Locks
Deployment	GitHub Pages (Production Client) • Static PWA Fallback

---

🚀 Quick Start (Local Development)

1. Prerequisites

• Node.js (v20+ recommended)
• npm or pnpm

2. Installation

# Clone the repository
git clone https://github.com/Vishuu77/Vishuu77.github.io.git
cd Vishuu77.github.io

# Install dependencies
npm install

3. Run Locally

# Start local Vite development server
npm run dev

# Or start full-stack engine with WebSockets & Express
npm run start

Visit http://localhost:5173 in your browser.

4. Build for Production

npm run build

Compiled bundles are written directly to dist/.

---

🔗 Flagship Repositories & Engineering Cases

All featured cases showcased on the live portfolio link directly to their corresponding GitHub source repositories:

1. OmniCommerce Hub — Dual customer retail storefront & fulfillment CRM with Google Sheets persistence and <50ms WebSocket telemetry.
2. AgriBot 6-DOF Mobile Robot — Grant-funded (SRPP 2025–26) vertical soil drilling and sapling plantation robot with Raspberry Pi Pico & ESP32-CAM.
3. One-Man Agentic OS — Autonomous multi-agent crews orchestrated via Claude, Hermes Agent, OpenClaw, and Model Context Protocol (MCP).
4. B2B Engineering 3D CAD & Localization Suite — Autodesk Fusion 360 parametric assemblies, 2D drafts, DFM guidelines, and domestic hardware indigenization at Venttup Ventures.
5. eCommerce CRM Backend — FastAPI, Python, SQLite/Postgres returns decision engine with WhatsApp Cloud alerts.

---

📬 Contact & Inquiries

• Primary Email: nothingsvishnu@gmail.com
• WhatsApp Direct: +91 6361222162
• LinkedIn Profile: linkedin.com/in/vishnu-r-63095b282
• Location: Chintamani, Karnataka 563125 • Active in Bengaluru & Hyderabad

---

© 2026 Er. Vishnu Ramachandra • 10th University Rank, Visvesvaraya Technological University (VTU)