I got a job!

.eslintrc

@@ -1,10 +1,3 @@
 {
-  "root": true,
-  "extends": "starry",
-  "rules": {
-    "starry/space-in-parens": ["error", "never"],
-    "starry/computed-property-spacing": ["error", "never"],
-    "object-curly-spacing": [2, "never"],
-    "array-bracket-spacing": ["error", "never"]
-  }
+  "extends": "@nuscout"
 }

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('@nuscout/prettier-config');

_data/skills.yml

@@ -8,10 +8,10 @@ languages:
   - item: SQL
 
 frameworks:
-  - item: Ember / Glimmer
+  - item: Ember & Glimmer
+  - item: React
   - item: Jekyll
   - item: Node
-  - item: React
   - item: Backbone
   - item: D3
   - item: Cordova
@@ -29,5 +29,5 @@ design:
   - item: InDesign
   - item: InVision
   - item: Prototyping
+  - item: Wireframing
   - item: User Testing
-  - item: Typography

_includes/background.html

@@ -1,12 +1,24 @@
 <section class="section background">
   <div class="section__title">Background</div>
   <div class="section__content">
-    <p>I'm a fifth year student at <a class="underline-link" href="http://www.ccis.northeastern.edu/" target="_blank">Northeastern University</a> expecting to graduate in May 2018. Thanks to Northeastern's co-op program, I've had the privilege of completing three wonderful six-month co-ops at <a class="underline-link" href="https://us.mullenlowe.com/" target="_blank">MullenLowe U.S.</a>, <a class="underline-link" href="https://starry.com/" target="_blank">Starry</a>, and <a class="underline-link" href="https://www.apple.com/music/" target="_blank">Apple Music</a>.</p>
+    <p>
+      I'm a fifth year student at
+      <a class="underline-link" href="http://www.ccis.northeastern.edu/" target="_blank">Northeastern University</a> expecting to graduate in May 2018. Thanks to Northeastern's co-op program, I've had the
+      privilege of completing three wonderful six-month co-ops at
+      <a class="underline-link" href="https://us.mullenlowe.com/" target="_blank">MullenLowe U.S.</a>,
+      <a class="underline-link" href="https://starry.com/" target="_blank">Starry</a>, and
+      <a class="underline-link" href="https://www.apple.com/music/" target="_blank">Apple Music</a>. After graduating from Northeastern, I'll be joining
+      <a class="underline-link" href="https://www.upstatement.com/" target="_blank">Upstatement</a> as an Engineer.
+    </p>
 
-    <p>As a front-end engineer, I enjoy bridging the gap between engineering and design &mdash; combining my technical knowledge with my keen eye for design to create a beautiful product. My goal is to always build applications that are scalable and efficient under the hood while providing engaging, pixel-perfect user experiences.</p>
+    <p>As a front-end engineer, I enjoy bridging the gap between engineering and design &mdash; combining my technical knowledge
+      with my keen eye for design to create a beautiful product. My goal is to always build applications that are scalable
+      and efficient under the hood while providing engaging, pixel-perfect user experiences.</p>
 
-    <p><strong>When I'm not in front of a computer screen</strong>, I'm probably snowboarding, cruising around on my penny board, or crossing off another item on my bucket list.</p>
+    <p>
+      <strong>When I'm not in front of a computer screen</strong>, I'm probably snowboarding, cruising around on my penny board,
+      or crossing off another item on my bucket list.</p>
 
-    {% include employment-status.html %}
+    <!-- {% include employment-status.html %} -->
   </div>
 </section>

_includes/experience.html

@@ -5,7 +5,9 @@
       {% for job in site.data.experience %}
       <div class="job">
         <div class="time-place">
-          <div class="job__company"><a href="{{job.url}}" target="_blank">{{job.company}}</a></div>
+          <div class="job__company">
+            <a href="{{job.url}}" target="_blank">{{job.company}}</a>
+          </div>
           <div class="job__time">{{job.time}}</div>
         </div>
         <div class="job__position">{{job.position}}</div>

_includes/featured-projects.html

@@ -3,35 +3,54 @@
   <div class="section__content">
     <div class="project interventions">
       <figure class="project__pic">
