Fr4n0m photo Francisco Rodríguez
Back to project
Project Post 5/11/2026

GTA VI — Fan Website

GTA VI Landing Page Clone

Unofficial GTA VI tribute site built for educational purposes. Advanced GSAP animations, responsive design, and static architecture with Astro.

GitHub Web

Stack

HTML CSS Tailwind CSS JavaScript Astro GSAP GitHub Git

⚠️ Educational project with no commercial purpose. All GTA VI rights belong to Rockstar Games and Take-Two Interactive.

🚀 Features

Design and UI/UX

  • Modern design inspired by GTA VI aesthetics.
  • Responsive, optimized for desktop resolutions (1024px – 4K).
  • Dropdown split-panel menu with sequential GSAP animations.
  • Tab system: Characters, Places, Trailers, Downloads.
  • Hover on characters/places shows fullscreen images (1000ms transition).
  • Trailer section with interactive previews and "New" badges.
  • Downloads section with animated cards, yellow borders on hover, and subtle zoom.

Tech Stack

  • Astro v5.14.1 — static web framework
  • Tailwind CSS v4.1.13 — utility-first CSS
  • GSAP v3.13.0 — professional animation library
  • Vanilla JavaScript — interactions and menu logic

Technical Features

  • Static architecture optimized for performance.
  • SEO-friendly.
  • Smooth transitions with controlled fade in/out.
  • Modular and reusable components.
  • CSS variables for a consistent design system.
  • Advanced hover effects with CSS transforms.

📋 Project Structure

gta-vi-website/
├── src/
│   ├── assets/          # Images, SVGs and visual resources
│   ├── layouts/         # Base Astro layouts
│   └── pages/
│       └── index.astro  # Main page
├── public/              # Static files
├── astro.config.mjs
└── package.json

🛠️ Installation and Usage

git clone https://github.com/Fr4n0m/gta-vi-website.git
cd gta-vi-website
npm install
npm run dev

Open http://localhost:4321 in your browser.

📜 Available Commands

Command Description
npm run dev Dev server at localhost:4321
npm run build Production build in ./dist/
npm run preview Preview the production build
npm run lint Astro checks (astro check)

🎨 Color Palette

--gradient-left:  linear-gradient(135deg, #286074 0%, #523c47 100%);
--gradient-right: linear-gradient(223.17deg, #1b1828 0%, #111117 100%);
--yellow-accent:  #fef3c7;
--purple-dark:    #36364e;
--pink-accent:    #cc96bc;

🤝 Contributing

  1. Fork the project.
  2. Create a branch (feature/AmazingFeature).
  3. Commit and push.
  4. Open a Pull Request.

📄 License

Non-profit educational project. All GTA VI rights belong to Rockstar Games and Take-Two Interactive.

More related posts

No more related posts.