Tuition Portfolio Website

---

A modern, responsive multi-page tutoring portfolio website tailored for the Sri Lankan education context.

• 📘 GCE O/L and GCE A/L focused content
• 🌗 Dark/light theme toggle
• 📱 Mobile-friendly responsive UI
• 🏆 Class details, achievements, testimonials, and contact form

---

🌐 Live Overview

This is a static frontend project built with HTML, CSS, and JavaScript.

Main pages:

• 🏠 index.html - Home / Hero / Highlights
• 👤 about.html - Profile and teaching journey
• 📚 classes.html - Subjects, schedule, pricing, services
• 🖼️ gallery.html - Achievements, student success, testimonials
• 📩 contact.html - Contact details, form, FAQ

---

✨ Features

• ✅ Professional responsive navbar
• ✅ Hero section with profile image and stats
• ✅ Sri Lanka-localized content (GCE O/L, GCE A/L, LKR, +94)
• ✅ Dark mode / light mode toggle with persisted preference
• ✅ Smooth scrolling and scroll interactions
• ✅ Gallery filtering and lightbox
• ✅ Dynamic testimonials and animated stats
• ✅ Contact form integration with EmailJS
• ✅ Back-to-top button

---

🧱 Architecture

🔁 High-level flow

1. Static HTML pages define structure and content.
2. Shared stylesheet (css/style.css) controls layout, components, responsiveness, and theme visuals.
3. Shared script (js/script.js) handles runtime behavior:
   • Theme switching and persistence
   • Navbar and scroll interactions
   • Gallery filter/lightbox
   • Contact form submission via EmailJS
   • Dynamic testimonial/stat effects

⚙️ Runtime responsibilities

• HTML (*.html):

  • Semantic sections and page-specific content
  • Shared navbar/footer patterns
  • Form fields and page-level metadata

• CSS (css/style.css):

  • Design system variables and component styles
  • Hero section and responsive breakpoints
  • Dark mode visual overrides

• JavaScript (js/script.js):

  • UI behavior orchestration (PortfolioApp)
  • Theme state management
  • Gallery and animation logic
  • EmailJS submission flow and notifications

---

🗂️ Project Structure

tuition-portfolio/
|-- index.html
|-- about.html
|-- classes.html
|-- gallery.html
|-- contact.html
|-- css/
|   `-- style.css
|-- js/
|   `-- script.js
|-- images/
`-- assets/

---

📸 Screenshots

---

🛠️ Tech Stack

• HTML5
• CSS3
• JavaScript (vanilla)
• Bootstrap 5
• Font Awesome
• Google Fonts
• EmailJS

---

🚀 Getting Started

1. Clone

git clone <your-repo-url>
cd tuition-portfolio

2. Run locally

Open index.html directly, or use a local server (recommended):

python -m http.server 8000

Open:

http://localhost:8000

---

📧 EmailJS Setup

Email handling is configured in:

• contact.html (initialization)
• js/script.js (emailjs.sendForm(...))

Update with your own values:

• Public Key
• Service ID
• Template ID

Ensure template variables match form field names in contact.html.

---

🎨 Customization Guide

📝 Content

• Update text and metadata in each *.html
• Update contact details in contact.html and footer blocks
• Replace placeholder social links (href="#")

🎯 Styling

• Global styles and theme: css/style.css
• Hero styles: .hero-section, .profile-image, .profile-badge
• Navbar styles: .navbar, .navbar-nav, .mobile-menu-btn

🖼️ Assets

• Profile image: images/My_image.jpg
• Gallery/media: images/

---

🇱🇰 Localization Notes (Sri Lanka)

Current localization includes:

• GCE O/L, GCE A/L terminology
• LKR currency labels
• +94 phone format
• Sri Lanka location examples

For another region, update:

• Page text in *.html
• Dynamic strings in js/script.js
• Currency, exam terms, and contact details

---

☁️ Deployment

Deploy easily on:

• Netlify
• Vercel
• GitHub Pages
• Firebase Hosting

⚡ Netlify quick setup

1. Push repository to GitHub
2. Import project in Netlify
3. Build command: leave empty
4. Publish directory: /

---

♿ Performance and Accessibility

Included:

• Responsive layouts across desktop/tablet/mobile
• Keyboard-visible focus states
• Reduced motion support
• Semantic sectioning and readable contrast

Recommended next improvements:

• Add explicit aria-label for social links
• Add real Open Graph image assets
• Add a favicon file instead of inline data URI

---