✨ Swapnoneel Mondal — Portfolio V2

Computer Science Scholar • High-Performance Frontend Engineer • Vibe Coder

---

👨‍💻 About Swapnoneel Mondal

I am a Computer Science & Engineering Scholar at the Institute of Engineering & Management (IEM), Kolkata, specializing in modern frontend architecture, interactive digital simulation tooling, and AI-accelerated workflows ("vibe coding").

My work focuses on crafting bespoke, ultra-responsive digital interfaces that combine clean architectural foundations with state-of-the-art interactive aesthetics — from Web Audio API spatial synthesizers and liquid glassmorphism to machine learning analytics dashboards and real-time computer vision applications.

---

🚀 Key Highlights & Architectural Features

💎 1. Liquid Glass & Bento Grid Aesthetics

• Custom liquid glass cards with dynamic specular highlights, border beams, and refractive glow shaders.
• Harmonious interactive Bento Grid layout featuring components from Kokonut UI, Magic UI, and custom React Bits choreography.

🎵 2. Continuous Spatial Web Audio Synthesizer

• Built using the native Web Audio API with zero external audio assets or latency.
• Gliding cursor and touch movements synthesize notes along the C Emerald Pentatonic Scale in real-time with continuous stereo panning and velocity-driven resonance filters.
• Includes animated 3-bar equalizer toggle and tactile haptic audio feedback.

🌗 3. Obsidian Dark & Light Mode Engine

• Clean Tailwind CSS v4 theming using CSS custom property tokens (--text-primary, --card-bg, --border-color).
• Custom animated Kokonut Switch toggle with full SSR/hydration safety.

📱 4. Mobile & Touchscreen Native Optimization

• Real-time finger-following fluid glass lens and holographic tap burst shockwaves.
• Single-thumb accessible navigation drawer and touch-friendly credentials export.
• Zero horizontal overflow and strict iOS Safari font scaling compliance.

---

🛠️ Featured Projects & Engineering Works

Project	Category	Tech Stack	Description
Dynovision	Vision & Gesture AI	React 19, MobileNetV2, Web APIs	Real-time computer vision engine for body, hand, and facial affective emotion detection with interactive HUD panels.
LogiSimulate	Digital Logic Tooling	Python, C, Logisim	Digital logic circuit simulator for analyzing truth tables, boolean gate delays, and combinational networks.
DataPredict ML	Machine Learning Analytics	Python, MATLAB, NumPy	Data-driven predictive modeling system for exploratory data analysis, matrix transformations, and regression.
NeuroGraph WebGPU	WebGPU & Neural Architecture	WebGPU, WGSL, TypeScript	High-throughput tensor execution engine and interactive computation graph visualizer profiling neural layer activations at 120+ FPS.

---

🧰 Core Tech Stack & Tooling

Frontend & Web:    React 19 • Next.js 16 (App Router + Turbopack) • TypeScript • JavaScript
Styling & Motion:  Tailwind CSS v4 • Framer Motion • Anime.js • Kokonut UI • Magic UI
Audio & Systems:   Web Audio API • WebGL • WebGPU • HTML5 Canvas
Languages:         Python • C • JavaScript • TypeScript • MATLAB • WGSL
Tools & Dev:       Git • GitHub • VS Code • Logisim • Vercel • Netlify

---

📂 Project Architecture

portfoliov2/
├── public/
│   ├── images/
│   │   ├── dynovision.png          # Real Dynovision vision HUD preview
│   │   ├── logisimulate.jpg        # Digital logic schematic preview
│   │   ├── datapredict-ml.jpg      # Machine learning dashboard preview
│   │   └── neurograph-webgpu.jpg   # WebGPU neural computation graph preview
│   └── Swapnoneel_Mondal_Resume.pdf# Verified downloadable Resume/CV
├── src/
│   ├── app/
│   │   ├── globals.css             # Obsidian & Light theme tokens
│   │   ├── layout.tsx              # Hydration-safe RootLayout
│   │   └── page.tsx                # Composition of sections
│   ├── components/
│   │   ├── Navbar.tsx              # Floating dock with Kokonut switch & audio toggle
│   │   ├── Hero.tsx                # Hero section with animated gradient headers
│   │   ├── TechStack.tsx           # Interactive Bento skill showcase
│   │   ├── Projects.tsx            # Project showcase with modals & live links
│   │   ├── Experience.tsx          # Timeline of history & IEM scholar journey
│   │   ├── InteractiveResume.tsx   # Verified credentials hub & PDF download
│   │   ├── Contact.tsx             # Direct message dispatch to Gmail
│   │   ├── SoundProvider.tsx       # Global spatial Web Audio provider
│   │   ├── ThemeProvider.tsx       # Dark/Light mode theme state
│   │   └── ui/                     # Liquid glass, shimmer buttons, magnet buttons
│   └── lib/
│       ├── sound-system.ts         # Spatial mouse audio synthesizer engine
│       └── utils.ts                # Class merging & styling utilities
└── package.json

---

💻 Local Setup & Development

1. Clone the repository:

   git clone https://github.com/KaiX-Jr/PortfolioV2.git
   cd PortfolioV2

2. Install dependencies:

   npm install

3. Launch the development server:

   npm run dev

4. Open in browser: Navigate to http://localhost:3000.

5. Build for production:

   npm run build

---

📬 Contact & Connect

• Email: swapnoneelmondal@gmail.com
• GitHub: @KaiX-Jr
• Instagram: @neelbaba_
• Location: West Bengal, India
• Institution: Institute of Engineering & Management (IEM), Kolkata

---

_{Designed & Developed by Swapnoneel Mondal © 2026. All rights reserved.}