Added home headline for SEO

Styled projects home
Upated deps

package.json

@@ -42,7 +42,7 @@
     "@mdx-js/mdx": "^1.5.3",
     "@mdx-js/react": "^1.5.3",
     "dayjs": "^1.8.19",
-    "gatsby": "^2.18.21",
+    "gatsby": "^2.18.22",
     "gatsby-image": "^2.2.38",
     "gatsby-plugin-breadcrumb": "^6.3.0",
     "gatsby-plugin-canonical-urls": "^2.1.19",
@@ -78,7 +78,7 @@
     "node-sass": "^4.13.0",
     "postcss-easing-gradients": "^3.0.1",
     "preact": "^10.2.1",
-    "prismjs": "^1.18.0",
+    "prismjs": "^1.19.0",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

src/components/portfolio.jsx

@@ -11,14 +11,16 @@ const Portfolio = ({ item }) => {
   // console.log(meta)
 
   return (
-    <article className="portfolio">
-      <h2>{article.title}</h2>
-      <h3>{article.subtitle}</h3>
-      <Link to={meta.slug} className="btn btn-primary">
-        Show more
-      </Link>
+    <div className="portfolio">
       <Img fluid={article.image.childImageSharp.fluid} alt={article.title} />
-    </article>
+      <div className="info">
+        <h2>{article.title}</h2>
+        <h3>{article.subtitle}</h3>
+        <Link to={meta.slug} className="btn btn-primary">
+          Show more
+        </Link>
+      </div>
+    </div>
   )
 }
 

src/pages/photography.jsx

@@ -35,6 +35,8 @@ const Page = ({ pageContext: { breadcrumb } }) => {
         }}
       />
 
+      <h1 className="headline">{pageName}</h1>
+
       <div className="gallery">content will come soon</div>
     </>
   )

src/pages/projects.jsx

@@ -23,11 +23,11 @@ const Page = ({
   })
 
   // weird sort function, but works
-  const idList = new Set(withoutStartDate.edges.map(x => x.node.id))
+  const idList = new Set(withoutStartDate.edges.map((x) => x.node.id))
   const items = [
     ...withDates.edges,
     ...withoutStartDate.edges,
-    ...withoutEndDate.edges.filter(d => !idList.has(d.node.id)),
+    ...withoutEndDate.edges.filter((d) => !idList.has(d.node.id)),
   ].sort((starting, ending) => {
     return (
       new Date(ending.node.frontmatter.ended) -
@@ -48,11 +48,13 @@ const Page = ({
       <Helmet
         bodyAttributes={{
           page: pageName.toLowerCase(),
-          class: 'home header-fixed',
+          class: 'home',
         }}
       />
 
-      <div className="gallery">
+      <h1 className="headline">{pageName}</h1>
+
+      <div className="container gallery">
         {items.map((item, index) => (
           <Portfolio item={item.node} key={index}></Portfolio>
         ))}

src/pages/writings.jsx

@@ -39,6 +39,8 @@ const Page = ({
         bodyAttributes={{ page: pageName.toLowerCase(), class: 'home' }}
       />
 
+      <h1 className="headline">{pageName}</h1>
+
       <div className="container container--medium">
         <div className="list">
           {edges.map(({ node: { frontmatter, fields, excerpt } }, index) => (

src/styles/app.scss

@@ -44,6 +44,7 @@
 @import 'components/language';
 @import 'components/logo';
 @import 'components/overlay';
+@import 'components/portfolio';
 @import 'components/separator';
 @import 'components/status';
 @import 'components/theme-switch';

src/styles/components/_portfolio.scss

@@ -0,0 +1,36 @@
+// TODO: do this as gallery: https://dribbble.com/shots/6154629-Gallerie-Due-Concept/attachments
+
+.gallery {
+  margin-top: var(--spacing-xxl);
+}
+
+.portfolio {
+  display: grid;
+  margin-bottom: var(--spacing-xxl);
+  grid-template-areas: 'image info';
+  grid-template-columns: 1fr 300px;
+
+  .info {
+    grid-area: info;
+    margin-top: var(--spacing-xl);
+    margin-left: var(--spacing-md);
+
+    h2 {
+      font-family: var(--font-serif);
+      font-weight: var(--font-bold);
+      font-size: var(--text-xl);
+      margin-bottom: var(--spacing-sm);
+      color: var(--text-color-highlight);
+    }
+
+    h3 {
+      color: var(--text-color-richer);
+      margin-bottom: var(--spacing-sm);
+    }
+  }
+
+  .gatsby-image-wrapper {
+    grid-area: image;
+    border: 1px solid var(--border-color-light);
+  }
+}

src/styles/layouts/_main.scss

@@ -5,6 +5,17 @@
   overflow-y: scroll;
 }
 
+.home {
+  .headline {
+    font-family: var(--font-serif);
+    font-size: 1500%;
+    position: absolute;
+    top: -80px;
+    left: -40px;
+    opacity: 0.05;
+  }
+}
+
 #article {
   padding-top: var(--spacing-xl);
   padding-bottom: var(--spacing-xl);

src/styles/themes/_dark.scss

@@ -7,5 +7,8 @@
   --text-color-dark: var(--color-07);
   --text-color-highlight: var(--color-primary);
 
+  --border-color-normal: var(--color-07);
+  --border-color-light: var(--color-09);
+
   --divider-color: var(--color-09);
 }

src/styles/themes/_light.scss

@@ -7,5 +7,8 @@
   --text-color-dark: var(--color-07);
   --text-color-highlight: var(--color-primary-dark);
 
+  --border-color-normal: var(--color-04);
+  --border-color-light: var(--color-02);
+
   --divider-color: var(--color-02);
 }