Content before decoration
Experience comes first. Technology is grouped by purpose, with optional links back to the roles where I used it. Supporting tools stay visible in two compact groups, with less emphasis than the core stack.
← Back to portfolio
Design & engineering
How this site is built
A hands-on learning project in front-end development, UI/UX and accessible interaction, built with the same attention to delivery that I bring to infrastructure work.
Astro + TypeScriptStatic HTMLGitHub Pages
01
A clear reading path
Make the profile easy to scan, then let readers choose the detail.
Layouts for the screen
CSS grid adapts the experience and stack sections to the available space. Desktop uses section navigation; mobile uses a native dialog menu with large touch targets.
02
One visual system
Shared components and CSS tokens keep the pages consistent.
Colour with a purpose
The four-colour mark and spectrum connect the personal identity with cloud, automation, reliability and security. Neutral surfaces keep the text readable in both themes.
Small, reusable pieces
Astro components render the header, experience, stack, education and footer. Experience content uses a TypeScript interface, while CSS tokens define spacing, typography, colour and motion.
03
From source to static pages
Build once and serve the generated output.
- 01
Source
Astro components, typed content and assets.
- 02
Build
GitHub Actions installs locked dependencies and runs the Astro build.
- 03
Publish
The generated HTML, CSS and JavaScript go to GitHub Pages.
Static rendering fits this content-focused site. JavaScript handles theme selection, navigation, disclosures and copy feedback.
04
Interaction & verification
Keyboard and motion
Semantic headings, a skip link, visible focus and native dialog/disclosure elements support keyboard navigation. Theme preferences are remembered, and reduced-motion preferences disable animated transitions.
Check the rendered result
Review includes desktop and mobile layouts in both themes, image loading, horizontal overflow, menu focus, theme persistence and experience disclosures. Canonical metadata, a sitemap and a custom 404 support the published pages.