Project Structure

This document breaks down the repository’s file tree and explains the purpose of each directory.

Understanding this structure is essential before making architectural changes.

it/
├── _config.yml                  # Jekyll configuration (baseurl, plugins, collections)
├── Gemfile                      # Ruby dependencies
├── index.html                   # Home page entry point
│
├── _data/                       # 🌟 The Database 🌟
│   ├── site_config.yml          # Core config (API keys, Drive/YouTube IDs)
│   ├── faculty.json             # Faculty profile data
│   └── toppers_list.json        # Student achievement data
│
├── _layouts/                    # Page Templates
│   ├── default.html             # Master layout (SEO, CSS/JS injection)
│   └── event.html               # Markdown event page layout
│
├── _includes/                   # Reusable HTML Components
│   ├── home/                    # Sections of the index.html page
│   └── components/              # Navbar, footer, and shared UI elements
│
├── _events/                     # Markdown Collection
│   ├── 2024-hackathon.md        # Event pages generated by Jekyll
│   └── ...
│
├── assets/                      # Static Files & Logic
│   ├── images/                  # Logos, faculty photos, generic UI assets
│   ├── css/                     # Scoped Vanilla CSS
│   │   ├── main.css             # Global styles
│   │   ├── components/          # Component styles
│   │   └── pages/               # Page-specific styles
│   └── js/                      # The Client-Side Backend
│       ├── config.js            # Serializes site_config.yml to window.CONFIG
│       ├── components/          # Fetch wrappers (YouTubeHandler.js, StudyData.js)
│       └── pages/               # Controllers for specific dynamic pages
│
├── docs/                        # Technical Documentation (You are here)
│   ├── ARCHITECTURE.md          # System design
│   ├── CONTENT_WORKFLOW.md      # How to update the site
│   └── ...
│
├── [Route Folders]/             # Physical URL endpoints
│   ├── gallery/index.html
│   ├── faculty/
│   ├── co-curricular/
│   ├── student-corner/
│   └── ...

Key Architectural Patterns

  1. Routing Strategy: Instead of using front-matter permalinks in a single folder, we use physical folders with index.html files. This keeps URLs clean (e.g., itgpg.github.io/gallery/ instead of itgpg.github.io/gallery.html).
  2. Separation of Concerns: _includes breaks down massive HTML files into manageable, atomic pieces.
  3. Data Isolation: _data/ is strictly for content. .js files are strictly for logic. Never mix the two.