update

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

content/projects/EverytownIdealState.md

@@ -0,0 +1,13 @@
+---
+date: '2022-01-20'
+title: 'Everytown Gun Law Rankings'
+github: ''
+external: 'https://everytownresearch.org/rankings/'
+tech:
+  - WordPress
+  - Timber
+  - PHP
+  - Airtable API
+company: 'Upstatement'
+showInProjects: false
+---

content/projects/HBS.md

@@ -0,0 +1,12 @@
+---
+date: '2022-10-08'
+title: 'Harvard Business School Design System'
+github: ''
+external: ''
+tech:
+  - Storybook
+  - React
+  - TypeScript
+company: 'Upstatement'
+showInProjects: false
+---

content/projects/Pratt.md

@@ -0,0 +1,14 @@
+---
+date: '2022-08-08'
+title: 'Pratt'
+github: ''
+external: 'https://www.pratt.edu/'
+tech:
+  - WordPress
+  - Timber
+  - WordPress Multisite
+  - Gutenberg
+  - JS
+company: 'Upstatement'
+showInProjects: false
+---

content/projects/Threadable.md

@@ -0,0 +1,13 @@
+---
+date: '2022-09-08'
+title: 'Threadable'
+github: ''
+external: 'https://www.threadablebooks.com/'
+ios: 'https://apps.apple.com/us/app/threadable/id1550995547'
+tech:
+  - React Native
+  - Ruby on Rails
+  - Firebase
+company: 'Upstatement'
+showInProjects: false
+---

gatsby-config.js

@@ -20,8 +20,8 @@ module.exports = {
     {
       resolve: `gatsby-plugin-manifest`,
       options: {
-        name: 'BrittanyChiang',
-        short_name: 'BrittanyChiang',
+        name: 'Brittany Chiang',
+        short_name: 'Brittany Chiang',
         start_url: '/',
         background_color: config.colors.darkNavy,
         theme_color: config.colors.navy,

package.json

@@ -51,7 +51,7 @@
     "gatsby-transformer-remark": "^4.1.0",
     "gatsby-transformer-sharp": "^3.4.0",
     "lodash": "^4.17.19",
-    "prismjs": "^1.25.0",
+    "prismjs": "^1.27.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

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,41 @@ const StyledNav = styled.nav`
       color: var(--green);
       width: 42px;
       height: 42px;
+      position: relative;
+      z-index: 1;
+
+      .hex-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        @media (prefers-reduced-motion: no-preference) {
+          transition: var(--transition);
+        }
+      }
 
-      &:hover,
-      &:focus {
+      .logo-container {
+        position: relative;
+        z-index: 1;
         svg {
-          fill: var(--green-tint);
+          fill: none;
+          user-select: none;
+          @media (prefers-reduced-motion: no-preference) {
+            transition: var(--transition);
+          }
+          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 +185,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/components/sections/hero.js

@@ -3,17 +3,18 @@ import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import styled from 'styled-components';
 import { navDelay, loaderDelay } from '@utils';
 import { usePrefersReducedMotion } from '@hooks';
-// import { email } from '@config';
 
 const StyledHeroSection = styled.section`
   ${({ theme }) => theme.mixins.flexCenter};
   flex-direction: column;
   align-items: flex-start;
   min-height: 100vh;
+  height: 100vh;
   padding: 0;
 
-  @media (max-width: 480px) and (min-height: 700px) {
-    padding-bottom: 10vh;
+  @media (max-height: 700px) and (min-width: 700px), (max-width: 360px) {
+    height: auto;
+    padding-top: var(--nav-height);
   }
 
   h1 {
@@ -29,7 +30,7 @@ const StyledHeroSection = styled.section`
   }
 
   h3 {
-    margin-top: 10px;
+    margin-top: 5px;
     color: var(--slate);
     line-height: 0.9;
   }

src/styles/GlobalStyle.js

@@ -370,8 +370,8 @@ const GlobalStyle = createGlobalStyle`
     overflow: hidden;
     z-index: -99;
 
-    &:focus,
-    &:active {
+    &:hover,
+    &:focus {
       background-color: var(--green);
       color: var(--navy);
       top: 0;
@@ -380,6 +380,8 @@ const GlobalStyle = createGlobalStyle`
       height: auto;
       overflow: auto;
       z-index: 99;
+      box-shadow: none;
+      transform: none;
     }
   }