Skip to content

Faidaaa/TEDx-CUSAT

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

TEDxCUSAT | Kaleidoscope

Welcome to the official landing page repository for TEDxCUSAT, featuring this year's theme: Kaleidoscope.

🌐 Live Demo

View Website

🌟 About the Project

This project is a modern, responsive single-page static website designed to capture the essence of shifting perspectives, brilliant ideas, and profound conversations. Built with beautiful aesthetics, smooth animations, and engaging micro-interactions, the landing page serves as the primary digital front door for the event.

🚀 Key Features

  • Dynamic Kaleidoscope Hero Background: A custom CSS-driven, constantly morphing geometric background that mirrors the visual essence of a kaleidoscope.
  • Ambient Glow & Glassmorphism: Utilizes an ambient multi-colored aura that floats seamlessly globally throughout the page, softly glowing beneath frosted "glass" panels (backdrop-filters).
  • Live Event Countdown: A synchronized precision countdown timer leading up to the main event date (October 24, 2026), individually accented with our core theme colors (Magenta, Cyan, Yellow, Purple).
  • Vintage Film Strip Gallery: An interactive auto-scrolling horizontal gallery mapped exactly like an old-school camera film strip, complete with transparent sprocket holes.
  • Fully Responsive: Meticulously designed for a flawless viewing experience across all devices, from ultra-wide desktops to mobile phones.

🛠️ Technology Stack

This project was developed focusing on peak performance using pure, lightweight web technologies without heavy frameworks:

  • HTML5: Pure semantic markup structure.
  • Vanilla CSS3: Advanced modern CSS leveraging custom properties, Flexbox/Grid layouts, keyframe animations, CSS masking, and backdrop filters.
  • Vanilla JavaScript: High-performance DOM manipulation, Intersection Observers for scroll animations, and precise interval logic for the countdown timer.

📂 Project Structure

TEDx CUSAT/
│
├── index.html        # The main HTML structure
├── style.css         # The design system and animations
├── script.js         # Interactivity, observers, and countdown
└── readme.md         # Documentation

🎨 Design System

The Kaleidoscope design language consists of an ultra-dark canvas pierced by four dominant vibrant gradients:

  • 🟥 Magenta (#ff0055)
  • 🟦 Cyan (#00f0ff)
  • 🟨 Yellow (#ffcc00)
  • 🟪 Purple (#7000ff)
  • 🔴 TED Red (#e62b1e) - Accurately preserved for official branding and primary action elements.

About

Build a single-page website for TEDx CUSAT. Think of it as a landing page someone would visit to learn about the event and grab a ticket.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors