**_Built a zero-gap scroll-driven frame animation portfolio with glassmorphism UI and water effects — no frameworks, pure HTML/CSS/JS.
tags: webdev, css, javascript, frontend, beginners
canonical_url: https://fxpriyansh.great-site.net
As a self-taught Class 12 student with no professional experience to showcase, I took a different route — I made the portfolio itself the proof of work.
Instead of a static page, I built a scroll-driven cinematic experience. 150 frames sequenced like stop-motion, each scroll tick advancing exactly one frame with zero gaps.
Live: fxpriyansh.great-site.net
The Architecture
Zero-Gap Frame Engine
The naive single-img src-swap creates a blank flicker. Solution: two <img> elements with z-index toggle. The next frame loads onto the hidden element, then z-index flips instantly. No transitions, no opacity fades.
All 150 frames preload into imageCache on page load with a real progress bar. The site only reveals when every frame is cached.
World System
150 frames split into 5 worlds of 30 frames each, each with its own accent color. Crossing a world boundary triggers a portal flash animation. A floating indicator shows the current world.
Glassmorphism UI
backdrop-filter: blur(20px), champagne gold borders, noise textures, multi-layer text shadows for readability against cinematic backgrounds.
Tree Timeline
Experience and projects use alternating left-right nodes with 3D pop animation (perspective(800px) rotateY(6deg) scale(0.85)). Central line fills with gold as you scroll.
Elastic Water
Canvas particles with velocity-based squash/stretch physics. Click for splash, mouse move for droplets. Respects prefers-reduced-motion.
The Stack
- Pure HTML/CSS/JS — no frameworks or build tools
- Google Fonts: Anton, Space Grotesk, Unbounded, Cormorant Garamond
- Google Apps Script webhook for forms
- InfinityFree hosting
Lessons
- Dual-image buffer is the only zero-gap solution for frame animation.
- Preload everything before showing UI.
- Respect
prefers-reduced-motion. - SEO from day one: JSON-LD, OG tags, sitemap, Search Console.
This portfolio doesn't show what I've built — it shows how I build. Every pixel, every timing curve, every shadow radius was deliberate. No fake experience. No frameworks. Just execution.
If you're a student builder — ship it.
Top comments (0)