Version 1.1 (#3)

* Update footer links, responsiveness

* Update

* Update footer, item rendering

* Update feature generation

* Add logo to homepage

* Add footer links, update styles

* Refactor code

* Fix image rendering, meta tags

* Refactor file structure

* Update peer dependancies

* Update netlify configs

* Modify build command

* Update image compression

gatsby-config.js

@@ -1,8 +1,8 @@
 module.exports = {
   siteMetadata: {
-    title: 'Rebecca Foran',
+    title: 'Rebecca Foran - Portfolio',
     description:
-      'This repo contains an example business website that is built with Gatsby, and Netlify CMS.It follows the JAMstack architecture by using Git as a single source of truth, and Netlify for continuous deployment, and CDN distribution.',
+      'My personal portfolio showcasing artwork 🖼, photography 📷, and other achievements.',
   },
   plugins: [
     'gatsby-plugin-react-helmet',
@@ -38,6 +38,7 @@ module.exports = {
           {
             resolve: 'gatsby-remark-relative-images',
             options: {
+              oath: `${__dirname}/src/img`,
               name: 'uploads',
             },
           },

netlify.toml

@@ -1,8 +1,8 @@
 [build]
   publish = "public"
-  command = "npm run build"
+  command = "yarn build"
   functions = "lambda"
 [build.environment]
-  NODE_VERSION = "12"
-  YARN_VERSION = "1.22.4"
+  NODE_VERSION = "15.5.0"
+  YARN_VERSION = "1.22.10"
   YARN_FLAGS = "--no-ignore-optional"

package.json

@@ -1,32 +1,34 @@
 {
   "name": "rebeccaforan-portfolio",
   "description": "A simple portfolio showcasing photography and artwork, with contact, about and resume pages for professional development.",
-  "version": "1.1.3",
+  "version": "1.1",
   "author": "dkutin",
   "dependencies": {
     "bulma": "^0.9.0",
-    "gatsby": "^2.20.35",
+    "gatsby": "^2.31.1",
     "gatsby-image": "^2.3.5",
+    "gatsby-plugin-manifest": "^2.11.0",
     "gatsby-plugin-netlify": "^2.2.4",
     "gatsby-plugin-netlify-cms": "^4.2.5",
     "gatsby-plugin-purgecss": "^5.0.0",
     "gatsby-plugin-react-helmet": "^3.2.5",
     "gatsby-plugin-sass": "^2.2.4",
-    "gatsby-plugin-sharp": "^2.5.7",
+    "gatsby-plugin-sharp": "^2.13.1",
     "gatsby-remark-copy-linked-files": "^2.2.4",
     "gatsby-remark-images": "^3.2.6",
     "gatsby-remark-relative-images": "^0.3.0",
     "gatsby-source-filesystem": "^2.2.5",
     "gatsby-transformer-remark": "^2.7.5",
-    "gatsby-transformer-sharp": "^2.4.7",
+    "gatsby-transformer-sharp": "^2.11.0",
     "lodash": "^4.17.15",
     "lodash-webpack-plugin": "^0.11.4",
+    "netlify-cli": "^3.4.2",
     "netlify-cms-app": "^2.9.6",
-    "node-sass": "^4.14.0",
     "prop-types": "^15.6.0",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-helmet": "^6.0.0",
+    "sass": "^1.32.5",
     "uuid": "^7.0.0"
   },
   "keywords": [
@@ -37,12 +39,14 @@
   "scripts": {
     "clean": "gatsby clean",
     "start": "npm run develop",
-    "build": "npm run clean && gatsby build",
+    "optimize": "node ./scripts/optimize.js",
+    "build": "yarn optimize && gatsby clean && gatsby build",
     "develop": "npm run clean && gatsby develop",
     "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
-    "prettier": "^2.0.5"
+    "prettier": "^2.0.5",
+    "yarn-audit-fix": "^3.2.13"
   }
 }

scripts/optimize.js

@@ -0,0 +1,30 @@
+const sharp = require(`sharp`)
+const glob = require(`glob`)
+const fs = require(`fs-extra`)
+
+const matches = glob.sync(`static/img/*.{png,jpg,jpeg}`)
+const MAX_WIDTH = 1800
+const QUALITY = 70
+
+Promise.all(
+  matches.map(async match => {
+    const stream = sharp(match)
+    const info = await stream.metadata()
+
+    if (info.width < MAX_WIDTH) {
+      return
+    }
+
+    const optimizedName = match.replace(
+      /(\..+)$/,
+      (match, ext) => `-optimized${ext}`
+    )
+
+    await stream
+      .resize(MAX_WIDTH)
+      .jpeg({ quality: QUALITY })
+      .toFile(optimizedName)
+
+    return fs.rename(optimizedName, match)
+  })
+)

src/cms/preview-templates/ArtworkPagePreview.js

@@ -25,4 +25,4 @@ ArtworkPagePreview.propTypes = {
   getAsset: PropTypes.func,
 }
 
-export default ArtworkPagePreview 
+export default ArtworkPagePreview

src/components/Features.js

@@ -3,45 +3,54 @@ import PropTypes from 'prop-types'
 import PreviewCompatibleImage from '../components/PreviewCompatibleImage'
 
 const generateKey = () => {
-  var pre = (Math.random()*100).toString()
-  return `${ pre }_${ new Date().getTime() }`
+  var pre = (Math.random() * 100).toString()
+  return `${pre}_${new Date().getTime()}`
 }
 
 var FeatureGrid = ({ gridItems }) => (
   <div className="columns is-multiline">
-    <div className="column is-4" style={{height: '100%'}}>
+    <div className="column is-4" style={{ height: '100%' }}>
       {formatItems(gridItems.slice(0, Math.floor(gridItems.length / 3)))}
     </div>
-    <div className="column is-4" style={{height: '100%'}}> 
-      {formatItems(gridItems.slice(Math.floor(gridItems.length / 3), Math.floor(gridItems.length / 3) * 2))}
+    <div className="column is-4" style={{ height: '100%' }}>
+      {formatItems(
+        gridItems.slice(
+          Math.floor(gridItems.length / 3),
+          Math.floor(gridItems.length / 3) * 2
+        )
+      )}
     </div>
-    <div className="column is-4" style={{height: '100%'}}> 
-      {formatItems(gridItems.slice(Math.floor(gridItems.length / 3) * 2, gridItems.length))}
+    <div className="column is-4" style={{ height: '100%' }}>
+      {formatItems(
+        gridItems.slice(Math.floor(gridItems.length / 3) * 2, gridItems.length)
+      )}
     </div>
   </div>
-    )
-
-var formatItems = function(gridItems) {
-  if (!gridItems.length || !gridItems) { return }
+)
+var formatItems = function (gridItems) {
+  if (!gridItems.length || !gridItems) {
+    return
+  }
   var nonce = generateKey()
   return gridItems.map((item, index) => (
-          <div key={ nonce + index }
-            style={{
-              width: '100%',
-              height: '100%',
-              display: 'inline-block',
-              overflow: 'hidden',
-              position: 'relative',
-              padding: '0.25rem 0'
-            }}
-          >
-            <div className="overlay"> 
-              <div className="image-overlay" />
-            </div>
-            <PreviewCompatibleImage imageInfo={item} />
-          </div>
+    <div
+      key={nonce + index}
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'inline-block',
+        overflow: 'hidden',
+        position: 'relative',
+        padding: '0.25rem 0',
+      }}
+    >
+      <div className="overlay">
+        <div className="image-overlay" />
+      </div>
+      <PreviewCompatibleImage imageInfo={item} />
+    </div>
   ))
-}   
+}
 
 FeatureGrid.propTypes = {
   gridItems: PropTypes.arrayOf(

src/components/Footer.js

@@ -17,7 +17,7 @@ const Footer = class extends React.Component {
                 <section className="menu">
                   <ul className="menu-list">
                     <li>
-                      <Link className="navbar-item" to="/" >
+                      <Link className="navbar-item" to="/">
                         Home
                       </Link>
                     </li>
@@ -36,11 +36,6 @@ const Footer = class extends React.Component {
                         About
                       </Link>
                     </li>
-                    <li>
-                      <Link className="navbar-item" to="/contact">
-                        Contact
-                      </Link>
-                    </li>
                     <li>
                       <Link
                         className="navbar-item"

src/components/Layout.js

@@ -2,10 +2,12 @@ import React from 'react'
 import { Helmet } from 'react-helmet'
 import Footer from '../components/Footer'
 import Navbar from '../components/Navbar'
-import './all.sass'
 import useSiteMetadata from './SiteMetadata'
 import { withPrefix } from 'gatsby'
 
+// Import Styles
+import '../styles/all.sass'
+
 const TemplateWrapper = ({ children, hidenav }) => {
   const { title, description } = useSiteMetadata()
   return (
@@ -32,14 +34,13 @@ const TemplateWrapper = ({ children, hidenav }) => {
           href={`${withPrefix('/')}img/favicon-16x16.png`}
           sizes="16x16"
         />
-
         <link
           rel="mask-icon"
           href={`${withPrefix('/')}img/safari-pinned-tab.svg`}
           color="#ff4400"
         />
-        <meta name="theme-color" content="#fff" />
 
+        <meta name="theme-color" content="#fff" />
         <meta property="og:type" content="business.business" />
         <meta property="og:title" content={title} />
         <meta property="og:url" content="/" />

src/components/Navbar.js

@@ -41,7 +41,11 @@ const Navbar = class extends React.Component {
         <div className="container">
           <div className="navbar-brand">
             <Link to="/" className="navbar-item" title="Logo">
-              <img src={logo} alt="Rebecca Foran Logo" style={{ width: '35px'}} />
+              <img
+                src={logo}
+                alt="Rebecca Foran Logo"
+                style={{ width: '35px' }}
+              />
             </Link>
             {/* eslint-disable-next-line */}
             <div
@@ -68,9 +72,6 @@ const Navbar = class extends React.Component {
               <Link className="navbar-item" to="/about">
                 About
               </Link>
-              <Link className="navbar-item" to="/contact">
-                Contact
-              </Link>
             </div>
           </div>
         </div>

src/pages/contact/index.js

@@ -101,7 +101,7 @@ export default class Index extends React.Component {
                   </div>
                 </div>
                 <div className="field">
-                  <button className="button is-link" type="submit">
+                  <button className="button is-link" type="submit" disabled>
                     Send
                   </button>
                 </div>

src/pages/index.md

@@ -9,6 +9,4 @@ links:
     text: ARTWORK
   - link: /about
     text: ABOUT
-  - link: /contact
-    text: CONTACT
 ---

src/components/all.sass → src/styles/all.sass

@@ -13,7 +13,7 @@ $body-color: #333
 $black: #2b2523
 
 .navbar .navbar-menu
-  box-shadow:none !important
+  box-shadow: none !important
 
 .content, .taglist
   list-style: none
@@ -211,7 +211,8 @@ form
     flex-basis: 50%
   .homepage-link-container
     flex-direction: column
-  .menu-list, .column & .social
+  .menu-list, 
+  .column.social
     text-align: center !important
 
 +mobile
@@ -240,4 +241,4 @@ form
   width: 100%
 
 .section
-  padding: 3rem 1.5rem 3rem 2rem
+  padding: 6rem 1.5rem 3rem 2rem

src/templates/artwork-page.js

@@ -5,12 +5,8 @@ import { graphql } from 'gatsby'
 import Layout from '../components/Layout'
 import Features from '../components/Features'
 
-export const ArtworkPageTemplate = ({
-  image,
-  title,
-  intro,
-}) => (
-  <div key={ title }>
+export const ArtworkPageTemplate = ({ image, title, intro }) => (
+  <div key={title}>
     <div
       className="full-width-image margin-top-0"
       style={{
@@ -34,8 +30,7 @@ export const ArtworkPageTemplate = ({
         <h1
           className="has-text-weight-bold is-size-3-mobile is-size-2-tablet is-size-1-widescreen"
           style={{
-            boxShadow:
-              '#616f75 0.5rem 0px 0px, #616f75 -0.5rem 0px 0px',
+            boxShadow: '#616f75 0.5rem 0px 0px, #616f75 -0.5rem 0px 0px',
             backgroundColor: '#616f75',
             color: 'white',
             lineHeight: '1',
@@ -48,12 +43,10 @@ export const ArtworkPageTemplate = ({
     </div>
     <section className="section section--gradient">
       <div className="container">
-        <div className="section">
-          <div className="columns">
-            <div className="column is-12">
-              <div className="content">
-                <Features key={title} gridItems={intro.portfolio} />
-              </div>
+        <div className="columns">
+          <div className="column is-12">
+            <div className="content">
+              <Features key={title} gridItems={intro.portfolio} />
             </div>
           </div>
         </div>