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)›
›
›
Technical Highlights:
›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
Technical Highlights:
›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.›
›
›
Technical Highlights:
›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
Leading redesign of Penn Spark's website with focus on sustainability and future maintainability. Chose incremental improvement over rebuild to preserve brand identity from past designers while consolidating architecture and establishing proper development standards.›
›
›
›
Technical Highlights:
›Preserving While Modernizing Existing Codebase
- Existing codebase was well-organized but fragmented across 3 codebases and deployed on outdated Gatsby platform
- Consolidated repositories and migrated to TypeScript + Tailwind + Vite with lazy loading
- Kept parts of data structure and styling that worked while refactoring and optimizing the rest
- Sacrificed some performance for a static GitHub pages deployment to preserve free hosting and ease of contribution
›Strengthening Brand with Interactive Motion
- Built custom banners for each page using custom canvas logic, dynamic HTML, Three.JS, matter.js, etc.
- Carousel banners with dynamic content filtering for homepage and client page
- Mouse-responsive coloring boxes and pills done two ways: CSS and JavaScript
›Clean Code for the User & Developer
- Identified most frequently updated areas (community directory, projects), and refactored them from hard-coded JavaScript into type-safe data structures
- Established test deployment before production, introducing proper development practices to team
- Created detailed README documentation to ensure future developers do not encounter surprises
›Current Focus: Standards & Accessibility
- Implementing rigorous web standards and accessibility guidelines now that stable foundation is established.
Tech Stack:
TypeScriptJavaScriptNext.jsReactTailwind CSSVercel
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.›
›
Technical Highlights:
›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
Technical Highlights:
›Deferred Rendering Architecture
- Built deferred shading pipeline with G-buffer optimizations
- Separated albedo, normals, depth, and material masks for lighting passes
- Implemented screen-space reflections and ambient occlusion for realism
›Physically-Based Shading
- Implemented Cook–Torrance BRDF for realistic material
- Integrated post effects such as gamma correction, Gaussian blur, Sobel edge detection
›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
Technical Highlights:
›Shader Architecture
- Implemented ping-pong buffer technique for fluid state simulation
- Dual canvas: top canvas uses CPU for mouse imput and emoji movement, while bottom canvas takes the last pixel line of top canvas as input for GPU drip sim
- Minimal, constant-time bounded diffuse system mimicking watercolor paper absorption
- Custom fragment shaders for color bleeding and blending
›Subtle Visual Details
- Moving gradient background behind cloud
- Background perspective shift on mouse movement
- Lower opacity in 'wet' areas of the paper
- Max. bound on number of emojis on canvas without restricting user actions
›Interactive Controls
- Mouse 'paint' mode intuitively toggled on click
- Hover on cloud cell to release emoji, click to release entire cloud
- Select emojis to change what's raining
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.›
›
›
Technical Highlights:
›'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.›
›
›
›
Technical Highlights:
›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
- Custom font for ASCII star icons
›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.›
›
›
Technical Highlights:
›Data Curation
- Parsed and processed Gutenberg poetry corpus, extracting and ranking words by frequency
›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 multi-user sync via shareable URL routes
- Optimized 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
Technical Highlights:
›Gameplay & Systems Design
- Built word-generation engine using indexes, 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.›
›
Technical Highlights:
›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