Animations (#32)

* image optimization * create helper to animate on scroll * add framer-motion@1.11.0 * page transition animate * animates the timeline * animates the skillbar * add animateOnScroll in the index page * some adjustments in the Repositories component * add hover effect in the header links * fix portifolio hero image path
santosfrancisco · Jun 13, 2020 · 772fc4e · 772fc4e
1 parent 4c2641c
commit 772fc4e
Show file tree

Hide file tree

Showing 12 changed files with 278 additions and 97 deletions.
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
   "author": "Francisco Santos <yoshi.df@gmail.com>",
   "dependencies": {
     "babel-plugin-styled-components": "1.10.6",
+    "framer-motion": "1.11.0",
     "gatsby": "2.23.3",
     "gatsby-image": "2.4.7",
     "gatsby-plugin-google-analytics": "2.3.4",

diff --git a/src/components/header/header.js b/src/components/header/header.js
@@ -28,6 +28,9 @@ const HeaderNav = styled.nav`
   overflow-x: auto;
   overflow-y: hidden;
   background-color: #25303B;
+  a:hover {
+    filter: brightness(0.6);
+  }
 `
 
 const HeaderLinkGroup = styled.div`
@@ -50,6 +53,7 @@ const HeaderLink = styled(Link)`
   min-width: 42px;
   z-index: 10;
   ${({ active }) => active && css`
+    pointer-events: none;
     border-bottom: 2px solid #fff;
   `}
 `

diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js
@@ -1,21 +1,35 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { motion } from 'framer-motion'
 import { ResetCSS, GlobalStyle } from '../styles'
 import Header from '../header'
 import Footer from '../footer'
 
+const variants = {
+  initial: { y: 100, opacity: 0 },
+  enter: { y: 0, opacity: 1, transition: { duration: 0.5 } },
+}
+
 const Layout = ({ children, location }) => (
   <React.Fragment>
     <ResetCSS />
     <GlobalStyle />
     <Header location={location} />
-    <div>{children}</div>
+    <motion.main
+      key={location}
+      variants={variants}
+      initial="initial"
+      animate="enter"
+    >
+      {children}
+    </motion.main>
     <Footer />
   </React.Fragment>
 )
 
 Layout.propTypes = {
   children: PropTypes.node.isRequired,
+  location: PropTypes.string.isRequired,
 }
 
 

diff --git a/src/components/repositories/repositories.js b/src/components/repositories/repositories.js
@@ -1,6 +1,7 @@
 import React from "react";
 import jsonFetch from "simple-json-fetch";
 import styled from 'styled-components'
+import { GoStar, GoRepoForked, GoLinkExternal } from 'react-icons/go'
 import siteConfig from '../../../data/siteConfig'
 
 import Loader from '../loader'
@@ -36,21 +37,35 @@ class Repositories extends React.Component {
                 {this.state.repos.map(repo => (
                   <React.Fragment key={repo.name}>
                     <div className="repositories__repo">
-                      <a className='repositories__repo-link' href={repo.html_url}>
+                      <a 
+                        className='repositories__repo-link' 
+                        href={repo.html_url}
+                        target="_blank"
+                      >
                         <strong>{repo.name}</strong>
                       </a>
                       <div>{repo.description}</div>
                       <div className="repositories__repo-date">
                         Updated: {new Date(repo.updated_at).toUTCString()}
                       </div>
                       <div className="repositories__repo-star">
-                        ★ {repo.stargazers_count}
+                        {repo.fork && <GoRepoForked />}
+                        <GoStar /> {repo.stargazers_count}
                       </div>
                     </div>
                     <hr />
                   </React.Fragment>
                 ))}
               </div>
+              <div className="repositories_user-link">
+                <a 
+                  href={`https://github.com/${siteConfig.githubUsername}`}
+                  target="_blank"
+                >
+                  See all my repositories
+                  <GoLinkExternal style={{ marginLeft: 8 }} />
+                </a>
+              </div>
             </React.Fragment>
           )}
       </div>
@@ -68,9 +83,17 @@ export default styled(Repositories)`
     position: relative;
   }
 
-  .repositories__repo-link {
+  .repositories__repo-link,
+  .repositories_user-link a {
     text-decoration: none;
     color: #25303B;
+    display: flex;
+    align-items: center;
+  }
+
+  .repositories_user-link {
+    display: flex;
+    justify-content: flex-end;
   }
 
   .repositories__repo-date {
@@ -82,6 +105,11 @@ export default styled(Repositories)`
     position: absolute;
     top: 0;
     right: 0;
