KICKS.
Project Docs

Project Overview

KICKS. is a multi-page, production-ready e-commerce website for a premium streetwear and sneaker brand. The project showcases a cinematic, scroll-driven 3D animation sequence where a stylized sneaker deconstructs into 7 separate layers as the user scrolls, combined with bold typography, asymmetric editorial layouts, and a dark "hypebeast" aesthetic.

Design Philosophy

The design follows a strict set of creative constraints to maintain a premium, editorial feel:

Tech Stack

The project uses a modern, CDN-based stack with no build step required. All dependencies are loaded via CDN for maximum portability.

CDN Links

HTML<!-- GSAP + ScrollTrigger -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

<!-- Bootstrap 5.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- FontAwesome 6 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<!-- AOS -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

File Structure

The project consists of 10 files organized in a flat structure for easy deployment to any static host.

Installation

Getting the project running takes less than 2 minutes. No npm install, no build step.

Local Server Options

Terminal# Python 3
python -m http.server 8000

# Node.js (requires http-server package)
npx http-server

# PHP
php -S localhost:8000

Color Palette

The design uses a strict 8-color palette defined as CSS custom properties in :root. All colors are referenced via variables for easy theming.

CSS Variables

CSS:root {
  --bg-primary: #0A0A0A;
  --bg-secondary: #151515;
  --bg-card: #1E1E1E;
  --text-primary: #FFFFFF;
  --text-secondary: #A1A1AA;
  --accent-volt: #D4FF00;
  --accent-blue: #0066FF;
  --border-dark: #27272A;
}

Color Usage Rules

• Volt Green is reserved for primary CTAs, hover states, active states, and 3D highlights (heel counter, insole)
• Electric Blue is used sparingly for tech elements, secondary accents, and the camera tunnel frames
• Stark White is used for all primary text and primary outlines
• Light Gray is used for secondary text, descriptions, and metadata
• Never use more than 2 accent colors in a single viewport

Typography

The typography system uses two Google Fonts to create a bold, editorial streetwear feel.

Type Scale

Spacing & Layout

The spacing system uses a rem-based scale defined via CSS variables. All spacing is consistent across pages.

Container Width

The main content container has a max-width of 1400px with 2rem horizontal padding. The navbar extends to 1600px for a wider feel.

Responsive Breakpoints

Component Library

The design system includes reusable components for buttons, cards, forms, and UI elements.

Buttons

Cards

• .drop-card - Featured product cards with hover lift and Volt Green border
• .product-card - Shop grid cards with full-color hover inversion
• .tech-card - Feature cards with animated left border
• .testimonial-card - Review cards with avatar
• .release-card - Upcoming release cards with countdown
• .team-card - Team member cards with gradient avatars

Form Elements

• .form-control - Standard input/textarea with focus state
• .form-control.error - Validation error state (red border)
• .filter-option - Custom checkbox with Volt Green check
• .color-swatch - Circular color selector
• .size-option - Size grid cell with active/sold-out states
• .quantity-selector - Plus/minus quantity control

Navigation

• .announcement-bar - Top Volt Green promo bar
• .navbar - Sticky nav with scroll shadow
• .mobile-menu - Slide-in drawer for mobile
• .footer - 4-column footer with social links

3D Hero Experience

The centerpiece of the homepage is a scroll-driven 3D animation where a CSS-constructed sneaker deconstructs into 7 separate layers as the user scrolls. This is the most technically complex feature of the project.

How It Works

The animation uses three key technologies working together:

1. CSS 3D Transforms - Each sneaker layer is a separate div with translateZ() values stacking them in 3D space
2. CSS Perspective - The parent container has perspective: 1200px creating depth
3. GSAP ScrollTrigger - Maps scroll position to transform values for buttery-smooth animation

The Architecture

