Data Analytics & Vibe Coding Portfolio
Live Demo • Features • Tech Stack • Setup • Support
A premium, AI-driven interactive portfolio merging Data Analytics with "Vibe Coding" — transforming static resumes into immersive digital experiences.
This portfolio is a serverless Single Page Application (SPA) showcasing the intersection of Data Engineering and Creative Development. Beyond a traditional landing page, it features an intelligent AI assistant, interactive tools, and a modern glassmorphism design.
Built with a focus on performance and aesthetics, the application uses a smart offline AI system to provide an interactive narrative of my professional journey at KPMG and academic pursuits in Canada — no API keys required!
- Matrix rain effect — Japanese characters cascading down the screen
- 3-Phase boot sequence — Logo → Diagnostics → Epic Reveal
- Lightning storms — Random procedural lightning bolts
- Particle vortex — 150 particles spiraling into the center
- Mouse trail — Neon glow trail following your cursor
- Text scramble — Characters shuffle before revealing final text
- Power surge flash — Dramatic white flash on transitions
- Glitch slice effect — Horizontal screen tears with hue rotation
- System sound effects — Web Audio API sci-fi boot sounds
- CRT overlay — Scanlines, flicker, and vignette effects
- Hexagon grid — Animated cyberpunk background
- Heartbeat monitor — Real-time pulse animation
- Circuit traces — Animated SVG circuit board paths
- Dramatic zoom transitions — Slides zoom in/out with depth
- Parallax depth layers — Multi-layer parallax effects
- Blur depth of field — Far slides blur for focus effect
- Zigzag animations — Alternating slide directions
- Keyboard & touch support — Arrow keys, wheel, and swipe
- Auto-advance — Automatic slide progression after idle
- Mobile fallback — Clean standard scroll on mobile devices
- Intelligent keyword matching with fuzzy search
- Conversation memory and context awareness
- Quick reply suggestions for guided exploration
- 14 knowledge categories covering experience, skills, projects & more
- No API required — works 100% offline
- Vibe Generator — AI-powered tech stack suggestions based on project ideas
- Smart Carousel — Dynamic text timing based on content length
- Spotlight UI — Cursor-tracking lighting effects on project cards
- Expandable Certifications — 30+ certifications in a clean, collapsible grid
- Auto-scroll — Automatic page scroll with 10s initial delay
- Floating buttons — Coffee & chat buttons appear after scroll starts
- Glassmorphism cards with frosted glass effects
- Responsive flux — Mobile-first design with Tailwind CSS
- Dark mode optimized with emerald accent colors
- Smooth animations throughout
| Section | Description |
|---|---|
| Hero | Animated typing carousel with role highlights |
| About | Interactive code block + skill cards |
| Experience | Timeline of KPMG, education, and work history |
| Certifications | 30+ certs from Oracle, Cisco, Microsoft, KPMG & more |
| Projects | Bento grid with PRISM, NoPara, SonicClear & research |
| Contact | Email modal, social links, resume download |
| Layer | Technology |
|---|---|
| Core | HTML5, CSS3, Vanilla JavaScript (ES6+) |
| Styling | Tailwind CSS (CDN), Custom CSS, Glassmorphism |
| Graphics | Canvas API (Matrix rain, particles, lightning, vortex) |
| Audio | Web Audio API (procedural sci-fi sounds) |
| Icons | Lucide Icons |
| AI | Smart offline response system (no API needed) |
| Deployment | GitHub Pages + Custom Domain |
# 1. Clone the repository
git clone https://github.com/JesunAhmadUshno/Jesun_Dev.git
cd Jesun_Dev
# 2. Open in browser (no build step needed!)
# Option A: Double-click index.html
# Option B: Use a local server
python -m http.server 8080
# Then visit http://localhost:8080No configuration required — the AI chat works completely offline!
Jesun_Dev/
├── index.html # Main HTML structure
├── style.css # Custom styles & animations
├── script.js # AI chat, carousel, interactions
├── favicon.png # Site favicon
├── CNAME # Custom domain config
├── LICENSE # MIT License
└── README.md # This file
Modify the color palette in style.css or Tailwind config:
// In index.html - Tailwind config
colors: {
neutral: {
850: '#1f1f1f',
900: '#171717',
950: '#0a0a0a', // Background
}
}
// Accent: emerald-500 (#10b981)| Project | Description | Tech |
|---|---|---|
| PRISM | Zero-trust browser-based data analytics | Pyodide, React, WASM |
| NoPara | 100% private media converter | FFmpeg.wasm, React |
| SonicClear | AI audio enhancement | PyTorch, FastAPI |
| Fabric Defect Detection | Published research with Neural Networks | TensorFlow, CV |
- 🔴 Oracle — Cloud Infrastructure AI Foundations Associate
- 🔵 Microsoft — Career Essentials in Data Analysis
- 🟢 Cisco — Junior Cybersecurity Analyst Path (7 certs)
- 🟣 KPMG — Digital & Data Foundations (6 certs)
- 🟡 SkillFront — Certified Lean Six Sigma White Belt
If you find this portfolio inspiring or useful, consider supporting my work:
This project is licensed under the MIT License — see the LICENSE file for details.
Designed & Vibe Coded with ❤️ by Jesun Ahmad Ushno
© 2026 Jesun Ahmad Ushno. All rights reserved.