I'm a full-stack developer with 9+ years building and modernizing production web applications — from federal platforms to funded startups. I care about the whole stack: the architecture underneath, the interface on top, and the accessibility and design-system decisions that make a product actually usable at scale. I've built component libraries from scratch, aligned design and engineering teams around a single source of truth, and shipped compliant, accessible interfaces for government clients who don't get a second chance to get it right.
Full-stack developer with deep expertise in modern JavaScript and the Vue ecosystem. I've built component libraries and design systems from scratch at multiple companies — including a federal project on the U.S. Web Design System — and treat accessibility as built in from the design phase, not a pass at the end. Proficient across Java and PHP, with a focus on TypeScript, efficient cloud architecture and strong security practices.
What I do
UI Development
Component Library / Design System Architecture
API Development
Database Administration
Cloud Infrastructure
Creative The sizzle
Figma
Illustrator
Photoshop
UI designer with a solid grasp of UX fundamentals. Figma specialist experienced across low- and high-fidelity mockups, rapid prototyping, and vector work, with close attention to design principles and the laws of UX.
What I do
UI Design
Mockups & Prototyping
Brand Identity
User Research
Basic Graphic Design
Work Here are a few work samples. Some new, some very old.
A white-labeled design platform letting template sellers offer live, in-browser personalization to their customers — part Canva-style canvas editor, part e-commerce operations tool, handling everything from design rendering to order fulfillment.
The design editor running in a white-labeled storefront.
The Problem
The platform sits at the intersection of two hard problems: a full-featured design canvas that needs to work for two very different audiences, and the e-commerce machinery behind it — orders, fulfillment status, downloads, and syncing with external storefronts. On one side, sellers and designers need deep control: building templates from scratch, configuring what's editable, managing large libraries across formats and print sizes. On the other, their end customers are non-designers personalizing a single purchased template, often for the first time, with no tolerance for a confusing interface. The same canvas editor had to flex between "powerful enough for a professional" and "simple enough for someone editing a birthday invitation once," while sellers manage large libraries of templates and listings and expect every order — direct or through a connected Etsy, Shopify, or WooCommerce store — to fulfill correctly.
Design System
Design and engineering had been working from different sources of truth — Figma files on one side, hand-built components on the other, drifting out of sync as the product grew. I built a documented design system from scratch: a typographic scale, a token-based color palette with semantic variants (success, warning, danger), and consistent button and form components, all captured in a shared style guide both teams could reference. That single source of truth cut design-to-development iteration significantly and gave the team a common vocabulary for new features.
Type scale, color palette and button styles.
Editor Tooling
The canvas editor needed dozens of property panels — position, color, effects, typography, curved text, gradients — each behaving consistently whether a customer was editing a single text box or a seller was configuring a template from scratch. I established a strict state pattern for every property widget (an "unused" collapsed state and an "open" active state, with reset controls in a fixed position) so the panel stayed predictable no matter how many properties a given design exposed.
Property widgets, each with an unused and open state.
The editor toolbar itself carries distinct modes — Design Mode for building templates, Design Settings, Design Protections for locking specific layers from customer edits, and a live Customer Preview — letting a seller move fluidly between building a template and seeing exactly what their customer will experience — which was the real design challenge: the same canvas, two audiences with completely different needs, without maintaining two separate editors.
Editor mode toolbar: Design Mode, Settings, Protections and Customer Preview.
Asset Management
Sellers manage libraries running into the thousands of designs and images, organized by folders, collections, and tags, with drag-and-drop assignment of designs into listings and instructions attached per-item. I built the asset browser and listing management UI to make that library navigable at scale — filterable by category, searchable, with a detail panel surfacing metadata (dimensions, format, upload date) without leaving the grid.
Browsing listing designs by collection.
Outcome
The result is a platform sellers can run their entire creative operation through — building templates, managing a growing asset library, and fulfilling orders across their own storefront and connected marketplaces — without needing design or engineering support for day-to-day changes.
Web App · Case Study
A guided self-assessment for Security Operations Center providers in the Cyber QSMO Marketplace, scoring each control against four levels of maturity.
Each control is scored across four maturity levels, with overall progress tracked up top.
The Problem
Security Operations Center providers applying to the Cyber QSMO Marketplace need to self-assess against a detailed maturity framework — dozens of controls across five NIST-aligned functions (Identify, Protect, Detect, Respond, Recover), each scored on a four-level maturity scale with its own compliance criteria. Done as a flat questionnaire, that's an overwhelming wall of subjective judgment calls: providers need to know exactly what evidence justifies claiming a given maturity level, without losing track of where they are in a long, multi-session assessment. The interface had to make a genuinely complex compliance framework navigable for providers working through it over multiple sittings, while giving CISA reviewers assessments structured consistently enough to evaluate at scale.
Starting an Assessment
Providers choose a target maturity level to start a new assessment, and can pick up any in-progress or completed assessment from a single table — so a provider returning weeks later can see at a glance what's done, what's outstanding, and resume exactly where they left off rather than hunting through a long form.
The assessments dashboard.
Scoring Controls
Questions are grouped by function (Identify, Protect, Detect, Respond, Recover) in the sidebar, with overall progress tracked at the top so providers always know how far through the assessment they are. Each maturity level lists its criteria with a quick status select, scored individually rather than as one judgment per control — which keeps the scoring granular and auditable.
Validation criteria — the specific evidence needed to justify a given status — open in a dialog rather than living inline, keeping the question screen focused on the answers themselves while still putting the compliance detail one click away whenever a provider needs it.
Validation criteria for a control.
Outcome
The result gives providers a structured, self-paced way to work through a genuinely complex compliance framework without losing their place, and gives CISA a consistently scored, criteria-backed assessment to evaluate — replacing what would otherwise be an unwieldy static document with something built for the way the assessment actually gets completed, one control and one sitting at a time.
Website · Case Study
A website for a Las Vegas family law firm, built as a fully animated single-page experience — Three.js transitions between sections, a strict four-column grid, black-and-white photography with a single teal accent, and full SEO despite never reloading the page.
The homepage: each block in the grid leads to a section of the site.
The Problem
Family law is a high-stakes, emotional search — someone landing on this site is often mid-crisis, comparing firms quickly and looking for a sense of competence and calm as much as information. A conventional multi-page site would work, but every full page reload breaks momentum right when a visitor is deciding whether to trust this firm. The brief called for something more memorable: a site that felt considered and premium through motion, without sacrificing the two things a law firm's site can't compromise on — every page needs its own indexable URL for search, and a visitor with a slow connection or an older device still needs a page that works.
The Grid
Thin rules divide every page into four equal columns. Photography, navigation, and content blocks all snap to those columns, while monochrome imagery lets a single teal accent carry every call to action — a restrained palette that reads as deliberate rather than sparse, and keeps the eye on exactly one color whenever the site wants attention.
Motion & Navigation
The site runs as a single-page application built on Three.js: moving between sections doesn't reload the page, it animates — the grid itself transforms, panels reflow, and photography transitions between states, so the four-column structure feels like one continuous surface rather than a stack of separate pages. The current section's tab drops below the header into the content, with arrows to step to the previous or next section, keeping navigation legible even as the page around it is moving.
The Practice Areas page.
Getting that right meant solving for SEO despite the client-side transitions — each section still resolves to its own crawlable URL with real server-rendered content, so search engines see a normal multi-page site even though a visitor never experiences a reload.
Consultation First
A free consultation form sits in the sidebar of every inner page, and the consultation page closes with a large call to phone the office — the animated experience builds trust, but every screen still has the most direct path to actually contacting the firm one scroll away.
The Consultation page.
Outcome
The result is a site that feels distinctly higher-end than a typical local-firm website, without the two usual tradeoffs — it's still fully indexable by search, and the technical complexity underneath (Three.js, SPA routing, SSR for SEO) never gets in the way of the two things a visitor actually came to do: understand the firm, and get in touch.
