# Olivia’s World: Crystal Keep – Marketing Website  
Chasing Magic Studios

---

## Overview

This project is a static front-end website developed using custom HTML5, CSS3, and a small amount of vanilla JavaScript.

It promotes *Olivia’s World: Crystal Keep*, a cozy fantasy tower defence game developed by Chasing Magic Studios.

The website was designed to:

- Clearly introduce the game
- Showcase gameplay media
- Provide press resources
- Direct users to wishlist the game on Steam
- Offer accessible contact options

This project satisfies the requirements for Milestone 1 – User Centric Frontend Development.

---

## User-Centred Design Approach

### Target Users

The website was designed for three primary user groups:

1. Cozy fantasy gamers  
   - Interested in visually warm, narrative-driven games  
   - Want quick access to gameplay footage and wishlist links  

2. Press and content creators  
   - Need fact sheets, downloadable assets, and contact details  
   - Require structured, clearly labelled press materials  

3. General visitors or potential collaborators  
   - Want to understand the studio’s values and direction  
   - Need clear contact information  

---

## User Goals and Design Decisions

| User Goal | Design Solution |
|------------|----------------|
| Understand what the game is quickly | Clear hero section with concise description |
| View gameplay media | Media carousel on homepage |
| Access press materials | Dedicated Press Kit page |
| Learn about the studio | Separate About page |
| Wishlist easily | Prominent Steam call-to-action button |
| Contact the studio | Clear navigation and footer email links |

The navigation structure (Home → About → Press Kit → Contact) reflects these goals and ensures predictable user flow.

---

## Information Architecture

The site uses a structured three-page layout:

- `index.html` – Game overview and media  
- `about.html` – Studio story and design philosophy  
- `press.html` – Fact sheet, downloadable assets, and contact details  

All pages share consistent navigation and layout styling to support usability and familiarity.

---

## Accessibility Considerations

The following accessibility principles were applied:

- Semantic HTML5 elements (`<main>`, `<nav>`, `<section>`, `<header>`)  
- Alt text provided for all images  
- ARIA labels on carousel navigation controls  
- Clear focus and hover states for interactive elements  
- Responsive design using CSS media queries  
- Text contrast supported through background overlays  

The design prioritises readability and clarity to support comfortable browsing across devices.

---

## Visual and Design Intent

The visual design reflects the cozy fantasy genre:

- Soft gradients and pastel tones  
- Darkened overlay for improved text contrast  
- Rounded card components for warmth  
- Clear spacing and hierarchy for readability  

The layout balances marketing clarity with a calm, welcoming aesthetic.

---

## Technologies Used

- HTML5  
- CSS3  
- Vanilla JavaScript  
- Git and GitHub (version control)  
- GitHub Pages (deployment)  

All styling and layout were custom-written without frameworks.

---

## Testing

Manual testing was performed across:

- Desktop (Chrome, Edge)  
- Tablet viewport sizes  
- Mobile viewport sizes  

The following were tested:

- Navigation links between all pages  
- Carousel functionality  
- Steam wishlist link  
- Press asset downloads  
- Email contact links  
- Responsive layout behaviour  

All functionality operated as expected at time of submission.

---

## Deployment

The project is deployed via GitHub Pages.

Live Site:  
https://chasingmagicstudios.com

Repository:  
https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

---

## Credits and Attribution

All HTML and CSS code was written by the developer.

Game media assets belong to Chasing Magic Studios.

No external CSS frameworks were used.

---

## Future Improvements

Planned enhancements may include:

- Expanded keyboard accessibility for carousel controls  
- Additional performance optimisation for media assets  
- Expanded accessibility audit against WCAG standards  
- Downloadable press asset bundle (.zip)

