"Debug the ordinary. Ship the extraordinary."
The official website of the ACM Student Chapter at SVIT (Sardar Vallabhbhai Institute of Technology, Vasad). Built to represent the chapter's identity, showcase events, and introduce the team to the world.
| Page | Description |
|---|---|
index.html |
Home — hero, about, key activities, stats |
events.html |
Events — upcoming & showcased events |
upcoming.html |
Upcoming Event — Inauguration Ceremony countdown |
team.html |
Our Team — core leadership, tech leads, design |
gallery.html |
Gallery — photo wall from past events |
- GSAP-animated SVG laptop logo with a diamond "fly-through" zoom transition
- Smooth 0–100% progress bar animation over 1.2s
- ACM Facts ticker — rotates real ACM facts every 3.5s if loading takes > 1.5s
- Block Slide Reveal — PowerPoint-style blue block sweeps over each element as it enters the viewport
- 3-Stage Staggered Scroll Reveal:
- Stage 1: Section headings (
h1,h2) trigger first - Stage 2: Sub-headings, roles, dates trigger after a bit more scroll
- Stage 3: Paragraphs, images, cards, grids trigger with deeper scroll
- Stage 1: Section headings (
- Rolling Text Hover — nav links and buttons animate with a vertical text roll on hover (duplicate text slides up/in from below)
- Dark mode glassmorphism aesthetic
- Blue accent gradient system (
--acm-blue,--acm-light-blue) - Google Fonts (Poppins + Inter)
- Fully responsive — mobile hamburger menu, adaptive grids
- Real-time countdown to April 2, 2026 at 10:30 AM IST
- ACM SVIT Inauguration Ceremony — Aero Auditorium, SVIT Vasad
acm-svit-website/
├── index.html # Home page
├── events.html # Events page
├── upcoming.html # Upcoming event — Inauguration Ceremony
├── team.html # Our Team page
├── gallery.html # Photo gallery page
│
├── css/
│ └── styles.css # Global stylesheet — design tokens, components, animations
│
└── js/
└── script.js # Global JS — loader, countdown, scroll reveal, hover effects
| Technology | Purpose |
|---|---|
| HTML5 | Page structure and semantics |
| Vanilla CSS | Styling, animations, glassmorphism |
| Vanilla JavaScript | Interactivity and DOM manipulation |
| GSAP 3 | Loader animation & fly-through transition |
| Font Awesome 6 | Icons throughout the site |
| Google Fonts | Typography (Poppins, Inter) |
No frameworks, no build tools — pure HTML/CSS/JS for zero-dependency deployment.
No build step required. Simply open any HTML file in your browser:
# Option 1 — Open directly
start index.html
# Option 2 — Use VS Code Live Server (recommended)
# Install the "Live Server" extension, right-click index.html → "Open with Live Server"
# Option 3 — Python simple server
python -m http.server 8000
# Then visit http://localhost:8000--acm-blue: #0055a4; /* Primary ACM blue */
--acm-light-blue: #3e8ede; /* Accent / highlight blue */
--bg-dark: #0f172a; /* Main dark background */
--bg-darker: #020617; /* Deepest background */
--glass-bg: rgba(15,23,42,0.6);/* Glassmorphism card fill */
--glass-border: rgba(255,255,255,0.08); /* Card borders */
--text-primary: #f1f5f9; /* Main text */
--text-secondary: #94a3b8; /* Muted text */
--accent-gradient: linear-gradient(135deg, #3e8ede, #0055a4);ACM SVIT Inauguration Ceremony
- 📅 Date: April 2, 2026
- 🕙 Time: 10:30 AM onwards
- 📍 Venue: Aero Auditorium, SVIT Vasad
This website is maintained by the ACM SVIT Web Team. To suggest changes:
- Fork the repository
- Create your branch:
git checkout -b feature/your-feature - Commit your changes:
git commit -m 'Add: your feature' - Push to the branch:
git push origin feature/your-feature - Open a Pull Request
© 2026 ACM SVIT Student Chapter. All rights reserved.
Made with ❤️ by the ACM SVIT Web Team