-        <a href="https://interventions.design/" target="_blank"><img src="{{site.baseurl}}/img/featured/interventions/interventions.png" alt=""></a>
+        <a href="https://interventions.design/" target="_blank">
+          <img src="{{site.baseurl}}/img/featured/interventions/interventions.png" alt="">
+        </a>
       </figure>
       <figcaption class="project__caption">
-        <div class="project__name"><a href="https://interventions.design/" target="_blank">Interventions</a></div>
-        <p>Interactive marketing website for Northeastern's first annual student-led design conference, Interventions. Coming in 2018!</p>
+        <div class="project__name">
+          <a href="https://interventions.design/" target="_blank">Interventions</a>
+        </div>
+        <p>Interactive marketing website for Northeastern's first annual student-led design conference, Interventions. Coming
+          in 2018!</p>
       </figcaption>
     </div>
 
     <div class="project screentime">
       <figure class="project__pic phones">
         <a href="https://play.google.com/store/apps/details?id=com.starry.management" target="_blank">
-          <div class="phone"><img src="{{site.baseurl}}/img/featured/screentime/screentime1.png" alt=""></div>
-          <div class="phone"><img src="{{site.baseurl}}/img/featured/screentime/screentime3.png" alt=""></div>
-          <div class="phone"><img src="{{site.baseurl}}/img/featured/screentime/screentime4.png" alt=""></div>
+          <div class="phone">
+            <img src="{{site.baseurl}}/img/featured/screentime/screentime1.png" alt="">
+          </div>
+          <div class="phone">
+            <img src="{{site.baseurl}}/img/featured/screentime/screentime3.png" alt="">
+          </div>
+          <div class="phone">
+            <img src="{{site.baseurl}}/img/featured/screentime/screentime4.png" alt="">
+          </div>
         </a>
       </figure>
       <figcaption class="project__caption">
-        <div class="project__name"><a href="https://play.google.com/store/apps/details?id=com.starry.management" target="_blank">ScreenTime 2.0</a></div>
-        <p>Starry Station feature that provided users with the ability to easily filter content, pause the internet, and even create custom rules for blocking apps like Facebook and Twitter right from their phones.</p>
+        <div class="project__name">
+          <a href="https://play.google.com/store/apps/details?id=com.starry.management" target="_blank">ScreenTime 2.0</a>
+        </div>
+        <p>Starry Station feature that provided users with the ability to easily filter content, pause the internet, and even
+          create custom rules for blocking apps like Facebook and Twitter right from their phones.</p>
       </figcaption>
     </div>
 
     <div class="project v2">
       <figure class="project__pic">
-        <a href="http://brittanychiang.com/v2" target="_blank"><img src="{{site.baseurl}}/img/featured/v2/v2.png" alt=""></a>
+        <a href="http://brittanychiang.com/v2" target="_blank">
+          <img src="{{site.baseurl}}/img/featured/v2/v2.png" alt="">
+        </a>
       </figure>
       <figcaption class="project__caption">
-        <div class="project__name"><a href="http://brittanychiang.com/v2" target="_blank">Personal Website V2</a></div>
-        <p>Second iteration of my personal website. Designed and developed with a conscious effort to avoid using any superfluous frameworks like Bootstrap.</p>
+        <div class="project__name">
+          <a href="http://brittanychiang.com/v2" target="_blank">Personal Website V2</a>
+        </div>
+        <p>Second iteration of my personal website. Designed and developed with a conscious effort to avoid using any superfluous
+          frameworks like Bootstrap.</p>
       </figcaption>
     </div>
   </div>

_includes/intro.html

@@ -1,11 +1,18 @@
 <header class="intro">
-  <h1 class="intro__hello">Hello! <span class="emoji wave-hand animated"></span></h1>
+  <h1 class="intro__hello">Hello!
+    <span class="emoji wave-hand animated"></span>
+  </h1>
 
-  <h2 class="intro__tagline">I'm <span class="name">Brittany Chiang</span>, a design-minded front-end software engineer focused on building beautiful interfaces &amp; experiences <span class="emoji technologist"></span></h2>
+  <h2 class="intro__tagline">I'm
+    <span class="name">Brittany Chiang</span>, a design-minded front-end software engineer focused on building beautiful interfaces &amp; experiences
+    <span class="emoji technologist"></span>
+  </h2>
 
   <h3 class="intro__contact">
     <span>Get in touch </span>
     <span class="emoji pointer"></span>
