Official website for the Codebreakers Coding Club at Government College of Engineering, KALAHANDI
Breaking codes. Building futures.
Codebreakers is the premier coding club at Government College of Engineering, KALAHANDI (GCEK). This repository contains the source code for our official website, showcasing our team, events, projects, and activities.
The website features a futuristic Tron-inspired design powered by The GridCN UI library, creating an immersive digital experience that reflects our passion for cutting-edge technology.
- 👥 Team Showcase - Meet our core members, coordinators, and alumni
- 🎯 Events Portal - Browse past and upcoming events including hackathons, ideathons, workshops, and coding sessions
- 🚀 Projects Gallery - Explore innovative projects built by our members
- 📧 Contact Page - Get in touch with the Codebreakers team
- 🎨 Tron-Inspired UI - Immersive design with 3D effects, neon glows, and HUD elements
- 🔒 TypeScript - Full type safety with comprehensive TypeScript definitions
- 🎭 Theme System - Multiple Greek god-inspired themes (Ares, Tron, Clu, Athena, Aphrodite, Poseidon)
- Node.js 18+
- npm, pnpm, or yarn
# Clone the repository
git clone https://github.com/codebreakers-gcek/codebreakers.git
cd codebreakers
# Install dependencies
npm install
# or
pnpm install
# Run the development server
npm run dev
# or
pnpm devOpen http://localhost:3000 in your browser to see the result.
npm run build
npm start
# or
pnpm build
pnpm startcodebreakers-web/
├── src/
│ ├── app/ # Next.js app directory
│ │ ├── _components/ # Shared components (error, not-found, etc.)
│ │ ├── contact/ # Contact page
│ │ ├── developers/ # Developer pages
│ │ │ ├── alumni/ # Alumni showcase
│ │ │ ├── devs/ # Current developers
│ │ │ └── teams/ # Team structure
│ │ ├── events/ # Events pages
│ │ │ ├── 9-lock-challenges/
│ │ │ ├── codeCHEF/
│ │ │ ├── hackathon/
│ │ │ ├── ideathon/
│ │ │ ├── sessions/
│ │ │ └── workshop/
│ │ ├── projects/ # Projects showcase
│ │ ├── page.tsx # Homepage
│ │ ├── layout.tsx # Root layout
│ │ └── globals.css # Global styles & themes
│ ├── components/
│ │ ├── ui/ # shadcn/ui base components
│ │ ├── thegridcn/ # Tron-inspired UI components
│ │ ├── theme/ # Theme provider & switcher
│ │ ├── showcase/ # Component showcase sections
│ │ ├── layout/ # Layout components
│ │ └── website/ # Website-specific components
│ ├── data/ # Data files
│ │ ├── devData.ts # Team members data
│ │ ├── testimonials.ts # Testimonials
│ │ └── index.ts # Data exports
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ └── styles/ # Additional styles
├── public/ # Static assets
│ ├── assets/ # Images and media
│ └── manifest.json # PWA manifest
└── components.json # shadcn/ui configuration
- Home (
/) - Landing page with club overview and highlights - Developers
/developers/devs- Current team members/developers/teams- Team structure/developers/alumni- Alumni network
- Events
/events/hackathon- Hackathon information/events/ideathon- Ideathon details/events/workshop- Workshop series/events/sessions- Coding sessions/events/codeCHEF- CodeCHEF events/events/9-lock-challenges- 9-Lock coding challenges
- Projects (
/projects) - Showcase of club projects - Contact (
/contact) - Get in touch with the team
The website is built using The GridCN - a Tron-inspired design system with 50+ components and 6 unique themes.
| Theme | Color | Inspiration |
|---|---|---|
| Ares | Red (#ff3333) | God of War - Main theme |
| Tron | Cyan (#00d4ff) | User - Classic Tron aesthetic |
| Clu | Orange (#ff6600) | Program - Antagonist theme |
| Athena | Gold (#ffd700) | Goddess of Wisdom |
| Aphrodite | Pink (#ff1493) | Goddess of Love |
| Poseidon | Blue (#0066ff) | God of Sea |
Each theme includes:
- Custom color palettes with OKLCH color space
- Neon glow effects matching the theme color
- 3D grid effects and HUD elements
- Scanline overlays and pulsing animations
- Core Members - Secretary, Assistant Secretary, Treasurer
- Coordinators - Technical and Event coordinators
- Alumni Network - Showcase of past members
- Dynamic team cards with profiles and social links
- Multi-event support (Hackathons, Ideathons, Workshops, Sessions)
- Event details and registration information
- Past event archives
- Gallery of club projects
- Project details and documentation
- Team member contributions
- 3D grid backgrounds with Three.js
- Tron-style data cards and HUD elements
- Animated transitions and hover effects
- Responsive design for all devices
- Next.js 16.1 - React framework with App Router
- React 19.2 - UI library
- TypeScript 5 - Type safety
- Tailwind CSS 4 - Utility-first CSS
- The GridCN - Tron-inspired UI components
- shadcn/ui - Component library foundation
- Three.js - 3D graphics library
- Radix UI - Accessible component primitives
- next-themes - Theme management
- Vercel Analytics - Web analytics
Edit /src/data/devData.ts to add or update team members:
export const coreMembers = [
{
image: "https://your-image-url.jpg",
title: "Your Name",
subtitle: "Your Role",
handle: "@yourhandle",
borderColor: "#3B82F6",
gradient: "linear-gradient(145deg, #3B82F6, #000)",
url: "https://your-portfolio.com",
},
// Add more members...
];Themes are defined in /src/app/globals.css. You can customize colors, glows, and effects:
[data-theme="ares"] {
--primary: 2 90% 60%;
--glow: 2 100% 50%;
/* ... more theme variables */
}Create new event pages in /src/app/events/[event-name]/page.tsx:
export default function EventPage() {
return (
<div>
<h1>Your Event</h1>
{/* Event content */}
</div>
);
}The easiest way to deploy is using the Vercel Platform:
- Push your code to GitHub
- Import the repository in Vercel
- Configure environment variables (if any)
- Deploy!
Create a .env.local file for local development:
# Add any required environment variables here
NEXT_PUBLIC_SITE_URL=http://localhost:3000This is a standard Next.js application and can be deployed to any platform that supports Next.js:
- Netlify
- Railway
- AWS Amplify
- Any Node.js hosting service
We welcome contributions from Codebreakers members and the community! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow the existing code style
- Write meaningful commit messages
- Test your changes locally before submitting
- Update documentation as needed
This project is open source and available under the MIT License.
- Codebreakers GCEK - All members who contributed to this project
- The GridCN - For the amazing Tron-inspired UI library
- shadcn/ui - For the component library foundation
- Radix UI - For accessible primitives
- Three.js - For 3D capabilities
- Secretary - Podili Biswajit
- Assistant Secretary - Chayakanta Maharana
- Treasurer - Sambhunath Meher
- Motivator & Event Coordinator - R. Pradyota Reddy
- Technical Coordinator - Biplab Jena
- 🌐 Website: Visit our website
- 📧 Email: Contact us through the Contact Page
- 💬 GitHub Issues: For technical issues and suggestions
Built with ❤️ by Codebreakers GCEK
Breaking codes. Building futures.