This project was created as part of Projections 2025, the annual tech fest of my college. I participated in the Web Wizards event, where the challenge was to design an individual website for a school. The goal was to build an intuitive, visually stunning, and fully responsive frontend design.
🔗 Live Preview: School Website
✅ Hero Section with Smooth Animations - Engaging intro for an immersive experience
✅ Modern UI/UX Design - Clean, aesthetic, and user-friendly
✅ Mobile-Friendly & Responsive - Optimized for all screen sizes
✅ Fast Performance - Lightweight and highly optimized
✅ Easy Navigation - User-friendly menu for better accessibility
✅ Colorful Gradient Transitions - Enhancing the design with appealing effects
✅ School Highlights Section - Showcasing academics, extracurriculars, and admission info
✅ Gallery Section - Interactive image grid displaying school life
The website follows a modern and professional color scheme with balanced contrasts and smooth gradients.
-
Primary Colors:
🎨 Jet (#3A3335) – Dark, strong base color
🎨 Ash Gray (#C6D8D3) – Soft, neutral background -
Accent Colors:
🔴 Raspberry (#D81E5B) – Vibrant for buttons and highlights
🟠 Vermilion (#F0544F) – Warm and energetic contrast
🎗 Papaya Whip (#FDF0D5) – Light, airy background/section divider -
Gradient Suggestion:
✅ Raspberry → Vermilion → Papaya Whip - Smooth, energetic background transitions
✅ Ash Gray → Jet - Sleek, modern feel for dark mode elements
This project was built using modern frontend technologies to ensure scalability, performance, and a great user experience.
🚀 Frontend Development
- ⚛ React.js - Component-based UI development
- 🌀 Vite - Fast and optimized development environment
- 📜 TypeScript - Type safety and better code maintainability
- 📄 HTML5 - Semantic structure
- 🎨 CSS3 - Styling and layout design
- 🎭 Framer Motion - Smooth animations
- 🎭 Tailwind CSS - Utility-first styling
🔧 Other Technologies & Tools
- 🌎 Netlify - Hosting and deployment
- 🛠 ESLint & Prettier - Code formatting and linting
- 🔍 SEO Optimization - Meta tags and performance improvements
This project was built as part of Projections 2025, my college’s annual tech fest. I participated in the Web Wizards event, where the challenge was to design a complete school website with a focus on UI/UX.
🎭 Event: Web Wizards - Projections 2025
🏛 College Tech Fest: Projections 2025
🎨 Task: Build a stunning frontend design for a school website
🛠 Category: Web Design & Development
🔗 LinkedIn Post: Projections 2025 Event
🔗 Projections Link: Projections Page
While this is a frontend-only design, here are some future improvements that can be added:
🔹 Convert to Full-Stack - Implement backend with Node.js & Firebase
🔹 Dynamic News & Announcements - Fetch latest updates from a database
🔹 Student & Teacher Login - Authentication system for different user roles
🔹 Interactive Contact Form - Integrated with email notifications
🔹 Accessibility Improvements - Better support for screen readers and contrast adjustments
This project was an exciting experience in designing a real-world school website. Web Wizards was a great opportunity to push my UI/UX skills, work with modern web tools, and create a professional-level design. I hope you find this project interesting! Feel free to ⭐ star this repository and contribute to future improvements. 🚀