Restyled the portfolio and blog post section on homepage

content/insight/redirect-in-gatsby/index.md

@@ -1,6 +1,6 @@
 ---
 "title": "All about Redirect with Gatsby"
-"description": "Gatsby is cool, Gatsby is perfect. But can it redirect, a common requirement for modern web apps? Let's find out."
+"description": "Gatsby is cool, Gatsby is perfect. But how easy it is to set up redirect in Gatsby, a common requirement for modern web apps? Let's find out."
 "date": "2020-11-12"
 "featuredImage": "direction-signage.jpg"
 "category": "web development"

gatsby-browser.js

@@ -1,8 +1,4 @@
 import "typeface-archivo"
 import "typeface-archivo-narrow"
+import "fontsource-raleway"
 import "./src/styles/_global.scss"
-export const onInitialClientRender = () => {
-  setTimeout(function() {
-    document.getElementById("__loader").style.display = "none"
-  }, 900)
-}

package.json

@@ -19,6 +19,7 @@
     "@mdx-js/mdx": "^1.6.16",
     "@mdx-js/react": "^1.6.16",
     "@svgr/webpack": "^5.4.0",
+    "fontsource-raleway": "^3.0.9",
     "gatsby": "^2.20.12",
     "gatsby-image": "^2.3.2",
     "gatsby-plugin-mdx": "^1.2.39",
@@ -44,8 +45,6 @@
     "react-helmet": "^6.1.0",
     "typeface-archivo": "^1.1.13",
     "typeface-archivo-narrow": "^1.1.13",
-    "typeface-fira-sans": "0.0.75",
-    "typeface-fira-sans-extra-condensed": "0.0.72",
     "typeface-inconsolata": "0.0.72"
   },
   "devDependencies": {

src/components/FeaturedArticles/FeaturedArticles.js

@@ -0,0 +1,83 @@
+import React from "react"
+import { StaticQuery, graphql } from "gatsby"
+import { Link } from "gatsby"
+import styles from "./article.module.scss"
+
+export default () => (
+  <StaticQuery
+    query={graphql`
+      query {
+        allMdx(
+          filter: { fileAbsolutePath: { regex: "/(insight)/.*.md$/" } }
+          limit: 1
+          sort: { fields: frontmatter___date, order: DESC }
+        ) {
+          totalCount
+          edges {
+            node {
+              fields {
+                slug
+              }
+              id
+              frontmatter {
+                title
+                description
+                date(formatString: "MMMM YYYY")
+                category
+              }
+            }
+          }
+        }
+      }
+    `}
+    render={data => (
+      <ul className={`list-style-none p0 ${styles.grid__simple}`}>
+        {data.allMdx.edges.map(({ node }) => {
+          const { category, title, description } = node.frontmatter
+          return (
+            <li className={styles.post__wrapper}>
+              <Link
+                to={`journal${node.fields.slug}`}
+                className={styles.post__link}
+              >
+                <article className={`sans-serif pb3 lg-flex ${styles.post}`}>
+                  <div
+                    className={`${styles.post__info} lg-col-4 lg-mr1 line-height-3`}
+                  >
+                    <div>
+                      <span
+                        className={`normal monospace ${styles.post__category}`}
+                      >
+                        {category}
+                      </span>
+                      <span className="medium">{title}</span>
+                    </div>
+                  </div>
+                  <div className={`lg-col-8 ${styles.post__preview}`}>
+                    <p>{description}</p>
+                  </div>
+                  {/* <h6
+                className={`uppercase sans-serif small mb1 bold ${styles.post__cat}`}
+              >
+                {node.frontmatter.category}
+              </h6>
+              
+                <h4
+                  className={`big display medium mbn1 line-height-3 ${styles.post__title}`}
+                >
+                  {node.frontmatter.title}
+                </h4>
+              
+
+              <p className={`normal ${styles.post__date}`}>
+                {node.frontmatter.date}
+              </p> */}
+                </article>
+              </Link>
+            </li>
+          )
+        })}
+      </ul>
+    )}
+  />
+)

src/components/FeaturedArticles/article.module.scss

@@ -0,0 +1,39 @@
+.post__wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+.post__link {
+}
+.post {
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  width: 100%;
+  &__preview {
+    font-size: 1.25rem;
+    line-height: 1.3333rem;
+    max-width: 16em;
+    p {
+      margin: 0;
+    }
+    @include var.media("screen", ">xlWidth") {
+      font-size: 1.875rem;
+      line-height: 2.1111rem;
+    }
+  }
+  &__info {
+    font-size: 1.5rem;
+  }
+  &__info span {
+    display: inline-block;
+    margin-right: 0.6rem;
+  }
+  &__category {
+    font-size: 0.875rem;
+    letter-spacing: -0.02em;
+  }
+}

src/components/FeaturedArticles/index.js

@@ -0,0 +1 @@
+export { default } from "./FeaturedArticles"

src/components/Header/Header.module.scss

@@ -84,7 +84,7 @@
   .link {
     margin-right: 40px;
     @include var.media(">medWidth") {
-      font-size: 1.3333rem;
+      font-size: 1.1111rem;
     }
   }
 }