┌─────────────────────────────────────────┐
│   .hero-3d-section (pinned, 300vh)      │
│   ┌───────────────────────────────────┐ │
│   │  .sneaker-stage                   │ │
│   │  perspective: 1200px              │ │
│   │  ┌─────────────────────────────┐  │ │
│   │  │  .sneaker-scene             │  │ │
│   │  │  transform-style: preserve-3d│  │ │
│   │  │  ┌───────────────────────┐  │  │ │
│   │  │  │ Layer 7: Heel (z:90)  │  │  │ │
│   │  │  │ Layer 6: Laces (z:75) │  │  │ │
│   │  │  │ Layer 5: Upper (z:60) │  │  │ │
│   │  │  │ Layer 4: Insole (z:45)│  │  │ │
│   │  │  │ Layer 3: Tech (z:30)  │  │  │ │
│   │  │  │ Layer 2: Midsole(z:15)│  │  │ │
│   │  │  │ Layer 1: Outsole (z:0)│  │  │ │
│   │  │  └───────────────────────┘  │  │ │
│   │  └─────────────────────────────┘  │ │
│   └───────────────────────────────────┘ │
│   ┌───────────────────────────────────┐ │
│   │  .hero-content (typography)       │ │
│   │  - .hero-headline                 │ │
│   │  - .hero-subtext                  │ │
│   │  - .hero-cta                      │ │
│   └───────────────────────────────────┘ │
└─────────────────────────────────────────┘

HTML Structure

HTML<section class="hero-3d-section" id="hero">
  <div class="hero-bg-grid"></div>

  <div class="sneaker-stage">
    <div class="sneaker-scene">
      <div class="sneaker-layer sneaker-outsole"></div>
      <div class="sneaker-layer sneaker-midsole"></div>
      <div class="sneaker-layer sneaker-tech"></div>
      <div class="sneaker-layer sneaker-insole"></div>
      <div class="sneaker-layer sneaker-upper"></div>
      <div class="sneaker-layer sneaker-laces"></div>
      <div class="sneaker-layer sneaker-heel"></div>
    </div>
  </div>

  <div class="hero-content">
    <h1 class="hero-headline">Engineered For The Streets</h1>
    <p class="hero-subtext">...</p>
    <div class="hero-cta">...</div>
  </div>
</section>

GSAP ScrollTrigger Code

JavaScriptgsap.registerPlugin(ScrollTrigger);

// Pin the hero for 300% of viewport height
ScrollTrigger.create({
  trigger: '.hero-3d-section',
  start: 'top top',
  end: '+=300%',
  pin: true,
  scrub: 1
});

// Animate sneaker layers apart in 3D space
const heroTl = gsap.timeline({
  scrollTrigger: {
    trigger: '.hero-3d-section',
    start: 'top top',
    end: '+=300%',
    scrub: 1
  }
});

heroTl
  .to('.sneaker-outsole', { y: 250, rotateX: 15 }, 0)
  .to('.sneaker-midsole', { y: 150 }, 0.05)
  .to('.sneaker-tech', { x: 200, rotateY: 20 }, 0.1)
  .to('.sneaker-insole', { scale: 1.1 }, 0.15)
  .to('.sneaker-upper', { y: -150, x: -100 }, 0.1)
  .to('.sneaker-laces', { y: -250, rotateX: -10 }, 0.15)
  .to('.sneaker-heel', { z: -200, y: -100 }, 0.2);

// Typography flies in
heroTl
  .from('.hero-headline', { z: -500, opacity: 0 }, 0.3)
  .from('.hero-subtext', { x: -200, opacity: 0 }, 0.4)
  .from('.hero-cta', { y: 100, opacity: 0 }, 0.5);

Camera Tunnel Transition

After the sneaker explosion, a "camera tunnel" effect creates the illusion of flying forward through a 3D perspective corridor made of concentric rectangular frames.

How It Works

Five .tunnel-frame elements are positioned absolutely at the center of the viewport. Each frame is animated via GSAP to scale from 0.1 to 15 while fading out, creating the illusion of frames rushing past the camera.

JavaScriptconst frames = document.querySelectorAll('.tunnel-frame');
frames.forEach((frame, i) => {
  tunnelTl.fromTo(frame,
    { scale: 0.1, opacity: 0, rotateZ: i * 5 },
    { scale: 15, opacity: 0, rotateZ: i * 15, duration: 1 },
    i * 0.15
  );
});

