<commit_before><div id="body">
  <div id="spacemonkey" class="animated fadeInUp"></div>

  <header class="active">
    <a href="#top"><div class="logo animated fadeInUp"><NAME></a></div>

    <ul class="navi_fade">
      <li class="animated fadeInUp"><a href="#about">About</a></li>
      <li class="animated fadeInUp"><a href="#work">Work</a></li>
      <li class="animated fadeInUp"><a href="#contact">Contact</a></li>
    </ul>
  </header>

  <div class="main">
     <div class="work_link animated fadeInUp">
     	<a class="scroll" href="#work">Work</a>
     </div>

     <div class="about_link animated fadeInUp">
     	<a class="scroll" href="#about">About</a>
     </div>

     <div class="contact_link animated fadeInUp">
     	<a class="scroll" href="#contact">Contact</a>
     </div>
  </div><!--main-->
</div>

<div class="about" id="about">
  <div class="black">
    <p class="wow bounceInUp">
      <span class="scarlet">By day I develop, design, and create for the web.</span> I specialize in front end development, with a background in SEO and analytics. I strive to continuously learn new techniques and code ideas into action with a holistic, humanistic approach.
    </p>
    <p class="wow bounceInUp">
      By night I run <a href="http://nimbusprints.com">Nimbus Prints</a> (I love screenprinting!) and make music for Chicago art collective <a href="http://www.studiomosaic.org">Studio Mosaic</a>. I also enjoy playing guitar, DJing, reading, writing, and wilderness travel.
    </p>
  </div>
