ECSA CUSAT – static site

Serve the folder with any static host (or locally: python3 -m http.server) and open index.html. The Components page loads images/components/components.csv with fetch, so it needs a web server (it won't load from file://).

Updating the Components page

1. Edit images/components/components.csv – columns: Part ID, Component, Qty, Mfr, Description (one row per part; commas inside Description are fine).
2. Put the photos in images/components/photos/ named <PartID>-1.jpg, <PartID>-2.jpg, <PartID>-3.jpg … Photos are detected automatically (up to 12 per part): 1 photo = plain image, 2+ = arrows and dots.
3. Done – no HTML to touch. Card number, quantity, name, mfr, description, photo carousel and search are all generated.

Updating Events and Projects (same idea)

Both pages, and the matching sections on the home page, are generated from CSV files in data/. Rows appear in the order they are written; the current content is the starting draft.

data/events.csv – Title, Type, Date, Location, Description, Image, Featured, Tagline, Link

• Put yes in Featured on one row to make it the big banner at the top of the Events page (Tagline and Link are used only there; the banner is not repeated in the list).
• All other rows become the event cards and the home-page "Upcoming Events" carousel.
• Type feeds the filter chips: Workshop -> Workshops, Competition -> Competitions, Talk/Tech Talk -> Talks.
• Date is shown exactly as typed (e.g. 02 Oct 2026). Image is a path such as images/events/li-fi.png.

data/projects.csv – Title, Category, Description, Image, Link

• Each row is a project card and a slide in the home-page "Innovation in Action" carousel (the dots are created automatically).
• Link is optional: if filled, "View Project" opens that URL (e.g. a GitHub repo).

Wrap a value in double quotes if it contains a comma.

Fonts

Poppins is loaded from Google Fonts (one <link> in each page's <head>), so there is no fonts/ folder. styles.css defines a "Poppins Fallback" (Arial resized to match Poppins) that is shown for a moment while the real font loads, so text doesn't jump when it arrives. The site needs internet access to show Poppins itself; without it, the fallback is used.

Page transitions

Navigation between pages cross-fades (CSS @view-transition in styles.css; Chrome, Edge and Safari 18.2+, other browsers simply navigate normally). The header stays put during the fade. <main> has a minimum height and the Events banner reserves its space, so content loaded from the CSV files doesn't push the page around.

Styling

styles.css is the (now readably formatted) stylesheet of the reference design (the "1_3" Next.js project), so the pages render exactly like it. script.js only adds behaviour (menu, filters, carousel, CSV loading, contact form). Contact form: replace YOUR_ID in the <form> action of contact.html with your Formspree form id.

Typography and page transitions

• Poppins weights 400–800 are loaded from Google Fonts in each HTML page's <head>, with preconnect hints and display=swap.
• The Poppins Fallback face in styles.css uses local Arial-compatible fonts with size-adjust, ascent-override, and descent-override to reduce the visible change while Poppins loads.
• The site has no local fonts/ directory in this cleaned package, so there were no local font files to remove. Using Google Fonts reduces the distributed ZIP/package size compared with bundling font files, but does not necessarily reduce the total bytes visitors download by much; visitors need an internet connection to retrieve the hosted font unless it is already cached.
• styles.css includes scrollbar-gutter: stable, a minimum height for <main>, reserved space for the Events featured banner, cross-document View Transitions, a stationary header transition name, and a reduced-motion opt-out. The Events script hides the reserved banner when the CSV has no featured event.
• The stylesheet remains the existing compiled utility-style CSS. It has not been converted into a full semantic, hand-written stylesheet because the required side-by-side computed-style and interaction verification could not be run in this environment. Keeping the original cascade avoids introducing unverified visual or functional changes.

Verification notes

The requested Playwright screenshots and layout-shift measurements could not be collected in this environment: Chromium navigation to both local file:// pages and the local test server was blocked by the execution environment (ERR_BLOCKED_BY_ADMINISTRATOR). Consequently, no claim is made that before/after screenshots are pixel-identical or that CLS improved by a measured amount. Please run the site through a local web server and repeat the desktop/mobile visual and interaction checks before publishing.

The image inventory was reviewed without deleting or converting assets. The two 32×32 light/dark icon PNGs have identical file contents; they were retained because their filenames imply different theme roles. Component photographs are loaded by the CSV/JavaScript logic, so a simple text-reference scan cannot reliably classify them as unused.

Header stability and page transitions

• The sticky header now keeps the same backdrop blur in both scroll states. The scroll handler only switches the background/border state, avoiding a backdrop-filter change during scroll that can cause repaint/compositing jitter.
• scrollbar-gutter: stable reserves scrollbar space across pages.
• CSV-backed pages retain a minimum main-content height, and the Events featured area reserves space while event data loads. The featured area is hidden when there is no featured event.
• Cross-document View Transitions remain enabled with a short root transition and a stationary named header. The transition is disabled for users who prefer reduced motion. Browsers without cross-document View Transition support navigate normally.

Scope and verification notes

This revision addresses the reported header jitter and preserves the current utility classes and CSS cascade. It is not yet the full semantic CSS rewrite: replacing utility class lists across all static markup and JavaScript-generated cards needs a separate, state-by-state regression pass. No images were deleted, resized, or converted.

The available execution environment blocked Chromium navigation to both local files and localhost with ERR_BLOCKED_BY_ADMINISTRATOR, so pixel comparisons, computed-style checks, and reliable before/after CLS measurements could not be collected here. JavaScript syntax and static file integrity checks are the checks available for this package; do not treat this as a claim of pixel-identical browser rendering.

CSS cleanup and shared layout

• styles.css remains the single shared stylesheet loaded by all nine HTML pages, including the common header and navigation styling. The header markup is intentionally kept consistent across pages.
• Removed CSS selectors whose classes were not found in any page markup or in the JavaScript-generated markup/class toggles. This was a conservative cleanup; selectors that could be used dynamically were retained when referenced in source strings.
• The stylesheet is kept formatted for maintenance rather than aggressively minified. After pruning, it is approximately 52 KB (down from approximately 73 KB in the previous package).
• No inline style attributes were present in the HTML, so there were no inline style declarations to extract into CSS. Styling is currently expressed through utility classes and the shared stylesheet.
• script.js still handles more than CSV extraction: the menu, scroll state, event filters, project carousel, component search/photo navigation, and contact form feedback require JavaScript to preserve their current behavior. Removing those handlers would change functionality, so they were retained. CSV parsing and data injection remain in the same script.
• The header scroll handler keeps backdrop blur constant to reduce repaint/compositing changes. Browser-based visual regression and CLS measurements remain unverified in this environment; please test the site over HTTP rather than opening the HTML files directly.

HTML cleanup and behavior preservation

• All nine HTML pages have been consistently formatted for easier reading and editing. The formatting pass preserved the page element order, attributes, content, and links; only whitespace/serialization was normalized. The browser treats the normalized disabled="disabled" form as equivalent to the original boolean disabled attribute.
• No inline style attributes are present. Responsive layout, spacing, typography, transitions, and component presentation stay in the shared styles.css.
• The responsive breakpoints are CSS-driven; JavaScript is not needed for the layout to adapt to mobile widths.
• The mobile menu JavaScript was deliberately retained. It controls the animated open/close state, Escape-to-close, accessibility attributes, and body scroll locking. Replacing it with a CSS-only pattern would change interaction details unless separately regression-tested.
• Component search and event filtering remain JavaScript-driven because CSS cannot compare user-entered search text with loaded CSV records. The form's visual styling is CSS; native HTML validation and the existing submission/feedback behavior are preserved.

Follow-up display fixes

• Normalized image paths read from the event/project CSV files so paths are interpreted from the site root and continue to work when the site is hosted in a subdirectory.
• Eager-loaded the landing page's upcoming-event images so the first visible mobile card is less likely to remain blank while scrolling a horizontal carousel.
• Added consistent event category-pill sizing, filter-button spacing, and event-row alignment at narrow widths.
• Made the shared sticky header fully opaque and removed its backdrop blur so scrolling page content does not show through the navbar.

The event/project CSV image paths were checked against the files included in this archive. Browser screenshot testing was attempted but the headless browser did not complete reliably in this environment, so please preview on your device before publishing.

Editing the team page

Team cards are generated from data/team.csv. Keep the header row (name,role,photo,linkedin,github,order). Add one row per member, or remove a row to remove a member. order controls display order (1, 2, 3, ...). Use a relative photo path such as images/team/name.jpg; blank social URLs hide that icon. Keep commas inside CSV fields wrapped in double quotes. The team page layout and responsive grid remain in team.html.

Updating the Gallery

The Gallery page is generated from data/gallery.csv by the gallery section in script.js; its HTML and styling remain in gallery.html and styles.css.

CSV columns: title,image,alt,order,wide

• Add one row per gallery card; remove a row to remove a card. There is no fixed card count.
• title is the caption, image is a relative image path, and alt is accessible image text (may be left blank to use the title).
• order controls display order (1, 2, 3, ...).
• Set wide to yes to make the card span two columns on wider screens; use no for a normal card. On mobile, all cards fit one column automatically.
• Put commas inside a value in double quotes. Keep image files in the repository and make sure paths are correct. Missing images are skipped automatically.

The Gallery CSV is loaded by the existing script.js, so no separate gallery JavaScript file is needed. Preview through a local web server or GitHub Pages rather than opening the HTML directly as a file:// URL.