CoffeeScript Café ☕📜

CoffeeScript Café is a fictional coffee shop website redesigned in 2026 with a modern design system, accessibility‑first structure, and performance‑optimized styling. Originally inspired by beginner tutorials, the project has since evolved into a fully independent showcase of front‑end craftsmanship — blending semantic HTML, responsive CSS, and clean JavaScript into a cohesive user experience.

---

🌐 Project Overview

This site demonstrates how a simple concept can be elevated into a professional web project:

• Semantic HTML5 for clarity, accessibility, and maintainability
• Responsive CSS with variables, grid, flexbox, and scroll‑driven animations
• JavaScript (ES6) for dynamic enhancements like auto‑updating footer content
• Original content and branding — coffee‑and‑code themed menu items, custom imagery, and narrative copywriting

---

📂 File Structure

CoffeeScript-Cafe/
│
├── index.html        # Homepage with hero image and menu
├── hours.html        # Store hours page
├── contact.html      # Contact info and feedback form
├── about.html        # About page with trivia section
│
├── css/
│   └── styles.css    # Global styles, variables, layout, animations
│
├── js/
│   └── script.js     # Footer year auto-update
│
├── img/              # Project images (coffee, pastries, hero banners)
└── favicon.ico       # Site icon

---

✨ Highlights

• Accessibility‑first design
  Semantic elements, descriptive alt text, ARIA‑friendly structure, and focus styles for keyboard users.

• Responsive layout
  Grid and flexbox for adaptive sections, fluid typography, and media queries for small and large screens.

• Modern styling
  CSS variables, dark‑mode support, scroll‑driven animations, and component‑based class naming.

• Original branding
  Coffee‑and‑code themed menu items (Java Coffee, ByteBlend Frappe, BubbleSort Milk Tea), playful trivia, and thematic copywriting.

---

🚀 Getting Started

1. Clone the repository:

   git clone https://github.com/your-username/CoffeeScript-Cafe.git

2. Navigate into the project folder:

   cd CoffeeScript-Cafe

3. Open index.html in your browser to view the site.

---

🛠️ Technologies

• HTML5 — semantic structure and accessibility
• CSS3 — variables, grid, flexbox, transitions, animations
• JavaScript (ES6) — dynamic footer year update

---

📖 Context

CoffeeScript Café began as a learning exercise but has been refactored into a modern showcase of front‑end development. The project demonstrates how foundational tutorials can evolve into original, scalable, and professional web experiences — emphasizing accessibility, performance, and design clarity.

---

👨‍💻 Author

JJ Ginon
Front‑end Web Developer | Accessibility‑first, performance‑optimized, modern web projects