update transitions

_data/skills.yml

@@ -1,5 +1,6 @@
 languages:
   - item: JavaScript (ES6)
+  - item: TypeScript
   - item: HTML
   - item: CSS/Sass
   - item: Python
@@ -7,7 +8,7 @@ languages:
   - item: SQL
 
 frameworks:
-  - item: Ember
+  - item: Ember / Glimmer
   - item: Jekyll
   - item: Backbone
   - item: D3

_includes/employment-status.html

@@ -1,7 +1,7 @@
-<div class="status">
+<a class="status" href="{{site.resume}}" target="_blank">
   <div class="status__light">
     <div class="status__light__ring"></div>
     <div class="status__light__led"></div>
   </div>
   <div class="status__message">Currently seeking full-time opportunities!</div>
-</div>
+</a>

_scss/partials/_base.scss

@@ -19,10 +19,10 @@ html, body {
   line-height: 1.5;
 
   a {
+    @include transition;
     text-decoration: none;
     font-weight: 700;
     color: $black;
-    transition: all 0.25s ease-in-out;
   }
 
   ul {
@@ -141,8 +141,8 @@ html, body {
           transition: height 0.3s, opacity 0.3s, transform 0.3s;
           transform: translateY(-5px);
         }
-        &:hover:after,
+        &:hover, &:focus {
-        &:focus:after {
+          &:after {
             height: 2px;
             border-radius: 3px;
             opacity: 1;
@@ -151,14 +151,16 @@ html, body {
         }
       }
     }
+  }
 
   .arrow-link {
+    @include transition;
     font-weight: 700;
     display: inline-block;
-    transition: all 0.15s ease-in-out;
     background-color: transparent;
     white-space: nowrap;
     &:after {
+      @include transition;
       position: relative;
       bottom: 2px;
       margin-left: 15px;
@@ -169,7 +171,6 @@ html, body {
       height: 15px;
       display: inline-block;
       vertical-align: middle;
-      -webkit-transition: all .15s ease-in-out;
     }
     &:hover:after {
       transform: translateX(7px);
@@ -187,6 +188,7 @@ html, body {
   }
 
   #top-button {
+    @include transition;
     background: transparent;
     border: none;
     outline: none;
@@ -195,7 +197,6 @@ html, body {
     bottom: 25px;
     right: 10px;
     cursor: pointer;
-    transition: all 0.25s ease;
     display: none;
     @include desktop {
       bottom: 20px;
@@ -214,7 +215,6 @@ html, body {
       width: 100%;
     }
   }
-
 }
 
 

_scss/partials/_globals.scss

@@ -29,6 +29,10 @@ $mobile-width: 480px;
 $small-mobile-width: 360px;
 $tiny-mobile-width: 330px;
 
+@mixin transition {
+  transition: all 0.2s ease-in-out;
+}
+
 @mixin thirteen {
   @media screen and (max-width: #{$thirteen-inch}) {
     @content;

_scss/partials/_intro.scss

@@ -120,11 +120,11 @@
       }
     }
     .highlight-link {
+      @include transition;
       font-weight: 400;
       text-decoration: none;
       display: inline-block;
       padding: 2px 3px;
-      transition: all .2s ease-in-out;
       text-decoration: none;
       box-shadow: inset 0 -3px 0 $blue;
       &:hover {

_scss/partials/_switch.scss

@@ -47,6 +47,7 @@
       border-radius: 100px;
       position: relative;
       &:after {
+        @include transition;
         content: '';
         position: absolute;
         top: 3px;
@@ -55,7 +56,6 @@
         height: 19px;
         background: #fff;
         border-radius: 100%;
-        transition: 0.25s;
       }
     }
   }