Transitions WIP 👌

LekoArts · Dec 29, 2018 · 0a7dbfc · 0a7dbfc
1 parent f6a4e5d
commit 0a7dbfc
Show file tree

Hide file tree

Showing 15 changed files with 430 additions and 640 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -0,0 +1,59 @@
+executors:
+  node:
+    parameters:
+      image:
+        type: string
+        default: "10"
+    docker:
+    - image: circleci/node:<< parameters.image >>
+      environment:
+        TERM: xterm
+
+aliases:
+  restore_cache: &restore_cache
+    restore_cache:
+      name: Restore Yarn Package Cache
+      keys:
+      - v{{ .Environment.versionCache }}-deps-{{ .Branch }}-{{ checksum "yarn.lock" }}-{{ checksum ".circleci/config.yml" }}
+
+  install_node_modules: &install_node_modules
+    run:
+      name: Install Yarn Packages
+      command: yarn install --frozen-lockfile
+
+  save_cache: &save_cache
+    save_cache:
+      name: Save Yarn Package Cache
+      key: v{{ .Environment.versionCache }}-deps-{{ .Branch }}-{{ checksum "yarn.lock" }}-{{ checksum ".circleci/config.yml" }}
+      paths:
+      - /home/circleci/.cache
+
+  store_results: &store_results
+    store_test_results:
+      path: results
+
+  store_results_artifacts: &store_results_artifacts
+    store_artifacts:
+      path: results
+
+version: 2.1
+
+jobs:
+  lint:
+    executor: node
+    steps:
+    - checkout
+    - <<: *restore_cache
+    - <<: *install_node_modules
+    - <<: *save_cache
+    - run:
+        name: Run ESLint
+        command: yarn lint:ci
+    - <<: *store_results
+    - <<: *store_results_artifacts
+
+workflows:
+  version: 2
+  lint-test:
+    jobs:
+    - lint
diff --git a/config/theme.js b/config/theme.js
@@ -16,4 +16,10 @@ module.exports = {
   },
   gridColumns: 2,
   contentPadding: '1.0875rem',
+  breakpoints: {
+    xs: '400px',
+    s: '600px',
+    m: '900px',
+    l: '1200px',
+  },
 }
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -0,0 +1,3 @@
+import pageElementWithTransition from './src/utils/wrapPageElement'
+
+export const wrapPageElement = pageElementWithTransition
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
@@ -0,0 +1,3 @@
+import pageElementWithTransition from './src/utils/wrapPageElement'
+
+export const wrapPageElement = pageElementWithTransition
diff --git a/package.json b/package.json
@@ -37,24 +37,22 @@
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-helmet": "^5.2.0",
+    "react-spring": "^7.2.5",
     "styled-components": "^4.1.3",
     "styled-theming": "^2.2.0",
     "typeface-fira-sans": "^0.0.54",
     "typeface-montserrat": "^0.0.54"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.1",
-    "cypress": "^3.1.3",
-    "cypress-testing-library": "^2.3.4",
     "eslint": "^5.10.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^3.3.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react": "^7.11.1",
