Interactive Penn Museum scavenger hunt, deployed and continually updated with changing galleries. Built under 8-week deadline with team of 8 (designers, developers, museum stakeholders)›
›
›
Key Features & Contributions
›System Architecture
- Proposed and implemented IndexedDB-based offline-first architecture to handle spotty museum WiFi
- User-generated content uploads asynchronously with zero latency and persists even on device restart
- Blob storage with metadata indexing for efficient retrieval
- Helped re-structure website to fit museum's static hosting requirement
›Custom Cutout Feature
- Owned artifact cutout system using HTML canvas + SVG masking (minimal alterations for cultural preservation)
- Implemented camera with even-odd clipping for complex paths and SVG 'cutting' animations
- Pixel-perfect scaling between camera feed, PNG overlays, SVG outlines, image clipping, & DPR and zoom level
- Coordinated with designers on shared viewBox dimensions for control over scale and positioning
- Added and rasterized sticker-like outline to captured images. Prototyped a version with rough edges using noise functions
›Interactive Stickerboard
- Co-created drag-and-drop interface with custom physics (no external libraries)
- Built export pipeline using html2canvas for shareable PNG compositions
- Implemented modal system with swipe gestures for sticker categories
Tech Stack:
TypeScriptNext.jsReactIndexedDB
Data Viz Engineer Intern @ SCE
Serving 15m residents across Southern California
Key Features & Contributions
›Internal Tooling
- Worked independently with 9+ internal departments to create data visualizations, optimize legacy ETL pipelines, and build new data models
- Funneled data between multiple enterprise SQL databases to create unified reporting views
- Received positive performance reviews and return offer, please contact for manager recommendation!
Tech Stack:
SQLPythonEnterprise SQL
Experimental interface and ML pipeline exploring web browsing behavior through spatial representation. Turned design lead's vision into technical architecture and led full-stack development.›
›
›
Key Features & Contributions
›Visualization Engineering
- Draggable 3D force graph using react-force-graph for 300+ nodes
- Dynamic camera transitions that zoom to nodes and user paths
- SVG overlays and animations synchronized with 3D scene using world to screen space conversions
›Capturing the 'Feel' of a Website
- Tested and evaluated 5 combinations of local models, APIs, PCA clustering, and reduction strategies
- Used LLM-optimized web scraper for text and screenshot collection and FastAPI for minimal backend
- Separated website embedding storage (Pinecone) from metadata (Supabase) for efficient retrieval
›Live Deployment
- Backend built for scalability and modularity, accommodates live addition + embedding of new user paths
- Data schema is able to aggregate overlapping paths into a collaborative graph and isolate individual user journeys
- Deployed full application with Vercel and Render, handled 40+ simultaneous users
- Currently static due to costs
Tech Stack:
TypeScriptPythonViteFastAPIReactThree.jsD3.jsSupabasePineconeWebGL
From-scratch voxel and gameplay engine built in modern OpenGL. Implemented select rendering, simulation, and shader systems with a focus on performance and visual coherence.›
›
Key Features & Contributions
›Rendering Pipeline (No external libraries)
- Interleaved VBOs and indexed drawing for efficient chunk rendering
- Culled non-visible block faces to reduce GPU overdraw
- Chunk-based terrain system with dynamic loading and unloading
›Shader & Visual Systems
- GLSL sky shader with procedural day–night cycle, coordinated with sun position and lighting
- Volumetric-feeling clouds using Worley noise and fBm
- Animated water and lava textures using time-based UV distortion
- Dynamic water surface displacement with recalculated normals and Blinn-Phong lighting for highlights
Tech Stack:
C++GLSLOpenGL
Advanced Raytracing in C++
Custom renderer / Advanced shading models
Key Features & Contributions
›Deferred Rendering Architecture
- Built deferred shading pipeline with G-buffer composition
- Separated albedo, normals, depth, and material masks for lighting passes
- Implemented screen-space reflections and post-processing stack
›Physically-Based Shading
- Implemented Cook–Torrance BRDF for realistic material response
- Integrated tone mapping and Gaussian blur post effects
- Built matcap shading modes for rapid material iteration
›Procedural & Ray-Based Techniques
- Implemented shader-based ray marching with signed distance fields (SDFs)
- Explored domain repetition and procedural geometry
- Integrated subsurface scattering and sky models (Hosek–Wilkie)
Tech Stack:
C++GLSLOpenGL
Graphics Engineer & Designer
Real-time watercolor drip simulator using custom GLSL shaders and ping-pong buffer technique. Explores organic fluid behavior through minimal diffusion systems.Custom shader system / Hybrid CPU/GPU pipeline
Key Features & Contributions
›Shader Architecture
- Implemented ping-pong buffer technique for fluid state simulation
- Built hybrid CPU/GPU pipeline balancing performance with visual quality
- Designed minimal diffuse system mimicking watercolor paper absorption
- Created custom fragment shaders for color bleeding and edge darkening
›Fluid Dynamics
- Simulated gravity-driven drip behavior with velocity fields
- Implemented edge detection for pigment concentration effects
- Built color mixing system preserving watercolor luminosity
- Added subtle noise for organic texture variation
›Interactive Controls
- Real-time brush input with pressure-sensitive flow
- Dynamic parameter controls for viscosity and diffusion rate
- Built export system for high-resolution render output
Tech Stack:
TypeScriptGLSLNext.jsReactThree.jsWebGL
Interactive soft-body physics sandbox combining 2D bezier editing with 3D mesh generation. Build custom jelly shapes that squish, bounce, and deform in real-time.›
›
›
Key Features & Contributions
›'3D' Softbody Physics in Real-Time?
- Real 3D softbody physics are too expensive for the web
- Wanted to build a lightweight, modular material people can experience without compromising on speed or realism
›Solution: Hybrid 2D/3D Approach
- Built a lathe algorithm constructing the front view of a 3D mesh from 2D bezier curves
- Implemented simple 2D particle physics with spring and damping forces to simulate soft-body behavior
›Graphics & Shader Tricks
- Fixed normals, texture mapping, vertex z positions, and lighting for efficiency
- Updated vertex x/y positions based on particle simulation
- Custom shaders for specular and rim lighting to enhance jelly-like appearance
- if/then branching in fragment shader to differentiate facial features from body
Tech Stack:
TypeScriptGLSLNext.jsReactThree.jsWebGLCanvas
Transforms text passages into visual constellations where words orbit like stars. Custom packing algorithms and physics simulation create organic layouts guided by grammatical structure.›
›
›
›
Key Features & Contributions
›Layout Algorithms
- Rectangle packing algorithm with reading-order bias for paragraph ellipses
- Ellipse sizing model balancing word count and canvas area
- Iterative adjustment of ellipse positions to minimize overlaps
›Force Graph Dispersion
- d3-force simulation for organic word positioning
- Created sentence centers using sunflower seed distribution pattern
›Typographic Intelligence
- Integrated POS tagging (wink-pos-tagger) for grammatical analysis
- Applied distinct styling and link structure to nouns, verbs, adjectives, first words
›Visual Design
- Canvas-based rendering with radial gradient backgrounds
- ASCII star scatter avoiding ellipse boundaries
- Decorative elements: grid patterns, radial graphs, Roman numerals
Tech Stack:
TypeScriptNext.jsReactd3-forceCanvas API
Interactive poetry board inspired by refrigerator magnets. Curated word dataset meets physics-based drag-drop for tactile composition.›
›
›
Key Features & Contributions
›Data Curation
- Parsed and processed 15k+ word poetry corpus with frequency analysis
›Interaction Design
- Built custom drag-drop system without external physics libraries
- Slight random rotation and mouse hover response for tactile feedback
- Subtle cue for deleting words by dragging off-canvas
- Supports both click-drag and touch-drag interactions
›Real-time Collaboration
- Implemented WebSocket-based real-time sync for multi-user editing
- Optimized data payloads to only send position and word changes
Tech Stack:
TypeScriptNext.jsReact
Better Spelling Bee
↗End-to-end system / Custom gameplay logic / Team of 2
Key Features & Contributions
›Gameplay & Systems Design
- Built word-generation engine filtering a 46k-word dictionary in real time
- Guaranteed pangram existence through constrained search logic
- Designed stateful gameplay loop with caching and session persistence
›Interaction Design
- Created draggable letter blocks and playful duck avatars
- Implemented dynamic reordering and cloning via custom drag logic
- Used subtle animations to reinforce physicality and feedback
›Full-Stack Architecture
- Implemented JWT-based authentication and session handling
- Designed PostgreSQL schema for users, games, and statistics
- Balanced backend rigor with lightweight frontend feel
Tech Stack:
TypeScriptPythonNext.jsDjangoReactPostgreSQLFigma
A lightweight interactive gift designed to translate the warmth of handwritten letters into a shareable, physical-feeling web experience.›
›
Key Features & Contributions
›Emotional Interaction Design
- Animated opening sequence using to simulate surprise
- Used hand-drawn graphics and custom handwriting font
- Focused on immediate, single-click access for recipients
›Minimal Data Handling
- Encoded Firebase document ID directly in URL routes for easy, invisible personalized data fetching
Tech Stack:
TypeScriptNext.jsReactFirebaseVercel
Eat or Plant?
Interdisciplinary collaboration with architecture students
Key Features & Contributions
›Hardware System Engineering
- Designed copper capacitive touch sensor array detecting tree removal
- Programmed LED matrix animations responding to physical interaction
- Built real-time feedback loop between physical objects and visual display
- Managed 3 synchronized LED arrays: tree positions, AQI gradient, alert system
›API Integration
- Connected to AirNow API for live Amazon rainforest air quality data
- Implemented 5-minute polling cycle with error handling
- Translated AQI thresholds into visual warning states (red flashing alerts)
›Physical Fabrication
- 3D printed custom enclosures using Rhino
- Laser-cut acrylic components with Adobe Illustrator
- Integrated electronics with hand-crafted chocolate trees
- Designed physical form factor balancing aesthetics and sensor accessibility
Tech Stack:
C++ArduinoRhinoAdobe Illustrator