storm-school

Introduction

The "storm-school" project is dedicated to creating a comprehensive and engaging website for Sri Sathya Sai Vidya Vihar, New Delhi. This CBSE-affiliated school aims to provide holistic education that combines academic excellence with character building and modern learning methodologies. The website will serve as a platform for prospective students, parents, and current students and staff, offering essential information and interactive functionalities.

System Overview

The website for Sri Sathya Sai Vidya Vihar will be designed to highlight the school's values, curriculum, and facilities. It will feature sections such as the Hero Section, Welcome Section, Quick Highlights, About Section, Vision and Mission, Principal's Message, Achievements, Facilities, Academics, Admissions, Student Life, Gallery, Contact Information, and more. The website will also include interactive elements such as a contact form and CTA buttons for admissions and campus exploration.

Functional Requirements

• As a User, I should be able to view the school's main values and offerings on the homepage.
• As a Prospective Student, I should be able to apply for admission through the website.
• As a Parent, I should be able to explore the campus and download the prospectus.
• As a Visitor, I should be able to contact the school via a form on the contact page.
• As a Student, I should be able to access information about student life and clubs.
• As an Admin, I should be able to update the website content easily.

User Personas

• Prospective Student: Interested in applying for admission and exploring the campus.
• Parent: Looking for information about the school's values, curriculum, and facilities.
• Current Student: Engaged in student life activities and accessing school resources.
• Admin: Responsible for updating and maintaining website content.

Visuals Colors and Theme

• primary: #1E3A8A (Deep Blue)
• primary_light: #3B82F6 (Light Blue)
• secondary: #F472B6 (Pink)
• accent: #F59E0B (Amber)
• highlight: #FBBF24 (Gold)
• bg: #FFFFFF (White)
• surface: rgba(255, 255, 255, 0.9)
• text: #111827 (Dark Gray)
• text_muted: #6B7280 (Gray)
• border: rgba(17, 24, 39, 0.1)

Signature Design Concept

The homepage will feature an interactive "Floating Campus" design concept. Using @react-three/fiber and @react-three/drei, the homepage will present a 3D model of the school campus that users can explore by clicking and dragging. Each building on the campus will represent a different section of the website (e.g., Academics, Admissions, Student Life). Hovering over a building will display a brief description, and clicking will navigate to the respective section. This immersive experience will engage users and provide a unique way to explore the school's offerings.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, creating a layered depth effect as users scroll. Decorative elements such as clouds and trees will move at different speeds, enhancing the visual storytelling. Internal pages will adopt a "static" model for clarity and ease of navigation.

Non-Functional Requirements

• The website must be responsive and accessible on various devices and screen sizes.
• Load times should be optimized to ensure a smooth user experience.
• The website should adhere to web accessibility standards.

Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, with alembic for migrations
• AI Models: None specified
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The website will be hosted on a reliable server with adequate bandwidth to handle traffic.
• Content updates will be managed by the school's administrative staff.
• The design will adhere to the school's branding guidelines and color scheme.

Glossary

• CBSE: Central Board of Secondary Education
• CTA: Call to Action
• 3D Model: A three-dimensional representation of the school campus
• Parallax: A scrolling effect that creates an illusion of depth by moving background and foreground elements at different speeds.