-    <span><a href="mailto:brittany.chiang@gmail.com" target="_blank" class="highlight-link">brittany.chiang@gmail.com</a></span>
+    <span>
+      <a href="mailto:brittany.chiang@gmail.com" target="_blank" class="highlight-link">brittany.chiang@gmail.com</a>
+    </span>
   </h3>
 </header>

_includes/other-projects.html

@@ -3,7 +3,9 @@
   <div class="section__content">
     {% for project in site.data.other-projects %}
     <div class="project">
-      <div class="project__name"><a href="{{project.url}}" target="_blank" class="arrow-link">{{project.name}}</a></div>
+      <div class="project__name">
+        <a href="{{project.url}}" target="_blank" class="arrow-link">{{project.name}}</a>
+      </div>
       <p>{{project.description}}</p>
       <div class="project__used">
         {% for item in project.used %}

_includes/switch.html

@@ -1,7 +1,7 @@
 <div class="switch-wrapper">
   <div class="sun"></div>
   <div class="toggle-wrapper">
-    <input id="switch" type="checkbox"/>
+    <input id="switch" type="checkbox" />
     <label for="switch" id="toggle">Toggle</label>
   </div>
   <div class="moon"></div>

_includes/top-button.html

@@ -1,3 +1,3 @@
 <button id="top-button">
   <img src="{{site.baseurl}}/img/emojis/pointing-up.png" alt="">
-</button>
+</button>

_scripts/main.js

@@ -66,7 +66,7 @@ $(function() {
     duration: 600,
     easing: 'cubic-bezier(.694,0,.335,1)',
     scale: 1,
-    viewFactor: 0.3
+    viewFactor: 0.3,
   });
 
   sr.reveal('.background');

_scss/partials/_base.scss