</div>

 <ul class="grid cs-style-4" id="work">
	<li>
		<figure>
			<div><a href="https://beatitudes.herokuapp.com/"><img src="images/beatitudes.png" class="wow bounceInUp" alt="Beatitudes"></a></div>
			<figcaption>
				<h3>Beatitudes</h3>
				<span>
          <strong>Built With: </strong>Node/Express.js, HTML5/CSS3/JS, Less
        </span>

        <p>
          Beatitudes is a simple Node app that generates quotes and displays books by classic Beat Generation writers.
        </p>

        <p class="third">
           With Google Sheets concatenation, I created a large array for each author and over 300 total quotes. An on click event would loop through the array and pull a quote based on a predefined author variable and insert it into a div. If no author variable was defined, the function would display any random quote.
        </p>

        <p class="third">
          Additional features include <strong>Bootstrap Less</strong>,  <strong>self-rendering SVG animations</strong>, <strong>Animate.css</strong>, <strong>smooth scrolling JS</strong>, and a <strong>Masonry.js</strong> gallery for authors' most popular books, descriptions, and more.
        </p>

        <span class="hide">
          <strong>TL;DR</strong> An app that generates cool quotes. You dig?
        </span>

				<a href="https://beatitudes.herokuapp.com/">Take a look</a>
        <div class="git"><a href="https://github.com/sternmd/beatgen">Github</a></div>
			</figcaption>
		</figure>
	</li>
	<li>
		<figure>
			<div><a href="http://studiomosaic.org"><img src="images/studiomosaic.png" class="wow bounceInUp" alt="Studio Mosaic"></a></div>
			<figcaption>
				<h3>Studio Mosaic</h3>
				<span>
          <strong>Built With: </strong>HTML5/CSS3/JS, Skeleton.css, Masonry.js
        </span>

        <p>
          Studio Mosaic is a Chicago art collective, digital music label, and independent publisher.
        </p>

        <p class="third">
          This was a passion project for a Chicago-based art collective that I am part of. I built the original version in 2014 with <strong>Wordpress</strong>, but wanted to fully redesign the site from scratch, <strong>no CMS attached</strong>.
        </p>

        <p class="third">
          I treated this project as a playground to learn about <strong>web design</strong>, <strong>media queries</strong>, <strong>typography</strong>, <strong>music platform integration</strong>, and experimental <strong>CSS</strong> and <strong>jQuery</strong>.
        </p>

        <span class="hide">
          <strong>TL;DR</strong> An unconventional art site for an unconventional art group.
        </span>
				<a href="http://studiomosaic.org">Take a look</a>
        <div class="git"><a href="https://github.com/sternmd/studiomosaic">Github</a></div>
			</figcaption>
		</figure>
	</li>
	<li>
		<figure>
			<div><a href="http://muchartgenerator.com"><img src="images/mucharts.png" class="wow bounceInUp" alt="Mu Chart Generator"></a></div>
			<figcaption>
				<h3>/Mu/sic Chart Generator</h3>
				<span>
          <strong>Built With: </strong>Express.js, React, MongoDB, HTML5/CSS3/JS, Less</span>
        <p>
          /Mu/sic Chart Generator is a <strong>MEAN</strong> app that allows users to build and share music album flowcharts.

        <p class="third">
          The goal of this project was to collaborate with a team of 5 developers to create a <strong>RESTful</strong> app with <strong>React.js</strong>.
        </p>

        <p class="third">
          I was assigned to work on the front end. I used this project to hone my skills with <strong>Gulp</strong> and <strong>Bootstrap Less</strong>. The project also gave me the opportunity to learn more about <strong>React.js components</strong>, <strong>Last.fm API</strong>, <strong>HTML drag-and-drop</strong> functionality, and <strong>MongoDB</strong>.
        </p>

        <span class="hide">
          <strong>TL;DR</strong> Easily search for and save your fav albums.
        </span>

				<a href="http://muchartgenerator.com">Take a look</a>
        <div class="git"><a href="https://github.com/Cams-Headphones-2/Client-app">Github</a></div>
			</figcaption>
		</figure>
	</li>
  <li>
		<figure>
			<div><a href="https://caspian-app.herokuapp.com/"><img src="images/caspian.png" class="wow bounceInUp" alt="Caspian App"></a></div>
			<figcaption>
				<h3>Caspian</h3>
				<span>
          <strong>Built With: </strong>Ruby/Sinatra, HTML5/CSS3/JS
        </span>

        <p>
          Caspian is an emergency management app, for any trip. Caspian stores and presents important In-Case-of-Emergency (ICE) info and is meant to be used while outdoors or camping.
        </p>

        <p class="third">
          My first Ruby/Sinatra project. The objective of this pair programming assignment was to create a <strong>Ruby/Sinatra</strong> app that features database CRUD. We used <strong>PostgreSQL</strong> and <strong>ActiveRecord ORM</strong> to store our user data.
       </p>

       <p class="third">
         Additional features include <strong> Base64 Reader</strong> for uploading images and <strong>BCrypt</strong> for hashing passwords.
      </p>

      <span class="hide">
        <strong>TL;DR</strong> Store emergency info for safe travels.
      </span>

				<a href="https://caspian-app.herokuapp.com/">Take a look</a>
        <div class="git"><a href="https://github.com/alexekim/project_caspian">Github</a></div>
			</figcaption>
		</figure>
	</li>
	<li>
		<figure>
			<div><a href="https://sternmd.github.io/roygbiv/"><img src="images/roygbiv.png" class="wow bounceInUp" alt="ROYGBIV: The Game"></a></div>
			<figcaption>
				<h3>ROYGBIV</h3>
				<span>
          <strong>Built With: </strong>HTML5/CSS3/JS</span>
        <p>
          ROYGBIV (pronounced [ROY-JEE-BIV]) is a color-matching puzzle game. The goal of the game is for a single player to determine the brightest colored row.
        </p>

        <p class="third">
          Additional features include <strong>CSS animations</strong>, <strong>HTML data type injection</strong>, <strong>color theory, RGB, and luminance values</strong>, and <strong>JavaScript methods</strong> such as parsing, pushing, splitting, splicing, and Math.random()!
        </p>

        <span class="hide">
          <strong>TL;DR</strong> The player with the best colorvision wins!
        </span>

				<a href="https://sternmd.github.io/roygbiv/">Take a look</a>
        <div class="git"><a href="https://github.com/sternmd/sternmd.github.io/tree/master/roygbiv">Github</a></div>
			</figcaption>
		</figure>
	</li>

	<li>
		<figure>
			<div><a href="http://nimbusprintshop.etsy.com"><img src="images/nimbus_homepage.jpg" class="wow bounceInUp" alt="Nimbus Prints"></a></div>
			<figcaption>
				<h3>Nimbus Prints</h3>

        <span>
          <strong>Built  With: Big Cartel, Custom CSS</strong>
        </span>

        <p>
          Founded in 2014, Nimbus Prints began as a fan art project inspired by music, film, anime, and pop culture. Today, we have evolved into an experimental printshop, striving to create original, limited edition print series with artists in Chicago.
        </p>

        <span class="hide">
          <strong>TL;DR</strong> Etsy shop that sells nostalgic t-shirts.<commit_msg>nimbus<commit_after><div id="body">
  <div id="spacemonkey" class="animated fadeInUp"></div>

  <header class="active">
    <a href="#top"><div class="logo animated fadeInUp"><NAME></a></div>

    <ul class="navi_fade">
      <li class="animated fadeInUp"><a href="#about">About</a></li>
      <li class="animated fadeInUp"><a href="#work">Work</a></li>
      <li class="animated fadeInUp"><a href="#contact">Contact</a></li>
    </ul>
  </header>

  <div class="main">
     <div class="work_link animated fadeInUp">
     	<a class="scroll" href="#work">Work</a>
     </div>

     <div class="about_link animated fadeInUp">
     	<a class="scroll" href="#about">About</a>
     </div>

     <div class="contact_link animated fadeInUp">
     	<a class="scroll" href="#contact">Contact</a>
     </div>
  </div><!--main-->
