Use /static, better asset organization

Author: scraggo

src/components/Header.js

@@ -54,13 +54,13 @@ export default ({ siteTitle }) => {
       <div className="site-title-nav-container">
         <div className="site-logo">
           <Link to={'/'}>
-            <img src="/assets/site/scraggo-logo.jpg" alt="site-logo" />
+            <img src="/assets/img/site/scraggo-logo.jpg" alt="site-logo" />
           </Link>
         </div>
         <div className="site-banner-nav">
           <div className="site-banner">
             <Link to={'/'} className="">
-              <img src="/assets/site/scraggo-banner.png" alt="site-logo" />
+              <img src="/assets/img/site/scraggo-banner.png" alt="site-logo" />
             </Link>
           </div>
           <nav>

src/data/tech-projects.js

@@ -1,3 +1,8 @@
+/**
+ * @typedef {Object} ProjectData
+ * @property {string} ProjectData.imgSrc -> resolves with GraphQL
+ */
+
 const myProjects = [
   {
     title: 'Random Music Generators',

src/pages/music/discography/index.js

@@ -29,7 +29,9 @@ const getMusicServiceIcon = serviceName => {
   return (
     <img
       className="icon"
-      src={`/music-service-icons/${getServiceShortName(serviceName)}.png`}
+      src={`/assets/img/music-service-icons/${getServiceShortName(
+        serviceName
+      )}.png`}
       alt={serviceName}
     />
   );

src/styles/global.scss

@@ -17,7 +17,7 @@ body {
 
 @font-face {
   font-family: Montserrat;
-  src: url('/assets/site/Montserrat-Regular.woff') format('woff'); /* Modern Browsers */
+  src: url('/assets/font/Montserrat-Regular.woff'); /* Modern Browsers */
 }
 
 // https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/