Frontend Engineer

Juan Santis

Building pixel-perfect, high-performance interfaces
with obsessive attention to detail.

Press⌘Kto navigate
scroll

About

I'm a frontend engineer who cares deeply about architecture, performance, and scalability.

I build interfaces that are not just visually polished but meticulously engineered under the hood. Every component is designed to be maintainable, every render optimized, every bundle analyzed.

My approach to frontend development treats the browser as a serious runtime environment. I think about component boundaries, state management patterns, and rendering strategies the same way a backend engineer thinks about service architecture.

Architecture

Component design, state patterns, module boundaries

Performance

Core Web Vitals, bundle optimization, render efficiency

Scalability

Design systems, code organization, team patterns

Projects

AI Dashboard

Problem

Enterprise teams needed a real-time analytics interface that could handle streaming data from multiple AI model endpoints without degrading performance.

Technical Decisions

  • Server-Sent Events over WebSockets for unidirectional data flow
  • Virtual scrolling for large datasets
  • Optimistic UI updates with rollback

Architecture

React with a custom hook-based state machine for connection lifecycle. Separated data layer from presentation using a provider pattern with selective re-rendering.

Challenges

Managing concurrent streams while keeping the UI responsive at 60fps. Solved with Web Workers for data transformation and requestIdleCallback for non-critical updates.

Result

Reduced time-to-insight by 40%. Handles 10k+ data points with sub-16ms frame times.

ReactTypeScriptSSEWeb Workers

Design System

Problem

A growing product team was shipping inconsistent UI across 12 micro-frontends, causing visual fragmentation and duplicate code.

Technical Decisions

  • Compound component pattern for flexibility
  • CSS custom properties for theming over CSS-in-JS
  • Automated visual regression testing

Architecture

Monorepo with package-level tree shaking. Each component is a standalone package with zero cross-dependencies. Token system built on CSS custom properties with a Figma plugin for sync.

Challenges

Balancing API flexibility with consistency enforcement. Implemented a custom ESLint plugin to enforce design system usage patterns across teams.

Result

Adopted by 8 teams. Reduced UI-related bugs by 60%. Bundle size per component averages 2.3kb gzipped.

ReactTypeScriptStorybookFigma API

Performance Audit Tool

Problem

Developers needed a way to continuously monitor Core Web Vitals across deployment previews, not just production.

Technical Decisions

  • Edge functions for lightweight data collection
  • Incremental Static Regeneration for reports
  • Custom CrUX-like scoring algorithm

Architecture

Next.js app with edge middleware for data ingestion. SQLite on the edge for per-deployment metrics. React Server Components for zero-JS report pages.

Challenges

Achieving accurate LCP measurement in preview environments with different CDN configurations. Built a normalization layer to account for infrastructure differences.

Result

Catches 90% of performance regressions before production. Average report generation under 200ms.

Next.jsEdge FunctionsWeb VitalsSQLite

Stack

Frontend

Primary

  • React (4 years)
  • TypeScript (3 years)
  • Next.js
  • Performance optimization
  • State management patterns
  • Design systems
  • CSS architecture

Tooling

Daily driver

  • Vite / Turbopack
  • ESLint / Prettier
  • Testing Library / Playwright
  • Storybook
  • Git / GitHub Actions

Backend

Working knowledge

  • Node.js
  • REST APIs
  • PostgreSQL
  • Redis
  • Docker

Contact

Open to conversations about frontend architecture, performance challenges, or interesting opportunities. Feel free to reach out.

info.juansantis@gmail.comgithub.com/Sagilairelinkedin.com/in/Jasantise

Dev Inspector

Navigate the portfolio using commands