designer/engineer

Wicked good design for wicked problems.

Featured Work

PROJECT FELINES

PROJECT FELINES

The Alzheimer’s field spent billions clearing amyloid plaques from brains that kept declining. FELINES is what happened when I stopped accepting that narrative and started tracing upstream: iron dysregulation, ferroptosis, vascular failure, across six neurodegenerative diseases that enter through different doors but break down the same way.

GOINVO WEBSITE

GOINVO WEBSITE

Migrating a healthcare UX studio off aging Gatsby infrastructure onto Sanity CMS, animated page transitions, and accessibility-first architecture. Nine document types, card-morph transitions, and a content pipeline that lets non-technical editors publish without touching code.

WRITROSPECT

WRITROSPECT

An AI-assisted journaling tool that solves the blank-page problem. Built on neuroscience research about why people abandon commitments to themselves, with a prompt architecture that adapts to what you actually need rather than loading everything at once.

RENDOMAT

RENDOMAT

A programmatic video studio built at GoInvo. Turns structured content into multi-platform video with professional motion design, replacing a manual production pipeline that took a full day per video with an automated system that renders in minutes.

PHYLACTORY

PHYLACTORY

100,000+ concurrent units in a fantasy game that fuses factory management with real-time strategy. Built a custom Entity-Component-Space system from scratch in Godot 4 with C++ and GDExtension, hand-crafted every sprite and tileset in Aseprite, and designed twelve interconnected game systems such as energy grids, trains, pipes, and formation AI.

Case Study

The portfolio
is the proof.

Designing and engineering this site as a demonstration of the same skills it presents: systems thinking, editorial design, and attention to interaction detail.

01

The Challenge

Most portfolio sites fall into one of two traps: over-designed showcases that prioritize flash over content, or minimal templates that treat projects as interchangeable cards. Neither communicates how someone actually thinks.

I wanted a portfolio that works the way I work: systems-first, detail-oriented, and structured around narrative rather than feature lists. The site itself needed to be a case study in the kind of design thinking it presents.

The medium is the message.

02

Design Decisions

Every architectural choice was deliberate. Here are the ones that shaped the site most.

Why not a template?

Templates optimize for speed. A portfolio for a designer/engineer should be the work itself, not a wrapper around it.

Why scroll-driven animations?

Every transition is a chance to demonstrate craft. The floating name, background color shifts, and card transitions all use physics-based springs, not CSS keyframes.

Why editorial case studies?

A bullet list of features says what I built. An editorial layout shows how I think, how I structure information, and how I guide a reader through complexity.

Why client-side transitions?

Card-click-to-project-page transitions keep spatial context. The grid stays visible during navigation so users never lose their place.

03

The Interaction Layer

The site is built as a single-page application with the App Router. All project pages share one layout with a state machine that orchestrates transitions between four phases: idle, collapsing, open, and closing.

Clicking a project card doesn't navigate away. The grid collapses, the selected card's image expands to fill the viewport, and the project content fades in underneath. Navigating back reverses the sequence. The user never loses spatial context.

Scroll position is preserved and restored after the return transition completes. The floating name animates between hero scale and nav scale using a spring-driven progress value that responds to both scroll position and route state.

Background colors transition smoothly between sections using scroll-driven interpolation, with each section (hero, projects, about) mapped to its own color in the palette.

04

The Glass Effect

The gradient blob on the landing page creates ambient texture that responds to the cursor. I wanted to push that idea further: what if the entire viewport became a refractive surface, bending light around a shape that follows your hand?

Glacias is a standalone WebGL2 engine that renders SDF-based glass distortion in real time. Every pixel inside the shape is refracted, blurred, and chromatic-aberrated based on its distance from the edge, creating a physically-grounded sense of material depth.

SDF Shapes

Five signed-distance-field primitives (circle, rounded rect, hexagon, clover, and star) with smooth-min boolean unions for organic silhouettes.

Edge-Band Refraction

Distortion concentrates at the boundary using SDF gradient normals, blending to radial vectors in the interior to avoid seam artifacts.

Chromatic Aberration