Frame Styling

CSS.tunnel-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border: 2px solid var(--accent-volt);
  transform: translate(-50%, -50%);
}

.tunnel-frame:nth-child(2) { border-color: var(--accent-blue); }
.tunnel-frame:nth-child(3) { border-color: var(--text-primary); }
/* Alternating colors create depth */

Section Reveal Animations

Each major section uses a unique 3D reveal animation to create visual variety and maintain engagement as the user scrolls.

Example: Drop Card Reveal

JavaScriptgsap.utils.toArray('.drop-card').forEach((card, i) => {
  gsap.from(card, {
    scrollTrigger: {
      trigger: card,
      start: 'top 85%',
      toggleActions: 'play none none none'
    },
    rotateY: 90,
    opacity: 0,
    transformOrigin: 'left center',
    duration: 1,
    ease: 'power3.out',
    delay: i * 0.1
  });
});

Sneaker Layer Breakdown

The CSS-illustrated sneaker is composed of 7 separate layers, each built using CSS shapes, gradients, and pseudo-elements. Each layer has a unique translateZ() value to stack them in 3D space.

CSS Construction Example (Outsole)

CSS.sneaker-outsole {
  width: 380px;
  height: 60px;
  background: linear-gradient(180deg, #1a1a1a 0%, #000 100%);
  border-radius: 190px 190px 40px 40px / 30px 30px 20px 20px;
  transform: translateZ(0px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
}

/* Tread pattern via repeating gradient */
.sneaker-outsole::before {
  background-image: repeating-linear-gradient(
    90deg,
    #27272A 0, #27272A 8px,
    transparent 8px, transparent 14px
  );
}

Homepage (index.html)

The homepage is the most feature-rich page, containing the 3D hero experience plus 8 additional content sections.

Sections (in order)

1. Announcement Bar - Volt Green promo strip
2. Sticky Navbar - Logo, menu, cart badge
3. 3D Hero - Sneaker explosion (pinned 300vh)
4. Camera Tunnel - Transition effect
5. Featured Drops - 4 product cards with flip-in animation
6. The Tech - 3 feature cards (cushion, upper, outsole)
7. Stats Counter - 4 animated counters
8. Upcoming Releases - 3 release cards with live countdowns
9. Testimonials - 3 review cards with star ratings
10. Newsletter - Email signup with giant background text
11. Footer - 4-column layout with socials

Shop (shop.html)

Product listing page with filter sidebar, sort controls, and a dynamic product grid.

Features

• Filter Sidebar - Brand, Size, Color (swatches), Price checkboxes
• Sort Dropdown - Featured, Price, Newest, Best Selling
• Product Grid - 12 products generated dynamically via JS
• Hover Effect - Card lifts, background becomes Volt Green, text turns black
• Pagination - 4-page navigation

Dynamic Product Generation

JavaScript// Products are defined as an array and injected into the DOM
const products = [
  { name: 'Volt Runner X1', category: 'Running', price: 220, color: '#D4FF00' },
  // ... 11 more products
];

products.forEach((product, i) => {
  // Create card with inline SVG sneaker illustration
  // Each product has unique colors for visual variety
});

Product Detail (product-detail.html)

Single product page with interactive colorway selector, size grid, and accordion specs.

Key Features

• Large SVG Sneaker - Uses CSS variables to change colors dynamically
• Colorway Selector - 4 color options that update the sneaker in real-time
• Size Grid - 15 sizes (US 7 to 14) with active/sold-out states
• Add to Cart - Animated confirmation with cart badge update
• Tech Specs Accordion - Expandable sections for specs, shipping, care
• Related Products - 4 "You Might Also Like" cards

Colorway Selector Logic

JavaScriptcolorwayOptions.forEach(option => {
  option.addEventListener('click', () => {
    // Update CSS variables on the SVG
    productSneaker.style.setProperty('--sneaker-upper', option.dataset.upper);
    productSneaker.style.setProperty('--sneaker-midsole', option.dataset.midsole);
    productSneaker.style.setProperty('--sneaker-accent', option.dataset.accent);

    // Animate the transition
    gsap.fromTo(productSneaker,
      { scale: 0.95, opacity: 0.5 },
      { scale: 1, opacity: 1, duration: 0.4 }
    );
  });
});

Drops (drops.html)

Upcoming releases page with live countdown timers and raffle entry.

Features

• 4 Upcoming Drops - Each with SVG illustration, date, countdown
• Live Countdowns - Updates every second via setInterval
• Raffle Entry - Button with confirmation state
• Past Drops Archive - 3 sold-out releases with disabled state

Countdown Implementation

JavaScriptfunction updateCountdown(countdownEl) {
  const targetDate = new Date(countdownEl.dataset.date).getTime();
  const distance = targetDate - new Date().getTime();

  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  // ... minutes and seconds

  // Update DOM elements with data-days, data-hours, etc.
}

// Update every second
setInterval(() => {
  document.querySelectorAll('.countdown').forEach(updateCountdown);
}, 1000);

About (about.html)

Brand story page with alternating text/visual sections, team grid, and timeline.

Sections

• 3 Story Sections - Alternating layouts with CSS-illustrated scenes (skate park, city skyline, workshop)
• Team Grid - 3 designers with gradient avatars
• Timeline - 5 milestones from 2019 to 2026 with central line

CSS Scene Illustrations

Each story section contains a unique inline SVG illustration:

• Skate Park - Half-pipe curve, ramps, Volt Green sun
• City Skyline - Building silhouettes with lit windows
• Workshop - Workbench with material swatches and design circle

Contact (contact.html)

Two-column layout with validated contact form and contact information.

Features

• Contact Form - Name, Email, Order ID, Message with validation
• Form Validation - Client-side validation with error states
• Contact Info - Email, phone, address, social links
• Legit Check Callout - Blue gradient box with photo upload CTA
• FAQ Link - Quick access to FAQ

Validation Logic

JavaScriptcontactForm.addEventListener('submit', (e) => {
  e.preventDefault();
  let isValid = true;

  // Check required fields
  if (!name.value.trim()) {
    name.classList.add('error');
    isValid = false;
  }

  // Email regex validation
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
    email.classList.add('error');
    isValid = false;
  }

  if (isValid) {
    // Show success state
  }
});

Cart (cart.html)

Shopping cart page with quantity controls, remove functionality, and order summary.

Features

• Cart Items - 2 sample items with SVG thumbnails
• Quantity Selector - Plus/minus buttons with animated value
• Remove Item - Animated removal with slide-out effect
• Order Summary - Subtotal, shipping, tax, total (auto-updates)
• Checkout Button - Simulated processing state

Dynamic Total Calculation

JavaScriptfunction updateCartTotals() {
  let subtotal = 0;

  document.querySelectorAll('.cart-item').forEach(item => {
    const price = parseFloat(item.querySelector('.cart-item-price').textContent.replace('$', ''));
    const qty = parseInt(item.querySelector('.qty-value').textContent);
    subtotal += price * qty;
  });

  const tax = subtotal * 0.08;
  const total = subtotal + tax;

  // Update DOM
  document.getElementById('subtotal').textContent = '$' + subtotal.toFixed(2);
  document.getElementById('tax').textContent = '$' + tax.toFixed(2);
  document.getElementById('total').textContent = '$' + total.toFixed(2);
}

404 Error (404.html)

Creative error page with broken sneaker illustration and clear navigation.

Design Elements

• Broken Sneaker SVG - Tilted upper, separated midsole, missing heel with "?" mark
• Massive 404 - Volt Green display text
• Witty Copy - "Looks like you stepped out of bounds"
• Dual CTAs - Go Home (primary) and Shop Now (secondary)

CSS Architecture

The style.css file is approximately 1,800 lines organized into clear sections with comment headers.

File Organization

CSS/* ============================================
   KICKS. - Premium Streetwear E-Commerce
   ============================================ */

/* ---------- CSS VARIABLES ---------- */
:root { ... }

/* ---------- RESET & BASE ---------- */
* { ... }

/* ---------- TYPOGRAPHY ---------- */
.display-1 { ... }

/* ---------- LAYOUT UTILITIES ---------- */
.container { ... }

/* ---------- BUTTONS ---------- */
.btn { ... }

/* ---------- ANNOUNCEMENT BAR ---------- */
.announcement-bar { ... }

/* ---------- NAVBAR ---------- */
.navbar { ... }

/* ---------- HERO 3D SECTION ---------- */
.hero-3d-section { ... }

/* ---------- 3D SNEAKER STAGE ---------- */
.sneaker-stage { ... }
/* --- LAYER 1: OUTSOLE --- */
/* --- LAYER 2: MIDSOLE --- */
/* ... etc */

/* ---------- CAMERA TUNNEL ---------- */
.camera-tunnel { ... }

/* ---------- FEATURED DROPS ---------- */
.featured-drops { ... }

/* ---------- [Each section...] ---------- */

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) { ... }
@media (max-width: 768px) { ... }
@media (max-width: 576px) { ... }

