Compliance Report

How all brief requirements have been met for this project

1. Multi-Page Website Structure

Requirement: Build a multi-page website on a chosen topic.

Met: The site contains 8 published content pages covering Virtual Reality: Introduction, History, Converging Technologies, Leaders, Market, Pros and Cons, Conclusion, and References — all accessible via the navigation bar.

2. Navigation Bar

Requirement: Clear, functional navigation between all pages.

Met: A persistent navigation bar is present on every page using the WordPress Block Navigation component. An animated underline effect expanding from centre outward was added to navbar links on hover.

Standout addition: CSS ::after pseudo-element animation — underline expands from centre over 0.3s using transition: width, left.

3. Market Data Visualisation

Requirement: Present data clearly and meaningfully.

Met: The Market page includes 4 interactive Chart.js graphs: a line chart (market growth), two pie charts (hardware and application segmentation), and a bar chart (regional share).

Standout addition: Charts delivered via a custom WordPress plugin (market-charts) that enqueues Chart.js in the footer and initialises graphs after DOM load.

4. Plugins Used

Requirement: Use of appropriate plugins to extend functionality.

• Jetpack — Site stats, security scanning, lazy loading, and CDN for static assets.
• All-in-One WP Migration — Full site backup and portability for safe submission.
• WP Piwik / Matomo — Privacy-respecting analytics without relying on Google.
• Market Charts (Custom Plugin) — Enqueues Chart.js and renders 4 interactive data visualisation graphs on the Market page.
• Explore Cards (Custom JS) — Makes the homepage section cards fully clickable with a scale-on-hover animation, linking to each respective page.
• Back to Top (Custom JS) — Injects a fixed return-to-top button site-wide that fades in after scrolling 200px and smoothly scrolls back to the top on click.
• VR Chatbot (Custom Plugin) — AI-powered chatbot widget fixed to the bottom-left of every page. Uses the Pollinations AI API (free, no key required) with a VR-focused system prompt to answer general VR questions and queries about the site.

5. Theme and Visual Design

Requirement: Professional, consistent visual design.

Met: The site uses the Gutenify Virtual Reality theme — a purpose-built dark, futuristic aesthetic matching the VR topic. The following custom CSS enhancements were added to style.css:

• Navbar underline animation — ::after pseudo-element expands from centre on hover over 0.3s.
• Site title casing — text-transform: none !important to display dylandaly.tech in lowercase.
• Header cleanup — Removed default “Log In” and “Get Started” buttons from the header template.
• Static front page — Introduction page set as the landing page with a custom hero layout.
• VR-controller-inspired cursor — A custom site-wide cursor graphic reinforces the immersive visual identity while preserving standard text cursors for form fields.

6. Content Quality and Research

Requirement: Well-researched, informative content across all pages.

Met: Each page covers a distinct aspect of VR with factual, structured content — Introduction, History, Converging Technologies, Leaders, Market, Pros and Cons, Conclusion, and References.

7. Hosting on AWS Lightsail

Requirement: Site hosted on a live server.

Met: Hosted on AWS Lightsail (wordpress-instance) in eu-west-1 with static IP 34.251.126.24. Runs on a micro_3_0 bundle (2 vCPU, 1GB RAM, 40GB SSD) with ports 80, 443, and 22 open.

8. Accessibility and UX

• Semantic HTML headings used throughout for screen reader compatibility
• Keyboard-accessible navigation via WordPress block navigation
• Charts include descriptive titles for context
• Hover effects use currentColor to respect theme colour settings
• Responsive layout via Gutenify theme’s built-in mobile breakpoints
• Return-to-top button — Fixed button appears on scroll, smooth scrolls to top on click
• Interactive landing page cards — Clickable with scale animation, linking to all site sections
• Per-page banner images — Each inner page has a unique VR banner image contextually matched to its content, served via a custom page template that embeds the cover block directly in post content
• AI Chatbot — Fixed bottom-left chatbot on every page styled to match the back-to-top button, powered by Pollinations AI API