Portfolio
Loading Shiham's portfolio
Preparing the latest projects, skills, and contact paths with a quiet production-ready polish.
Initializing portfolio
Projects · Skills · Contact
Portfolio
Preparing the latest projects, skills, and contact paths with a quiet production-ready polish.
Initializing portfolio
Projects · Skills · Contact
Created as a personal frontend animation project, this fan-made GTA VI-inspired landing page explores how game promotional sites use motion, full-screen media, and long-scroll storytelling. It targets visitors who want an immersive visual preview rather than a data-driven application, and it was built for hands-on practice with GSAP concepts.
The experience moves through a masked hero reveal, pinned video sequences, Jason and Lucia character showcases, a postcard-style media section, a final video transition, and a coming-soon outro. ScrollTrigger timelines coordinate pinning, opacity changes, image movement, scaling, and video current-time scrubbing as visitors move through the page.
The React application is organized as independent page-section components composed by App.jsx. Tailwind CSS and custom CSS handle the responsive visual system, while a reusable media-query hook supplies separate hero-mask values for mobile, tablet, and desktop layouts. I completed the project independently, including the component structure, styling, animation timelines, media integration, and documentation.
Related projects
Jan 2026 – Jun 2026
A multi-vendor commerce platform connecting buyers, sellers, and administrators through dedicated storefronts, dashboards, payments, chat, and personalized discovery.
A single-page React client composes independent visual sections with no backend, API, database, authentication, or persistent state. GSAP ScrollTrigger timelines run inside section components, while Tailwind CSS, custom CSS, local media assets, and responsive mask settings provide the presentation layer.
A cinematic GTA VI-inspired landing page recreation built to practice GSAP animations, ScrollTrigger, pinned sections, video scrubbing, and interactive frontend storytelling.
GTA VI Landing Page is a cinematic frontend recreation inspired by the visual style and promotional feel of the GTA VI landing page.
This project was developed as a hands-on animation practice project after learning GSAP concepts. The main purpose was to understand how modern interactive landing pages use scroll-based animations, pinned sections, timeline sequencing, video scrubbing, masking effects, and responsive animation values to create an immersive storytelling experience.
The project is built with React, Vite, Tailwind CSS, GSAP, and ScrollTrigger. It includes a hero intro, animated reveal effects, multiple scroll-controlled video sections, character showcase sections, a postcard-style media section, and a final coming-soon outro.
This is a fan-made educational recreation created only for learning and frontend animation practice.
| Category | Technology |
|---|---|
| Frontend Library | React |
| Build Tool | Vite |
| Language | JavaScript |
| Animation Library | GSAP |
| Scroll Animations | GSAP ScrollTrigger |
| React GSAP Helper | @gsap/react |
| Styling | Tailwind CSS v4 |
| Responsive Handling | React Responsive |
| Media | HTML5 Video, WebP, SVG, PNG, MP4 |
| Deployment | Vercel |
gta-vi-landing-page/
├── constants/
│ └── index.js # Shared constants and reusable data
│
├── public/
│ ├── fonts/ # Custom local fonts
│ ├── images/ # Image, SVG, PNG, and WebP assets
│ └── videos/ # MP4 video assets used in scroll sections
│
├── src/
│ ├── sections/
│ │ ├── ComingSoon.jsx # Coming soon / release information section
│ │ ├── Final.jsx # Final scroll-controlled video section
│ │ ├── FirstVideo.jsx # First pinned video scrub section
│ │ ├── Hero.jsx # Main hero section
│ │ ├── Jason.jsx # Jason character showcase section
│ │ ├── Lucia.jsx # Lucia character showcase section
│ │ ├── NavBar.jsx # Fixed navigation bar
│ │ ├── Outro.jsx # Final outro section
│ │ ├── PostCard.jsx # Postcard-style media card section
│ │ └── SecondVideo.jsx # Second pinned video scrub section
│ │
│ ├── App.jsx # Main application composition
│ ├── index.css # Global styles, Tailwind imports, custom fonts
│ └── main.jsx # React application entry point
│
├── eslint.config.js # ESLint configuration
├── index.html # Vite HTML entry file
├── package.json # Project dependencies and scripts
├── package-lock.json # npm lock file
├── vite.config.js # Vite configuration
└── README.md
Make sure you have the following installed on your computer:
Check your versions:
node -v
npm -v
Clone the repository
git clone git@github.com:theShihamAhamed/gta-vi-landing-page.git
cd gta-vi-landing-page
Install dependencies
npm install
Start the Vite development server:
npm run dev
Open the local development URL shown in your terminal.
Usually it will be:
http://localhost:5173
npm run dev
Runs the app in development mode using Vite.
npm run build
Creates an optimized production build inside the dist folder.
npm run preview
Runs a local preview of the production build.
npm run lint
Runs ESLint to check code quality issues.
The landing page is divided into multiple reusable section components. Each major visual section is separated into its own file inside the src/sections/ folder. This keeps the project organized and makes each animation section easier to understand and maintain.
GSAP ScrollTrigger is used to create scroll-based animations across the page. Sections are animated based on scroll position, allowing the page to behave like an interactive story rather than a static landing page.
The video sections use ScrollTrigger pinning to keep a video fixed on screen while the user scrolls. During this pinned scroll period, the video playback is controlled using scroll progress, creating a trailer-like animation effect.
Instead of playing some videos normally, the project connects video progress to the user's scroll position. As the user scrolls forward or backward, the video moves forward or backward accordingly.
This technique creates a cinematic experience commonly seen in premium product pages and interactive storytelling websites.
GSAP timelines are used to sequence multiple animations in a controlled order. This helps create smooth transitions between opacity changes, movement, scaling, and reveal effects.
The hero section uses a mask-style reveal effect to create a visually interesting transition. GSAP controls the animation values, while CSS handles the visual masking behavior.
Some animation values are adjusted based on screen size. This helps keep the animation experience smooth and visually balanced across desktop, tablet, and mobile screens.
Tailwind CSS is used for styling the layout, typography, spacing, positioning, and responsive design. This makes the UI easier to build and modify without writing large amounts of custom CSS.
The project uses multiple media assets, including images, SVGs, WebP files, and MP4 videos. These assets help recreate a cinematic game landing page atmosphere.
This project is deployed on Vercel.
Live Demo:
https://gta-vi-landing-page-gold-one.vercel.app/
For Vercel deployment, the project uses the standard Vite build output.
| Setting | Value |
|---|---|
| Framework Preset | Vite |
| Install Command | npm install |
| Build Command | npm run build |
| Output Directory | dist |
Screenshots will be added soon.
Suggested screenshots to add:
public/screenshots/hero.png
public/screenshots/video-section.png
public/screenshots/jason-section.png
public/screenshots/lucia-section.png
public/screenshots/postcard-section.png
public/screenshots/outro-section.png
Example format:
alt textgit@github.com:theShihamAhamed/gta-vi-landing-page.git
GitHub Repository:
https://github.com/theShihamAhamed/gta-vi-landing-page.git
Live Demo:
https://gta-vi-landing-page-gold-one.vercel.app/
This project is a fan-made educational recreation inspired by the GTA VI landing page style.
All GTA VI-related names, logos, characters, videos, images, and visual assets belong to their respective owners, including Rockstar Games and Take-Two Interactive.
This project is not affiliated with, endorsed by, or sponsored by Rockstar Games. It was created only for learning, practice, and educational purposes.
Developed by Shiham Ahamed
GitHub: https://github.com/theShihamAhamed
Repository: https://github.com/theShihamAhamed/gta-vi-landing-page.git
Live Demo: https://gta-vi-landing-page-gold-one.vercel.app/
The case-study preview is collapsed. Activate the button to make the full content available.
Aug 2025 – Oct 2025
A marketplace for verified Sri Lankan homestays, supporting guest bookings, host onboarding, admin approval, and test-mode payments.
Oct 2025 – Nov 2025
A full-stack developer Q&A platform where programmers can ask, answer, vote, save questions, explore tags, and generate AI-assisted responses.
| Package Manager |
| npm |