/* ---------- UTILITY CLASSES ---------- */
.text-center { ... }

Key CSS Techniques Used

• CSS Custom Properties - For theming and dynamic color changes
• 3D Transforms - perspective, translateZ, rotateX/Y
• clamp() - For fluid responsive typography
• CSS Grid + Flexbox - For all layouts
• Pseudo-elements - For decorative details (::before, ::after)
• Gradients - Linear, radial, and repeating for textures
• Mask-image - For the hero background grid fade
• will-change - For GPU-accelerated animations

Custom Scrollbar

CSS::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb {
  background: var(--border-dark);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-volt); }

JavaScript Features

The script.js file is approximately 700 lines wrapped in an IIFE to avoid global scope pollution.

Feature Breakdown

IIFE Structure

JavaScript(function() {
  'use strict';

  // All code wrapped to avoid global scope pollution
  // Features are organized by section with clear comments

})();

Customization Guide

The project is designed to be easily customizable. Here's how to adapt it for your own brand.

Change Brand Name

Search for KICKS. across all HTML files and replace with your brand name. The logo appears in:

• Navbar (.navbar-logo)
• Footer (.footer-logo)
• Page title (<title> tag)

Change Colors

Edit the CSS variables in :root to re-theme the entire site:

CSS:root {
  --accent-volt: #FF6B00;  /* Change to your primary accent */
  --accent-blue: #9D00FF;  /* Change to your secondary accent */
  --bg-primary: #0F172A;   /* Change base background */
}