+    display: flex;
+    align-items: center;
+    svg {
+      margin-right: 4px;
+    }
   }
 
   .repositories__loader {

diff --git a/src/components/skills/skill-bar.js b/src/components/skills/skill-bar.js
@@ -6,7 +6,7 @@ const SkillBar = ({ className, name, level }) => {
     <div className={className}>
       <label htmlFor={`${name}-bar`}>{name}</label>
       <div id={`${name}-bar`} className='skill__bar'>
-        <div className='skill__level'></div>
+        <div className='skill__level animate-on-scroll'></div>
       </div>
     </div>
   )
@@ -24,7 +24,12 @@ export default styled(SkillBar)`
   }
   .skill__level {
     background-color: #25303B;
-    width: ${p => p.level || 0}%;
+    width: 0;
     height: 8px;
+
+    &.is-visible {
+      transition: width .5s ease-in;
+      width: ${p => p.level || 0}%;
+    }
   }
 `
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
@@ -3,25 +3,33 @@ import styled from 'styled-components'
 import { config } from 'react-awesome-styled-grid'
 import siteConfig from '../../../data/siteConfig'
 
-const Timeline = ({ className }) => {
-  return (
-    <div className={className}>
-      <h1>Experience</h1>
-      {siteConfig.jobs && siteConfig.jobs.map(job => (
-        <article key={job.begin.month + job.begin.year} className='timeline__item'>
-          <div className="inner">
-            <span className="timeline__date">
-              <span className="timeline__month">{job.begin.month}</span>
-              <span className="timeline__year">{job.begin.year}</span>
-            </span>
-            <h2 className='timeline__title'>{job.occupation} at {job.company} <br /><small className='timeline__title--small'>({job.duration || 'present'})</small></h2>
+const Timeline = ({ className }) => (
+  <div className={className}>
+    <h1>Experience</h1>
+    {siteConfig.jobs && siteConfig.jobs.map(job => (
+      <article 
+        key={job.begin.month + job.begin.year} 
+        className='timeline__item animate-on-scroll'
+      >
+        <div className="inner">
+          <span className="timeline__date">
+            <span className="timeline__month">{job.begin.month}</span>
+            <span className="timeline__year">{job.begin.year}</span>
+          </span>
+          <div className="timeline__card">
+            <h2 className='timeline__card-title'>
+              {job.occupation} at {job.company} <br />
+              <small className='timeline__card-title--small'>
+                ({job.duration || 'present'})
+              </small>
+            </h2>
             <p>{job.description}</p>
           </div>
-        </article>
-      ))}
-    </div>
-  )
-}
+        </div>
+      </article>
+    ))}
+  </div>
+)
 
 export default styled(Timeline)`
 
@@ -51,8 +59,6 @@ export default styled(Timeline)`
     width: 100%;
     float: left;
     margin: 85px 0 0 0;
-    border-radius: 6px;
-    border: 1px solid #25303B;
   }
   .timeline__date {
     display: block;
@@ -82,7 +88,12 @@ export default styled(Timeline)`
   .timeline__year {
     font-size: 10px;
   }
-  .timeline__title {
+  .timeline__card {
+    border-radius: 6px;
+    border: 1px solid #25303B;
+    transform: translate(-50%);
+  }
+  .timeline__card-title {
     padding: 15px;
     margin: 0;
     color: #fff;
@@ -91,7 +102,7 @@ export default styled(Timeline)`
     border-radius: 3px 3px 0 0;
     position: relative;
   }
-  .timeline__title:after {
+  .timeline__card-title:after {
     content: '';
     position: absolute;
     top: -5px;
@@ -110,19 +121,29 @@ export default styled(Timeline)`
   }
   .timeline__item:nth-child(2n+2) div.inner {
     float: right;
+    .timeline__card {
+      transform: translate(50%);
+    }
   }
-  .timeline__title {
+  .timeline__card-title {
     background: #25303B;
   }
-  .timeline__title:after {
+  .timeline__card-title:after {
     background: #25303B;
   }
 
-  .timeline__title--small {
+  .timeline__card-title--small {
     font-size: 10px;
   }
 
-  ${p => config().media['sm']`
+  .timeline__item.is-visible div.inner {
+    .timeline__card {
+      transition: transform .8s ease-in;
+      transform: translate(0);
+    }
+  }
+
+  ${p => config(p).media['sm']`
   .timeline__item div.inner {
     width: 40%;
     margin: 5px 0 0 0;