An agency-grade, highly interactive Cyberpunk 3D Creator Portfolio built for Zney (@psy-zney). The project combines a cinematic Three.js workspace, tactile desktop interactions, bilingual content, custom audio, and a completely custom-built full-stack analytics engine.
🌐 Live Website: zney295.id.vn
The workspace scene is built around a GLB workstation model and enhanced with runtime interaction logic:
- Monitor Entry Point: Clicking the computer screen seamlessly transitions you from the 3D room into the interactive 2D desktop layer.
- Object Hover Feedback: Interactive objects are detected with a raycaster and highlighted through neon post-processing outlines.
- Animated Monitor Texture: A custom GIF is rendered onto the 3D monitor surface while preserving correct orientation and presentation.
After entering the screen, the experience switches to a crisp HTML/CSS overlay for pixel-perfect UI:
- Mechanical Keyboard Simulation: Physical keyboard events drive a visual mechanical keyboard module.
- Cat Paw Typing Animation: Cute cat paws dynamically reach toward the exact key positions you type on your real keyboard.
- RGB LED Lighting System: Features Wave, Press, and Ripple lighting modes that react to user input.
- Custom Sound Pack: A Web Audio API integration plays accurate CherryMX Black mechanical switch sounds based on physical typing timing.
Unlike most portfolios that use Google Analytics, this project features a 100% custom-built telemetry and analytics system:
- Session & Flow Tracking: Tracks unique user journeys (e.g.,
Intro ➔ Workspace ➔ Admin) using session storage and SQLite. - Hono & Bun Backend: A high-performance REST API hosted on a private VPS, connected securely via Cloudflare Tunnels.
- Secure Admin Dashboard: A private, password-protected internal dashboard with real-time stats, visitor geo-location, and user journey flow charts.
- Defaults to English, with full Vietnamese support via a language toggle.
- Responsive design with an orientation guard that prompts mobile users to rotate their device for the optimal 3D experience.
| Component | Technology |
|---|---|
| Frontend Core | React 18.3 + TypeScript 5.5 |
| Styling & Layout | Tailwind CSS 3.4 |
| 3D & WebGL | Three.js + React Three Fiber |
| Backend API | Bun + Hono |
| Database | SQLite (bun:sqlite) |
| Icons & Typography | Lucide React + Google Fonts |
| CI/CD | GitHub Actions ➔ GitHub Pages |
Zney-Portfolio/
├── src/
│ ├── components/
│ │ ├── IntroPage.tsx # Landing page and language-aware hero
│ │ ├── ModelAnalyzer.tsx # 3D workspace, GLB loading, loader, transitions
│ │ ├── DesktopOverlay.tsx # Pixel desktop, mechanical keyboard, cat paws
│ │ └── AdminDashboard.tsx # Secret analytics dashboard with flow charts
│ ├── utils/
│ │ ├── visitorTracker.ts # Frontend telemetry and session tracking
│ │ └── audioPreloader.ts # Audio management
│ └── App.tsx # Routing and global state
├── analytics-backend/ # Full-stack backend for visitor tracking
│ ├── index.ts # Hono/Bun REST API endpoints
│ └── analytics.sqlite # SQLite database
├── public/
│ ├── CNAME # Custom domain mapping (zney295.id.vn)
│ ├── main.glb # Active 3D workspace model
│ └── sounds/ # Mechanical keyboard sound packs
└── package.json # Project scripts and dependencies
- Zney-Portfolio — Interactive cyberpunk 3D portfolio and workspace experiment.
- beatsync — Listen to music in real-time sync with friends across interactive web rooms with WebRTC audio.
- Security — Cloud relay server and automated Windows security monitoring daemon for proactive system protection.
- LearningEnglish — Intelligent language acquisition app featuring automated tense verification and sentence parsing.
- mandycrimson — Modern full-stack product catalog and interactive presentation web platform.
Designed and engineered by Zney (@psy-zney).
- GitHub: @psy-zney
- Facebook: psyotic.zney
Made with ❤️ and Cyberpunk Aesthetics by Zney