An immersive, interactive portfolio website styled as a classified government dossier with Stranger Things-inspired aesthetics and supernatural visual effects. This project combines retro 80s styling with modern web technologies to create an engaging, theme-park-like experience.
- Psychic Cursor System - Custom cursor with glowing effects that responds to user interaction
- Parallax Scrolling - 3D depth perception with mouse-tracking and mobile gyroscope support
- "Upside Down" Mode - Toggle inverted display with Vecna curse effects (red vignette, flicker animation)
- Responsive Design - Seamless experience across desktop and mobile devices
- Multi-track playlist with international music (22+ tracks)
- Interactive audio controls with volume slider
- Real-time audio visualization and waveform display
- Spatial audio effects with Web Audio API (drone oscillators, filters, noise generation)
- Retro CRT scan-line effect and film grain
- Color-coded section indicators (red, cyan, amber, purple, lime)
- Glitch animations and flickering text
- Dynamic box shadow and glow effects
- Canvas-based particle and ripple effects
- Touch-drag interaction for jukebox controls
- Device orientation (gyroscope) parallax effects
- Device motion sensor integration
- Touch-optimized UI
- HTML5 - Semantic markup with MathJax support for equations
- CSS3 - Advanced animations, gradients, and perspective transforms
- JavaScript - Web Audio API, Motion/Orientation sensors, Canvas 2D
- Fonts - VT323 (monospace retro), Baskervville (serif)
- External Libraries - MathJax for mathematical notation
- index.html - Main portfolio page with classified dossier styling
- jukebox.js - Audio player with Web Audio effects engine
- parallax.js - 3D parallax scrolling system (mouse + gyroscope)
- mobile.html - Mobile-optimized version
- README.md - Project documentation
- Open
index.htmlin a modern web browser - Move your mouse to trigger parallax effects
- Press the play button to start the jukebox
- Use the volume slider to adjust audio level
- Click the "Upside Down" button to activate the Vecna curse effect
- On mobile: Tilt your device to see gyroscope-based parallax effects
- Chrome/Edge 88+
- Firefox 85+
- Safari 14+
- Mobile browsers supporting Web Audio API and Device Orientation events
This project draws aesthetic and functional inspiration from Netflix's "Stranger Things," featuring:
- Government classified document styling
- Hawkins Lab color palette
- 80s/90s nostalgic design
- Supernatural glitch effects
- Portal/Upside Down visual metaphors
- Audio files (track1.mp3 - track22.mp3) must be provided separately
- Gyroscope features require HTTPS on mobile devices
- Best viewed on larger screens for full parallax effect
- Disable cursor in CSS for custom psychic cursor display