update to Gatsby v3

package.json

@@ -20,25 +20,25 @@
     "new": "babel-node ./scripts/new.js"
   },
   "dependencies": {
-    "@giphy/js-fetch-api": "^2.2.2",
+    "@giphy/js-fetch-api": "^2.4.0",
     "axios": "^0.21.1",
     "file-saver": "^2.0.5",
-    "gatsby": "^2.32.4",
-    "gatsby-image": "^2.11.0",
-    "gatsby-plugin-manifest": "^2.12.0",
+    "gatsby": "^3.0.4",
+    "gatsby-image": "^3.0.0",
+    "gatsby-plugin-manifest": "^3.0.0",
     "gatsby-plugin-matomo": "^0.9.0",
-    "gatsby-plugin-offline": "^3.10.1",
-    "gatsby-plugin-postcss": "^3.6.0",
-    "gatsby-plugin-react-helmet": "^3.9.0",
-    "gatsby-plugin-sharp": "^2.13.4",
-    "gatsby-plugin-sitemap": "^2.11.0",
-    "gatsby-plugin-svgr": "^2.1.0",
-    "gatsby-plugin-use-dark-mode": "^1.2.0",
-    "gatsby-plugin-webpack-size": "^1.0.0",
-    "gatsby-source-filesystem": "^2.10.0",
-    "gatsby-transformer-json": "^2.10.0",
-    "gatsby-transformer-sharp": "^2.11.0",
-    "gatsby-transformer-yaml": "^2.10.0",
+    "gatsby-plugin-offline": "^4.0.0",
+    "gatsby-plugin-postcss": "^4.0.0",
+    "gatsby-plugin-react-helmet": "^4.0.0",
+    "gatsby-plugin-sharp": "^3.0.1",
+    "gatsby-plugin-sitemap": "^3.0.0",
+    "gatsby-plugin-svgr": "^3.0.0-beta.0",
+    "gatsby-plugin-use-dark-mode": "^1.3.0",
+    "gatsby-plugin-webpack-size": "^2.0.1",
+    "gatsby-source-filesystem": "^3.0.0",
+    "gatsby-transformer-json": "^3.0.0",
+    "gatsby-transformer-sharp": "^3.0.0",
+    "gatsby-transformer-yaml": "^3.0.0",
     "intersection-observer": "^0.12.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
@@ -55,25 +55,25 @@
     "vcf": "^2.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.1",
-    "@babel/eslint-parser": "^7.13.4",
-    "@babel/node": "^7.13.0",
-    "@babel/preset-env": "^7.12.17",
+    "@babel/core": "^7.13.10",
+    "@babel/eslint-parser": "^7.13.10",
+    "@babel/node": "^7.13.10",
+    "@babel/preset-env": "^7.13.10",
     "@loadable/component": "^5.14.1",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
-    "@welldone-software/why-did-you-render": "^6.0.5",
-    "babel-preset-gatsby": "^0.12.1",
+    "@welldone-software/why-did-you-render": "^6.1.0",
+    "babel-preset-gatsby": "^0.12.2",
     "chalk": "^4.1.0",
-    "eslint": "^7.20.0",
-    "eslint-config-prettier": "^8.0.0",
+    "eslint": "^7.21.0",
+    "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-graphql": "^4.0.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-testing-library": "^3.10.1",
-    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.20",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.21",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-canvas-mock": "^2.3.1",
@@ -83,9 +83,9 @@
     "prepend": "^1.0.2",
     "prettier": "^2.2.1",
     "slugify": "^1.4.7",
-    "stylelint": "^13.11.0",
+    "stylelint": "^13.12.0",
     "stylelint-config-prettier": "^8.0.2",
-    "stylelint-prettier": "^1.1.2"
+    "stylelint-prettier": "^1.2.0"
   },
   "browserslist": [
     ">0.2%",

src/components/Layout.jsx

@@ -7,7 +7,7 @@ import HostnameCheck from './atoms/HostnameCheck'
 import ThemeSwitch from './molecules/ThemeSwitch'
 import Header from './organisms/Header'
 import Footer from './organisms/Footer'
-import styles from './Layout.module.css'
+import { screen } from './Layout.module.css'
 import { useMeta } from '../hooks/use-meta'
 
 // https://github.com/welldone-software/why-did-you-render
@@ -49,7 +49,7 @@ export default function Layout({ children, location }) {
           delayChildren={timeout}
         >
           <Header minimal={!isHomepage} hide={isResume} />
-          <main className={styles.screen}>{children}</main>
+          <main className={screen}>{children}</main>
         </RoutesContainer>
       </PoseGroup>
 

src/components/atoms/Button.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styles from './Button.module.css'
+import { button } from './Button.module.css'
 
 const Button = (props) => (
-  <a className={styles.button} {...props}>
+  <a className={button} {...props}>
     {props.children}
   </a>
 )

src/components/atoms/FullWidth.jsx

@@ -1,10 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styles from './FullWidth.module.css'
+import { fullWidth } from './FullWidth.module.css'
 
-const FullWidth = ({ children }) => (
-  <div className={styles.fullWidth}>{children}</div>
-)
+const FullWidth = ({ children }) => <div className={fullWidth}>{children}</div>
 
 FullWidth.propTypes = {
   children: PropTypes.node

src/components/atoms/HostnameCheck.jsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
-import styles from './HostnameCheck.module.css'
+import { hostnameInfo } from './HostnameCheck.module.css'
 
 export default class HostnameCheck extends PureComponent {
   static propTypes = {
@@ -33,7 +33,7 @@ export default class HostnameCheck extends PureComponent {
         <Helmet>
           <meta name="robots" content="noindex,nofollow" />
         </Helmet>
-        <aside className={styles.hostnameInfo}>
+        <aside className={hostnameInfo}>
           <p>{`Hi there 👋. Please note that only the code and documentation of this
           site are open source. But my logo and the combination of typography,
           colors, and layout making up my brand identity are not. Don't just

src/components/atoms/Icon.jsx

@@ -25,7 +25,7 @@ import {
   Info,
   Dribbble
 } from 'react-feather'
-import styles from './Icon.module.css'
+import { icon } from './Icon.module.css'
 
 const Icon = memo(({ name, ...props }) => {
   const components = {
@@ -62,7 +62,7 @@ const Icon = memo(({ name, ...props }) => {
   // const IconComp = Feather[name]
   if (!IconMapped) return null
 
-  return <IconMapped className={styles.icon} {...props} />
+  return <IconMapped className={icon} {...props} />
 })
 
 Icon.displayName = 'Icon'

src/components/atoms/ProjectImage.jsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
 import Img from 'gatsby-image'
-import styles from './ProjectImage.module.css'
+import { projectImage as styleProjectImage } from './ProjectImage.module.css'
 
 export default class ProjectImage extends PureComponent {
   static propTypes = {
@@ -13,7 +13,7 @@ export default class ProjectImage extends PureComponent {
   render() {
     return (
       <Img
-        className={styles.projectImage}
+        className={styleProjectImage}
         backgroundColor="transparent"
         fluid={this.props.fluid}
         alt={this.props.alt}

src/components/molecules/Availability.jsx

@@ -3,7 +3,10 @@ import PropTypes from 'prop-types'
 import posed from 'react-pose'
 import { fadeIn } from '../atoms/Transitions'
 import { useMeta } from '../../hooks/use-meta'
-import styles from './Availability.module.css'
+import {
+  availability as styleAvailability,
+  available as styleAvailable
+} from './Availability.module.css'
 
 const Animation = posed.aside(fadeIn)
 
@@ -11,8 +14,8 @@ const Availability = ({ hide }) => {
   const { availability } = useMeta()
   const { status, available, unavailable } = availability
   const className = status
-    ? `${styles.availability} ${styles.available}`
-    : `${styles.availability}`
+    ? `${styleAvailability} ${styleAvailable}`
+    : `${styleAvailability}`
   const html = status ? available : unavailable
 
   return (

src/components/molecules/LogoUnit.jsx

@@ -4,7 +4,13 @@ import { Link } from 'gatsby'
 import posed from 'react-pose'
 import { moveInBottom } from '../atoms/Transitions'
 import { ReactComponent as Logo } from '../../images/logo.svg'
-import styles from './LogoUnit.module.css'
+import {
+  minimal as styleMinimal,
+  logounit,
+  logo,
+  title,
+  description
+} from './LogoUnit.module.css'
 import { useResume } from '../../hooks/use-resume'
 
 LogoUnit.propTypes = {
@@ -18,12 +24,10 @@ function LogoUnit({ minimal }) {
 
   return (
     <Animation>
-      <Link className={minimal ? styles.minimal : styles.logounit} to={'/'}>
-        <Logo className={styles.logo} />
-        <h1 className={`p-name ${styles.title}`}>
-          {basics.name.toLowerCase()}
-        </h1>
-        <p className={`p-job-title ${styles.description}`}>
+      <Link className={minimal ? styleMinimal : logounit} to={'/'}>
+        <Logo className={logo} />
+        <h1 className={`p-name ${title}`}>{basics.name.toLowerCase()}</h1>
+        <p className={`p-job-title ${description}`}>
           {basics.label.toLowerCase()}
         </p>
       </Link>

src/components/molecules/Networks.jsx

@@ -4,10 +4,15 @@ import posed from 'react-pose'
 import { moveInTop } from '../atoms/Transitions'
 import Icon from '../atoms/Icon'
 import { useResume } from '../../hooks/use-resume'
-import styles from './Networks.module.css'
+import {
+  link,
+  title,
+  small as styleSmall,
+  networks
+} from './Networks.module.css'
 
 const linkClasses = (key) =>
-  key === 'Mail' ? `u-email ${styles.link}` : `u-url ${styles.link}`
+  key === 'Mail' ? `u-email ${link}` : `u-url ${link}`
 
 const NetworkLink = ({ name, url }) => (
   <a
@@ -16,7 +21,7 @@ const NetworkLink = ({ name, url }) => (
     data-testid={`network-${name.toLowerCase()}`}
   >
     <Icon name={name} />
-    <span className={styles.title}>{name}</span>
+    <span className={title}>{name}</span>
   </a>
 )
 
@@ -32,7 +37,7 @@ function Networks({ small, hide }) {
   const Animation = posed.aside(moveInTop)
 
   return (
-    <Animation className={small ? styles.small : styles.networks}>
+    <Animation className={small ? styleSmall : networks}>
       <NetworkLink name="Mail" url={`mailto:${basics.email}`} />
 
       {basics.profiles.map((profile) => (

src/components/molecules/ProjectLinks.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import Button from '../atoms/Button'
 import Icon from '../atoms/Icon'
-import styles from './ProjectLinks.module.css'
+import { projectLinks, title } from './ProjectLinks.module.css'
 
 ProjectLinks.propTypes = {
   links: PropTypes.array
@@ -10,8 +10,8 @@ ProjectLinks.propTypes = {
 
 export default function ProjectLinks({ links }) {
   return (
-    <div className={styles.projectLinks}>
-      <h3 className={styles.title}>
+    <div className={projectLinks}>
+      <h3 className={title}>
         Links <span>Learn more on the interwebz.</span>
       </h3>
 

src/components/molecules/ProjectNav.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Link, graphql, StaticQuery } from 'gatsby'
 import shortid from 'shortid'
 import ProjectImage from '../atoms/ProjectImage'
-import styles from './ProjectNav.module.css'
+import { item, link, title, projectNav } from './ProjectNav.module.css'
 
 const query = graphql`
   query {
@@ -26,14 +26,10 @@ const query = graphql`
 `
 
 const Project = ({ node, refCurrentItem }) => (
-  <div className={styles.item} ref={refCurrentItem}>
-    <Link className={styles.link} to={node.slug}>
-      <ProjectImage
-        className={styles.image}
-        fluid={node.img.childImageSharp.fluid}
-        alt={node.title}
-      />
-      <h1 className={styles.title}>{node.title}</h1>
+  <div className={item} ref={refCurrentItem}>
+    <Link className={link} to={node.slug}>
+      <ProjectImage fluid={node.img.childImageSharp.fluid} alt={node.title} />
+      <h1 className={title}>{node.title}</h1>
     </Link>
   </div>
 )
@@ -88,7 +84,7 @@ export default class ProjectNav extends PureComponent {
           const projects = data.allProjectsYaml.edges
 
           return (
-            <nav className={styles.projectNav} ref={this.scrollContainer}>
+            <nav className={projectNav} ref={this.scrollContainer}>
               {projects.map(({ node }) => {
                 const isCurrent = node.slug === currentSlug
 

src/components/molecules/ProjectTechstack.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styles from './ProjectTechstack.module.css'
+import { projectTechstack, title } from './ProjectTechstack.module.css'
 
 const ProjectTechstack = ({ techstack }) => (
-  <div className={styles.projectTechstack}>
-    <h3 className={styles.title}>
+  <div className={projectTechstack}>
+    <h3 className={title}>
       Tools & Technologies <span>The tech stack I was involved with.</span>
     </h3>
     <ul>

src/components/molecules/Repository.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Icon from '../atoms/Icon'
-import styles from './Repository.module.css'
+import { repo as styleRepo, repoTitle, meta } from './Repository.module.css'
 
 export default function Repository({ repo }) {
   const {
@@ -23,12 +23,12 @@ export default function Repository({ repo }) {
       : homepage
 
   return (
-    <div className={styles.repo}>
-      <h1 className={styles.repoTitle}>
+    <div className={styleRepo}>
+      <h1 className={repoTitle}>
         <a href={repoLink}>{isExternal ? full_name : name}</a>
       </h1>
       <p>{description}</p>
-      <p className={styles.meta}>
+      <p className={meta}>
         {name === 'portfolio' || name === 'blog'
           ? null
           : !isExternal &&

src/components/molecules/ThemeSwitch.jsx

@@ -3,12 +3,18 @@ import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
 import useDarkMode from 'use-dark-mode'
 import Icon from '../atoms/Icon'
-import styles from './ThemeSwitch.module.css'
+import {
+  checkboxContainer,
+  checkboxFake,
+  themeSwitch,
+  checkbox,
+  label
+} from './ThemeSwitch.module.css'
 
 const ThemeToggle = memo(({ dark }) => (
-  <span id="toggle" className={styles.checkboxContainer} aria-live="assertive">
+  <span id="toggle" className={checkboxContainer} aria-live="assertive">
     <Icon name="Sun" className={!dark ? null : 'active'} />
-    <span className={styles.checkboxFake} />
+    <span className={checkboxFake} />
     <Icon name="Moon" className={dark ? 'active' : null} />
   </span>
 ))
@@ -69,9 +75,9 @@ function ThemeSwitch() {
   return (
     <>
       <HeadItems themeColor={themeColor} bodyClass={bodyClass} />
-      <aside className={styles.themeSwitch}>
-        <label className={styles.checkbox}>
-          <span className={styles.label}>Toggle Night Mode</span>
+      <aside className={themeSwitch}>
+        <label className={checkbox}>
+          <span className={label}>Toggle Night Mode</span>
           <ThemeToggleInput dark={value} toggleDark={toggle} />
           <ThemeToggle dark={value} />
         </label>

src/components/organisms/Footer.jsx

@@ -3,24 +3,24 @@ import PropTypes from 'prop-types'
 import loadable from '@loadable/component'
 import LogoUnit from '../molecules/LogoUnit'
 import Networks from '../molecules/Networks'
-import styles from './Footer.module.css'
+import { footer, actions, copyright } from './Footer.module.css'
 import { useMeta } from '../../hooks/use-meta'
 
 const LazyVcard = loadable(() => import('../atoms/Vcard'))
 
 const FooterMarkup = ({ meta, year }) => (
-  <footer className={`h-card ${styles.footer}`}>
+  <footer className={`h-card ${footer}`}>
     <LogoUnit minimal />
     <Networks small />
 
-    <p className={styles.actions}>
+    <p className={actions}>
       <LazyVcard />
       <a className="u-key" href={meta.gpg}>
         PGP/GPG key
       </a>
       <a href={meta.bugs}>Found a bug?</a>
     </p>
-    <p className={styles.copyright}>
+    <p className={copyright}>
       <small>
         &copy; {year}{' '}
         <a className="u-url" href={meta.url}>

src/components/organisms/Header.jsx

@@ -4,7 +4,7 @@ import Networks from '../molecules/Networks'
 import Availability from '../molecules/Availability'
 
 import LogoUnit from '../molecules/LogoUnit'
-import styles from './Header.module.css'
+import { header, minimal as styleMinimal } from './Header.module.css'
 import { useMeta } from '../../hooks/use-meta'
 
 Header.propTypes = {
@@ -16,7 +16,7 @@ export default function Header({ minimal, hide }) {
   const { availability } = useMeta()
 
   return (
-    <header className={minimal ? styles.minimal : styles.header}>
+    <header className={minimal ? styleMinimal : header}>
       {!hide && (
         <>
           <LogoUnit minimal={minimal} />

src/components/organisms/Repositories.jsx

@@ -2,7 +2,11 @@ import React, { memo } from 'react'
 import PropTypes from 'prop-types'
 
 import Repository from '../molecules/Repository'
-import styles from './Repositories.module.css'
+import {
+  section,
+  sectionTitle,
+  repos as styleRepos
+} from './Repositories.module.css'
 
 Repositories.propTypes = {
   repos: PropTypes.array
@@ -12,9 +16,9 @@ function Repositories({ repos }) {
   if (!repos) return null
 
   return (
-    <section className={styles.section}>
-      <h1 className={styles.sectionTitle}>Open Source Projects</h1>
-      <div className={styles.repos}>
+    <section className={section}>
+      <h1 className={sectionTitle}>Open Source Projects</h1>
+      <div className={styleRepos}>
         {repos.map((repo) => (
           <Repository key={repo.name} repo={repo} />
         ))}

src/components/pages/Resume/Header.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import shortid from 'shortid'
 import { useResume } from '../../../hooks/use-resume'
 import Icon from '../../atoms/Icon'
-import styles from './Header.module.css'
+import { title, description, contact, languagesList } from './Header.module.css'
 
 export default function Header() {
   const { basics, languages } = useResume()
@@ -12,12 +12,12 @@ export default function Header() {
     <>
       <header>
         <p>Résumé</p>
-        <h1 className={styles.title}>{name}</h1>
-        <h2 className={styles.label}>{label}</h2>
+        <h1 className={title}>{name}</h1>
+        <h2 className={description}>{label}</h2>
       </header>
 
       <div>
-        <ul className={styles.contact}>
+        <ul className={contact}>
           <li>
             <a href={website}>
               <Icon name="Compass" />
@@ -32,7 +32,7 @@ export default function Header() {
             <Icon name="MapPin" />
             {location.city}, {location.countryCode}
           </li>
-          <li className={styles.languages}>
+          <li className={languagesList}>
             <Icon name="Globe" />
             {languages.map((item) => (
               <p key={shortid.generate()}>

src/components/pages/Resume/Header.module.css

@@ -9,7 +9,7 @@
   }
 }
 
-.label {
+.description {
   font-size: var(--font-size-h3);
   color: var(--text-color);
   margin-bottom: 0;
@@ -37,20 +37,20 @@
   }
 }
 
-.languages svg {
+.languagesList svg {
   display: inline-block;
 }
 
-.languages p {
+.languagesList p {
   margin-left: calc(var(--spacer) / 1.1);
 }
 
-.languages p:first-of-type {
+.languagesList p:first-of-type {
   margin-left: 0;
   display: inline-block;
 }
 
-.languages span {
+.languagesList span {
   font-size: var(--font-size-small);
   margin-left: calc(var(--spacer) / 4);
   color: var(--text-color-light);

src/components/pages/Resume/ResumeItem.jsx

@@ -5,7 +5,12 @@ import remark2react from 'remark-react'
 import parse from 'remark-parse'
 import html from 'remark-html'
 import breaks from 'remark-breaks'
-import styles from './ResumeItem.module.css'
+import {
+  resumeItem,
+  time,
+  styleTitle,
+  styleSubTitle
+} from './ResumeItem.module.css'
 
 const markdownOutput = (text) =>
   remark()
@@ -32,13 +37,13 @@ export default function ResumeItem({ content }) {
   const isSameYear = dateStart === dateEnd
 
   return (
-    <div className={styles.resumeItem}>
-      <span className={styles.time}>
+    <div className={resumeItem}>
+      <span className={time}>
         {dateStart}
         {dateEnd ? !isSameYear && `–${dateEnd}` : '–present'}{' '}
       </span>
-      <h4 className={styles.title}>{title}</h4>
-      <h5 className={styles.subTitle}>{subTitle}</h5>
+      <h4 className={styleTitle}>{title}</h4>
+      <h5 className={styleSubTitle}>{subTitle}</h5>
       {text && markdownOutput(text)}
     </div>
   )

src/components/pages/Resume/ResumeItem.module.css

@@ -26,12 +26,12 @@
   margin-bottom: 0;
 }
 
-.title {
+.styleTitle {
   margin-bottom: calc(var(--spacer) / 3);
   font-size: var(--font-size-h4);
 }
 
-.subTitle {
+.styleSubTitle {
   color: var(--text-color-light);
   font-size: var(--font-size-h5);
 }

src/components/pages/Resume/ResumeSection.jsx

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types'
 import shortid from 'shortid'
 import Icon from '../../atoms/Icon'
 import ResumeItem, { ResumeItemContentProps } from './ResumeItem'
-import styles from './ResumeSection.module.css'
+import { subTitle } from './ResumeSection.module.css'
 
 export default function ResumeSection({ section }) {
   return (
     <>
-      <h3 className={styles.subTitle}>
+      <h3 className={subTitle}>
         <Icon name={section.icon} />
         {section.name}
       </h3>

src/pages/404.jsx

@@ -3,7 +3,7 @@ import { Link } from 'gatsby'
 import { GiphyFetch } from '@giphy/js-fetch-api'
 import SEO from '../components/atoms/SEO'
 import Button from '../components/atoms/Button'
-import styles from './404.module.css'
+import { content } from './404.module.css'
 
 // Famous last words:
 // "It's just the 404 page so why not expose the dev API key"
@@ -41,7 +41,7 @@ export default function NotFound() {
     <>
       <SEO />
 
-      <article className={styles.content}>
+      <article className={content}>
         <h1>Shenanigans, page not found.</h1>
         <p>
           You might want to check the url, or{' '}

src/pages/index.jsx

@@ -4,7 +4,12 @@ import { Link, graphql } from 'gatsby'
 import shortid from 'shortid'
 import SEO from '../components/atoms/SEO'
 import ProjectImage from '../components/atoms/ProjectImage'
-import styles from './index.module.css'
+import {
+  project as styleProject,
+  projects as styleProjects,
+  title as styleTitle,
+  imageCount as styleImageCount
+} from './index.module.css'
 import Repositories from '../components/organisms/Repositories'
 import Icon from '../components/atoms/Icon'
 
@@ -33,14 +38,14 @@ function Project({ node, images }) {
   const imageCount = getImageCount(images, slug)
 
   return (
-    <article className={styles.project} key={slug}>
+    <article className={styleProject} key={slug}>
       <Link to={slug}>
-        <h1 className={styles.title}>{title}</h1>
+        <h1 className={styleTitle}>{title}</h1>
         <ProjectImage fluid={img.childImageSharp.fluid} alt={title} />
 
         {imageCount > 1 && (
           <small
-            className={styles.imageCount}
+            className={styleImageCount}
             title={`${imageCount} project images`}
           >
             <Icon name="Image" /> {imageCount}
@@ -64,7 +69,7 @@ function Home({ data, pageContext }) {
     <>
       <SEO />
 
-      <div className={styles.projects}>
+      <div className={styleProjects}>
         {projects.map(({ node }) => (
           <Project key={shortid.generate()} node={node} images={images} />
         ))}

src/pages/resume.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import shortid from 'shortid'
 import SEO from '../components/atoms/SEO'
 import { useResume } from '../hooks/use-resume'
-import styles from './resume.module.css'
+import { resume } from './resume.module.css'
 import Header from '../components/pages/Resume/Header'
 import ResumeSection from '../components/pages/Resume/ResumeSection'
 
@@ -18,7 +18,7 @@ export default function Resume() {
     <>
       <SEO />
 
-      <div className={styles.resume}>
+      <div className={resume}>
         <Header />
 
         {items.map((item) => (

src/pages/{ProjectsYaml.slug}.jsx

@@ -7,7 +7,12 @@ import ProjectTechstack from '../components/molecules/ProjectTechstack'
 import ProjectLinks from '../components/molecules/ProjectLinks'
 import ProjectNav from '../components/molecules/ProjectNav'
 import SEO from '../components/atoms/SEO'
-import styles from './{ProjectsYaml.slug}.module.css'
+import {
+  meta,
+  imageWrap,
+  headerTitle,
+  description
+} from './{ProjectsYaml.slug}.module.css'
 
 class ProjectMeta extends PureComponent {
   static propTypes = {
@@ -19,7 +24,7 @@ class ProjectMeta extends PureComponent {
     const { links, techstack } = this.props
 
     return (
-      <footer className={styles.meta}>
+      <footer className={meta}>
         {!!links && <ProjectLinks links={links} />}
         {!!techstack && <ProjectTechstack techstack={techstack} />}
       </footer>
@@ -37,7 +42,7 @@ class ProjectImages extends PureComponent {
     return (
       <FullWidth>
         {this.props.projectImages.map(({ node }) => (
-          <div className={styles.imageWrap} key={node.id}>
+          <div className={imageWrap} key={node.id}>
             <ProjectImage fluid={node.fluid} alt={this.props.title} />
           </div>
         ))}
@@ -65,10 +70,10 @@ export default class Project extends PureComponent {
 
         <article>
           <header>
-            <h1 className={styles.title}>{title}</h1>
+            <h1 className={headerTitle}>{title}</h1>
           </header>
           <div
-            className={styles.description}
+            className={description}
             dangerouslySetInnerHTML={{ __html: descriptionHtml }}
           />
           <ProjectImages projectImages={projectImages} title={title} />

src/pages/{ProjectsYaml.slug}.module.css

@@ -2,7 +2,7 @@
   margin-bottom: calc(var(--spacer) * 3);
 }
 
-.title {
+.headerTitle {
   font-size: var(--font-size-h2);
 }
 
@@ -11,7 +11,7 @@
     margin-bottom: calc(var(--spacer) * 6);
   }
 
-  .title {
+  .headerTitle {
     font-size: var(--font-size-h1);
   }
 }