School website / Early web work
Rosales National High School
An early school website bringing campus information, academic strands, events, and contact details into one place.
The project,
in perspective.
A Grade 12 website project for Rosales National High School, documented in Jared’s earlier portfolio. It brings together school information for visitors looking for academic options, campus events, and contact details.
Clarity through
composition.
The design challenge
Organize several kinds of school content under understandable navigation. Academic strands need a clear grouping, while campus identity and contact actions need to remain visible on the opening page.
Visual direction
A large campus photograph establishes the place immediately. Yellow highlights and calls to action sit against a slate navigation bar and a dark image overlay. The result reflects an earlier Bootstrap-based approach to page composition.
03 / Information architecture
A place for every task.
- 01
School introduction
- 02
Academic strands
- 03
Events & faculty
- 04
Guides & contact
The Strands dropdown groups ABM, HUMSS, GAS, STEM, and TVL; separate pages cover the school, events, staff, guides, and contact information.
UI system
- Bootstrap navigation organizes the main pages and academic-strand dropdown.
- A campus-photo carousel combines school identity with contact and information links.
- Shared page layouts and action treatments connect the school information pages.
Different screens.
One identity.
Bootstrap’s navigation collapses on smaller screens and content columns adjust to the available width. These captures preserve the original prototype, including its earlier approach to large hero photography.
The original interface,
viewed at 390 pixels.
From interface
to experience.
Front-end approach
A static, multi-page site built with HTML, CSS, JavaScript, and Bootstrap. Shared styles and responsive utilities support the page structure, and GitHub Pages serves the public prototype.
Final experience
A working public prototype and an early point in the portfolio’s development: content organization, school identity, and responsive implementation brought together in a complete website.