@@ -1,9 +1,11 @@
-*,
-*:after,
-*:before {
+html {
   box-sizing: border-box;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
 }
 
 ::selection {
@@ -14,27 +16,14 @@ html,
 body {
   margin: 0;
   padding: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   background-color: $white;
   color: $dark-grey;
   font-family: $Apercu;
   line-height: 1.5;
-
-  a {
-    @include transition;
-    text-decoration: none;
-    font-weight: 700;
-    color: $black;
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-  }
-
-  strong {
-    font-weight: 700;
-    color: $black;
-  }
+  width: 100%;
+  height: 100%;
 
   &.night {
     background-color: $night;
@@ -66,157 +55,186 @@ body {
       background: $off-white;
     }
   }
+}
 
-  .emoji {
-    display: inline-block;
-    vertical-align: text-top;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
+a {
+  @include transition;
+  text-decoration: none;
+  font-weight: 700;
+  color: inherit;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+img {
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+strong {
+  font-weight: 700;
+  color: $black;
+}
+
+.emoji {
+  display: inline-block;
+  vertical-align: text-top;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.section {
+  display: flex;
+  justify-content: center;
+  padding: 100px 170px;
+  @include thirteen {
+    padding: 100px;
   }
-
-  .section {
-    display: flex;
-    justify-content: center;
-    padding: 100px 170px;
-    @include thirteen {
-      padding: 100px;
-    }
+  @include desktop {
+    padding: 50px;
+  }
+  @include tablet {
+    display: block;
+  }
+  @include mobile {
+    padding: 50px 35px;
+  }
+  &__title {
+    flex-shrink: 0;
+    width: 200px;
+    margin-right: 70px;
+    color: $blue;
+    text-transform: uppercase;
+    text-align: right;
+    font-weight: 700;
+    letter-spacing: 2px;
     @include desktop {
-      padding: 50px;
+      margin-right: 50px;
+    }
+    @include little-desktop {
+      width: 150px;
     }
     @include tablet {
-      display: block;
-    }
-    @include mobile {
-      padding: 50px 35px;
-    }
-    &__title {
-      flex-shrink: 0;
-      width: 200px;
-      margin-right: 70px;
-      color: $blue;
-      text-transform: uppercase;
-      text-align: right;
-      font-weight: 700;
-      letter-spacing: 2px;
-      @include desktop {
-        margin-right: 50px;
-      }
-      @include little-desktop {
-        width: 150px;
-      }
-      @include tablet {
-        text-align: left;
-        width: auto;
-      }
-    }
-    &__content {
-      font-weight: 300;
-      font-size: 1rem;
-      width: 100%;
-      max-width: 650px;
-      @include tablet {
-        padding-top: 30px;
-        padding-left: 50px;
-      }
-      @include mobile {
-        padding-left: 30px;
-      }
-      p {
-        margin-top: 0;
-        margin-bottom: 25px;
-      }
-      .underline-link {
-        position: relative;
-        display: inline-block;
-        &:after {
-          position: absolute;
-          top: 100%;
-          left: 0;
-          width: 100%;
-          height: 1px;
-          background: $black;
-          content: '';
-          opacity: 0;
-          transition: height 0.3s, opacity 0.3s, transform 0.3s;
-          transform: translateY(-5px);
-        }
-        &:hover,
-        &:focus {
-          &:after {
-            height: 2px;
-            border-radius: 3px;
-            opacity: 1;
-            transform: translateY(-2px);
-          }
-        }
-      }
+      text-align: left;
+      width: auto;
     }
   }
-
-  .arrow-link {
-    @include transition;
-    font-weight: 700;
-    display: inline-block;
-    background-color: transparent;
-    white-space: nowrap;
-    &:after {
-      @include transition;
+  &__content {
+    font-weight: 300;
+    font-size: 1rem;
+    width: 100%;
+    max-width: 650px;
+    @include tablet {
+      padding-top: 30px;
+      padding-left: 50px;
+    }
+    @include mobile {
+      padding-left: 30px;
+    }
+    p {
+      margin-top: 0;
+      margin-bottom: 25px;
+    }
+    .underline-link {
       position: relative;
-      bottom: 2px;
-      margin-left: 15px;
-      content: '';
-      background: url('../img/arrow.png') no-repeat center;
-      background-size: 100%;
-      width: 15px;
-      height: 15px;
       display: inline-block;
-      vertical-align: middle;
-    }
-    &:hover:after {
-      transform: translateX(7px);
+      &:after {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background: $black;
+        content: '';
+        opacity: 0;
+        transition: height 0.3s, opacity 0.3s, transform 0.3s;
+        transform: translateY(-5px);
+      }
+      &:hover,
+      &:focus {
+        &:after {
+          height: 2px;
+          border-radius: 3px;
+          opacity: 1;
+          transform: translateY(-2px);
+        }
+      }
     }
   }
+}
 
-  .small {
-    font-family: 'Inconsolata', monospace;
-    font-size: 0.85rem;
-    display: inline-block;
-    margin-top: 15px;
-    &:after {
-      display: none;
-    }
-  }
-
-  #top-button {
+.arrow-link {
+  @include transition;
+  font-weight: 700;
+  display: inline-block;
+  background-color: transparent;
+  white-space: nowrap;
+  &:after {
     @include transition;
-    background: transparent;
-    border: none;
-    outline: none;
-    width: 40px;
-    position: fixed;
-    bottom: 25px;
-    right: 10px;
-    cursor: pointer;
-    display: none;
-    @include desktop {
-      bottom: 20px;
-      right: 7px;
-      width: 35px;
-    }
-    @include mobile {
-      bottom: 15px;
-      right: 3px;
-    }
+    position: relative;
+    bottom: 2px;
+    margin-left: 15px;
+    content: '';
+    background: url('../img/arrow.png') no-repeat center;
+    background-size: 100%;
+    width: 15px;
+    height: 15px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+  &:hover:after {
+    transform: translateX(7px);
+  }
+}
 
-    &:hover,
-    &:focus {
-      transform: translateY(-10px);
-    }
-    img {
-      width: 100%;
-    }
+.small {
+  font-family: 'Inconsolata', monospace;
+  font-size: 0.85rem;
+  display: inline-block;
+  margin-top: 15px;
+  &:after {
+    display: none;
+  }
+}
+
+#top-button {
+  @include transition;
+  background: transparent;
+  border: none;
+  outline: none;
+  width: 40px;
+  position: fixed;
+  bottom: 25px;
+  right: 10px;
+  cursor: pointer;
+  display: none;
+  @include desktop {
+    bottom: 20px;
+    right: 7px;
+    width: 35px;
+  }
+  @include mobile {
+    bottom: 15px;
+    right: 3px;
+  }
+
+  &:hover,
+  &:focus {
+    transform: translateY(-10px);
+  }
+  img {
+    width: 100%;
   }
 }
 

js/main.js

@@ -1,7 +1,7 @@
 $(function() {
   const d = new Date();
   const hours = d.getHours();
-  const night = (hours >= 19) || (hours <= 7); // between 7pm and 7am
+  const night = hours >= 19 || hours <= 7; // between 7pm and 7am
   const body = document.querySelector('body');
   const toggle = document.getElementById('toggle');
   const input = document.getElementById('switch');
@@ -20,22 +20,24 @@ $(function() {
     }
   });
 
-  console.log('added a line here');
-
   const introHeight = document.querySelector('.intro').offsetHeight;
   const topButton = document.getElementById('top-button');
   const $topButton = $('#top-button');
 
-  window.addEventListener('scroll', function() {
-    if (window.scrollY > introHeight) {
-      $topButton.fadeIn();
-    } else {
-      $topButton.fadeOut();
-    }
-  }, false);
+  window.addEventListener(
+    'scroll',
+    function() {
+      if (window.scrollY > introHeight) {
+        $topButton.fadeIn();
+      } else {
+        $topButton.fadeOut();
+      }
+    },
+    false
+  );
 
   topButton.addEventListener('click', function() {
-    $('html, body').animate({scrollTop: 0}, 500);
+    $('html, body').animate({ scrollTop: 0 }, 500);
   });
 
   const hand = document.querySelector('.emoji.wave-hand');
@@ -47,7 +49,9 @@ $(function() {
     }, 2000);
   }
 
-  setTimeout(function() { waveOnLoad(); }, 1000);
+  setTimeout(function() {
+    waveOnLoad();
+  }, 1000);
 
   hand.addEventListener('mouseover', function() {
     hand.classList.add('wave');
@@ -57,19 +61,17 @@ $(function() {
     hand.classList.remove('wave');
   });
 
-
   window.sr = ScrollReveal({
     reset: false,
     duration: 600,
     easing: 'cubic-bezier(.694,0,.335,1)',
     scale: 1,
-    viewFactor: 0.3
+    viewFactor: 0.3,
   });
 
   sr.reveal('.background');
   sr.reveal('.skills');
-  sr.reveal('.experience', {viewFactor: 0.2});
-  sr.reveal('.featured-projects', {viewFactor: 0.1});
-  sr.reveal('.other-projects', {viewFactor: 0.05});
-
+  sr.reveal('.experience', { viewFactor: 0.2 });
+  sr.reveal('.featured-projects', { viewFactor: 0.1 });
+  sr.reveal('.other-projects', { viewFactor: 0.05 });
 });

package.json

@@ -1,7 +1,8 @@
 {
   "name": "brittanychiang.com",
   "version": "0.0.0",
-  "description": "Design-minded front-end software engineer focused on building beautiful interfaces and experiences",
+  "description":
+    "Design-minded front-end software engineer focused on building beautiful interfaces and experiences",
   "main": "gulpfile.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -9,14 +10,13 @@
   "author": "Brittany Chiang",
   "license": "ISC",
   "devDependencies": {
-    "browser-sync": "^2.21.0",
-    "eslint-config-starry": "7.0.0",
-    "eslint-plugin-starry": "5.0.0",
+    "@nuscout/eslint-config": "^0.2.1",
+    "browser-sync": "^2.23.6",
     "gulp": "3.9.1",
-    "gulp-autoprefixer": "^4.0.0",
+    "gulp-autoprefixer": "^5.0.0",
     "gulp-clean-css": "3.9.0",
-    "gulp-eslint": "4.0.0",
-    "gulp-imagemin": "4.0.0",
+    "gulp-eslint": "4.0.2",
+    "gulp-imagemin": "4.1.0",
     "gulp-sass": "^3.1.0",
     "gulp-uglify": "3.0.0"
   },