GTBR Site

Static GTBR portfolio site.

Stack

• HTML (index.html)
• CSS (base.css)
• JavaScript (main.js)

No framework build step is required for the current web site.

Project Structure

• index.html: page structure and section anchors
• base.css: global styling, layout, animations, and component styles
• main.js: interaction logic, animated effects, and data-driven project cards

Projects Section (Data-Driven)

Project cards are rendered from PROJECTS in main.js, not hardcoded in index.html.

Update these in main.js:

• PROJECTS: card content (title, status, summary, objectives, milestones, stack, links)
• PROJECT_STACK_ICONS: SVG icon map used by stack items
• PROJECT_GITHUB_ICON / PROJECT_LINK_ICON: unified action-card icons for repo and external links

Icon colouring is controlled in base.css via .stack-icon-* classes.

Each project supports:

• stage: design, concept, dev, draft, prod, complete
• stack: list of { label, icon } entries mapped through PROJECT_STACK_ICONS
• githubUrl: repo URL (or empty)
• projectSite: optional external link object:

projectSite: {
  label: "Live Site",
  url: "https://example.com"
}

The expanded card action row renders unified link cards for GitHub and Website.

Canvas Network Tuning

Network intensity is tuned from constants at the top of main.js.

• NETWORK_BRIGHTNESS: global baseline multiplier
• NETWORK_LINE_INTENSITY: line/ring brightness only
• NETWORK_NODE_OPACITY: node alpha intensity
• NETWORK_NODE_VIBRANCY: node colour saturation
• NETWORK_PULSE_OPACITY: flashes/pulses alpha intensity
• NETWORK_PULSE_VIBRANCY: flashes/pulses colour saturation

The canvas overlay dimming in base.css is also wired to this system through:

• --network-brightness
• --network-overlay-dim

Local Preview

Open index.html directly in a browser, or serve the folder with any static file server.

Example (PowerShell with Python installed):

python -m http.server 4173

Then visit http://127.0.0.1:4173.

Editing Notes

• Keep British English in copy.
• Keep project status labels aligned with data-stage values:
  • design
  • concept
  • dev
  • draft
  • prod
  • complete
• After JS edits, run:

node --check main.js