SignBridge-Landing Page

Cinematic scroll-storytelling site for a real-time sign language translation system.

A cinematic, scroll-driven landing page for SignBridge a real-time sign language translation system built around a smart glove and a machine learning gesture classifier. Built as the public-facing showcase for my capstone project.

🌐 Live Demo

🔗 signbridgeee.netlify.app

📸 Preview

✨ Highlights

• ✔️ Cinematic scroll storytelling
• ✔️ Interactive 3D glove model (Three.js)
• ✔️ Smooth GSAP + Motion animations
• ✔️ Responsive, mobile-friendly layout
• ✔️ Accessible UI (shadcn/ui + Radix primitives)
• ✔️ Clean, typed React architecture
• ✔️ Fast Vite build & dev experience
• ✔️ Organized, modular project structure

🚀 Built With

Technology	Purpose
⚛️ React 19	Frontend framework
📘 TypeScript	Type safety
⚡ Vite	Build tool
🎨 Tailwind CSS	Styling
🧩 shadcn/ui (Radix + Base UI)	UI components
🧊 Three.js + React Three Fiber	3D glove model rendering
🎬 GSAP + Motion	Scroll & page animations
🖼 Lucide React / React Icons	Iconography

📂 Project Structure

src
│
├── Components/
│   ├── Hero.tsx              # Landing hero section
│   ├── TechnologyScene.tsx   # Interactive 3D glove scene
│   ├── Features.tsx          # Feature highlights
│   ├── HowItWorks.tsx        # Step-by-step explainer
│   ├── Impacts.tsx           # Impact / stats section
│   ├── Navbar.tsx            # Site navigation
│   ├── Footer.tsx            # Footer / CTA
│   └── ui/                   # shadcn/ui components
│
├── data/                     # Static content (features, steps, impacts)
├── Types/                    # TypeScript types
├── hooks/                    # Custom hooks
├── lib/                      # Utilities
│
├── App.tsx
└── main.tsx

public/
├── models/glove.glb          # 3D glove model
└── Demo_SignBridge.mp4       # Product demo video

🎯 Features

• Scroll-triggered animated sections
• Interactive 3D glove visualization
• Feature & "how it works" breakdown
• Responsive navigation and footer CTA
• Embedded product demo video

⚙️ Installation

Clone the repository

git clone https://github.com/FerdawsAnzer/LandPageASL.git

Go into the project

cd LandPageASL

Install packages

npm install

Run locally

npm run dev

Create production build

npm run build

🧠 About SignBridge

SignBridge is a real-time sign language recognition system combining an ESP32-S3 smart glove (flex sensors + IMU) with a deep learning pipeline (CNN for static gestures, CNN+LSTM for dynamic gestures) and a FastAPI/WebSocket backend, translating hand gestures into text/speech in real time. This repository is the landing page showcasing that project.

🔗 Related Project

This landing page showcases the SignBridge capstone project. Check out the full system hardware, ML pipeline, and backend: 👉 Smart-Glove-Sign-Translator

👤 Author

Ferdaws Anzer

• Portfolio: ferdawsanzer.netlify.app
• GitHub: @FerdawsAnzer
• LinkedIn: ferdaws-anzer