src/components/Layout/Layout.js

@@ -16,7 +16,6 @@ export default function Layout({
   headerPosition,
 }) {
   const mainClass = width === "fixed" ? "container" : "none"
-  console.log(hasMargin)
   return (
     <div
       id={pageType}

src/components/article-list-homepage.js

@@ -8,8 +8,8 @@ export default () => (
     query={graphql`
       query {
         allMdx(
-          filter: { fileAbsolutePath: { regex: "/(markdown)/.*.md$/" } }
-          limit: 6
+          filter: { fileAbsolutePath: { regex: "/(insight)/.*.md$/" } }
+          limit: 1
           sort: { fields: frontmatter___date, order: DESC }
         ) {
           totalCount

src/components/portfolio-select.js

@@ -34,31 +34,52 @@ export default () => (
     `}
     render={data => (
       <div className="portfolio">
-        {data.allMdx.edges.map(({ node }, index) => (
-          <div
-            className={`${styles.project} block items-center mb4 lg-mx0 mxn2`}
-          >
-            {/* <Img 
+        {data.allMdx.edges.map(({ node }, index) => {
+          const order = (index + 1) % 2 === 0 ? "even" : "odd"
+          const projectClass = ["lg-flex", "block", "items-center", "mb4"]
+          const infoClass = [
+            "xl-col-5",
+            "lg-col-6",
+            "xl-p2",
+            "p1",
+            "z4",
+            "border",
+            "border-thick",
+            "relative",
+          ]
+          const imgClass = ["xl-col-7", "lg-col-6"]
+          if (order === "even") {
+            projectClass.push("lg-flex-reverse")
+            imgClass.push("xl-ml3", "lg-ml2")
+            // infoClass.push("xl-mr3")
+          } else {
+            imgClass.push("xl-mr3", "lg-mr2")
+            // infoClass.push("xl-ml3")
+          }
+          return (
+            <div className={projectClass.join(" ")}>
+              {/* <Img 
             fluid={node.frontmatter.featuredImage.childImageSharp.fluid}
             style={{ flex: '1', marginLeft: '-6rem'}}
           /> */}
-            <img
-              className={`${styles.project__featuredImg} xl-col-7 lg-col-10 ${
-                index % 2 === 0 ? `xl-mln6` : `xl-mrn6`
-              }`}
-              src={node.frontmatter.gif.publicURL}
-              alt="Blah"
-            />
-            <div
-              className={`${styles.project__info} xl-col-6 xl-mt0 mtn6 xl-mx0 xl-p2 p1 z4 border border-thick relative  mx2`}
-            >
-              <h3 className={styles.project__name}>{node.frontmatter.title}</h3>
-              <p className={styles.project__desc}>
-                {node.frontmatter.description}
-              </p>
+              <img
+                className={`${styles.project__featuredImg} ${imgClass.join(
+                  " "
+                )}`}
+                src={node.frontmatter.gif.publicURL}
+                alt={node.frontmatter.title}
+              />
+              <div className={`${styles.project__info} ${infoClass.join(" ")}`}>
+                <h3 className={styles.project__name}>
+                  {node.frontmatter.title}
+                </h3>
+                <p className={styles.project__desc}>
+                  {node.frontmatter.description}
+                </p>
+              </div>
             </div>
-          </div>
-        ))}
+          )
+        })}
       </div>
     )}
   />

src/components/portfolio-select.module.scss

@@ -1,11 +1,3 @@
-@include var.media(">xlWidth") {
-  .project {
-    display: flex;
-    &:nth-child(2n + 1) {
-      flex-direction: row-reverse;
-    }
-  }
-}
 .project__info {
   background-color: var.$white;
   box-shadow: 8px 8px 8px 4px rgba(0, 0, 0, 0.25);

src/pages/index.js

@@ -1,7 +1,7 @@
 import React from "react"
 import Layout from "../components/Layout"
 import Intro from "../components/intro"
-import ArticleList from "../components/article-list-homepage"
+import FeaturedArticles from "../components/FeaturedArticles"
 import Portfolio from "../components/portfolio-select"
 
 export default () => (
@@ -15,11 +15,11 @@ export default () => (
       </h2>
       <Portfolio />
     </section>
-    <section className="hp-tertiary pt3 mb4 mx-auto">
+    <section className="hp-tertiary width-full mx-auto">
       <h2 className="center section-title">
-        <span className="honeydew">Recently I've Learned</span>
+        <span className="honeydew">Useful Read</span>
       </h2>
-      <ArticleList />
+      <FeaturedArticles />
     </section>
   </Layout>
 )