Owen Essen

Entrepreneur

Designer

Storyteller

Owen Essen

Entrepreneur

Designer

Storyteller

Blog Post

Websites

November 7, 2017 Portfolio Pages, Uncategorized

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.

Today I build most new sites using some combination of JavaScript, Node, React, Express, MongoDB and/or MySQL. I continue to learn new technologies as needed.

Below are some of the sites I’ve built on:

Letter to Future Self

Screenshot of the Letter to Future Self site, created by Owen Essen

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.

View Site

Face-Match

Face-Match Screenshot

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

Screenshot of the original Availevent homepage

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.

This site is not yet public.

 

Gardyn.org

Gardyn.org Screenshot

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.

Live version of site is no longer online.

Main GitHub Repo

React Native GitHub Repo

Cuddle Up

Thumbnail for Cuddle Up

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).

View Site

GitHub

Super Trivia Game

Thumbnail for Super Trivia Game site

Another fun coding challenge was to create a timed trivia game as a single page app. This is mostly vanilla JavaScript and jQuery. Currently the site offers 4th of July, Movies and Space Travel quizzes, but more could be added easily.

I’ve considered adding functionality so users could add their own quizzes.

View Site

GitHub

Call Sheet Generator

Screenshot of the CallSheetGenerator site

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.

View Site

 Code Convo

Screenshot of the Code Convo site

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.

Live version of site is no longer online.

GitHub

Musicians Gify

Screenshot of Owen Essen's Musicians Gify site

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.

View Site

GitHub

Rock Paper Scissors Multiplayer Game

Screenshot of 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.

View Site

GitHub

Rudolph Musli Official Website

Rudolph Musli Official Website Screenshot

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.

View Site

GitHub

Tiki Hangman Game

Tiki Hangman Game Screenshot

Another fun browser-based game. This time it’s hangman.

View Site

GitHub

Star Wars RPG Game

Star Wars RPG Game Screenshot

Another site experimenting with single page dynamic content changes.

View Site

GitHub

Eat-Da-Burger

Eat-Da-Burger Screenshot

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..

View Site

GitHub Version 1

GitHub Version 2

News Scraper

News Scraper Screenshot

I did a similar experiment, in terms approaching the same problem using two different technologies to compare processes, with news scrapers.

Version 1 was without React (GitHub), Version 2 was with React (GitHub).

Original Web Development Portfolio

Owen Essen Web Development Portfolio Page Screenshot

The original site I designed to host my web development portfolio, before absorbing it into my main site.

View Site

Simple Portfolio Site Desgign

Basic Portfolio Design screenshot

A sleek and simple portfolio design, coded from scratch with vanilla CSS.

View Site

GitHub Version 1

GitHub Version 2

Taggs: