Projects

Follow on GitHub or CodePen if you want,
I suppose.

Code Drawings

Visual explorations of code

Technical drawing detailing all parts of an Android phone hardware, expanded view

Android 01

Android Hardware

Diagram showing each layer of the Android Open Source Project system architecture

Android 02

AOSP Software Architecture

Illustration of Linux privacy sandbox architecture for Android processes

Android 03

Android Process Sandbox

Android 04

Android Activity Lifecycle

Funnel diagram illustrating the Android application build pipeline from source to APK

Android 05

Android Build Process

Technical diagram showing Android package components and structure

Android 06

Android Package Structure

JS Fundamentals 01

Event Loop

Comparative illustration of GPU and CPU hardware architecture and processing differences

Rendering 01

GPU & CPU

Rendering 02

Android Rendering

Technical diagram of UIKit, SwiftUI, and Core Animation rendering pipeline

Rendering 03

Core Animation and Rendering Pipeline

Illustration of UI rendering process and layout calculation pipeline

Rendering 04

UI Rendering & Layout

Diagram showing WebAssembly startup process and execution flow

WASM 01

WASM: Startup & Execution

Conceptual diagram of WebAssembly experimentation with brain illustration showing compilation process

WASM 02

WASM Experimentation

Technical illustration of WebAssembly execution stack and linear memory architecture

WASM 03

WASM Execution Stack

Diagram showing WebAssembly component model architecture with puzzle piece metaphor

WASM 04

WASM Component Model

Technical illustration of WebAssembly execution stack showing native and WASM linear memory

WASM 05

WASM Execution Stack

CodePen

React Animated Page Transitions

Just a small demo to show a few page transitions in React. Using GreenSock and SVG.

Vue-controlled Wall-E

I found this dribbble shot of Wall-E that I loved, and wanted to see if I could manipulate him with Vue bindings. https://dribbble.com/shots/2758895-Wall-e Uses Vue, GreenSock, and SVG

Vue Time Comparison

Using the browser's native API for .toLocaleTimeString to get rid of libraries like moment.js for world time that respects daylight savings. Made with Vue, SVG, GreenSock, and 🤘🏼 The dial was built off of this dribbble shot with minor tweaks: https://dribbble.com/shots/2196737-Day-048-Speedometer and the graphic was a purchased game backround

JavaScript Array Explorer

When I was first learning array methods, I spent a lot of time digging through the docs to find the appropriate one, and I had to search one by one. I made this resource to help people find the correct array method a bit more naturally. You can narrow down what you want to do and explore until you find what's most useful to you. All of the code is MIT open source and hosted on github if you'd like to see how this is made: https://github.com/sdras/array-explorer/.

💥 Boom 💥

What I think about when I think about nuclear power races

Example Motion Design Docs

Showing how motion design documentation can communicate branding and a direction for cohesive animation on a site. Illustrations by Kristen Kong.

Dynamically Generated Alt Text

I kept hearing about machine learning being used for evil and wanted to use it for something good. Social media posts typically don't have a way to enter alt text and the only users I see that reliably remember to add descriptions to the post are accessibility experts or blind people. Hopefully this allows good alt text to be a bit more ubiquitous. You can find more information on how Azure's Computer Vision API works, as well as how to use it in your own projects here: https://aka.ms/Uzrshc