Bryon Urbanec

• Architecture & Scope: Executed a comprehensive, component-driven full-site retheme for Stanford University’s research administration portal within a cross-functional team.
• Technical Execution: Developed modular, reusable template overrides using Twig, SCSS, and JavaScript to bridge the gap between design system fidelity and production code.

• Architecture & Scope: Implemented progressive UI enhancements and template overrides for a high-traffic municipal government web infrastructure to improve public service discovery.
• Technical Execution: Optimized semantic HTML structure and responsive layouts to ensure seamless cross-browser performance and robust mobile optimization.

• Architecture & Scope: Engineered high-fidelity, interactive front-end elements for a high-profile enterprise medical conference web application.
• Technical Execution: Developed custom UI interactions and advanced, high-performance web animations using JavaScript and the GSAP library.

This personal project pulls live mission data from the Launch Library 2 API to surface upcoming and past rocket launches in a clean, immersive interface. The goal was straightforward: build something genuinely useful, with no framework crutches, and treat the design and accessibility with the same care as the code.

The UI is organized around a card-based grid with real-time countdown timers that tick down to the second for each upcoming launch. Clicking into a card opens a slide-in detail drawer that fetches extended vehicle data — total flight history, booster reuse, rocket configuration — without blocking the initial render. The result feels fast because it is: data loads progressively, spinners communicate state, and the experience degrades gracefully when the API is slow.

Under the hood, the project is intentionally lean. No build pipeline beyond a SCSS compiler, no framework, no bundler — just ES modules, native browser APIs, and hand-rolled component logic. The SCSS architecture follows a component-scoped structure that keeps styles predictable as the UI grows.

Accessibility was treated as a first-class concern throughout. The project hits WCAG 2.1 compliance: full keyboard navigation, a properly managed focus trap in the drawer dialog, screen-reader announcements for loading states, skip navigation, and :focus-visible styles that don't punish mouse users.

Github Repo

• Drupal-compatible from the start: I've structured templates, Twig namespaces, and Sass the same way Drupal expects them, so I'm not translating anything when it's time to ship
• Custom Attribute class shim: I wrote a PHP class that replicates Drupal's native attributes object so Twig templates behave the same as they would inside a real Drupal environment
• Sass design token system: Colors and typography live as CSS custom properties in their own partials, organized the same way a Drupal theme would consume them
• Accessibility fixes baked in: The source UI kit had transparent labels on the star ratings and category tags, which created contrast issues over background images. I've given those elements solid backgrounds so they're actually readable
• One component, two layouts: The teaser card handles both vertical and horizontal orientations from a single template using a data flag, no duplicated markup needed
• Builds to static for GitHub Pages: Compiled output lives in a docs/ folder so the demo is easy to host and share without standing up a server