Redesign changes

adamgraham · Oct 13, 2024 · 5143d48 · 5143d48
1 parent 68a6f0d
commit 5143d48
Show file tree

Hide file tree

Showing 53 changed files with 1,970 additions and 1,317 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -16,3 +16,12 @@ export const onRouteUpdate = () => {
     updateFavicon(e.matches);
   });
 };
+
+export const onInitialClientRender = () => {
+  const storage = localStorage.getItem('theme');
+  const theme = storage && JSON.parse(storage);
+  if (theme) {
+    const app = document.querySelector('.app');
+    app.setAttribute('data-theme', theme);
+  }
+};
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -13,8 +13,8 @@ module.exports = {
         short_name: 'Adam Graham',
         start_url: '/',
         display: 'standalone',
-        theme_color: '#101214',
-        background_color: '#101214',
+        theme_color: '#282e34',
+        background_color: '#ffffff',
         icon: 'static/logo512.png',
       },
     },

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -14,99 +14,113 @@ exports.onCreateWebpackConfig = ({ actions }) => {
 exports.createSchemaCustomization = ({ actions }) => {
   const { createTypes } = actions;
   const typeDefs = `
-    type ProjectDetail {
-      key: String!
-      value: String!
-    }
-    type ProjectButton {
-      name: String!
-      link: String!
-      icon: String
-    }
-    type ProjectSection {
-      title: String
-      link: String
-      mainImage: File @fileByRelativePath
-      mainVideo: String
-      paragraphs: [String]
-      gallery: [File] @fileByRelativePath
-      videos: [String]
-    }
     type ArtJson implements Node {
       id: String!
       category: String!
       title: String!
-      date: String
       description: String
       description_short: String
       description_long: [String]
+      date: String
+      role: String
+      tech: [String]
       image: File! @fileByRelativePath
       imageAltText: String
       imageBorder: String
-      details: [ProjectDetail]
       buttons: [ProjectButton]
       sections: [ProjectSection]
     }
     type GamesJson implements Node {
       id: String!
       category: String!
       title: String!
-      date: String
       description: String
       description_short: String
       description_long: [String]
+      date: String
+      role: String
+      tech: [String]
       image: File! @fileByRelativePath
       imageAltText: String
       imageBorder: String
-      details: [ProjectDetail]
       buttons: [ProjectButton]
       sections: [ProjectSection]
     }
     type PresentationsJson implements Node {
       id: String!
       category: String!
       title: String!
-      date: String
       description: String
       description_short: String
       description_long: [String]
+      date: String
+      role: String
+      tech: [String]
       image: File! @fileByRelativePath
       imageAltText: String
       imageBorder: String
-      details: [ProjectDetail]
       buttons: [ProjectButton]
       sections: [ProjectSection]
     }
     type TechJson implements Node {
       id: String!
       category: String!
       title: String!
-      date: String
       description: String
       description_short: String
       description_long: [String]
+      date: String
+      role: String
+      tech: [String]
       image: File! @fileByRelativePath
       imageAltText: String
       imageBorder: String
-      details: [ProjectDetail]
       buttons: [ProjectButton]
       sections: [ProjectSection]
     }
     type WebsitesJson implements Node {
       id: String!
       category: String!
       title: String!
-      date: String
       description: String
       description_short: String
       description_long: [String]
+      date: String
+      role: String
+      tech: [String]
       image: File! @fileByRelativePath
       imageAltText: String
       imageBorder: String
-      details: [ProjectDetail]
       buttons: [ProjectButton]
       sections: [ProjectSection]
     }
+    type ProjectsJson implements Node {
+      title: String!
+      projects: [ProjectsItem]
+    }
+    type ProjectsItem {
+      title: String
+      description: String
+      date: String
+      link: String
+      externalLink: String
+      tags: [String]
+    }
+    type ProjectButton {
+      name: String!
+      url: String!
+      icon: String
+    }
+    type ProjectSection {
+      title: String
+      link: String
+      mainImage: File @fileByRelativePath
+      mainImageLink: String
+      mainVideo: String
+      paragraphs: [String]
+      gallery: [File] @fileByRelativePath
+      videos: [String]
+    }
   `;
   createTypes(typeDefs);
 };
diff --git a/src/components/Dock.js b/src/components/Dock.js
@@ -0,0 +1,89 @@
+import '../styles/dock.css';
+import { Icon, Link, SocialIcon } from '@zigurous/react-components';
+import { Link as GatsbyLink } from 'gatsby';
+import React from 'react';
+import { dockLinks, socialLinks } from '../links';
+
+const Dock = ({ theme, toggleTheme, secondaryLinks }) => {
+  return (
+    <div className="dock">
+      <div className="dock__container" id="primary">
+        <div className="dock__section" id="navigation">
+          {dockLinks.map((link) => (
+            <DockItem link={link} key={link.key} />
+          ))}
+        </div>
+        <div className="dock__section" id="socials">
+          {socialLinks.map((link) => (
+            <DockItem link={link} key={link.key} external />
+          ))}
+        </div>
+        <div className="dock__section" id="gallery">
+          <div className="dock__item" id="Previous">
+            <button
+              onClick={() => {
+                if (!document) return;
+                const e = new Event('previous_slide');
+                document.dispatchEvent(e);
+              }}
+            >
+              <Icon name="chevron_left" />
+            </button>
+            <div className="dock__tooltip">Previous</div>
+          </div>
+          <div className="dock__item" id="Next">
+            <button
+              onClick={() => {
+                if (!document) return;
+                const e = new Event('next_slide');
+                document.dispatchEvent(e);
+              }}
+            >
+              <Icon name="chevron_right" />
+            </button>
+            <div className="dock__tooltip">Next</div>
+          </div>
+        </div>
+        <div className="dock__section" id="theme">
+          <div className="dock__item" id="Theme">
+            <button onClick={toggleTheme}>
+              <Icon name={theme === 'dark' ? 'light_mode' : 'dark_mode'} />
+            </button>
+            <div className="dock__tooltip">
+              {theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
+            </div>
+          </div>
+        </div>
+      </div>
+      {secondaryLinks && (
+        <div className="dock__container" id="secondary">
+          {secondaryLinks.map((link) => (
+            <DockItem link={link} key={link.key || link.name} external />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const DockItem = ({ link, external = false }) => {
+  return (
+    <div className="dock__item" id={link.name}>
+      <Link
+        ElementType={link.ElementType || (external ? 'a' : GatsbyLink)}
+        external={external}
+        to={link.to || link.url}
+        unstyled
+      >
+        {link.icon ? (
+          <Icon name={link.icon} />
+        ) : (
+          <SocialIcon iconName={link.key} innerPadding={0} size={18} />
+        )}
+      </Link>
+      <div className="dock__tooltip">{link.name}</div>
+    </div>
+  );
+};
+
+export default Dock;
diff --git a/src/components/Gallery.js b/src/components/Gallery.js
@@ -1,25 +1,57 @@
 import '../styles/gallery.css';
 import { useMediaQuery } from '@zigurous/react-components';
 import classNames from 'classnames';
+import { navigate } from 'gatsby';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
-import GalleryContext from './GalleryContext';
-import Slide from './Slide';
+import React, { useCallback, useEffect } from 'react';
+import Slide, { SlideProps } from './Slide';
+import { getSessionIndex, setSessionIndex } from '../utils/session';
 
-const Gallery = ({ className }) => {
-  const context = useContext(GalleryContext);
+const Gallery = ({ category, location, slides = [] }) => {
   const vertical = useMediaQuery('(max-width: 1365px)');
+
+  const urlParams = new URLSearchParams(location?.search);
+  const slideIndex =
+    (urlParams.has('index')
+      ? Number.parseInt(urlParams.get('index')) || 0
+      : getSessionIndex(category)) % slides.length;
+
+  const currentSlide =
+    slideIndex >= 0 && slideIndex < slides.length && slides[slideIndex];
+
+  const setSlideIndex = useCallback(
+    (index) => {
+      if (index >= slides.length) index = 0;
+      if (index < 0) index = slides.length - 1;
+      setSessionIndex(category, index);
+      navigate(`/${category}?index=${index}`, { replace: true });
+    },
+    [category, slides, slideIndex]
+  );
+
+  useEffect(() => {
+    if (!document) return;
+    const prev = () => setSlideIndex(slideIndex - 1);
+    const next = () => setSlideIndex(slideIndex + 1);
+    document.addEventListener('previous_slide', prev);
+    document.addEventListener('next_slide', next);
+    return () => {
+      document.removeEventListener('previous_slide', prev);
+      document.removeEventListener('next_slide', next);
+    };
+  }, [slideIndex]);
+
   return (
     <div
       className={classNames('gallery', {
         'gallery--vertical': vertical,
-        className,
       })}
+      id={category}
     >
       <button
         aria-label="Previous Slide"
         className="gallery__button previous"
-        onClick={() => context.setSlideIndex(context.slideIndex - 1)}
+        onClick={() => setSlideIndex(slideIndex - 1)}
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -31,12 +63,12 @@ const Gallery = ({ className }) => {
         </svg>
       </button>
       <div className="gallery__slides">
-        {context.currentSlide && <Slide slide={context.currentSlide} />}
+        {currentSlide && <Slide slide={currentSlide} />}
       </div>
       <button
         aria-label="Next Slide"
         className="gallery__button next"
-        onClick={() => context.setSlideIndex(context.slideIndex + 1)}
+        onClick={() => setSlideIndex(slideIndex + 1)}
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -52,7 +84,9 @@ const Gallery = ({ className }) => {
 };
 
 Gallery.propTypes = {
-  className: PropTypes.string,
+  category: PropTypes.string,
+  location: PropTypes.object,
+  slides: PropTypes.arrayOf(SlideProps),
 };
 
 export default Gallery;
diff --git a/src/components/GalleryContext.js b/src/components/GalleryContext.js