⚡ FOSS Club MPSTME — Official Website

The digital front-door of FOSS Club MPSTME. Built for speed, interactive storytelling, and open-source excellence.

---

🚀 Overview

The FOSS Club MPSTME website showcases our open-source ecosystem, upcoming events, weekly newsletter (FOSS Fridays), and the maintainers behind the code. Designed with terminal aesthetic inspirations, fluid spring animations, dark-mode glassmorphism, and lightning-fast asset loading.

---

✨ Key Highlights & Features

• ⚡ Blazing Fast Asset Pipeline: Optimized WebP image assets resulting in a 97% bandwidth reduction (0.4 MB payload for 30+ high-res member portraits), featuring async decoding, explicit layout dimensions, and smooth fade-in loading.
• 💻 Interactive Cyber-Terminal: Terminal boot sequence and secret key combo (foss) triggering glowing branch connection pulses.
• 👥 Comprehensive Team Showcase: Modular hierarchy spanning Supercore, Technical, PR, Marketing, R&D, Operations, Digital Creatives, and Content Writing departments.
• 📅 Event Hub: Interactive timeline of national hackathons (COMMIT 1.0, Code Forge), hands-on workshops, and community orientations.
• 📰 FOSS Fridays Newsletter: Dedicated stack card showcase featuring weekly student-written tech breakdowns.

---

🛠️ Tech Stack & Ecosystem

Layer	Technology	Purpose
Framework		Declarative UI components & state management
Build Tool		Lightning-fast HMR and production bundle bundling
Animations		Spring dynamics, scroll timeline transforms & layout shifts
Routing		Client-side routing with clean URL parameters
Icons	+	Crisp SVG icon suites
Styling		Custom CSS design tokens, typography scale & grid systems

---

📂 Project Architecture

foss-website-main/
├── public/
│   ├── team-images/       # Lightweight, 600x750 compressed WebP avatars (~10-18KB each)
│   ├── team/              # Optimized high-dpi PNG source backups
│   ├── events/            # Event thumbnails & gallery highlights
│   └── foss-logos/        # Vector & transparent brand assets
├── src/
│   ├── components/        # Reusable UI components
│   │   ├── Navbar.jsx         # Site navigation & mobile menu drawer
│   │   ├── Footer.jsx         # Global footer with social links
│   │   └── TeamMemberCard.jsx # Member card with terminal ref tags, typing bios & priority loading
│   ├── data/              # Static data registries
│   │   ├── teamMembers.js     # Supercore & department rosters
│   │   ├── events.js          # Hackathons & workshop data
│   │   └── newsletters.js     # FOSS Fridays issue catalog
│   ├── hooks/             # Custom React hooks (useTeamCardInteraction, etc.)
│   ├── pages/             # Page views (LandingPage, TeamPage, EventsPage, About, FOSSFridays)
│   ├── utils/             # Animation presets & helper utilities
│   ├── App.jsx            # Main app router
│   ├── main.jsx           # Application entry point
│   └── index.css          # Global CSS variables & resetting
└── vite.config.js         # Vite bundler configuration

---

🚦 Getting Started

Prerequisites

Ensure you have Node.js 18+ installed on your machine.

Installation

1. Clone the repository:

   git clone https://github.com/FOSS-Club-MPSTME/foss-website-main.git
   cd foss-website-main

2. Install dependencies:

   npm install

3. Start the local development server:

   npm run dev

   Open http://localhost:3000 in your browser.

4. Build for production:

   npm run build

---

⚡ Performance Guidelines for Maintainers

When adding new team members or event photos:

• Always optimize team member photos using WebP compression (max width: 600px, quality: 80-85).
• Keep individual portrait avatars under 30 KB.
• Place WebP avatars inside /public/team-images/<slugified-name>.webp.

---

_{Built with ❤️ by FOSS Club MPSTME}