Hey, I'm
Sam O.

I'm a recent grad from Rutgers University, a full-stack developer and creative technologist interested in making web interfaces.

Web Animation, Data Visualization, and Media

Here are a few projects I've done in data visualization, web animation and other media.

  • Teachable Machine
  • D3.js
  • Tone.js

Kaggle

Design Systems, Storybook, React, TypeScript

Profile picture hover component that I developed during my time working on the Kaggle Community Team.
Read more

Gesture-Based Instagram Liker

Teachable Machine, Chrome Extension, JavaScript

A quick interactive chrome extension that I made to like Instagram photos using Teachable Machine and content scripts.

View code

Who's Funding Gun Policy?

Interactive Journalism, D3.js, JavaScript, HTML, CSS

A quick interactive article that I wrote about SuperPACs and their influence on gun policy in the US.

View code

Physically-Based Animations in JavaScript

HTML, CSS, JavaScript
A few demos of things that I've built using this paradigm.

I've done a few studies focused on learning animation first-principles. These are a few demos for a study that I did on physics-based animations in JavaScript.

  • iOS PiP, my attempt to replicate the iOS PiP interaction using fluid animation principles.
  • Cards, a draggable slideshow of cards.
  • Image Carousel, a draggable image carousel demo using fluid animation principles.
View case study

Explorable Explanations

I'm deeply inspired by the work that Nicky Case is doing with Explorable Explanations and decided to try and make a few myself. Some of these are still a work in progress.

Parsing Expressions: How the "Shunting Yard" Algorithm works

React.js, JavaScript, HTML, CSS

I created this visual for the Shunting-Yard algorithm after I had to create an expression evaluation program for my Intro to CS class. This one was really fun to make and it helped me better understand how to create visual metaphors for algorithms.

Quick Introduction to Matrices for Computer Graphics

JavaScript, HTML, CSS

A Primer on Convex Hull (Work In Progress)

React.js, JavaScript, HTML, CSS

Interview Problem: Balanced Parentheses

React.js, JavaScript, HTML, CSS

Interview Problem: Island Perimeter

 JavaScript, HTML, CSS

Full-Stack Apps

Web apps that I've developed using core modern front-end and backend technologies.

  • JavaScript (ES6)
  • TypeScript
  • Firebase
  • Node.js
  • Next.js

Tabletop

React.js, Firebase, TypeScript
A few screens from the full-stack app that I built.

During quarantine a few of my friends came together and decided to make a character sheet Single-Page App for Dungeons and Dragons.

Demo Login Credentials
Email: dndfirebase1@gmail.com, Password: test123

Spotify recently played

Express, Next.js, JavaScript, HTML, CSS

SPA that visualizes your most recently played tracks on Spotify in a 3D grid. This project was part of a larger study that I did on physically-based animations in JavaScript.

Freelance and Miscellaneous

Work that I've done for non-profits, clubs, and others.

Rethink the Police

Branding

Branding booklet that I made for an ideathon/hackathon centered around rethinking the role of policing in community safety.

View Design Spec

No More Names

Branding, Marketing Strategy, Web Design

Work that I did for a non-profit focused on bringing awareness about and working to stop police brutality.

View Site

Canvas-Based Tools

I've also used HTML5 Canvas as a platform for creating effects, exploring ideas for user-interface interactions and creative coding projects.

  • HTML5 Canvas
  • WebGL
  • GLSL
Here's a clip from a prototype I made that could recognize and replace a few simple shapes.

Shape-Recognizer on Canvas

JavaScript, Computer Graphics

Inspired by Google Jamboard, I've been exploring different ways to detect shapes drawn on a canvas using JavaScript. I've tried numerous methods, most involving finding different cost functions for finding the distance between shapes. It's a difficult problem to get right. Most recently, I've been trying to implement Shape Context in JavaScript.

Here's a clip from a GLSL demo that I made.

WebGL Scroll Animation

WebGL, GLSL, JavaScript

I explored a variety of distortion effects using WebGL shaders including fisheye and barrel roll.

Drawing App Code Golf

HTML5 Canvas, JavaScript

I wanted to see how few lines that I could make a functional drawing app in.

Try it (~60 Lines of code)
Here's a micro-interaction for reordering and deleting tweens.

Stopmotion App (Work in Progress)

React.js, Firebase, Framer Motion

Recently I've been using Procreate to make small stopmotion GIFs. I wanted to create a tool to create and share stopmotion animations on the web.

Programming Languages

Here are a few explorations that I've done regarding programming languages.

Here's a clip from a prototype I made that could run C code blocks and create C functions using a Node.js backend.

Coding Notebook Demo

Node.js, React, TypeScript, Framer Motion, CodeMirror

How do we keep computing small and the barrier to entry low? How do we expand the power of computing to people who aren't computer/programming literate? Who do we create new tools with these people in mind? I created this coding notebook prototype while trying to find answers to these questions.

React Tutorial

React, Markdown

I wrote a 2 part series on React for my computer science club in college.

Part 1: Introduction & Setup, Part 2: React, The Important Parts

Git Clone

C, Latex

I wrote a Git clone in college for a systems programming assignment.

View Code, Read Writeup
© Sam Olagun, 2023