HackOverflow 4.0 is a national-level hackathon organized by PHCET. This repository contains the official event website built with cutting-edge web technologies.
🌐 Live Site: https://hackoverflow4.tech/
- 🎨 Stunning gradient backgrounds and glow effects
- ⚡ Buttery-smooth animations powered by Framer Motion
- 📱 Fully responsive design (mobile-first approach)
- 🎯 Type-safe codebase with TypeScript
- ⚙️ Optimized performance with Next.js App Router
- 🎭 Interactive components with modern UI patterns
- Custom Theme Animations – Pulsing glow effects, shimmer animations, and floating elements
- Gradient Overlays – Multi-layered background effects with opacity controls
- Countdown Timer – Real-time event countdown with styled number displays
- Mobile-Optimized – Responsive breakpoints at 768px and 480px
- Typography – Google Fonts integration (Poppins family)
Hero– Landing section with dynamic visualsNavbar– Sticky navigation with smooth scrollingAbout– Event information and missionTheme– Hackathon themes with countdownSchedule– Event timeline and agendaFAQ– Collapsible question/answer sectionsGallery– Image showcase gridSponsor– Partner and sponsor logosStatistics– Live participant/project statsTeams– Organizer and team member profilesFooter– Contact info and social links
- App Router – Next.js 14+ server/client components
- Framer Motion – Page transitions and micro-interactions
- Lucide Icons – Lightweight SVG icon library
- PostCSS – Advanced CSS processing
- ESLint – Code quality enforcement
| Category | Technologies |
|---|---|
| Framework | Next.js 14+ (App Router) |
| Language | TypeScript 5.0+ |
| Styling | Tailwind CSS 3.0, PostCSS |
| Animations | Framer Motion |
| Icons | Lucide React |
| Font | Google Fonts (Poppins) |
| Tooling | ESLint, npm/pnpm |
- Node.js 18 or higher
- npm, yarn, or pnpm
# Clone the repository
git clone https://github.com/your-org/HackOverflow-Website.git
cd HackOverflow-Website
# Install dependencies
npm install
# or
pnpm install
# or
yarn install
# Run development server
npm run dev
# or
pnpm dev
# or
yarn devOpen http://localhost:3000 in your browser to see the result.
HackOverflow-Website/
├── .next/ # Build output (auto-generated)
├── node_modules/ # Dependencies
├── public/ # Static assets (images, videos)
├── src/
│ ├── app/
│ │ ├── favicon.ico # Site favicon
│ │ ├── globals.css # Global styles
│ │ ├── layout.tsx # Root layout wrapper
│ │ └── page.tsx # Homepage
│ └── components/
│ ├── About.tsx # About section
│ ├── FAQ.tsx # Frequently asked questions
│ ├── Footer.tsx # Site footer
│ ├── Gallery.tsx # Image gallery
│ ├── Gridscan.tsx # Grid animation effect
│ ├── Hero.tsx # Hero/landing section
│ ├── KeyDates.tsx # Important dates timeline
│ ├── Navbar.tsx # Navigation bar
│ ├── Overview.tsx # Event overview
│ ├── Schedule.tsx # Event schedule
│ ├── SectionHeader.tsx # Reusable section headers
│ ├── Special.tsx # Special announcements
│ ├── Sponsor.tsx # Sponsor showcase
│ ├── Statistics.tsx # Live statistics
│ ├── Teams.tsx # Team members
│ └── Theme.tsx # Hackathon themes
├── .gitignore
├── eslint.config.mjs # ESLint configuration
├── next.config.ts # Next.js configuration
├── package.json # Dependencies and scripts
├── postcss.config.mjs # PostCSS configuration
├── README.md # This file
└── tsconfig.json # TypeScript configuration
The website uses a carefully crafted color scheme:
| Color | Hex Code | Usage |
|---|---|---|
| Primary Orange | #E85D24 |
Accent, CTAs, glow effects |
| Primary Gold | #FCB216 |
Highlights, borders, gradients |
| Primary Purple | #63205F |
Background glows, secondary accent |
| Background Dark | #0F0F0F |
Main background |
| Text White | #FFFFFF |
Primary text |
| Text Muted | rgba(255, 255, 255, 0.5) |
Secondary text |
# Start development server
npm run dev
# Build for production
npm run build
# Start production server
npm start
# Run linter
npm run lintnext.config.ts– Next.js configurationtailwind.config.js– Tailwind CSS customizationtsconfig.json– TypeScript compiler optionseslint.config.mjs– Code style rules
# Production build
npm run build
# The build generates static files in .next/
# Deploy to Vercel, Netlify, or any Node.js hosting
npm start- Vercel (recommended) – Zero-config deployment
- Netlify – Automated builds from Git
- AWS / DigitalOcean – Custom server deployment
This project follows industry-standard best practices:
✅ Component-Driven Architecture – Modular, reusable components
✅ Type Safety – Full TypeScript coverage
✅ Performance Optimization – Next.js Image optimization, code splitting
✅ Accessibility – Semantic HTML, ARIA labels
✅ SEO-Friendly – Meta tags, OpenGraph support
✅ Clean Code – ESLint enforcement, consistent formatting
✅ Version Control – Git with meaningful commits
The theme section showcases hackathon tracks with:
- Announcement box with shimmer animation
- Floating icon with pulse rings
- Countdown timer (days, hours, minutes, seconds)
- Participant note with custom styling
Key CSS Classes:
.themes-section– Main container with dark background.glow-bg-themes– Animated background glow effects.announcement-box– Content card with border and fade-in.countdown-container– Flexbox layout for timer.notify-button– Interactive CTA button
- Fade In Up – Elements slide up with opacity transition
- Pulse Glow – Background elements expand/contract
- Float – Smooth vertical movement
- Shimmer – Horizontal light sweep effect
- Pulse Ring – Expanding border rings
- ✅ No hardcoded secrets or API keys
- ✅ Environment variables for sensitive data
- ✅ Image optimization with Next.js
<Image>component - ✅ Code splitting for faster initial loads
- ✅ CSP headers for XSS protection
- ✅ HTTPS enforcement in production
Each component is self-contained with clear prop interfaces. Example:
// Theme.tsx
export default function Theme() {
// Countdown logic
// Animation triggers
// Responsive breakpoints
}- Use Tailwind utility classes for consistency
- Custom CSS in
globals.cssfor global styles - Component-scoped styles use CSS modules or styled-jsx
- Mobile-first responsive design (min-width breakpoints)
We welcome contributions! To contribute:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow existing patterns and conventions
- Run
npm run lintbefore committing - Write meaningful commit messages
- Test on multiple screen sizes
HackOverflow 4.0 Organizing Team
📧 Email: hackoverflow@mes.ac.in
🌐 Website: https://hackoverflow4.tech/
💬 Discord: Join our community
📷 Instagram: @hackoverflow.tech
For technical issues or feature requests, please open an issue on GitHub.
© 2026 HackOverflow 4.0 – HackOverflow Organizing Committee
This project is open source for educational and non-commercial use.
- Personal learning and experimentation
- Academic use by students and educational institutions
- Portfolio and skill-development projects
- Non-commercial forks with attribution
- Commercial deployment or monetization
- Enterprise or organizational use without permission
- Redistribution as part of paid products or services
- White-labeling or resale
Organizations and companies must obtain written permission before commercial use.
📧 Permission requests: hackoverflow@mes.ac.in
- Next.js Team – For the incredible React framework
- Tailwind Labs – For the utility-first CSS framework
- Framer – For the animation library
- react-bits – Gridscan background component (camera features removed)
- PHCET – For hosting and organizing HackOverflow 4.0
- Parth Bhoir – System engineering and server configuration (hosted on home server)
- Nirav Thakur – Design and frontend UI development
- Chetan Jadhav – Stable build creation and maintenance
- All Contributors – For their time and expertise