Course: IMD1005 - Web Development
Assignment: 04 - Team Project: Build a Website
Project Type: Multi-page fantasy game website
Deployment: GitHub Pages
-
Person 1: Nyasha Chikanga - 101 340 984
Project setup, GitHub Pages setup, home page structure, hero section, mailing/newsletter list section, shared smooth scroll and fade-in support, custom cursor. -
Person 2: Peace Jolayemi - 101378520
Story / world page development, lore content, timeline section, shared CSS system, colour palette, typography, spacing, overall visual consistency, custom cursor, and moodboard. -
Person 3: Ehizomo Odiana - 101368940
Characters page, character cards, character filtering, popup modals, and play preview / branching interactive page -
Person 4: Dominique Sutherland - 101381790
Contact / join page, countdown section, FAQ accordion, form validation, hamburger menu, and design document maintenance
The Shattered Crown is a fantasy-themed website created for a fictional narrative adventure game. The site introduces visitors to the game world, its major characters, its story, and an interactive preview of the kind of choices players would make in the full game.
The website is designed for:
- people who enjoy fantasy and story-driven games
- visitors who want to explore the world and lore before playing
- potential followers who want updates through the join page
The site focuses on making the game world feel immersive, readable, and interactive instead of presenting everything as plain text.
This website solves the problem of how to introduce a new fantasy game world to first-time visitors in a way that is clear, engaging, and easy to navigate.
Instead of relying on a single static page, the project gives users:
- a landing page that quickly explains the world
- a story page for lore and worldbuilding
- a character page with interactive details
- an interactive preview page that demonstrates player choice
- a join page that encourages users to stay connected
- hero section with game title and tagline
- world introduction
- launch countdown
- featured character slider
- mailing list call-to-action
- story overview
- timeline of major events
- expandable lore sections
- preview link to the interactive story
- featured character slider
- character grid
- role labels
- filter buttons
- modal popups with full character details
- interactive branching scene
- dialogue and narration
- player choice buttons
- different paths and ending variations
- release countdown
- newsletter signup
- contact form
- FAQ accordion
- Start on
index.htmlto get an overview of the game world. - Visit
story.htmlto read the background story, timeline, and lore. - Open
characters.htmlto explore the main cast and their roles. - Try
playpreview.htmlto experience the branching interactive preview. - Go to
contact.htmlto join the mailing list, view the countdown, and use the contact form.
- works across desktop and mobile layouts
- includes a hamburger menu for smaller screens
- shared spacing, colours, and typography system across pages
- smooth scrolling
- fade-in reveal effects
- hamburger menu toggle
- countdown timer
- character slider and modals
- character filtering
- FAQ accordion
- expandable story / lore sections
- form validation
This project demonstrates data-driven design in JavaScript rather than hardcoding everything directly in HTML.
Examples include:
- character data rendered from JavaScript objects
- story scenes and branching choices rendered from structured data
- countdown values generated dynamically with JavaScript
This project includes meaningful Vue.js usage:
- the interactive play preview uses Vue for reactive story progression
- the contact form uses Vue for validation and submission states
This was done to support the bonus requirement in a way that is actually useful to the project.
The visual direction for this project is based on a fantasy mood board with:
- twilight and celestial imagery
- parchment and lore-inspired textures
- warm gold accents against deep green and dark tones
- dramatic fantasy typography and atmospheric spacing
The goal was to make the site feel like part of the game world, not just a basic information page.
- the project includes at least 5 main pages
- each page has a clear purpose and supports the overall theme
- shared colour palette and typography system
- consistent visual identity across all pages
- layout hierarchy that guides the user through the content
- mobile navigation adapts with a hamburger menu
- sections stack and resize across different screen sizes
- interactive sections remain usable on smaller screens
- character slider and popups
- FAQ and lore accordions
- branching story preview
- countdown timer
- newsletter and contact form interactions
- characters and story content are rendered from JavaScript data structures
- the site does not rely only on hardcoded HTML blocks for dynamic sections
- meaningful headings and section structure
- buttons used for interactive controls
- labels attached to form fields
- alt text on images
- ARIA attributes used in navigation, accordions, and form feedback areas
- CSS and JavaScript are stored in external files
- shared styles and scripts are separated from page-specific files
- naming is kept readable and consistent
- reusable helpers are used for repeated behaviors
- created the GitHub repository and basic project structure
- added collaborators
- enabled GitHub Pages
- built the landing page
- created the hero section, world intro, and mailing list area
- contributed shared smooth scroll and fade-in behavior
- built the story / world page
- wrote the story overview, lore, and timeline content
- created and maintained the shared CSS system
- defined colour variables, fonts, spacing, and theme consistency
- supported styling decisions across the project
- built the characters page
- created the character cards and role labels
- implemented filtering and popup modals
- built the interactive preview page
- created branching story logic and dynamic dialogue flow
- built the join / contact page
- created the newsletter and contact form layout
- implemented form validation and FAQ behavior
- handled shared utility interactions such as the hamburger menu
- maintained the design document for planning meetings
- HTML5
- CSS3
- JavaScript
- Vue 3
- GitHub
- GitHub Pages
Other learning resources used during development:
- YouTube
├── index.html
├── story.html
├── characters.html
├── playpreview.html
├── contact.html
├── world.html
├── shared.css
├── shared.js
├── characters.css
├── characters.js
├── playpreview.css
├── playpreview.js
├── contact.css
├── story.css
├── index.css
├── assets/
└── README.md
- ChatGPT
- Codex
- Claude
- helping merge some complex code sections when team changes needed to be combined
- explaining JavaScript concepts and debugging logic
- helping clean up or simplify some repeated code
- helping write and revise this README
- overall project idea and content direction
- page layout structure
- worldbuilding content, lore, and character information
- styling decisions, colours, spacing, and responsive design choices
- most of the HTML, CSS, and JavaScript implementation
- page integration and final editing
- YouTube for tutorials and concept explanations
- Google for documentation and troubleshooting
- Reddit for problem-solving discussions and examples
AI was used as a support tool, not as a replacement for team work. The majority of the website was written, styled, and organized by the team. AI-assisted parts are documented in this README, and selected code sections are marked with AI comments where applicable.
- GitHub Repository: (https://github.com/Gracicinya/ThisAdventure)
- Live GitHub Pages Site: (https://gracicinya.github.io/ThisAdventure/)
- Design Document: Submitted with the project deliverables