---
title: "CyberShield — Official Website and Content Studio for a Student Cybersecurity Club"
description: "CyberShield is the official website of the CyberShield cybersecurity club at AISSMS IOIT, Pune. The public site is a static Astro build with cyber-themed GSAP motion: a glitching logo preloader, a canvas code-rain backdrop and a scroll-pinned timeline. It is paired with a separate Next.js admin dashboard where club leads edit every section of the landing page without touching code, then publish with one click that rebuilds and redeploys the site through GitHub Actions."
url: "https://meghrajjare.in/projects/cybershield/"
---

# CyberShield

> Official Website and Content Studio for a Student Cybersecurity Club

CyberShield is the official website of the CyberShield cybersecurity club at AISSMS IOIT, Pune. The public site is a static Astro build with cyber-themed GSAP motion: a glitching logo preloader, a canvas code-rain backdrop and a scroll-pinned timeline. It is paired with a separate Next.js admin dashboard where club leads edit every section of the landing page without touching code, then publish with one click that rebuilds and redeploys the site through GitHub Actions.

- **Year:** 2026
- **Live demo:** [https://cybershield.club](https://cybershield.club)
- **Source code:** [https://github.com/ioit-cybershield/ioit-cybershield.github.io](https://github.com/ioit-cybershield/ioit-cybershield.github.io)
- **Tech stack:** Astro 5, React 19, TypeScript, Tailwind CSS 4, GSAP, Lenis, Next.js 16, Better Auth, Prisma ORM, Neon PostgreSQL, Vercel Blob, Zod, GitHub Actions, GitHub Pages

## Highlights

- Static Astro site on GitHub Pages that pulls every landing-page section from the admin API at build time, falling back to built-in defaults so a failed fetch never breaks a deploy
- Next.js admin dashboard behind Better Auth sign-in for editing the hero, about, timeline, gallery, call-to-action, navbar and footer, with Zod-validated APIs backed by Prisma on Neon PostgreSQL
- One-click publishing: the dashboard's Rebuild button dispatches the site's GitHub Actions workflow, which mirrors gallery images from Vercel Blob into the static build before deploying
- Scroll-pinned timeline driven by GSAP ScrollTrigger, with a rotating spinner and scrubbed copy transitions between stages
- Cyber-themed motion throughout: a GSAP preloader with an SVG glitch filter on the club logo, a frame-throttled canvas code-rain background, and gallery cards that expand into a detail view from their on-screen position, all over Lenis smooth scrolling