Resources Used

HTML5

Markup

The structural backbone of all pages — used to build semantic layouts for the homepage, showroom, about, contact, cart, register, and bio pages.

CSS3

Styling

Used for all visual styling — custom CSS variables, animations, glass-morphism effects, responsive grid/flex layouts, and scroll-driven transitions across the entire site.

JavaScript (ES6+)

Programming Language

Core scripting language for all interactivity — cart logic, modal systems, form validation, scroll tracking, dynamic content, and all 3D scene orchestration.

Three.js r134

3D Library

Used to render both cinematic 3D car scenes on the homepage. Handles WebGL rendering, scene graph, camera control, lighting (PBR), PMREM environment maps, particle systems, and scroll-driven animation.

GSAP 3.12.5

Animation Library

GreenSock Animation Platform — used for scroll-triggered reveal animations (ScrollTrigger), element fade-ins, and smooth entrance transitions across all pages.

GLTFLoader (Three.js)

3D File Loader

Three.js loader addon used to parse and load the two GLB 3D car models (base64-encoded) directly in the browser without any server-side processing.

Google Maps Embed API

Mapping Service

Embedded on the Contact page to display the exact showroom location at Litecloud, 2 Sanson Rd, Lahug, Cebu City, Philippines with a live interactive map.

Google Fonts

Typography

Provides the two typefaces used throughout the site — Poppins for headings and display text, and Inter for body and UI copy.

VS Code

Visual Studio Code

Code Editor

Primary code editor used for writing and managing all HTML, CSS, and JavaScript files throughout the entire project development.

Live Server

Live Server (VS Code)

Dev Utility

VS Code extension used to run a local HTTP development server at http://127.0.0.1:5500 for real-time browser preview and hot reload during development.

ChatGPT (OpenAI)

AI Assistant

Used extensively for research, generating content copy (car descriptions, about page text), debugging JavaScript logic, and getting suggestions for layout and UX patterns.

Google Gemini

AI Assistant

Used for Product Requirements Document (PRD) creation, ideation of project features, and brainstorming the overall concept and structure of the Villarias Motors platform.

Claude (Anthropic)

AI Coding Assistant

Used via Claude Code for advanced code generation — writing the entire Three.js 3D scene scripts, scroll-driven animations, visual effects, CSS architecture, and implementing complex features across all pages.

AI Image

AI Image Generation

Visual Assets

AI image generation tools were used to produce high-quality supercar visuals, team member placeholder photos, and design asset references used throughout the showroom and about sections.

GLB 3D

GLB 3D Car Models

3D Assets

Two GLB format 3D car models used in the cinematic homepage scenes. Models are base64-encoded and bundled into model-data.js and model2-data.js for zero-latency loading without a server.

SVG Icons

Inline SVG Icons

Iconography

All icons throughout the site (navigation, contact cards, cart, social links) are hand-crafted inline SVGs — no external icon library dependency, keeping the site lightweight.

UI Avatars

UI Avatars API

Fallback Assets

Used as a graceful fallback for team member profile photos. Automatically generates initials-based avatar images if a team photo file is missing or fails to load.

Brand Logo

Custom Brand Assets

Branding

Official Villarias Motors brand assets — primary logo, horizontal logo, icon, and circle icon — designed and provided by the project owner. Used across navbar, footer, favicon, and register page.

Poppins & Inter Typefaces

Typography

Poppins (weights 300–900) is used for all display headings and section titles. Inter (weights 300–600) is used for body text, labels, and UI elements.

MDN Web Docs

Reference

Primary technical reference for HTML5, CSS3, and JavaScript APIs — used throughout development for documentation on IntersectionObserver, Web APIs, CSS custom properties, and browser compatibility.

Three.js Documentation

Reference

Official Three.js API documentation and examples — referenced for PMREMGenerator, SpotLight, FogExp2, BufferGeometry, MeshStandardMaterial, and scroll-driven scene architecture.

GSAP Docs

GSAP Documentation

Reference

Referenced for ScrollTrigger plugin setup, timeline control, and best practices for scroll-based animation performance and integration with existing JavaScript code.

Stack Overflow

Stack Overflow

Community Reference

Community Q&A platform referenced for troubleshooting browser-specific behavior, WebGL rendering issues, CSS positioning edge cases, and JavaScript performance optimization techniques.

cdnjs (Cloudflare CDN)

CDN

Used to serve Three.js r134 and GSAP 3.12.5 from Cloudflare's globally distributed CDN — ensuring fast load times and high availability without self-hosting large library files.

jsDelivr

jsDelivr CDN

CDN

Used to serve the Three.js GLTFLoader addon — the npm-based CDN path provides the examples/js/loaders/GLTFLoader.js file needed for loading GLB 3D model files.

Browser LocalStorage API

Web API

Used for client-side cart persistence — stores selected cars, quantities, and cart state in the browser so that cart contents are retained across page navigations without a backend server.

IntersectionObserver API

Web API

Used to lazily initialize the 3D scenes only when the hero sections enter the viewport — preventing unnecessary GPU load on page load and improving overall performance.

WebGL

WebGL API

Web API

The low-level GPU rendering API that powers both 3D scenes — accessed through Three.js WebGLRenderer. Enables hardware-accelerated 3D graphics, real-time lighting, and shadow mapping directly in the browser.