This website is a progect from my year 10 STEM project. It is a website about Vertical Group.1
This is a modern, responsive website for the VG (Vertical Group) program at St. Peters College, Palmerston North. It's built with clean HTML, CSS, and vanilla JavaScript, and includes several dynamic features to make it easy to manage and use.
This website is packed with features designed for a great user experience and easy maintenance:
-
Dynamic Header & Footer: The header and footer are loaded dynamically on every page using JavaScript's
fetchAPI. This means you only need to updateheader.htmlorfooter.htmlonce to see the changes across the entire site. -
Light/Dark Theme Switcher: A theme switcher in the footer allows users to toggle between a high-contrast light mode (black text on white background) and a dark mode (white text on black background).
-
Persistent Theme: The user's theme choice is automatically saved to their browser's
localStorage, so their preference is remembered on their next visit. -
Dropdown Navigation: The navigation menu in the header uses clean, hover-based dropdowns to organize the "Houses" and "Events" sections, keeping the layout uncluttered.
-
Dynamic Pathing System: The site uses a clever JavaScript-based system to automatically fix all navigation links and asset paths. This ensures that all links work correctly, whether the page is at the root level or in a subdirectory, which is essential for deployments to services like GitHub Pages.
The dynamic pathing system is the core of the site's functionality. Here's a brief overview:
-
page_levelVariable: Each HTML file contains a small script in its<head>that defines apage_levelvariable.const page_level = 0;for pages in the root directory (likeindex.html).const page_level = 1;for pages in a subdirectory (likehouse/redwood.html).
-
main.jsLogic: The centralmain.jsscript reads thispage_levelvariable to determine the correct relative path ('./'or'../'). -
Dynamic Path Correction:
- The script uses this calculated path to reliably
fetchtheheader.htmlandfooter.htmlfiles. - After the header is loaded, the script iterates through all the navigation links and prepends the correct relative path to their
hrefattributes.
- The script uses this calculated path to reliably
This ensures that all links are always correct, no matter where the user is on the site.
VG stands for Vertical Group, which is an activity group that students are placed in when they first enroll at St. Peters College, Palmerston North. For more information, you can visit the official school website.