Design
Products I design and then build myself, so the idea has to survive contact with real screens. Campaign graphics and posters too.
Designed it, then built it
I designed and built every one of these, so the visual calls and the production code are both mine. I build with Claude Code, so most of my time goes on the decisions: what a screen is for, what to cut, and what to send back. The CityRoots case study shows that process from start to finish.
Web app / 2026
CityRoots
The first look, cream paper, forest green and Fraunces, is a very common template, so I moved it to a cool white page, blue-black ink and lake blue for the brand. That leaves green meaning only one thing: free. The home page follows an editorial city-portal layout I chose as a reference, filled with CityRoots' own content and photos. It all runs on design tokens and a library of UI primitives, so the whole theme changed without touching a page.
The specifics
- Type
- Newsreader for headlines, Schibsted Grotesk for text
- Colour
- Lake blue brand on cool paper; green means free
- System
- Design tokens and a library of UI primitives
- Checks
- Playwright runs axe against a production build
Web app / 2026
Ferni Finance
I designed Ferni's look and built it. Every color is a design token in one file, so changing a value updates the whole app.
The specifics
- Color
- A dark palette, lavender primary, rose accent
- Type
- Inter with DM Serif Display
- Identity
- SVG logo and wordmark, branded social image
E-commerce / 2026
Retrosnack Clothing
It moved from the brief's maximalist editorial direction to a minimal, single-typeface design system. An accessibility audit caught the cherry accent failing WCAG AA contrast.
The specifics
- Direction
- Maximalist brief, minimal final design
- System
- One typeface, design tokens in Tailwind CSS
- After the fixes
- axe found 0 violations across 19 pages
Website / 2026
Sam's Little World
I drew the characters by hand as 18 by 20 pixel grids. Small on purpose, and gentle to use.
The specifics
- Art
- Hand-drawn pixel grids, 18 by 20
- Color
- Every room color in one palette file
- Access
- Mobile-first, tap targets clear 44px, reduced motion respected
Website / 2026
Mother's Day tribute
Two languages and two sets of type, switching live with the language.
The specifics
- English
- Playfair Display and Cormorant Garamond
- Persian
- Vazirmatn
- Built with
- Tailwind CSS design tokens and Framer Motion
Website / 2026
This site
The site you're reading: original pixel icons, a wallpaper animated on canvas, resizable windows in plain CSS, retro type in Caprasimo, Grandstander and Jersey 10, and a Paint program written from scratch.
Graphics with one job each
At Konfer / 12 pieces
SpurHacks
Story and feed graphics for the campaign, made in Figma at Konfer. I worked with the team's graphic designer, wrote the copy and edited layouts in their templates.
The whole campaign →
Poster / 2021
Kick for Funds, 2021
A soccer fundraiser for homeless shelters in Kitchener-Waterloo. One soccer ball, and a clear order to read it in:
- The event name
- What to bring
- The cost
- Where and when
Words only, for now
Laurier Computing Society
A design system in Figma I contributed to, for UI consistency across platforms.
Words only, for now
Album covers
Album covers for my own music, made in Adobe Illustrator. Hear the music.
What I reach for
- Figma
- SpurHacks story and feed graphics at Konfer. A design system and marketing materials at Laurier Computing Society.
- Adobe Photoshop
- Learned in my high school Communications Technology class.
- Adobe Illustrator
- Album covers for my own music.
- Microsoft PowerPoint
- Helped produce the stage presentation for SpurHacks at Konfer.
- Affinity
- Currently learning.
- Canva, Adobe Premiere Pro, CapCut
- Social graphics and short-form video.
- CSS, Tailwind CSS, React, Next.js, Framer Motion
- Building designs in production.
What I care about
Where I've done it
Apr 2026 to Present / Remote
Product Designer (Independent), Side projects
- Took web products from the problem and visual direction to production code, including CityRoots, Ferni Finance and Retrosnack Clothing.
- Created design systems with design tokens and reusable UI components in CSS, Tailwind CSS and React.
- Designed bilingual interfaces, and pixel art with a fixed palette for Sam's Little World.
- Built responsive layouts, checked WCAG AA contrast with axe, and fixed what the audits found.
Dec 2024 to Dec 2025 / Hybrid
Marketing Coordinator (Volunteer), Konfer Inc.
- Created SpurHacks story and feed graphics in Figma with the team's graphic designer, writing copy and editing layouts in the team's templates.
- Supported the konfer.ca landing page, contributing to front-end content integration and layout consistency.
- Helped produce the Microsoft PowerPoint presentation delivered on stage at SpurHacks.
Oct 2021 to Apr 2024 / Waterloo, ON
Full Stack Developer (Volunteer), Laurier Computing Society
- Contributed to a design system in Figma for UI consistency across platforms, and designed and prototyped marketing materials in Figma.