Apeki Tumba TSS - School Website

A modern, professional school website built with React, Tailwind CSS, and React Router.

🏫 About

This is the official website for Apeki Tumba Technical Secondary School located in Rulindo, Rwanda. The website provides comprehensive information about the school, admissions, academics, staff, student life, and more.

✨ Features

• Responsive Design - Works perfectly on all devices (mobile, tablet, desktop)
• Smooth Animations - Professional fade-in, slide-up effects throughout
• Real Images - Uses Unsplash API for high-quality educational images
• Modern UI - Clean, professional design with blue and white color scheme
• Fast Navigation - React Router for instant page transitions
• Contact Form - Functional contact form with validation
• SEO Optimized - Proper meta tags and semantic HTML

📁 Project Structure

src/
├── components/          # Reusable components
│   ├── Navigation.jsx   # Main navigation with mobile menu
│   ├── Footer.jsx       # Footer with links and contact info
│   ├── PageHeader.jsx   # Reusable page header with images
│   └── Card.jsx         # Reusable card component
├── pages/              # Page components
│   ├── HomePage.jsx     # Landing page with hero section
│   ├── AboutPage.jsx    # About school, mission, vision
│   ├── AdmissionsPage.jsx  # Admission process and fees
│   ├── AcademicsPage.jsx   # Programs and curriculum
│   ├── StaffPage.jsx    # Faculty directory
│   ├── StudentsPage.jsx # Student life and clubs
│   ├── NewsPage.jsx     # News and events
│   ├── ContactPage.jsx  # Contact form and info
│   ├── GalleryPage.jsx  # Photo gallery
│   └── index.js         # Page exports
├── App.jsx             # Main app component with routing
├── main.jsx            # App entry point
└── index.css           # Global styles and animations

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository

git clone <repository-url>
cd portfolio

2. Install dependencies

npm install

3. Start development server

npm run dev

4. Open your browser and visit http://localhost:5173

🎨 Customization

Update School Information

1. Contact Details - Edit src/components/Footer.jsx and src/pages/ContactPage.jsx
2. School Name - Update in src/components/Navigation.jsx
3. Staff Members - Modify the staff array in src/pages/StaffPage.jsx
4. News Articles - Update the news array in src/pages/NewsPage.jsx

Change Images

All images use Unsplash URLs. To change an image, replace the URL with a new Unsplash image:

// Example
backgroundImage: `url(https://images.unsplash.com/photo-ID?w=1600&h=600&fit=crop)`

Modify Colors

The color scheme uses Tailwind CSS. Main colors:

• Primary: blue-600, blue-800
• Background: gray-50, white
• Text: gray-700, gray-800

📱 Pages

1. Home - Hero section, highlights, latest news
2. About - School history, mission, vision, values
3. Admissions - Process, requirements, fees, dates
4. Academics - Programs, teaching approach, calendar
5. Staff - Faculty directory with photos
6. Students - Clubs, activities, achievements
7. News - Latest news and upcoming events
8. Contact - Contact form and school information
9. Gallery - Photo gallery of school life

🛠️ Technologies Used

• React 19 - UI library
• React Router 7 - Client-side routing
• Tailwind CSS 3 - Utility-first CSS framework
• Vite - Build tool and dev server
• Unsplash - High-quality images

📦 Build for Production

npm run build

The build output will be in the dist/ directory.

🌐 Deployment

This site can be deployed to:

• Netlify
• Vercel
• GitHub Pages
• Any static hosting service

📄 License

© 2026 Apeki Tumba TSS. All rights reserved.

👥 Contact

• Email: info@apekitumba.rw
• Phone: +250 XXX XXX XXX
• Location: Rulindo District, Rwanda