Change Products

Products are defined in script.js in the products array. Edit the array to change names, prices, categories, and colors.

Change Sneaker Colors

The colorway selector uses data attributes. Edit the data-* attributes on .colorway-option elements in product-detail.html.

Change Countdown Dates

Update the data-date attribute on each .countdown element with an ISO 8601 date string:

HTML<div class="countdown" data-date="2026-12-31T23:59:59">
  ...
</div>

Add New Pages

Copy any existing page as a template. Update the <title>, navbar active state, and content. The shared navbar and footer structure is consistent across all pages.

Browser Support

The project targets modern evergreen browsers. Here's the support matrix:

Required Browser Features

• CSS Custom Properties (variables)
• CSS 3D Transforms (perspective, translateZ)
• CSS Grid and Flexbox
• clamp() function
• ES6+ JavaScript (arrow functions, const/let, template literals)
• IntersectionObserver API (for counter animation)
• requestAnimationFrame (for smooth counters)

Performance

The project is optimized for performance with several key strategies.

Optimization Techniques

• GPU Acceleration - All animated elements use will-change: transform
• CDN Loading - All dependencies loaded from fast, global CDNs
• Font Preconnect - <link rel="preconnect"> for Google Fonts
• No Images - Zero image files means zero image download time
• Minimal JS - ~700 lines of vanilla JS, no framework overhead
• Single CSS File - One HTTP request for all styles
• Reduced Motion - Respects prefers-reduced-motion

Performance Metrics (Estimated)

Performance Tips

