#My First 3D-Portfolio WebSite

Priyansh sharma — Sat, 13 Jun 2026 07:27:57 +0000

**_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.

Connect: GitHub | LinkedIn | Portfolio
_**

DEV Community: Priyansh sharma