</div>

<div class="about" id="about">
  <div class="black">
    <p class="wow bounceInUp">
      <span class="scarlet">By day I develop, design, and create for the web.</span> I specialize in front end development, with a background in SEO and analytics. I strive to continuously learn new techniques and code ideas into action with a holistic, humanistic approach.
    </p>
    <p class="wow bounceInUp">
      By night I run <a href="http://nimbusprints.com">Nimbus Prints</a> (I love screenprinting!) and make music for Chicago art collective <a href="http://www.studiomosaic.org">Studio Mosaic</a>. I also enjoy playing guitar, DJing, reading, writing, and wilderness travel.
    </p>
  </div>
</div>

 <ul class="grid cs-style-4" id="work">
	<li>
		<figure>
			<div><a href="https://beatitudes.herokuapp.com/"><img src="images/beatitudes.png" class="wow bounceInUp" alt="Beatitudes"></a></div>
			<figcaption>
				<h3>Beatitudes</h3>
				<span>
          <strong>Built With: </strong>Node/Express.js, HTML5/CSS3/JS, Less
        </span>

        <p>
          Beatitudes is a simple Node app that generates quotes and displays books by classic Beat Generation writers.
        </p>

        <p class="third">
           With Google Sheets concatenation, I created a large array for each author and over 300 total quotes. An on click event would loop through the array and pull a quote based on a predefined author variable and insert it into a div. If no author variable was defined, the function would display any random quote.
        </p>

        <p class="third">
          Additional features include <strong>Bootstrap Less</strong>,  <strong>self-rendering SVG animations</strong>, <strong>Animate.css</strong>, <strong>smooth scrolling JS</strong>, and a <strong>Masonry.js</strong> gallery for authors' most popular books, descriptions, and more.
        </p>

        <span class="hide">
          <strong>TL;DR</strong> An app that generates cool quotes. You dig?
        </span>

				<a href="https://beatitudes.herokuapp.com/">Take a look</a>
        <div class="git"><a href="https://github.com/sternmd/beatgen">Github</a></div>
			</figcaption>
		</figure>
	</li>
	<li>
		<figure>
			<div><a href="http://studiomosaic.org"><img src="images/studiomosaic.png" class="wow bounceInUp" alt="Studio Mosaic"></a></div>
			<figcaption>
				<h3>Studio Mosaic</h3>
				<span>
          <strong>Built With: </strong>HTML5/CSS3/JS, Skeleton.css, Masonry.js
        </span>

        <p>
          Studio Mosaic is a Chicago art collective, digital music label, and independent publisher.
        </p>

        <p class="third">
          This was a passion project for a Chicago-based art collective that I am part of. I built the original version in 2014 with <strong>Wordpress</strong>, but wanted to fully redesign the site from scratch, <strong>no CMS attached</strong>.
        </p>

        <p class="third">
          I treated this project as a playground to learn about <strong>web design</strong>, <strong>media queries</strong>, <strong>typography</strong>, <strong>music platform integration</strong>, and experimental <strong>CSS</strong> and <strong>jQuery</strong>.
        </p>

        <span class="hide">
          <strong>TL;DR</strong> An unconventional art site for an unconventional art group.
        </span>
				<a href="http://studiomosaic.org">Take a look</a>
        <div class="git"><a href="https://github.com/sternmd/studiomosaic">Github</a></div>
			</figcaption>
		</figure>
	</li>
	<li>
		<figure>
			<div><a href="http://muchartgenerator.com"><img src="images/mucharts.png" class="wow bounceInUp" alt="Mu Chart Generator"></a></div>
			<figcaption>
				<h3>/Mu/sic Chart Generator</h3>
				<span>
          <strong>Built With: </strong>Express.js, React, MongoDB, HTML5/CSS3/JS, Less</span>
        <p>
          /Mu/sic Chart Generator is a <strong>MEAN</strong> app that allows users to build and share music album flowcharts.

        <p class="third">
          The goal of this project was to collaborate with a team of 5 developers to create a <strong>RESTful</strong> app with <strong>React.js</strong>.
        </p>

        <p class="third">
          I was assigned to work on the front end. I used this project to hone my skills with <strong>Gulp</strong> and <strong>Bootstrap Less</strong>. The project also gave me the opportunity to learn more about <strong>React.js components</strong>, <strong>Last.fm API</strong>, <strong>HTML drag-and-drop</strong> functionality, and <strong>MongoDB</strong>.
        </p>

        <span class="hide">
          <strong>TL;DR</strong> Easily search for and save your fav albums.
        </span>

				<a href="http://muchartgenerator.com">Take a look</a>
        <div class="git"><a href="https://github.com/Cams-Headphones-2/Client-app">Github</a></div>
			</figcaption>
		</figure>
	</li>
  <li>
		<figure>
			<div><a href="https://caspian-app.herokuapp.com/"><img src="images/caspian.png" class="wow bounceInUp" alt="Caspian App"></a></div>
			<figcaption>
				<h3>Caspian</h3>
				<span>
          <strong>Built With: </strong>Ruby/Sinatra, HTML5/CSS3/JS
        </span>

        <p>
          Caspian is an emergency management app, for any trip. Caspian stores and presents important In-Case-of-Emergency (ICE) info and is meant to be used while outdoors or camping.
        </p>

        <p class="third">
          My first Ruby/Sinatra project. The objective of this pair programming assignment was to create a <strong>Ruby/Sinatra</strong> app that features database CRUD. We used <strong>PostgreSQL</strong> and <strong>ActiveRecord ORM</strong> to store our user data.
       </p>

       <p class="third">
         Additional features include <strong> Base64 Reader</strong> for uploading images and <strong>BCrypt</strong> for hashing passwords.
      </p>

      <span class="hide">
        <strong>TL;DR</strong> Store emergency info for safe travels.
      </span>

				<a href="https://caspian-app.herokuapp.com/">Take a look</a>
        <div class="git"><a href="https://github.com/alexekim/project_caspian">Github</a></div>
			</figcaption>
		</figure>
	</li>
	<li>
		<figure>
			<div><a href="https://sternmd.github.io/roygbiv/"><img src="images/roygbiv.png" class="wow bounceInUp" alt="ROYGBIV: The Game"></a></div>
			<figcaption>
				<h3>ROYGBIV</h3>
				<span>
          <strong>Built With: </strong>HTML5/CSS3/JS</span>
        <p>
          ROYGBIV (pronounced [ROY-JEE-BIV]) is a color-matching puzzle game. The goal of the game is for a single player to determine the brightest colored row.
        </p>

        <p class="third">
          Additional features include <strong>CSS animations</strong>, <strong>HTML data type injection</strong>, <strong>color theory, RGB, and luminance values</strong>, and <strong>JavaScript methods</strong> such as parsing, pushing, splitting, splicing, and Math.random()!
        </p>

        <span class="hide">
          <strong>TL;DR</strong> The player with the best colorvision wins!
        </span>

				<a href="https://sternmd.github.io/roygbiv/">Take a look</a>
        <div class="git"><a href="https://github.com/sternmd/sternmd.github.io/tree/master/roygbiv">Github</a></div>
			</figcaption>
		</figure>
	</li>

	<li>
		<figure>
			<div><a href="http://nimbusprintshop.etsy.com"><img src="images/bowie.jpg" class="wow bounceInUp" alt="Nimbus Prints"></a></div>
			<figcaption>
				<h3>Nimbus Prints</h3>

        <span>
          <strong>Built  With: Big Cartel, Custom CSS</strong>
        </span>

        <p>
          Founded in 2014, Nimbus Prints began as a fan art project inspired by music, film, anime, and pop culture. Today, we have evolved into an experimental printshop, striving to create original, limited edition print series with artists in Chicago.
        </p>

        <span class="hide">
          <strong>TL;DR</strong> Etsy shop that sells nostalgic t-shirts.
{'fraction_non_alphanumeric': 0.14696340144572828, 'fraction_numerical': 0.004325801126985031, 'mean_word_length': 3.1625207296849087, 'pattern_counts': {'":': 0, '<': 599, '<?xml version=': 0, '>': 599, 'https://': 22, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1520346', 'n_tokens_mistral': 5806, 'n_tokens_neox': 5365, 'n_words': 1647}