RGB channels are sampled at slightly different offsets, creating the prismatic fringing that makes the glass read as a physical lens.

The edge-band is the critical perceptual detail. Without it, the shape reads as a flat overlay; with it, the eye infers curvature, thickness, and materiality from refraction alone.

Shape

Four phases. Zero page loads.

Idle, collapsing, open, closing. A state machine orchestrates every transition so the grid, hero, and project content never fight for space.

05

What I Learned

Animation is communication, not decoration.

Every motion on the site serves a purpose: maintaining spatial context, signaling state changes, or guiding attention. Removing any animation would lose information, not just polish.

Constraint breeds creativity.

Working within a single layout forced creative solutions for transitions that would have been trivial with page-level routing. The result is more cohesive than separate pages could ever be.

The portfolio is never finished.

Each case study added to this site is also a test of the system's flexibility. If the architecture can't accommodate a new type of content gracefully, that's a design failure, not a content problem.

Built with

Next.js 16TypeScriptTailwind CSS v4Framer MotionWebGL2App RouterVercel

About

Someone didn't give up on me.
That's why I build.

There is no definitive formulation of a wicked problem.

When I was three months old, I had intestinal volvulus. I wouldn’t stop crying, every doctor had a different explanation, and my parents kept looking until they found one who could see what the others missed.

The choice of explanation determines the resolution.

That persistence saved my life. It also gave me something I’ve carried ever since: the recognition that how you frame a problem determines whether you can solve it at all.

Every wicked problem can be considered a symptom of another problem.

I don’t just say “wicked” because I’m from Massachusetts. In 1973, Horst Rittel and Melvin Webber described wicked problems: the kind where the crying is a symptom of something deeper, and treating the surface never reaches the root.

Every wicked problem is essentially unique.

I started where a lot of CS grads start: writing Perl scripts for an escalation engineering team at Dell EMC, then two jobs in the gaming industry building things that were complex, fast, and fun. But games ship patches. The problems I kept gravitating toward were the ones where you don’t get to patch. I earned a Master’s in bioinformatics because I wanted to bring engineering somewhere the problems don’t repeat: healthcare, government, regulated systems where every deployment is its own context and every patient is their own case.

Wicked problems do not have an enumerable set of potential solutions.

I joined a small studio designing for healthcare and government because the solution space is never closed. There’s no dropdown menu of correct answers. You design, ship, learn, and revise, knowing the next version will be different, not because the last one failed, but because the problem shifted underneath you.

Every solution is a “one-shot operation”; every trial counts.

In regulated environments, every release matters. There are no sandbox deployments when someone’s care depends on the system working. That weight is something I chose, not something I stumbled into.

The planner has no right to be wrong.

When you build software for medical contexts, you carry a specific accountability. The system you ship becomes part of someone’s care, and “move fast and break things” is not an option when the things that break are people.

Wicked problems have no stopping rule.

Over the past several years, that same instinct has pulled me toward problems with no finish line. I started researching neurodegenerative disease on my own, not because I expected to solve it, but because I couldn’t stop looking once I started seeing what others were missing. That’s how I work on everything: once I care about a problem, there is no clean stopping point, only the next question.

There is no immediate and no ultimate test of a solution.

I’ve learned to be comfortable building things I can’t fully validate yet. Whether it’s a healthcare prototype shipping to users whose feedback won’t arrive for months, or a research framework whose predictions won’t be tested for years, the work has to be good enough to act on before you know if it’s right. That uncertainty isn’t a flaw in the process. It is the process.

Solutions are not true-or-false, but good-or-bad.

That’s the lens I bring to everything I build. Not “is this correct” but “is this better.” Better communication, better questions, better tools for the people using them. My independent research on neurodegeneration, Project FELINES, follows the same principle: it doesn’t claim to be the right answer, just a framework that generates better questions than the ones we’ve been asking.

I build software. I design systems. But what drives me is the same thing that’s driven me since before I could talk: someone needs to keep looking until they find what the others missed.

Contact

Let's build something together.

Interested in working together, have a question, or just want to say hello? I'd love to hear from you.