A modern, glassmorphic documentation website for the JIIT Tools Suite — a comprehensive collection of web applications and automation tools built for the JIIT student community.

This project serves as the central hub and documentation site for all JIIT Tools Suite projects, providing easy access to tools like JPortal, Timetable, Mess Menu, Placement Updates, Sophos Auto-Login, and the Telegram Notification Bot. The site features a modern glassmorphic design with frosted-glass UI elements, backdrop blur effects, and gradient color accents.

• Glassmorphic Design: Modern frosted-glass aesthetic with backdrop blur and subtle transparency
• Tool Showcase: Comprehensive listing of all available JIIT tools with descriptions and quick links
• Responsive Layout: Mobile-first design that works seamlessly across all device sizes
• Fast Performance: Built with Astro for optimal loading speeds and minimal JavaScript
• Dark Theme: Eye-friendly dark color scheme with gradient accents

• Astro 5.x: Static site generator for fast, content-focused websites
• Tailwind CSS 4.x: Utility-first CSS framework for styling
• TypeScript: Type-safe development experience
• Bun: Fast JavaScript runtime and package manager

/
├── public/
│   └── favicon.svg
├── src/
│   ├── assets/
│   │   ├── astro.svg
│   │   └── background.svg
│   ├── components/
│   │   └── Welcome.astro
│   ├── layouts/
│   │   └── Layout.astro          # Main layout with glassmorphic header/footer
│   ├── pages/
│   │   ├── index.astro            # Homepage with hero and tool grid
│   │   └── tools.astro            # Complete tools listing page
│   └── styles/
│       └── global.css             # Glassmorphism utilities and theme
├── astro.config.mjs
├── tailwind.config.js
├── tsconfig.json
└── package.json

Prerequisites#

• Node.js 18+ or Bun 1.0+
• Git

Installation#

1. Clone the repository:

git clone https://github.com/tashifkhan/JIIT-tools-docs.git
cd JIIT-tools-docs

2. Install dependencies:

bun install

Or with npm:

npm install

Development#

Start the development server:

bun run dev

The site will be available at http://localhost:4321

Building for Production#

Build the static site:

bun run build

The output will be in the dist/ directory, ready for deployment.

Preview Production Build#

Preview the production build locally:

bun run preview

Glassmorphism Utilities#

The project includes custom CSS utilities in src/styles/global.css:

• .bg-surface: Main background with layered radial gradients
• .glass: Frosted glass effect with backdrop blur and subtle borders
• .glass-card: Pre-styled glass card with padding and rounded corners
• .badge-glass: Small glass badge for tags and labels
• .blur-blob: Large blurred color elements for depth

Color Palette#

• Background: Deep dark blue (#0f1117) with gradient overlays
• Glass: Semi-transparent white with backdrop blur
• Accents: Indigo, pink, and blue gradients
• Text: Light grays and whites for optimal contrast

The site showcases the following JIIT Tools Suite projects:

1. JPortal: React PWA for WebKiosk with Pyadlite PDF parsing (8k+ users)
2. JIIT Timetable: Real-time timetables for 6.5k+ students with dynamic display
3. Mess Menu: Daily and weekly meal information accessible via timetable portal
4. Placement & Campus Updates: Timely opportunities and campus news (4k+ users)
5. Sophos Auto-Login: One-click Wi-Fi login scripts for LRC and Hostels (100 users)
6. Telegram Notification Bot: Real-time broadcast updates and announcements

Modifying the Glass Effect#

Edit the .glass utility in src/styles/global.css:

.glass {
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	backdrop-filter: saturate(140%) blur(18px);
}

Adding New Tools#

Add new tools to the tools array in src/pages/tools.astro:

const tools = [
	{
		name: "Tool Name",
		desc: "Tool description",
		href: "https://tool-url.com",
		tag: "Category",
	},
];

This Astro site can be deployed to any static hosting platform:

• Vercel: Connect your GitHub repository for automatic deployments
• Netlify: Drag and drop the dist/ folder or connect via Git
• GitHub Pages: Use the Astro GitHub Pages action
• Cloudflare Pages: Direct Git integration with automatic builds

Contributions are welcome! To contribute:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m 'Add some feature')
4. Push to the branch (git push origin feature/your-feature)
5. Open a Pull Request

This project is open source and available under the MIT License.

Built by tashifkhan

• Live Site: tools.tashif.codes (if deployed)
• GitHub Organization: tashifkhan
• Telegram Bot: @SupersetNotificationBot

• JIIT student community for feedback and support
• Astro team for the excellent static site generator
• Tailwind CSS for the utility-first approach to styling