-    "prettier": "^1.15.3",
-    "start-server-and-test": "^1.7.11"
+    "prettier": "^1.15.3"
   },
   "homepage": "https://github.com/LekoArts/gatsby-starter-portfolio-emilia#readme",
   "bugs": {

diff --git a/src/components/Card.js b/src/components/Card.js
@@ -11,37 +11,15 @@ const CardItem = styled(Link)`
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: flex-end;
   color: ${props => props.theme.colors.color};
   transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 
-  &:after {
-    content: '';
-    position: absolute;
-    display: block;
-    width: 102%;
-    height: 102%;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0.75) 0%,
-      rgba(0, 0, 0, 0) 20%,
-      rgba(0, 0, 0, 0) 80%,
-      rgba(0, 0, 0, 0.75) 100%
-    );
-    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-    opacity: 0;
-  }
-
   &:hover {
-    transform: translateY(-15px);
     color: white;
     &:after {
       opacity: 1;
     }
-    box-shadow: 0 35px 48px rgba(0, 0, 0, 0.3), 0 30px 20px rgba(0, 0, 0, 0.2);
   }
 `
 
@@ -54,78 +32,52 @@ const Cover = styled.div`
   }
 `
 
-const Header = styled.div`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  padding: 1rem;
-  z-index: 10;
-  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  opacity: 0;
-
-  ${CardItem}:hover & {
-    opacity: 1;
-  }
-`
-
-const DateWrapper = styled.div`
-  font-size: 0.9rem;
-`
-
-const Data = styled.div`
-  z-index: 10;
-  position: relative;
-  width: 100%;
-`
-
 const Content = styled.div`
   padding: 1rem;
   position: relative;
   transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   opacity: 0;
+  background: ${props => props.theme.colors.link};
 
   ${CardItem}:hover & {
     opacity: 1;
   }
 `
 
-const Areas = styled.span`
-  font-size: 0.75rem;
-`
-
-const AreaItem = styled.span`
-  &:not(:last-child) {
-    margin-right: 0.25rem;
-    &:after {
-      content: ',';
-    }
+const Bottom = styled.div`
+  margin-top: 0.5rem;
+  display: flex;
+  align-items: center;
+  font-size: 0.85rem;
+  div:first-child {
+    margin-right: 1rem;
   }
 `
 
 const Name = styled.h2`
-  margin-top: 1.25rem;
   margin-bottom: 0;
+  margin-top: 0;
 `
 
 const Card = ({ path, cover, date, areas, title }) => (
   <CardItem to={path}>
     <Cover>
-      <Img sizes={cover} />
+      <Img fluid={cover} />
     </Cover>
-    <Header>
-      <DateWrapper>{date}</DateWrapper>
-      <Areas>
-        {areas.map(area => (
-          <AreaItem key={area}>{area}</AreaItem>
-        ))}
-      </Areas>
-    </Header>
-    <Data>
-      <Content>
-        <Name>{title}</Name>
-      </Content>
-    </Data>
+    <Content>
+      <Name>{title}</Name>
+      <Bottom>
+        <div>{date}</div>
+        <div>
+          {areas.map((area, index) => (
+            <React.Fragment key={area}>
+              {index > 0 && ', '}
+              {area}
+            </React.Fragment>
+          ))}
+        </div>
+      </Bottom>
+    </Content>
   </CardItem>
 )
 

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,10 +1,13 @@
 import React from 'react'
 import styled from 'styled-components'
 
-const Content = styled.p`
+const Content = styled.footer`
   color: ${props => props.theme.colors.secondary};
   padding: 0 ${props => props.theme.contentPadding};
   text-align: center;
+  font-size: 0.9rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 `
 
 const Footer = () => (

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -3,17 +3,18 @@ import styled from 'styled-components'
 import PropTypes from 'prop-types'
 
 const Wrapper = styled.div`
-    background: url("${props => props.theme.bgPattern}") #000;
-    display: flex;
-    position: relative;
+  background: url("${props => props.theme.bgPattern}") #000;
+  display: flex;
+  position: relative;
 `
 
 const Content = styled.div`
   margin: 0 auto;
   max-width: ${props => props.theme.maxWidths.general};
-  padding: 3rem 1.0875rem 10rem 1.0875rem;
+  padding: 3rem 1.0875rem 3rem 1.0875rem;
   color: ${props => props.theme.colors.secondary};
   text-align: center;
+  height: 600px;
 `
 
 const Avatar = styled.div`

diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -5,24 +5,17 @@ import { createGlobalStyle, ThemeProvider } from 'styled-components'
 
 import { SEO, Footer } from './index'
 import theme from '../../config/theme'
+import reset from '../styles/reset'
 
 const GlobalStyle = createGlobalStyle`
-  body {
-    background: ${theme.colors.bg};
-    color: ${theme.colors.color};
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  ${reset}
+  
+  html {
+    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   }
-
-  a {
-    color: ${theme.colors.link};
-    transition: color .5s;
-    text-decoration: none;
-  }
-
-  a:hover {
-    text-decoration: none;
-    color: ${theme.colors.linkHover};
+  
+  h1, h2, h3, h4, h5, h6 {
+    font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   }
 
   .gatsby-resp-image-wrapper {

diff --git a/src/components/ProjectHeader.js b/src/components/ProjectHeader.js
@@ -7,7 +7,7 @@ import MDXRenderer from 'gatsby-mdx/mdx-renderer'
 import arrow from '../images/left-chevron.svg'
 
 const Wrapper = styled.div`
-  background: ${`url("${props => props.theme.bgPattern}") #000`};
+  background: url("${props => props.theme.bgPattern}") #000;
   display: flex;
   position: relative;
 `
@@ -27,22 +27,24 @@ const Back = styled(Link)`
   justify-content: flex-start;
 
   img[data-info='back'] {
-    width: 25px;
-    height: 25px;
+    width: 1.5rem;
+    height: 1.5rem;
     margin: 0 1rem 0 0;
   }
 `
 
 const Avatar = styled.div`
-  height: 40px;
-  width: 40px;
+  height: 3rem;
+  width: 3rem;
   image-rendering: -moz-crisp-edges;
   image-rendering: -o-crisp-edges;
   image-rendering: -webkit-optimize-contrast;
   -ms-interpolation-mode: nearest-neighbor;
 
   img {
     border-radius: 50%;
+    height: auto;
+    width: 100%;
   }
 `
 
@@ -59,15 +61,6 @@ const Details = styled.div`
   h1 {
     color: ${props => props.theme.colors.color};
   }
-
-  span {
-    &:not(:last-child) {
-      margin-right: 0.25rem;
-      &:after {
-        content: ',';
-      }
-    }
-  }
 `
 
 const Text = styled.div`
@@ -80,7 +73,7 @@ const ProjectHeader = ({ avatar, name, title, date, areas, text }) => (
   <Wrapper>
     <Content>
       <Back to="/">
-        <img src={arrow} data-info="back" alt="test" />
+        <img src={arrow} data-info="back" alt="Back to home" aria-label="Back to home" />
         <Avatar>
           <img src={avatar} alt={name} />
         </Avatar>
@@ -90,8 +83,11 @@ const ProjectHeader = ({ avatar, name, title, date, areas, text }) => (
         <h1>{title}</h1>
         <p>{date}</p>
         <div>
-          {areas.map(area => (
-            <span key={area}>{area}</span>
+          {areas.map((area, index) => (
+            <React.Fragment key={area}>
+              {index > 0 && ', '}
+              {area}
+            </React.Fragment>
           ))}
         </div>
         {text && (