vikasyadavnsit
🚀 Vikas Yadav: An Operating System for Projects
A high-performance personal portfolio showcasing the intersection of AI/ML, Creative Coding, and Web Security.
🏠 Visit Live Website • 🔍 Technical Deep Dives • 🔧 Getting Started
🌟 Vision
This isn’t just a portfolio—it’s a decentralized hub for engineering excellence. Every project is built as a semi-autonomous “micro-app” with a heavy focus on client-side execution, zero-latency, and privacy-first logic.
✨ Featured Project Domains
🎮 Fun Stuff: AI & AR Toys
Experimental toys that push the boundaries of browser-based interaction.
- Fruit Ninja AR: Real-time MediaPipe Hand Tracking maps your finger to a virtual blade. Includes dynamic Web Audio API synthesis for SFX.
- AI Baby Monitor: On-device TensorFlow.js (COCO-SSD) for person detection and cry analysis via the
AnalyserNode. 100% private. - Talking Characters: Interactive 3D avatars processed through Three.js that echo voice inputs with custom audio filters.
- Eternal Journey: A modular, multi-page proposal theme with interactive timelines, flip cards, and dynamic story-driven logic.
🎨 Creative Stuff: Productivity Engines
Complex platforms for automation and visual expression.
- Algorithm Arena: Interactive LeetCode-style platform supporting JS, TS, Python, Java, C++, and Go. Features a custom resizable IDE and client-side test runner.
- Workflow Builder: A no-code visual engine powered by React Flow. Execute custom HTTP requests and sandboxed JS logic in a graph-based UI.
- Digital Whiteboard: High-performance canvas built with P5.js featuring infinite undo/redo and real-time state syncing via Firebase.
- Request Lab: A developer’s API client (Postman alternative) running entirely in-browser with local collection management.
🛡️ Security & Utilities: Privacy-First
Zero-knowledge utilities using modern browser security APIs.
- Security Suite: AES-256-GCM encryption using the SubtleCrypto API. Keys are derived via PBKDF2 locally; your password never leaves your device.
- TOTP Authenticator: Web-based 2FA with QR scanning and local HMAC-based code generation.
- Internet Speed Test: Real-time throughput analysis with historic performance tracking via Recharts.
🔍 Technical Deep Dives
1. Fruit Ninja AR: Hand-Tracking Game Loop
- **Initialization:** MediaPipe `hand_landmarker` task loads in a Web Worker to keep the UI thread smooth. - **The Tracking Loop:** `requestAnimationFrame` captures frames → MediaPipe identifies 21 landmarks → Landmark 8 (Index Tip) coordinates are mapped to the game canvas. - **Game Engine:** Custom physics engine manages fruit spawning, gravity, and bounding-box collision detection. - **Audio:** Real-time oscillators synthesize "woosh" and "splat" sounds, ensuring a < 50KB assets footprint for sound effects.
2. Workflow Builder: Visual Logic Execution
- **Visual State:** Managed via **React Flow** context with persistent storage in **IndexedDB**. - **Execution Engine:** A depth-first traverser walks the node graph. - **HTTP Nodes:** Execute client-side `fetch`. - **Code Nodes:** Execute user scripts in a sandboxed environment using `new Function()`. - **Transform Nodes:** Data mapping using JSONPath logic.
3. Security Suite: Zero-Knowledge Flow
- **Key Derivation:** Master Password + Salt → `PBKDF2` (100,000 iterations) → 256-bit AES Key. - **Encryption:** `crypto.subtle.encrypt` using AES-GCM mode for authenticated encryption. - **Storage:** Only the Initial Vector (IV), Salt, and Encrypted Blob are stored. This ensures the data is useless without the original master password.
4. Algorithm Arena: Multi-Language Simulation
- **Execution Model:** Native `new Function()` execution for JS/TS. - **Logic Mapping:** Regex-based transpilation layers for Python, Java, C++, and Go map idiomatic constructs (e.g., `fmt.Println`, `vector
Developed with 💻 by Vikas Yadav
Pushing the limits of what's possible in a browser.