Project Overview

This project is a web-based platform developed by Team Aquamarine at the University of Westminster as part of the module 4COSC011C.3 Web Design and Development. The website aims to raise awareness about Sustainable Development Goal 14: Life Below Water, by educating users about marine biodiversity, threats to ocean life, and how individuals can take action.

🌊 View Live Demo

Objectives

  • Raise awareness about ocean conservation and marine biodiversity.
  • Educate users on UN SDG 14 targets and their global importance.
  • Create an engaging, accessible web experience for environmental education.
  • Promote sustainable practices for ocean and marine resource protection.
  • Build a responsive platform accessible across all devices.
Ocean conservation platform showcase

Visual representation of our ocean conservation awareness platform

Technologies Used

HTML5
CSS3
JavaScript
Responsive Design
DOM Manipulation
Local Storage
AJAX
Netlify

My Contributions

📸 Gallery System

Developed an interactive image gallery showcasing marine life and ocean conservation efforts. Features include:

  • Responsive grid layout with hover effects
  • Lightbox functionality for detailed viewing
  • Category filtering for different marine species
  • Optimized image loading and compression
    • View Page

🗺️ Interactive Sitemap

Created a comprehensive sitemap with visual navigation structure:

  • Hierarchical site structure visualization
  • Interactive navigation with smooth transitions
  • Mobile-responsive design with collapsible sections
  • Quick access to all major site sections
    • View Page

🌊 Take Actions Page

Built an engaging action-oriented section to promote user participation:

  • Designed the Take Action page using HTML and CSS
  • Included sections on marine conservation, importance of action, ways to contribute, and human impacts
    • View Page

✏️ Content Editor

Implemented a user-friendly content management system:

  • Displayed my name and role
  • Mentioned pages I created: Gallery, Sitemap, Take Action
  • Added brief descriptions of each page
  • Included direct links to my pages

Technical Features

  • Responsive Gallery: Dynamic image grid with lightbox modal and category filtering.
  • Interactive Sitemap: Visual site navigation with collapsible sections and smooth animations.
  • Action Hub: User engagement tools with progress tracking and social sharing.
  • Content Editor: WYSIWYG editor with real-time preview and media management.
  • Mobile Optimization: Touch-friendly interface optimized for all screen sizes.
  • Performance: Lazy loading, image optimization, and efficient JavaScript execution.
  • Accessibility: ARIA labels, keyboard navigation, and screen reader compatibility.

Environmental Impact

This project contributes to global ocean conservation efforts by:

  • Educating visitors about the critical state of marine ecosystems
  • Promoting sustainable practices for ocean protection
  • Supporting UN SDG 14 awareness and implementation
  • Inspiring individual and collective action for marine conservation
Marine conservation impact