Merge pull request bchiang7#260 from bchiang7/spring-cleaning-2023

Spring cleaning 2023

content/jobs/Apple/index.md

@@ -7,7 +7,7 @@ range: 'July - December 2017'
 url: 'https://www.apple.com/music/'
 ---
 
-- Developed and shipped highly interactive web applications for Apple Music using Ember.js
-- Built and shipped the Apple Music Extension within Facebook Messenger leveraging third-party and internal APIs
-- Architected and implemented the front-end of Apple Music's embeddable web player widget, which lets users log in and listen to full songs in the browser
-- Contributed extensively to MusicKit.js, a JavaScript framework that allows developers to add an Apple Music player to their web apps
+- Developed and styled interactive web applications for Apple Music using Ember and SCSS
+- Built and shipped the Apple Music Extension for Facebook Messenger leveraging third-party and internal API integrations
+- Architected and implemented the user interface of Apple Music's embeddable web player widget for in-browser user authorization and full song playback
+- Contributed extensively to the creation of MusicKit JS, a public-facing JavaScript SDK for embedding Apple Music players into web applications

content/jobs/Mullen/index.md

@@ -7,6 +7,6 @@ range: 'July - December 2015'
 url: 'https://us.mullenlowe.com/'
 ---
 
-- Developed and maintained code for in-house and client websites primarily using HTML, CSS, Sass, JavaScript, and jQuery
-- Manually tested sites in various browsers and mobile devices to ensure cross-browser compatibility and responsiveness
+- Developed, maintained, and shipped production code for client websites primarily using HTML, CSS, Sass, JavaScript, and jQuery
+- Performed quality assurance tests on various sites to ensure cross-browser compatibility and mobile responsiveness
 - Clients included JetBlue, Lovesac, U.S. Cellular, U.S. Department of Defense, and more

content/jobs/Scout/index.md

@@ -0,0 +1,11 @@
+---
+date: '2017-04-01'
+title: 'Developer'
+company: 'Scout Studio'
+location: 'Northeastern University'
+range: 'Spring 2016 & 2017'
+url: 'https://web.northeastern.edu/scout/'
+---
+
+- Collaborated with other student designers and engineers on pro-bono projects to create new brands, design systems, and websites for organizations in the community
+- Built and delivered technical solutions according to stakeholder business requirements

content/jobs/Starry/index.md

@@ -7,6 +7,6 @@ range: 'July - December 2016'
 url: 'https://starry.com/'
 ---
 
-- Engineered and maintained major features of Starry's customer-facing web app using ES6, Handlebars, Backbone, Marionette and CSS
-- Proposed and implemented scalable solutions to issues identified with cloud services and applications responsible for communicating with Starry Station
-- Interfaced with user experience designers and other developers to ensure thoughtful and coherent user experiences across Starry’s iOS and Android mobile apps
+- Engineered and improved major features of Starry's customer-facing Android web app using ES6, Handlebars, Backbone, Marionette, and CSS
+- Proposed and implemented scalable solutions to issues identified with cloud services and applications responsible for communicating with the Starry Station internet router
+- Collaborated with designers and other developers to ensure thoughtful and consistent user experiences across Starry’s iOS and Android mobile apps

content/jobs/Upstatement/index.md

@@ -1,12 +1,13 @@
 ---
 date: '2018-05-14'
-title: 'Engineer'
+title: 'Lead Engineer'
 company: 'Upstatement'
 location: 'Boston, MA'
 range: 'May 2018 - Present'
 url: 'https://www.upstatement.com/'
 ---
 
-- Write modern, performant, maintainable code for a diverse array of client and internal projects
-- Work with a variety of different languages, platforms, frameworks, and content management systems such as JavaScript, TypeScript, Gatsby, React, Craft, WordPress, Prismic, and Netlify
-- Communicate with multi-disciplinary teams of engineers, designers, producers, and clients on a daily basis
+- Deliver high-quality, robust production code for a diverse array of projects for clients including Harvard Business School, Everytown for Gun Safety, Pratt Institute, Koala Health, Vanderbilt University, The 19th News, and more
+- Work alongside creative directors to lead the research, development, and architecture of technical solutions to fulfill business requirements
+- Collaborate with designers, project managers, and other engineers to transform creative concepts into production realities for clients and stakeholders
+- Provide leadership within engineering department through close collaboration, knowledge shares, and mentorship

src/components/icons/hex.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+const IconHex = () => (
+  <svg id="hex" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 84 96">
+    <title>Hexagon</title>
+    <g transform="translate(-8.000000, -2.000000)">
+      <g transform="translate(11.000000, 5.000000)">
+        <polygon
+          stroke="currentColor"
+          strokeWidth="5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          points="39 0 0 22 0 67 39 90 78 68 78 23"
+          fill="currentColor"
+        />
+      </g>
+    </g>
+  </svg>
+);
+
+export default IconHex;

src/components/icons/index.js

@@ -6,6 +6,7 @@ export { default as IconFolder } from './folder';
 export { default as IconFork } from './fork';
 export { default as Icon } from './icon';
 export { default as IconGitHub } from './github';
+export { default as IconHex } from './hex';
 export { default as IconInstagram } from './instagram';
 export { default as IconLinkedin } from './linkedin';
 export { default as IconLoader } from './loader';

src/components/icons/logo.js

