Disara Fernando, Oceayra, student 4

User Profile

Technical Description

The User Profile page (profile.html) is a multi-step interactive form that allows visitors to build a personalised ocean conservation profile. The page is structured into four distinct card sections — User Profile, Ocean Skills, Your Pledge, and My Ocean Interests — each inside a class="form-card" styled with backdrop-filter: blur(20px), border-radius: 24px, and a deep box-shadow to create a polished floating card appearance.

The hero banner (.header) uses a three-stop linear-gradient(135deg, #0d2137, #0a3d62, #0a4f6e) with a ::before radial glow pseudo-element for depth. A .profile-panel uses Flexbox (display: flex; align-items: center; gap: 32px) to align the avatar, user details, and an SVG progress ring side by side. The circular progress ring is built with two inline circle SVG elements — a static background ring and a .

The avatar upload uses a hidden input triggered by clicking the avatar circle. A FileReader API reads the selected image and injects it as a base64 inside the avatar circle. The four profile form fields (name, age, telephone, email) use a CSS Grid layout (grid-template-columns: 1fr 1fr) with real-time validation — inputs receive .valid (green border) or .error (red border) class changes via oninput handlers. The Ocean Skills section uses grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) with each skill card featuring a clickable five-star rating system built in JavaScript using data-* attributes. Pledge items use vertical Flexbox (display: flex; align-items: flex-start; gap: 18px) and toggle a .selected class and visual checkbox on click. A fixed toast notification (position: fixed; bottom: 30px; right: 30px) slides into view using a cubic-bezier spring transition and auto-dismisses after 4 seconds. The step indicator bar at the top updates .step-dot.done states dynamically as each section is completed.

Accessibility

All form inputs include descriptive label elements with required fields marked by a visible asterisk and a .field-hint span beneath each input. Inline .field-error messages surface under invalid inputs when the save button is pressed, avoiding colour-only feedback. The avatar area carries a title attribute ("Click to upload photo") for assistive technology users. Action buttons are native button elements ensuring keyboard focusability, and the reset action uses confirm() to prevent accidental data loss. A responsive media query (@media(max-width: 600px)) collapses the two-column form grid to a single column on small screens, preserving mobile usability.

Link to the validation page

View the Profile validation evidence.

Link to the page

Open the Profile.

Sitemap

Technical Description

The Sitemap page sitemap.html provides both an interactive SVG diagram and a structured text listing of the entire Oceayra site hierarchy. The body uses display: flex; flex-direction: column; min-height: 100vh with flex: 1 on main to keep the footer pinned at the bottom of every viewport height.

The hero banner (.sitemap-hero) is built with a three-stop linear-gradient(135deg, #0096c7, #0a192f, #03045e) and two CSS pseudo-elements: a ::before radial glow overlay and a ::after element using four layered radial-gradient(circle ...) values to create subtle floating bubble decorations, both using pointer-events: none. The heading uses clamp(1.6rem, 3.5vw, 2.4rem) for fluid responsive typography.

The SVG sitemap is wrapped in a div class="svg-container" with overflow-x: auto and a min-width: 750px on the svg to prevent node overlap on narrow screens. The diagram uses five colour-coded levels: Splash (orange, #e76f51), Home (dark navy, #0a192f), Main Navigation (mid-blue, #1463a0), Content pages (lighter blue, #2196c4), and Editor & Validation nodes (teal, #0e7490). Connector lines between levels use line elements with stroke-dasharray for a dashed style. Each node is an a class="node-link" with CSS hover transitions (fill: #0096c7) and keyboard focus styling (outline: 3px solid #f77f00). A legend box drawn in SVG using rect and text elements explains the colour hierarchy.

Below the SVG, the text sitemap (.text-sitemap) uses a responsive CSS Grid (grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))) to group links into four categories. Group headings use text-transform: uppercase; letter-spacing: 0.16em, and each link uses a CSS transition on padding-left for a smooth indent-on-hover effect. All major sections use a .fade-up class with staggered animation-delay values (d1, d2, d3) driven by a @keyframes fadeUp animation.

Accessibility

The SVG container carries role="img" and a full aria-label describing the diagram. The svg itself includes title and desc elements providing a complete textual description of the hierarchy, referenced via aria-labelledby="svgTitle svgDesc". Every node a has tabindex="0" for keyboard navigation and an aria-label (e.g., "Go to User Profile page") for meaningful screen-reader context. Each node also contains a child title for tooltip support.The text sitemap section is a section with aria-labelledby="text-sitemap-heading". Responsive media queries at max-width: 700px reduce padding to maintain readability on mobile.

Link to the validation page

