A high-performance, visually-driven portfolio designed for film production and digital cinematography.
Jacqueline
Check out my GitHub Profile
- Compatibility: Mobile iOS/Tablet/iPad compatible
- Cinematic Video Grid: A custom-built "stack" of auto-playing 4K/8K video previews with optimized
playsinlineandmutedattributes for mobile performance. - Advanced Motion Design: Integration of GSAP (GreenSock Animation Platform) for ultra-smooth UI transitions and interactive elements.
- Dual Canvas Engine: Dual-layered
<canvas>rendering (scatterCanvasandcanvas1) for dynamic, interactive background textures that respond to user movement. - Context-Aware Navigation: A custom "Inquiry" and "Studio Toggle" navigation system designed for a minimal, immersive user experience.
- This project is optimized for high-performance Chromium engines. For the best experience, use Chrome or Edge.
| Browser / Device | Status | Performance Notes |
|---|---|---|
| Google Chrome | ✅ Optimized | Full support for 4K/8K grid & GSAP transitions. |
| Microsoft Edge | ✅ Supported | Matches Chrome's rendering engine. |
| iPad / iOS | 🛠️ Partial | ~2s delay with iPhone iOS and ~6s delay on iPad for canvas initialization, but scroll is fluid. |
| Apple Safari | Apple Safari: Not Recommended on Mac; however, on iPad/iPhone it is supported. There is a known rendering issue where scrolling content fails to appear over the element. This is due to Safari's hardware-accelerated layering. For the best experience, please use Chrome, Microsoft Edge or Firefox. |
Technical Note: While the interactive canvas has an initial loading delay on iPad/iOS, the scroll behavior is fully optimized to match the desktop Chrome experience.
Mobile UI Note: There is a known alignment offset where the footer logo does not center correctly on iPad and iPhone viewports. This is a CSS flex-box refinement currently in progress.
- Animations: GSAP (GreenSock), HTML5 Canvas API
- Frontend: Vanilla JavaScript (ES6+), Semantic HTML5
- Styling: CSS3 (Custom Grid Layouts, Video Overlays, and Blur Textures)
- Workflow: Resolve-based color aesthetic applied to web UI
- Frame Forge is built on the concept of "The Cinematic Canvas." The Frame Forge logo was created on canva.com.
- Every transition is timed to mimic a film cut, and the "capabilities" section uses a brutalist, high-contrast aesthetic to mirror professional production call sheets.
- I am an active developer with a high-frequency contribution rhythm, focusing on deep development cycles for immersive web experiences.
- Current Focus: Optimizing WebGL/Canvas performance for mobile devices.Daily Activity: Check out my Contribution Graph for a real-time view of my development streak.