@@ -5,10 +5,6 @@ const IconLogo = () => (
     <title>Logo</title>
     <g transform="translate(-8.000000, -2.000000)">
       <g transform="translate(11.000000, 5.000000)">
-        <path
-          d="M45.691667,45.15 C48.591667,46.1 50.691667,48.95 50.691667,52.2 C50.691667,57.95 46.691667,61 40.291667,61 L28.541667,61 L28.541667,30.3 L39.291667,30.3 C45.691667,30.3 49.691667,33.15 49.691667,38.65 C49.691667,41.95 47.941667,44.35 45.691667,45.15 Z M33.591667,43.2 L39.241667,43.2 C42.791667,43.2 44.691667,41.85 44.691667,38.95 C44.691667,36.05 42.791667,34.8 39.241667,34.8 L33.591667,34.8 L33.591667,43.2 Z M33.591667,47.5 L33.591667,56.5 L40.191667,56.5 C43.691667,56.5 45.591667,54.75 45.591667,52 C45.591667,49.2 43.691667,47.5 40.191667,47.5 L33.591667,47.5 Z"
-          fill="currentColor"
-        />
         <polygon
           id="Shape"
           stroke="currentColor"
@@ -17,6 +13,10 @@ const IconLogo = () => (
           strokeLinejoin="round"
           points="39 0 0 22 0 67 39 90 78 68 78 23"
         />
+        <path
+          d="M45.691667,45.15 C48.591667,46.1 50.691667,48.95 50.691667,52.2 C50.691667,57.95 46.691667,61 40.291667,61 L28.541667,61 L28.541667,30.3 L39.291667,30.3 C45.691667,30.3 49.691667,33.15 49.691667,38.65 C49.691667,41.95 47.941667,44.35 45.691667,45.15 Z M33.591667,43.2 L39.241667,43.2 C42.791667,43.2 44.691667,41.85 44.691667,38.95 C44.691667,36.05 42.791667,34.8 39.241667,34.8 L33.591667,34.8 L33.591667,43.2 Z M33.591667,47.5 L33.591667,56.5 L40.191667,56.5 C43.691667,56.5 45.591667,54.75 45.591667,52 C45.591667,49.2 43.691667,47.5 40.191667,47.5 L33.591667,47.5 Z"
+          fill="currentColor"
+        />
       </g>
     </g>
   </svg>

src/components/nav.js

@@ -7,7 +7,7 @@ import { navLinks } from '@config';
 import { loaderDelay } from '@utils';
 import { useScrollDirection, usePrefersReducedMotion } from '@hooks';
 import { Menu } from '@components';
-import { IconLogo } from '@components/icons';
+import { IconLogo, IconHex } from '@components/icons';
 
 const StyledHeader = styled.header`
   ${({ theme }) => theme.mixins.flexBetween};
@@ -69,18 +69,37 @@ const StyledNav = styled.nav`
       color: var(--green);
       width: 42px;
       height: 42px;
+      position: relative;
+      z-index: 1;
 
-      &:hover,
-      &:focus {
+      .hex-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        transition: var(--transition);
+      }
+
+      .logo-container {
+        position: relative;
+        z-index: 1;
         svg {
-          fill: var(--green-tint);
+          fill: none;
+          transition: var(--transition);
+          user-select: none;
+          polygon {
+            fill: var(--navy);
+          }
         }
       }
 
-      svg {
-        fill: none;
-        transition: var(--transition);
-        user-select: none;
+      &:hover,
+      &:focus {
+        outline: 0;
+        transform: translate(-4px, -4px);
+        .hex-container {
+          transform: translate(4px, 3px);
+        }
       }
     }
   }
@@ -162,11 +181,21 @@ const Nav = ({ isHome }) => {
     <div className="logo" tabIndex="-1">
       {isHome ? (
         <a href="/" aria-label="home">
-          <IconLogo />
+          <div className="hex-container">
+            <IconHex />
+          </div>
+          <div className="logo-container">
+            <IconLogo />
+          </div>
         </a>
       ) : (
         <Link to="/" aria-label="home">
-          <IconLogo />
+          <div className="hex-container">
+            <IconHex />
+          </div>
+          <div className="logo-container">
+            <IconLogo />
+          </div>
         </Link>
       )}
     </div>

src/components/sections/about.js

@@ -66,10 +66,10 @@ const StyledPic = styled.div`
     &:hover,
     &:focus {
       outline: 0;
+      transform: translate(-4px, -4px);
 
       &:after {
-        top: 15px;
-        left: 15px;
+        transform: translate(8px, 8px);
       }
 
       .img {
@@ -106,8 +106,8 @@ const StyledPic = styled.div`
 
     &:after {
       border: 2px solid var(--green);
-      top: 20px;
-      left: 20px;
+      top: 14px;
+      left: 14px;
       z-index: -1;
     }
   }

src/styles/mixins.js

@@ -16,8 +16,9 @@ const button = css`
   &:hover,
   &:focus,
   &:active {
-    background-color: var(--green-tint);
     outline: none;
+    box-shadow: 4px 4px 0 0 var(--green);
+    transform: translate(-5px, -5px);
   }
   &:after {
     display: none !important;
@@ -102,8 +103,9 @@ const mixins = {
     &:hover,
     &:focus,
     &:active {
-      background-color: var(--green-tint);
       outline: none;
+      box-shadow: 3px 3px 0 0 var(--green);
+      transform: translate(-4px, -4px);
     }
     &:after {
       display: none !important;
@@ -125,8 +127,9 @@ const mixins = {
     &:hover,
     &:focus,
     &:active {
-      background-color: var(--green-tint);
       outline: none;
+      box-shadow: 4px 4px 0 0 var(--green);
+      transform: translate(-5px, -5px);
     }
     &:after {
       display: none !important;