Over the past few years websites have become a cornerstone of how we as a species disseminate and consume information. They are at once democratic and also mind benignly scalable.
I first became interested in creating websites in middle school. The idea of sharing content with the world was exhilarating. Coming from an arts background, I initially got my mouth wet with rudimentary techniques like Photoshop slicing and other visual approaches. As the limitations of those approaches became increasingly clear, however, I moved on to WordPress.
I love WordPress and continue to use it for some of my sites, but it still didn’t give me the level of full feature, end-to-end, built-from-scratch control I craved. There was nothing to do but learn full stack web development.
Below are some of the sites I’ve built on:
Letter to Future Self
I created LetterToFutureSelf.com as a way for people to send physical letters to the future. Users can write a message in the browser, pay with PayPal and let the site know the date they want the letter to be sent. When that day arrives, the letter will automatically be dispatched through a bulk mailing company.
The site is a fun and/or meaningful service for everyone from students and summer campers to expecting parents to those with terminal illnesses wanting to leave a delayed message to loved ones.
The site uses Node and Firebase and was originally hosted on Google Cloud, but later moved to Heroku to cut hosting costs.
Face-Match was a project I did with Alec Schleicher and Caroline Bowes. We wanted to experiment with photo analysis algorithms, so we built a web app that allows users to upload a photo and find a stranger who looks like them. The app was powered by Microsoft Azure and was successful in most of our tests.
I was in charge of front end for the project. I wanted to come up with a visual paradigm to represent the backend sorting through and comparing an uploaded photo with existing photos in the database. I started thinking about rubik’s cubes and ended up creating a rotating 3D cube with photos of different people on each side. The cube rotated on it’s own, but could also be grabbed and manipulated by the user.
Unfortunately the fully operational site is no longer online, due to higher than expected maintenance costs, but you can checkout the source code on GitHub, a live demo of the front end (including my 3D cube), or watch a video demo of the fully operational site below.
Availevent is a work-in-progress site I’m tinkering with that allows users to buy and sell their own small scale private event tickets. Like Airbnb for events.
NOTE: I recommend viewing this site with the Google Chrome browser. Because it’s still a work in progress I’ve identified some display problems with other browsers that I’m currently in the process of fixing. Sorry for any inconvenience.
I built Gardyn.org with Alec Schleicher, Curtis Atkins and Jeremy He. The goal was to help beginner gardeners by presenting the need-to-know “spark notes” of growing common plants like tomatoes and lettuce. I wrote most of the backend code (Node), helped get the project setup with React and also created a bare-bones iOS version of the project using React Native.
I was given the coding challenge of creating a simple dating app. On Cuddle Up, visitors use a slider to answer a few basic personality questions before being matched with their perfect significant other (pre-seeded with celebrities and historical figures).
Super Trivia Game
I’ve considered adding functionality so users could add their own quizzes.
Call Sheet Generator
Call sheets are a key component of a well run film set. These documents are given to cast and crew before each day of filming and help them know where they need to be when, with what props and what script pages will be shot (as well as what time lunch is). In order to make call sheets more readable, they are formatted in a very specific way across productions.
Big budget Hollywood movies often use software programs like Movie Magic Scheduler for this, however such software is impractical for small, independent and student productions, both because of it’s high price and also because the needs of huge studio productions are fundamentally different from the needs in independent ADs and producers if terms of what actually appears on the call sheet. Having seen both, I can tell you they look like totally different documents.
Therefore, most small indie ADs or producers like myself used other programs for making call sheets, programs that are not designed with that purpose in mind. As a result we tended to spend more time on formatting than on actually pulling together the necessary information.
My goal with CallSheetGenerator.com was to create a totally browser based web app that would allow ADs and producers to input all their information in easy to use HTML forms and then spit out a properly formatted PDF call sheet.
I was really excited by the positive response the site got upon launch from the online filmmaker community.
Code Convo was a collab I did with Chris Rackley and Curtis Atkins. The idea was to create an exchange for feedback on coding projects. Users earn points by writing reviews for other developers and they spend points to get reviews of their own work. (Partly inspired by the writing site Scribophile.) Code in imported directly from GitHub using a recursive function and automatically color coded and formatted.
As a front end developer, I’m always looking for creative twists on old features. A few months ago I got interested in creating a more graphically exciting way to handle scrolling. Rather than just moving up the page, I wanted to see if I could get elements to move back and forth across the wave weaving between one another.
This proved to be a fun little challenge as the programming responsible for the effect had to dynamically take into account the width of the browser window as well as ensure that elements never actually overlap.
This site demonstrates the effects with GIFs. An added challenge here was that all GIFs also had to remain clickable. And I wanted the code to be flexible enough that users can add new musicians if they so choose.
The resulting site managed to achieve everything I wanted it to.
Rock Paper Scissors Multiplayer Game
This was an experiment I did with facilitating two way communication between users in order to create a simple multiplayer game. Styling is fairly bare bones on this one since it was primarily a technical exercise, but gameplay works well. Trash talking is of course made possible through the sits chat functionality.
Rudolph Musli Official Website
A basic portfolio site I created for the great Rudolph Musli. We had a lot of fun with hover effects and CSS animations on this one.
Tiki Hangman Game
Another fun browser-based game. This time it’s hangman.
Star Wars RPG Game
Another site experimenting with single page dynamic content changes.
This is a fairly basic site demoing database functionality. I built the same site twice, once with Sequelize, once without. The goal was just to compare the two.
It’s burger themed, but I’m actually a strict vegetarian..
I did a similar experiment, in terms approaching the same problem using two different technologies to compare processes, with news scrapers.
Original Web Development Portfolio
The original site I designed to host my web development portfolio, before absorbing it into my main site.
Simple Portfolio Site Desgign
A sleek and simple portfolio design, coded from scratch with vanilla CSS.