Resume

by Spencer Smith

HTML

<h1>Spencer Smith</h1>
<div class="content">
  <section>
    <h2>Education</h2>
    <div class="details">
      <p>May 2019 &ndash; BS in Computer Science, University of Utah</p>
    <p><b>Completed Courses:</b></p>
    <ul>
      <li>CS 1410 - Object-Oriented Prog <t>Java</t></li>
      <li>CS 2420 - Intro Alg &amp; Data Struct <t>Java</t></li>
      <li>CS 3500 - Software Practice I <t>C#</t></li>
      <li>CS 3505 - Software Practice II <t>C++</t></li>
      <li>CS 3810 - Computer Organization</li>
      <li>CS 5530 - Database Systems <t>MySQL</t></li>
    </ul>
    <p>GPA: 3.27</p>
    </div>
  </section>
  <section>
    <h2>Experience</h2>
    <div class="details">
      <p><b>Web Developer</b> &ndash; Energy &amp; Geoscience Institute</p>
      <p><t>JavaScript</t><t>HTML</t><t>CSS</t><t>PHP</t><t>Ruby</t></p>
      <p>Developed a webpage and PDF parsing tool to locate incorrect project data. In charge of updating and troubleshooting three seperate department websites. Created a Chrome Extension for Salesforce to quickly generate reports.</p>
      <hr>
      <p><b>SEO Specialist</b> &ndash; Carr Printing Co.</p>
      <p><t>HTML</t><t>CSS</t><t>JavaScript</t></p>
      <p>Reduced website loading time by &frac12;. Designed and implemented a mobile version of the website.</p>
      <hr>
      <p><b>Web Designer</b> &ndash; Horizon Publishers</p>
      <p><t>HTML</t><t>WordPress</t></p>
      <p>Updated and maintained product pages. Improved website layout and design.</p>
    </div>
  </section>
  <section>
    <h2>Projects</h2>
    <div class="details">
      <p><b>Review Norm</b> - <i>In Progress</i></p>
      <p><t>Node.js</t><t>Express</t><t>MySQL</t><t>Twilio</t><t>HTML</t><t>Sass</t></p>
      <p>Web app to help businesses follow up with customers via SMS to increase their of reviews online.</p>
      <hr>
      <p><b>Taken Taken</b> - http://takentaken.com</p>
      <p><t>Node.js</t><t>JavaScript</t><t>HTML</t><t>Sass</t></p>
      <p>Super fast domain...

SCSS

$gray: #888;
$light-gray: rgba(0, 0, 0, 0.1);

body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
  background-color: white;
  margin: 30px;
}
p{
  line-height: 1.4rem;
}
li{
  line-height: 1.7rem;
}

$border: 1px solid $gray;

section:first-of-type{
  border-top: $border;
}
section{
  border-bottom: $border;
  display: inline-block;
  width: 100%;
  
  $left-width: 25%;
  $right-width: 100% - $left-width;
  h2{
    float: left;
    width: $left-width;
  }
  div.details {
    float: left;
    width: $right-width;
  }
}

// t -> span.tag
span.tag {
  background-color: $light-gray;
  color: $gray;
  font-weight: 100;
  font-size: .9rem;
  border-radius: 4px;
  padding: 2px 5px;
  margin: 0 3px;
}
hr {
  border: none;
  border-bottom: $border;
}

JavaScript

var tags = document.querySelectorAll('t');

// Convert all <t> elements into <span class="tag">
for(var i = 0; i < tags.length; i++){
	var span = document.createElement('span');
  span.classList.add('tag');
  span.innerText = tags[i].innerText;
  tags[i].outerHTML = span.outerHTML;
}