Back to Projects
This Portfolio
A static site built with Astro, SCSS, and TypeScript. It’s currently an early prototype, more features and content to be added.
Architecture
The website is built on Astro with colocated scss and ts files per component.
Design tokens are organized in a two-layer system: raw value primitives (colours, spacing, type sizes, etc.) are mapped to semantic aliases for easy consistency and modification.
The styles follow CUBE CSS principles with BEM naming conventions.
Custom post-processing during build provides well-structured HTML and CSS for review. Here’s a direct link to the stylesheet for reference.
Technical Highlights
- Design Tokens: Built a two-layer system that separates primatives (colors/spacing) from semantic tokens (brand-primary, surface-main) for effortless site-wide updates.”,
- Modern Layouts: Implemented modern CSS layouts utilizing Subgrid and Sticky positioning to solve UI alignment challenges.”,
- View Transitions API: Used animatinos to give the site a native app feel, including animations that change based on which page you’re coming from.”,
- Performance: Used Astro’s build-time tools to pre-render the site, easily hitting 100/100 Lighthouse scores.”