RC · PORTFOLIO
TITLE SHEET

Front-End & Full-Stack Engineer / Chicago

RyanCalacsan

I build accessible, design-led interfaces and ship the full stack behind them. I designed and published Caliper UI, the component library this site runs on, and built an enterprise platform end to end as the sole engineer.

Shippednpm + prod
AccessWCAG 2.2 AA
Perf100

01 / Experience

Professional Experience

PrintNinja

Principal Engineer

2025

Built the company's entire modern technology stack from scratch as the sole engineer. PrintNinja is a custom printing company serving self-publishers and game makers.

The Challenge

Inherited an environment with no version control, fragmented contractor code, and significant technical debt. Needed to build a Configure-Price-Quote (CPQ) platform to replace manual quoting processes while migrating critical business logic from legacy PHP systems.

What I Built

Built the platform's React, Next.js, and TypeScript front-end, from the CPQ dashboard to the quoting and configuration workflows
Real-time pricing engine handling 500+ variables across 4 product lines with LRU caching
Stripe payment integration with webhook processing
Salesforce CRM sync with 80+ custom field mappings across 10 modules
Multi-carrier shipping integration (ShipStation, UPS, TForce Freight)
Self-hosted Docker infrastructure with zero-downtime releases with scripted rollback and automated backups

Tech Stack

Next.jsReactTypeScriptPostgreSQLDrizzle ORMSupabaseDockerStripeSalesforceClerk AuthTurborepo

02 / Selected Work

Featured Projects

Caliper UI demo shown as a technical spec sheet on warm paper with a construction-orange accent: 41 components, two themes, WCAG 2.2 AA

Frontend · 2026

Published on npm

Caliper UI

A production React component library and design system, published on npm: 41 components from one token layer, hand-written SCSS with BEM, two themes, WCAG 2.2 AA, and zero runtime dependencies. Design tokens stay in sync between code and Figma. Built in a "Spec Sheet" technical-drawing identity.

ReactTypeScriptViteSCSSBEMDesign TokensFigmaStorybookAccessibility (WCAG 2.2 AA)VitestPlaywrightGitHub ActionsnpmDesign System
PrintNinja system architecture diagram

Professional · 2025

Professional Work

PrintNinja

Built the company's entire modern technology stack from scratch as the sole engineer. PrintNinja is a custom printing company serving self-publishers and game makers.

Next.jsReactTypeScriptPostgreSQLDrizzle ORMSupabaseDockerStripeSalesforceClerk AuthTurborepo
OutreachAI generated messages view showing SMS variants with engagement scores

Full-Stack · 2026

AI-Powered

OutreachAI

AI-powered patient outreach message generator for maternal and women's healthcare. Care coordinators select a patient, configure outreach parameters, and generate personalized messages across SMS, email, and in-app channels, each with multiple variants, engagement predictions, and clinical reasoning.

Next.jsReactTypeScriptFastAPIPythonTailwind CSSshadcn/uiClaude APIGemini APIDockerVitestVercel
QuoteCraft dashboard showing quote builder and analytics

Full-Stack · 2025

Live Demo

QuoteCraft

Quote builder for freelancers and contractors. Create quotes with real-time pricing, share via unique links, accept Stripe payments, and track revenue from a dashboard with analytics.

Next.jsTypeScriptSupabaseDrizzleStripeClerk
Chicago Current, scroll-driven photo essay of a kayak journey down the Chicago River

Frontend · 2026

Photo Essay

Chicago Current

An immersive, scroll-driven photo essay documenting a 9-mile kayak journey down the Chicago River. Originally published in Mountain Gazette (2024), reimagined as an interactive web experience.

Next.jsTypeScriptFramer MotionLenisTailwind CSSNext/Image
Minimal Motion Gallery showing typography and scroll animations

Frontend · 2025

Frontend Showcase

Minimal Motion Gallery

A typography-focused single-page experience with sophisticated micro-interactions. Demonstrates restraint, taste, and CSS mastery through variable font animations, magnetic hover effects, and smooth scroll-triggered reveals.

Next.jsTypeScriptFramer MotionLenisTailwind CSSVariable Fonts
print-check CLI tool running prepress validation on a PDF file

CLI Tool · 2025

Published on npm

print-check

CLI tool that validates print-ready PDF files for prepress requirements. Runs 8 automated checks including bleed, fonts, color space, resolution, and PDF/X compliance. Published to npm.

Node.jsTypeScriptCommander.jsmupdfVitest

03 / About

About Me

I'm a front-end and full-stack engineer based in Chicago. I care most about accessible, design-led interfaces and the systems that keep them consistent and maintainable.

Ryan Calacsan

I design and publish Caliper UI, my own accessible React component library and design system. It's hand-written SCSS and BEM, driven by design tokens, ships two themes, and meets WCAG 2.2 AA. This site is built with it.

Most recently, I served as Principal Engineer at PrintNinja, where I built a full Configure-Price-Quote platform from scratch as the sole engineer. I joined as their first in-house engineer, inheriting an environment with no version control and significant technical debt from previous contractors. I introduced modern engineering practices, migrated critical business logic from legacy PHP systems, and built the platform's front-end alongside complex pricing with 500+ variables, payment processing, and CRM integration.

Before transitioning to software engineering, I spent 15 years in photography and studio management. That experience gave me strong project ownership skills and an eye for user experience.

Currently open to front-end or full-stack roles, preferably remote.

Ryan Calacsan

04 / Skills

Technical Skills

Frontend

ReactNext.jsTypeScriptJavaScriptSemantic HTMLCSSSCSSBEMAccessibility (WCAG 2.2 AA)Framer MotionTailwind CSS

Design Systems

Design TokensComponent LibrariesStorybookThemingFigma (Dev Mode)

Backend & CMS

Node.jsPostgreSQLDrizzle ORMPayload CMSREST APIsServer ActionsZodRedis

Tooling & Testing

GitGitHub ActionsDockerVercelVitestPlaywrightTurborepoAI-Assisted Development

Integrations

StripeSalesforceClerk AuthShipStationUPS

05 / Contact

Get in Touch

I'm currently looking for front-end or full-stack engineering roles. Feel free to reach out. I'd love to hear from you.