Skip to content

Commit 31e82b9

Browse files
dkutindkutin
authored
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
1 parent db55319 commit 31e82b9

18 files changed

+7255
-3480
lines changed

‎gatsby-config.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
module.exports = {
22
siteMetadata: {
3-
title: 'Rebecca Foran',
3+
title: 'Rebecca Foran - Portfolio',
44
description:
5-
'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.',
5+
'My personal portfolio showcasing artwork 🖼, photography 📷, and other achievements.',
66
},
77
plugins: [
88
'gatsby-plugin-react-helmet',
@@ -38,6 +38,7 @@ module.exports = {
3838
{
3939
resolve: 'gatsby-remark-relative-images',
4040
options: {
41+
oath: `${__dirname}/src/img`,
4142
name: 'uploads',
4243
},
4344
},

‎lambda/hello.js ‎lambda/default.js

File renamed without changes.

‎netlify.toml

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
[build]
22
publish = "public"
3-
command = "npm run build"
3+
command = "yarn build"
44
functions = "lambda"
55
[build.environment]
6-
NODE_VERSION = "12"
7-
YARN_VERSION = "1.22.4"
6+
NODE_VERSION = "15.5.0"
7+
YARN_VERSION = "1.22.10"
88
YARN_FLAGS = "--no-ignore-optional"

‎package.json

+11-7
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,34 @@
11
{
22
"name": "rebeccaforan-portfolio",
33
"description": "A simple portfolio showcasing photography and artwork, with contact, about and resume pages for professional development.",
4-
"version": "1.1.3",
4+
"version": "1.1",
55
"author": "dkutin",
66
"dependencies": {
77
"bulma": "^0.9.0",
8-
"gatsby": "^2.20.35",
8+
"gatsby": "^2.31.1",
99
"gatsby-image": "^2.3.5",
10+
"gatsby-plugin-manifest": "^2.11.0",
1011
"gatsby-plugin-netlify": "^2.2.4",
1112
"gatsby-plugin-netlify-cms": "^4.2.5",
1213
"gatsby-plugin-purgecss": "^5.0.0",
1314
"gatsby-plugin-react-helmet": "^3.2.5",
1415
"gatsby-plugin-sass": "^2.2.4",
15-
"gatsby-plugin-sharp": "^2.5.7",
16+
"gatsby-plugin-sharp": "^2.13.1",
1617
"gatsby-remark-copy-linked-files": "^2.2.4",
1718
"gatsby-remark-images": "^3.2.6",
1819
"gatsby-remark-relative-images": "^0.3.0",
1920
"gatsby-source-filesystem": "^2.2.5",
2021
"gatsby-transformer-remark": "^2.7.5",
21-
"gatsby-transformer-sharp": "^2.4.7",
22+
"gatsby-transformer-sharp": "^2.11.0",
2223
"lodash": "^4.17.15",
2324
"lodash-webpack-plugin": "^0.11.4",
25+
"netlify-cli": "^3.4.2",
2426
"netlify-cms-app": "^2.9.6",
25-
"node-sass": "^4.14.0",
2627
"prop-types": "^15.6.0",
2728
"react": "^16.8.4",
2829
"react-dom": "^16.8.4",
2930
"react-helmet": "^6.0.0",
31+
"sass": "^1.32.5",
3032
"uuid": "^7.0.0"
3133
},
3234
"keywords": [
@@ -37,12 +39,14 @@
3739
"scripts": {
3840
"clean": "gatsby clean",
3941
"start": "npm run develop",
40-
"build": "npm run clean && gatsby build",
42+
"optimize": "node ./scripts/optimize.js",
43+
"build": "yarn optimize && gatsby clean && gatsby build",
4144
"develop": "npm run clean && gatsby develop",
4245
"format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
4346
"test": "echo \"Error: no test specified\" && exit 1"
4447
},
4548
"devDependencies": {
46-
"prettier": "^2.0.5"
49+
"prettier": "^2.0.5",
50+
"yarn-audit-fix": "^3.2.13"
4751
}
4852
}

‎scripts/optimize.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const sharp = require(`sharp`)
2+
const glob = require(`glob`)
3+
const fs = require(`fs-extra`)
4+
5+
const matches = glob.sync(`static/img/*.{png,jpg,jpeg}`)
6+
const MAX_WIDTH = 1800
7+
const QUALITY = 70
8+
9+
Promise.all(
10+
matches.map(async match => {
11+
const stream = sharp(match)
12+
const info = await stream.metadata()
13+
14+
if (info.width < MAX_WIDTH) {
15+
return
16+
}
17+
18+
const optimizedName = match.replace(
19+
/(\..+)$/,
20+
(match, ext) => `-optimized${ext}`
21+
)
22+
23+
await stream
24+
.resize(MAX_WIDTH)
25+
.jpeg({ quality: QUALITY })
26+
.toFile(optimizedName)
27+
28+
return fs.rename(optimizedName, match)
29+
})
30+
)

‎src/cms/preview-templates/ArtworkPagePreview.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,4 @@ ArtworkPagePreview.propTypes = {
2525
getAsset: PropTypes.func,
2626
}
2727

28-
export default ArtworkPagePreview
28+
export default ArtworkPagePreview

‎src/components/Features.js

+36-27
Original file line numberDiff line numberDiff line change
@@ -3,45 +3,54 @@ import PropTypes from 'prop-types'
33
import PreviewCompatibleImage from '../components/PreviewCompatibleImage'
44

55
const generateKey = () => {
6-
var pre = (Math.random()*100).toString()
7-
return `${ pre }_${ new Date().getTime() }`
6+
var pre = (Math.random() * 100).toString()
7+
return `${pre}_${new Date().getTime()}`
88
}
99

1010
var FeatureGrid = ({ gridItems }) => (
1111
<div className="columns is-multiline">
12-
<div className="column is-4" style={{height: '100%'}}>
12+
<div className="column is-4" style={{ height: '100%' }}>
1313
{formatItems(gridItems.slice(0, Math.floor(gridItems.length / 3)))}
1414
</div>
15-
<div className="column is-4" style={{height: '100%'}}>
16-
{formatItems(gridItems.slice(Math.floor(gridItems.length / 3), Math.floor(gridItems.length / 3) * 2))}
15+
<div className="column is-4" style={{ height: '100%' }}>
16+
{formatItems(
17+
gridItems.slice(
18+
Math.floor(gridItems.length / 3),
19+
Math.floor(gridItems.length / 3) * 2
20+
)
21+
)}
1722
</div>
18-
<div className="column is-4" style={{height: '100%'}}>
19-
{formatItems(gridItems.slice(Math.floor(gridItems.length / 3) * 2, gridItems.length))}
23+
<div className="column is-4" style={{ height: '100%' }}>
24+
{formatItems(
25+
gridItems.slice(Math.floor(gridItems.length / 3) * 2, gridItems.length)
26+
)}
2027
</div>
2128
</div>
22-
)
23-
24-
var formatItems = function(gridItems) {
25-
if (!gridItems.length || !gridItems) { return }
29+
)
30+
var formatItems = function (gridItems) {
31+
if (!gridItems.length || !gridItems) {
32+
return
33+
}
2634
var nonce = generateKey()
2735
return gridItems.map((item, index) => (
28-
<div key={ nonce + index }
29-
style={{
30-
width: '100%',
31-
height: '100%',
32-
display: 'inline-block',
33-
overflow: 'hidden',
34-
position: 'relative',
35-
padding: '0.25rem 0'
36-
}}
37-
>
38-
<div className="overlay">
39-
<div className="image-overlay" />
40-
</div>
41-
<PreviewCompatibleImage imageInfo={item} />
42-
</div>
36+
<div
37+
key={nonce + index}
38+
style={{
39+
width: '100%',
40+
height: '100%',
41+
display: 'inline-block',
42+
overflow: 'hidden',
43+
position: 'relative',
44+
padding: '0.25rem 0',
45+
}}
46+
>
47+
<div className="overlay">
48+
<div className="image-overlay" />
49+
</div>
50+
<PreviewCompatibleImage imageInfo={item} />
51+
</div>
4352
))
44-
}
53+
}
4554

4655
FeatureGrid.propTypes = {
4756
gridItems: PropTypes.arrayOf(

‎src/components/Footer.js

+1-6
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const Footer = class extends React.Component {
1717
<section className="menu">
1818
<ul className="menu-list">
1919
<li>
20-
<Link className="navbar-item" to="/" >
20+
<Link className="navbar-item" to="/">
2121
Home
2222
</Link>
2323
</li>
@@ -36,11 +36,6 @@ const Footer = class extends React.Component {
3636
About
3737
</Link>
3838
</li>
39-
<li>
40-
<Link className="navbar-item" to="/contact">
41-
Contact
42-
</Link>
43-
</li>
4439
<li>
4540
<Link
4641
className="navbar-item"

‎src/components/Layout.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import React from 'react'
22
import { Helmet } from 'react-helmet'
33
import Footer from '../components/Footer'
44
import Navbar from '../components/Navbar'
5-
import './all.sass'
65
import useSiteMetadata from './SiteMetadata'
76
import { withPrefix } from 'gatsby'
87

8+
// Import Styles
9+
import '../styles/all.sass'
10+
911
const TemplateWrapper = ({ children, hidenav }) => {
1012
const { title, description } = useSiteMetadata()
1113
return (
@@ -32,14 +34,13 @@ const TemplateWrapper = ({ children, hidenav }) => {
3234
href={`${withPrefix('/')}img/favicon-16x16.png`}
3335
sizes="16x16"
3436
/>
35-
3637
<link
3738
rel="mask-icon"
3839
href={`${withPrefix('/')}img/safari-pinned-tab.svg`}
3940
color="#ff4400"
4041
/>
41-
<meta name="theme-color" content="#fff" />
4242

43+
<meta name="theme-color" content="#fff" />
4344
<meta property="og:type" content="business.business" />
4445
<meta property="og:title" content={title} />
4546
<meta property="og:url" content="/" />

‎src/components/Navbar.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,11 @@ const Navbar = class extends React.Component {
4141
<div className="container">
4242
<div className="navbar-brand">
4343
<Link to="/" className="navbar-item" title="Logo">
44-
<img src={logo} alt="Rebecca Foran Logo" style={{ width: '35px'}} />
44+
<img
45+
src={logo}
46+
alt="Rebecca Foran Logo"
47+
style={{ width: '35px' }}
48+
/>
4549
</Link>
4650
{/* eslint-disable-next-line */}
4751
<div
@@ -68,9 +72,6 @@ const Navbar = class extends React.Component {
6872
<Link className="navbar-item" to="/about">
6973
About
7074
</Link>
71-
<Link className="navbar-item" to="/contact">
72-
Contact
73-
</Link>
7475
</div>
7576
</div>
7677
</div>

‎src/pages/contact/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ export default class Index extends React.Component {
101101
</div>
102102
</div>
103103
<div className="field">
104-
<button className="button is-link" type="submit">
104+
<button className="button is-link" type="submit" disabled>
105105
Send
106106
</button>
107107
</div>

‎src/pages/index.md

-2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,4 @@ links:
99
text: ARTWORK
1010
- link: /about
1111
text: ABOUT
12-
- link: /contact
13-
text: CONTACT
1412
---

‎src/components/all.sass ‎src/styles/all.sass

+4-3
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ $body-color: #333
1313
$black: #2b2523
1414

1515
.navbar .navbar-menu
16-
box-shadow:none !important
16+
box-shadow: none !important
1717

1818
.content, .taglist
1919
list-style: none
@@ -211,7 +211,8 @@ form
211211
flex-basis: 50%
212212
.homepage-link-container
213213
flex-direction: column
214-
.menu-list, .column & .social
214+
.menu-list,
215+
.column.social
215216
text-align: center !important
216217

217218
+mobile
@@ -240,4 +241,4 @@ form
240241
width: 100%
241242

242243
.section
243-
padding: 3rem 1.5rem 3rem 2rem
244+
padding: 6rem 1.5rem 3rem 2rem

‎src/templates/artwork-page.js

+7-14
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,8 @@ import { graphql } from 'gatsby'
55
import Layout from '../components/Layout'
66
import Features from '../components/Features'
77

8-
export const ArtworkPageTemplate = ({
9-
image,
10-
title,
11-
intro,
12-
}) => (
13-
<div key={ title }>
8+
export const ArtworkPageTemplate = ({ image, title, intro }) => (
9+
<div key={title}>
1410
<div
1511
className="full-width-image margin-top-0"
1612
style={{
@@ -34,8 +30,7 @@ export const ArtworkPageTemplate = ({
3430
<h1
3531
className="has-text-weight-bold is-size-3-mobile is-size-2-tablet is-size-1-widescreen"
3632
style={{
37-
boxShadow:
38-
'#616f75 0.5rem 0px 0px, #616f75 -0.5rem 0px 0px',
33+
boxShadow: '#616f75 0.5rem 0px 0px, #616f75 -0.5rem 0px 0px',
3934
backgroundColor: '#616f75',
4035
color: 'white',
4136
lineHeight: '1',
@@ -48,12 +43,10 @@ export const ArtworkPageTemplate = ({
4843
</div>
4944
<section className="section section--gradient">
5045
<div className="container">
51-
<div className="section">
52-
<div className="columns">
53-
<div className="column is-12">
54-
<div className="content">
55-
<Features key={title} gridItems={intro.portfolio} />
56-
</div>
46+
<div className="columns">
47+
<div className="column is-12">
48+
<div className="content">
49+
<Features key={title} gridItems={intro.portfolio} />
5750
</div>
5851
</div>
5952
</div>

0 commit comments

Comments
 (0)