A non-commercial Sudoku.com game-surface recreation built with native Web Components. DOM data attributes expose visible state, while bubbling requests and targeted events coordinate granular updates without a UI framework or virtual DOM.
Frontend
Frontend work here spans application architecture, component systems, accessibility, styling, and the build tooling that connects them.
This topic is populated through curated implications from concrete skills such as React, Angular, and Vanilla Extract.
Related tags
Projects (1)
Portfolio Projects (13)
Chrome ExtensionUniversity of Southampton
November 2015 - January 2016
Southampton, UK
-
Goal: Building a tracking and stat gathering utility for Google Chrome, applied to citizen projects such as Zooniverse.
-
Formed the basis of a Chrome Extension with the goal of tracking a user’s behaviour and statistics while participating in citizen science projects, both for personal goals (statistics, time tracking) and for global statistics (important for both research and platform improvement).
Matched via AngularJS
-
Crowdsourcing PlatformUniversity of Southampton
June 2015 - November 2015
Southampton, UK
-
Goal: Applying gamification to crowdsourcing projects to observe performance changes under a different incentive other than monetary gain
-
Built an image description type crowdsourcing project that relies on gamification principles to incentivise participants (match two people and have them coordinate in their description of the presented image to progress).
Matched via AngularJS
-
Whitelabel Design SystemPlatform24
January 2024 - September 2025
Bucharest, Romania
Fully per-partner customizable design system
- Enable full customization from the brand and system colors to sematic mapping of variables to component facets
- Built with Vanilla Extract from the ground up to write fully type-safe code and expose only CSS generated at build-time
- Uses the ESLint Logical Properties package and React ARIA for accessibility.
Unified flow from UX to Dev
- Design variables and variable mappings primary color -> surface background are imported directly from figma
- Variables, mappings and contracts are baked in directly to published packages
- Devs use semantic variables and have no access to primitives or mappings
- Export functions bound to CSS layers to be used by DS or applications
Uses latest CSS techniques
- Uses CSS Layers to delineate clear cascade layers between reset, variables collections, framework (design system) and application styles.
- Uses CSS Containers to encapsulate styles and create truly responsive components and layouts
- CSS Variables and partner-specific colors and mappings are calculated and rendered on server
Modern Monorepo Setup
- Full monorepo tooling built with Yarn Plugins
- TSConfig Generation
- ESLint Setup
- Vite Setup
- Dependency checks
- Dependency enforcement
- Gitlab CI parallel step setup
- Package versioning with Yarn
- Commit message enforcement & automation + tooling
- Gitlab CI setup for build, lint, test and publishing any number of packages when required
- Local and CI setup tooling for private scoped npm registries
Matched via Vanilla Extract
Hackscience FrontendHackscience
January 2017 - January 2018
London, UK
- Two iterations of the Hackscience frontend application
- Original application prototyped within a week
- Second iteration can either function as a Progressive Web Application, as well as a native version for all desktop and mobile platforms
- Fully off-line after initial data load
Matched via React
- Composable AI bootstrap CLI and module catalog for installing repository-local instructions and skills.
- Resolves and instals repository-local AI instructions and skills.
- Uses modular composition and mixins to manage complex instruction sets.
Matched via React
- Desktop utility for fast video clipping using FFmpeg.
- Features an independent editor window per source and multi-track audio mixing.
Matched via React
- Multi-game CLI for discovering Steam installations and managing complete Unreal Engine mod triplets.
- Keeps game-specific paths behind adapters while sharing archive installation and enable/disable behavior.
Matched via React
- Ensures mod integrity by managing complete .pak, .ucas, and .utoc triplets.
- Provides interactive CLI for installation and state management (enable/disable).
Matched via React
- Adapter for storing jotai atom state in query strings (query parameters)
- Used to build the Rotation App (amongst others)
Matched via React
- Companion for video games that include a crafting system, meant to keep track of increasingly complex recipes in order to break down crafting in logical steps, with required materials at each step, and a visual representation of the process
- You own all data (stored locally) with an import/export system
- Design is built to scale from large screens, to the small quirks of notch-based mobile devices
Matched via React
- Won first place in the Startup Weekend Southampton 2014.
- A startup created at a hackathon.
- Our project was a platform to create multiplayer games which used multiple devices to create one single game canvas (eg. play ping-pong on a canvas that stretched between two smartphones).
Matched via AngularJS
- Won the Summerhacks Hackathon in Timișoara in 2013.
- Automated software management / installer for Raspberry Pi’s.
- Useful for remote installation of software / deletion / activation on a Raspberry Pi connected to the internet.
Matched via AngularJS
- Live, collaborative mind-mapping / outlining software. Useful for ad-hoc brainstorming with individuals located miles away.
Matched via AngularJS