View the Sitemap validation evidence.

Link to the page

Open the Sitemap.

Content Page

Technical Description

The Content ST4 page covers the topic of Sustainable Fishing in the context of UN SDG Goal 14. It follows the shared content page structure used across Oceayra: a section class="section-title" with an h1, subtitle, and .divider-line decorative accent. An in-page nav class="content-navigation" provides anchor jump links to each of the four topic sections. Each section is wrapped in a div class="intro" styled with a white background, border-radius: 20px, and a soft box-shadow glow that deepens on :hover. Images use width: 95%; height: 400px; object-fit: cover; border-radius: 10px for consistent presentation. The page closes with .previous-button and .next-button links using shared translateY hover animations.

Accessibility

All images include descriptive alt attributes. The in-page navigation uses the semantic nav element with anchor links matching section id attributes for keyboard skip-navigation. Headings follow a strict hierarchy (h1 for page title, h2 for sections, h3 for sub-headings). Bullet points use ul/li so screen readers enumerate them correctly. Navigation buttons are a elements ensuring keyboard focusability.

Link to the validation page

View the Content Page validation evidence.

Link to the page

Open the Content Page.

Challenges and Lessons Learned

One major challenge building the Profile page was implementing the real-time SVG progress ring. Correctly computing stroke-dashoffset required understanding the circle circumference formula and synchronising seven independent form state checks — four input fields, skills, pledges, and interests — into a single percentage value. Debouncing oninput events and keeping JavaScript Sets in sync with DOM state was resolved through careful use of a centralised liveUpdate() function called by every interaction handler.

For the Sitemap, manually calculating SVG node coordinates and connector line endpoints required iterative trial and error. A key lesson was that using overflow-x: auto with a fixed min-width on the SVG preserves text readability far better than scaling the entire diagram down on mobile. Building the text sitemap as an accessible fallback also reinforced the importance of designing for progressive enhancement — content must be meaningful even without interactive visuals.

Compliance

The pages I developed for this coursework were designed in accordance with responsible web publishing practices expected within institutions connected to the JANET network. JANET is the UK research and education network provided by Jisc, and institutions using this network must follow ethical, lawful, and secure practices when developing online resources.

First, the content of the pages was created to be appropriate for an academic environment. The website focuses on Sustainable Development Goal 14 (Life Below Water) and is intended for educational purposes. No harmful, offensive, or misleading material is included, which supports the ethical use of network resources required by the JANET Acceptable Use Policy.

Second, I ensured responsible use of external resources. Images used within the website are intended to come from royalty-free or appropriately licensed sources. All external materials are referenced in the References section to respect copyright rules and maintain academic integrity.

Third, the pages do not collect or process personal data from users. This avoids potential issues related to GDPR and the UK Data Protection Act 2018. Since the website is an educational project, it does not require storing personal information or user accounts.

Accessibility was also considered during development. Images include alternative text, headings are structured using semantic HTML elements, and content is written clearly to support readability. These practices align with UK accessibility expectations and help ensure that digital resources are usable by a wider range of users.

Finally, the project follows good academic and professional practice. All content was written originally, external sources are acknowledged, and the website does not include malicious scripts or unsafe code. These steps help ensure that the website respects the security, ethical, and legal principles expected when using JANET-connected institutional systems.

Group Meetings and Individual Contribution Log

Group Meetings and Contribution Log
Meeting Date & Time Format Objective Attended Your Individual Contribution
1 15 Feb 2026 Face-to-face Agree SDG and assign roles Yes Agreed on SDG 14 as the website topic, selected the team name OCEAN, accepted responsibility for Student 2 pages, and helped set up the shared working structure
2 17 Feb 2026 Online Design planning Yes Gave feedback on the colour palette, typography, and layout direction, and reviewed how the SDG 14 theme should connect across the website.
3 25 Feb 2026 Hybrid Progress review Yes Reported progress on the Splash Screen and AIS, discussed how to implement JavaScript features, and checked navigation consistency across pages.
4 2 Mar 2026 Face-to-face Testing and layout fixes Yes Took part in cross-browser testing, reviewed mobile responsiveness, and helped finalise how shared footer elements would be organised.
5 10 Mar 2026 Face-to-face Accessibility and validation Yes Checked accessibility features such as alt text and keyboard navigation, and reviewed validation results for my implemented pages
6 25 Mar 2026 Face-to-face Final review and submission prep Yes Reviewed final versions of my pages, completed the Page Editor and Validation Page, and helped prepare the project for submission.

References

Provide links to resources you used following a consistent format (e.g., APA, MLA, or a simplified style). For example:

Go top