1. Enable gzip/brotli compression on your server
2. Use a CDN for static file delivery
3. Consider self-hosting CDN resources for production
4. Add loading="lazy" if you add real images later
5. Minify CSS/JS for production deployment

Accessibility

The project includes several accessibility features to ensure usability for all users.

Implemented Features

• Semantic HTML - Proper use of <nav>, <main>, <section>, <aside>, <footer>
• ARIA Labels - All icon-only buttons have aria-label attributes
• Keyboard Navigation - All interactive elements are focusable
• Color Contrast - White text on dark backgrounds exceeds WCAG AA
• Reduced Motion - Respects prefers-reduced-motion: reduce
• Form Labels - All form inputs have associated labels
• Focus States - Visible focus indicators on interactive elements
• Alt Text - SVG illustrations are decorative (no alt needed)

Reduced Motion Implementation

JavaScriptconst prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
if (prefersReducedMotion.matches) {
  if (typeof ScrollTrigger !== 'undefined') {
    ScrollTrigger.getAll().forEach(st => st.kill());
  }
}

Areas for Improvement

• Add skip navigation link at the top of each page
• Enhance focus-visible styles for better keyboard navigation
• Add more ARIA live regions for dynamic content updates
• Test with screen readers (VoiceOver, NVDA, JAWS)
• Consider adding captions/transcripts if video is added

Troubleshooting

Common issues and their solutions.

3D Animation Not Working

Symptom: Sneaker layers don't separate on scroll

Solutions:

• Check browser console for GSAP loading errors
• Ensure you're serving via HTTP, not file://
• Verify ScrollTrigger is loaded after GSAP
• Check that .hero-3d-section exists in the DOM

Sneaker Layers Look Flat

Symptom: Layers don't appear to have depth

Solutions:

• Ensure parent has perspective: 1200px
• Check transform-style: preserve-3d on .sneaker-scene
• Verify each layer has a translateZ() value

Fonts Not Loading

Symptom: Text appears in default sans-serif

Solutions:

• Check internet connection (Google Fonts requires CDN)
• Verify <link> tags are in <head>
• Clear browser cache

Countdown Shows 00:00:00

Symptom: Countdown timers show zeros

Solutions:

• Check data-date format is ISO 8601 (e.g., 2026-09-12T18:00:00)
• Ensure the date is in the future
• Check browser console for date parsing errors

Mobile Menu Not Opening

Symptom: Hamburger button doesn't work

Solutions:

• Ensure viewport is less than 768px wide
• Check browser console for JS errors
• Verify #mobileToggle, #mobileMenu, #mobileOverlay exist

ScrollTrigger.defaults({ markers: true });

Credits & CDNs

This project uses the following third-party resources via CDN:

Future Enhancements

Suggested improvements for future versions:

Feature Additions

• Real Backend - Connect to Shopify, Stripe, or custom API
• Product Search - Full-text search with filters
• User Accounts - Login, order history, saved addresses
• Wishlist - Save favorite products
• Product Reviews - User-submitted reviews with photos
• Size Guide Modal - Interactive sizing chart
• 360° Product View - Rotate sneaker with mouse/touch
• AR Try-On - WebAR sneaker preview
• Live Chat - Customer support integration
• Blog - Editorial content about sneaker culture

Technical Improvements

• Migrate to a build system (Vite, Webpack) for bundling
• Convert to a framework (Next.js, Nuxt) for SSR
• Add TypeScript for type safety
• Implement unit tests (Jest, Vitest)
• Add E2E tests (Playwright, Cypress)
• Optimize images with WebP/AVIF when adding real photos
• Implement service worker for offline support
• Add PWA manifest for installability

License

This project is provided as-is for educational and commercial use. You are free to:

• Use it for personal or commercial projects
• Modify the code to suit your needs
• Deploy it to any hosting platform
• Use it as a learning resource

Third-Party Licenses

All third-party libraries used in this project are subject to their own licenses. Please review:

• GSAP: Standard License
• Bootstrap: MIT License
• FontAwesome: CC BY 4.0 (icons), MIT (code)
• AOS: MIT License
• Google Fonts: SIL OFL 1.1