PERSONAL-WEBSITE

The About Section (01 // MANIFESTO)
Three archive cards with 3D tilt effect and corner decorations. each card has these little corner brackets that turn gold on hover. The tilt uses perspective(1000px) and rotates based on mouse position and max 6 degrees on each axis with a 1.02 scale. Springs back with a custom cubic-bezier when you leave. Each card has glitch image containers — images start grayscale at 115% contrast and 90% brightness, then go full color on hover with a scanline overlay that fades to 30% opacity.
There’s even a little glitch-jitter animation that fires once on hover — 0.15 seconds of 3-step translateY shifts. The three cards are: THE DEVELOPER, THE GUITARIST, and THE ARCHIVIST.

The Interests Section (02 // INTERESTS)
Six interest cards in a 3-column grid with a white grid background image and a dark overlay. Each card has a white grid box-shadow that gets brighter on hover with a gold inset glow. The cards are: ANIME, TECHNOLOGY, ARTIFICIAL INTELLIGENCE, UI/UX DESIGN, JAPANESE LANGUAGE, VIDEO EDITING. Below the cards there’s a scrolling ticker marquee that loops “ANIME, TECHNOLOGY, ARTIFICIAL INTELLIGENCE, UI/UX DESIGN, JAPANESE LANGUAGE, VIDEO EDITING, BUILDING SOFTWARE.” at 30 seconds per cycle.
Then there’s a Media Archive subsection (02.A) with 7 images in a 3-column masonry layout. All have the same glitch container effect and magnetic hover.

The Showcase Section (03 // SHOWCASE)
“CUTS FROM MY SHORTS” — this one’s personal. Two video edits(made by me on who is strongest edits loll) side by side in a brown neumorphism box . Each video is 9:16 portrait ratio. The play button only appears when the video is paused — when you click it, the button fades out with opacity transition and the video plays. When paused, the button comes back. Videos loop and have sound enabled. The neumorphism box uses the same neu-box styling as the projects section with the rounded corners, layered shadows, and dark overlay

Lately i have been working on my personal site which is also another mission on stardance and i thought it should have a vintage vibes not the tech one i usually use so then i started with the web and tried my best to make the whole vibe like retro vintage computing aesthetic. Think of like when the old CRT monitors meets modern web design. So i added this CRT overlay with scanlines that flicker and film grain that literally animates. It makes the whole site feel like you’re looking at an old type of monitor. There’s also a paper texture overlay that gives everything this aged feel»

The custom cursor is probably the most extra thing on this site. It’s a glowing gold dot with a ring around it(cause it had an vintage ahh vibe), and there’s an 8-dot trail that follows your cursor with progressive lag. Each trail dot uses lerp to follow the one before it with decreasing speed so they fan out behind your cursor. when you hover over interactive elements the ring scales up and glows brighter. I spent way too long getting the lerp values right so it feels smooth and not janky (^///^)

For hero section i actaully wanted to add a scroll down animation video but it would have sucked so now it is a 300vh tall and uses sticky positioning so the background stays fixed while you scroll. There’s a background image with a grid overlay that literally drifts diagonally forever , and a scanline that sweeps down the screen. The title “BUILDING DIGITAL ARTIFACTS THAT FEEL ALIVE” ahh reveals line by line as you scroll down, same with the tagline, badges, stats, and CTAs. Everything fades in with staggered timing>.

The contact section has two parts - four contact cards (Email, GitHub, LinkedIn, Twitter) with magnetic hover effects, and an auto-typing terminal(which i thought would look really look xD). Thhe terminal types out commands like cat manifesto.txt and echo “keep sailing” with a blinking cursor, then shows the output line by line. It cycles between different scripts automatically. Still the website is in progress…