VEX — Personal Landing Page Design

This is a personal design & skill showcase — not a real company's website and not a clone of anyone's product. All names used in the page (VEX, Viktor Oddy, Vortex Studio) are fictional placeholders. The layout, animations, and styling are my own work, built to demonstrate my frontend skills.

Designed & developed by Faiz Alam.

Preview

Open index.html in any modern browser — no build step, no install.

start index.html        # Windows
open  index.html        # macOS
xdg-open index.html     # Linux

What's in the page

• Video hero — full-screen looping background, liquid-glass navbar, character-by-character heading reveal, staggered fade-ins for subheading / CTAs / tag.
• Black → white seam — gradient transition between the dark hero and the light studio page below.
• Studio intro — bio block with a serif/mono mix and in-view fade-ups.
• Infinite marquee — auto-scrolling row of project GIFs.
• Parallax quote — headline quote with a portrait that translates on scroll.
• Two-card pricing — a dark card and a light card side by side.
• Testimonial carousel — auto-advances every 3s, pauses on hover, with prev/next controls.
• Projects stack — staggered in-view reveals.
• Partner section — mouse-trail GIF cursor effect + CTA button.
• Footer + copyright bar — with the "Designed & developed by Faiz Alam" credit.
• Fixed bottom nav — floating pill with logo + CTA.

Tech

• HTML / CSS / JS — single index.html, no bundler.
• React 18 (via unpkg UMD) with Babel Standalone for in-browser JSX.
• Tailwind CSS via the Play CDN, extended with custom ink / ink2 / paper / paper2 / muted colors.
• Google Fonts — Inter (body), Instrument Serif (accent), JetBrains Mono (mono labels).
• Custom CSS animations: marquee, fadeInUp, trailFade.
• IntersectionObserver for in-view reveals, requestAnimationFrame for scroll parallax.

File structure

Webiste/
├── index.html        # The entire landing page
├── README.md         # This file
└── .gitignore

Notes

• The page pulls a hero video and several GIF assets from third-party CDNs. Internet access is required for them to render.
• This is a portfolio piece. Nothing here represents a real product or company.

Credit

Designed & developed by Faiz Alam — a personal skill showcase.