black and white profile photo tee mark tee mark tee mark
vertical color bar circle mark

FRONT END WEB DEVELOPER

_ MATC GRADUATE >>>

_ 2017

vertical line bars circle mark
horizontal bars chevron arrows

Steven Price

Web Developer

>>> about _

<article>
<card>

Card :: `$ npx stevenjacobprice`

</card>
<p>

Experience ::
I am romantic about learning, and web development keeps me forever a student. On the side, I enjoy working with local bands as a freelancer, documenting tour life via photography/videography.

</p>
<link>

Resume :: view/download

</link>
</article>

>>> Projects _

::WORK ::PASSION

Villa Terrace

2018 - Motion/UI Development

<article>
<h3>

Tech :: //VueJS //PHP //MySQL //CSS

</h3>
<p>

Scope ::
Villa Terrace is a beautiful House Museum located off the shore of Lake Michigan in Milwaukee, WI. I was a project lead throughout the project lifecycle: discovery, inspiration, sitemapping, as well as the lead developer. The design assets were referenced and exported using Sketch/Figma. Notable tech frameworks include: VueJS, panzoomJS, momentJS, macyJS and SwiperJS. Must sees are The Villa spaces explorer and the Colnik Collection gallery.

Site design by Byte

</p>
</article>

Erinn Springer

2017 - Photo/Video Layout

<article>
<h3>

Tech :: //CSS Grid //PHP //JS Masks //MySQL

</h3>
<p>

Scope ::
Erinn Springer is a Wisconsin-born documentarian based in NYC. Her projects and images have been featured by international galleries and in publications, including The New York Times, VICE and Photo District News. I loved this layout and the challenges that came with it. I played with a JS library for clipping text, CSS grid for layout (so much less HTML/CSS needed!), and a gallery builder within the CMS. Did I mention we are hometown homies?

</p>
</article>

Mrs. Jeanne

2016 - SVG/CSS Animations

<article>
<h3>

Tech :: //CSS //SVG //Animations //PHP //MySQL

</h3>
<p>

Scope ::
Mrs. Jeanne is an author/illustrator who has self published a series of children’s books. Her illustrations are playful so the goal was to bring those playful elements into the website through CSS animations. One of the highlights was being able to animate SVG paths so that site visitors could see one of her early sketches being hand drawn.

</p>
</article>

The Millenium

2016 - YouTube API

<article>
<h3>

Tech :: //jQuery //Ajax //YouTube API //PHP

</h3>
<p>

Scope ::
The Millenium and their site visitors needed a way to explore the band’s latest videos. What I wanted was a way to pull new videos from youtube and automatically embed them onto the band’s website. I wanted to have one large Video with a carousel of thumbnails that a user could browse through. To do this I got to play with YouTube’s api using oAuth. After doing some initial verification and tracking down the right access keys I was able to get a json object that had everything I needed, thumbnail urls and video and playlist ids.

</p>
</article>

Fuel Cafe

2017 - User Experience

<article>
<h3>

Tech :: //jQuery //CSS //PHP

</h3>
<p>

Scope ::
Fuel cafe has a layout design that was as challenging as it was fun to build. The goal was to present site visitors with an intuitive way to view content for both of Fuel’s restaurant locations. The heightened level of interaction ended up producing a lot of unique user experience solutions that were exciting to explore.

Site design by Byte

</p>
</article>

River Forest Manor

2016 - Parallax

<article>
<h3>

Tech :: //jQuery //CSS //Parallax //PHP //MySQL

</h3>
<p>

Scope ::
This site was for River Forest Manor & Marina located in Belhaven, NC. Their design utilized images to showcase the beautifully historic manor & marina, which I accentuated with parallax scrolling effects.

Site design by Byte

</p>
</article>

ScrollMotion

2018 - Open Source

<article>
<h3>

Tech :: //JS //Github //NPM

</h3>
<p>

Scope ::
Small vanilla javascript library for x,y transforms while scrolling. Inspired by RellaxJS, I needed a scroll animation library that waited for elements to be visible before animating. This was also the first time I published a package to npm.

</p>
</article>

Random Intel Codenames

2018 - Open Source/Collab

<article>
<h3>

Tech :: //JS //Github //Babel //Axios //NPM

</h3>
<p>

Scope ::
Simple app for getting random Intel codenames. Inspired by Mattias P Johansson's side project naming method. Featured in this FunFunFunction Video.

</p>
</article>

Wild Notes

2017 - Geolocation/Hackathon

<article>
<h3>

Tech :: //Google Maps API //VueJS

</h3>
<p>

Scope ::
Music discovery application. This project was born out of a Milwaukee hackathon that was sponsored by 88.9FM. The goal was to create a connection with communities and their local/independent artists. Wild Notes is currently a proof of concept for a web application that hosts geolocked content. Music fans unlock special content once within range of a certain longitute and latitude. The location adds a layer of depth to the content discovery experience and gets people out into their local communities.

</p>
</article>

MusicQR

2016 - Ionic App

<article>
<h3>

Tech :: //Ionic //Angular 2 //Typescript //SASS

</h3>
<p>

Scope ::
Spotify QR discovery app. This was a proof of concept for an app that could stream music using a QR code as a data source. I ran into storage limits for QR codes, so I used JSON containing the spotify URI and a small amount of meta data so that songs/albums could be 'stored' in the custom QR code.

</p>
</article>