Merge pull request #5 from henry-ns/dev

v1.0

.env.example

@@ -0,0 +1,2 @@
+GATSBY_GITHUB_TOKEN=
+GITHUB_TOKEN=

.eslintrc.js

@@ -27,18 +27,18 @@ module.exports = {
   ],
   rules: {
     'prettier/prettier': 'error',
-    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
-    'import/prefer-default-export': 'off',
-    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
-    'react/jsx-one-expression-per-line': 'off',
+    camelcase: 'off',
     'global-require': 'off',
-    'react-native/no-raw-text': 'off',
+    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
     'no-param-reassign': 'off',
     'no-underscore-dangle': 'off',
-    camelcase: 'off',
     'no-console': ['error', { allow: ['tron'] }],
+    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
+    'react/jsx-one-expression-per-line': 'off',
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
+    'import/prefer-default-export': 'off',
+    'import/no-extraneous-dependencies': 'off',
     'import-helpers/order-imports': [
       'warn',
       {

.gitignore

@@ -65,5 +65,8 @@ public
 yarn-error.log
 .pnp/
 .pnp.js
+
 # Yarn Integrity file
 .yarn-integrity
+
+!.env.example

gatsby-config.js

@@ -1,3 +1,5 @@
+require('dotenv').config();
+
 const path = require(`path`);
 
 const siteMetadata = require('./config/metadata');
@@ -30,6 +32,17 @@ module.exports = {
         icon: `src/assets/icon.png`,
       },
     },
+    {
+      resolve: `gatsby-source-graphql`,
+      options: {
+        typeName: 'GitHub',
+        fieldName: 'github',
+        url: 'https://api.github.com/graphql',
+        headers: {
+          Authorization: `token ${process.env.GITHUB_TOKEN}`,
+        },
+      },
+    },
     {
       resolve: `gatsby-plugin-page-creator`,
       options: {
@@ -40,12 +53,12 @@ module.exports = {
     `gatsby-plugin-styled-components`,
     `gatsby-plugin-preload-fonts`,
     `gatsby-plugin-polished`,
-    {
+    /* {
       resolve: `gatsby-plugin-nprogress`,
       options: {
         color: `#634D90`,
       },
-    },
+    }, */
     {
       resolve: `gatsby-plugin-google-analytics`,
       options: {

gatsby/wrapRootElement.js

@@ -1,13 +1,17 @@
 import React from 'react';
+import { ApolloProvider } from 'react-apollo';
 import { HelmetProvider } from 'react-helmet-async';
 
 import PropTypes from 'prop-types';
 
-import { SectionsProvider } from '../src/context/sectionsContext';
+import { client } from '../src/context/ApolloContext';
+import { SectionsProvider } from '../src/context/SectionsContext';
 
 export const wrapRootElement = ({ element }) => (
   <HelmetProvider>
-    <SectionsProvider>{element}</SectionsProvider>
+    <SectionsProvider>
+      <ApolloProvider client={client}>{element}</ApolloProvider>
+    </SectionsProvider>
   </HelmetProvider>
 );
 

package.json

@@ -5,16 +5,17 @@
   "version": "0.1.0",
   "author": "Henrique Miranda <[email protected]>",
   "dependencies": {
+    "apollo-boost": "^0.4.7",
     "babel-plugin-polished": "^1.1.0",
     "babel-plugin-styled-components": "^1.10.6",
+    "dotenv": "^8.2.0",
     "framer-motion": "^1.7.0",
     "gatsby": "^2.18.16",
     "gatsby-image": "^2.2.37",
     "gatsby-plugin-google-analytics": "^2.1.31",
     "gatsby-plugin-manifest": "^2.2.34",
     "gatsby-plugin-netlify": "^2.1.30",
     "gatsby-plugin-netlify-cache": "^1.2.0",
-    "gatsby-plugin-nprogress": "^2.1.17",
     "gatsby-plugin-offline": "^3.0.30",
     "gatsby-plugin-page-creator": "^2.1.37",
     "gatsby-plugin-polished": "^1.0.4",
@@ -24,10 +25,14 @@
     "gatsby-plugin-sitemap": "^2.2.24",
     "gatsby-plugin-styled-components": "^3.1.16",
     "gatsby-source-filesystem": "^2.1.43",
+    "gatsby-source-graphql": "^2.1.32",
     "gatsby-transformer-sharp": "^2.3.9",
+    "graphql-tag": "^2.10.1",
+    "isomorphic-fetch": "^2.2.1",
     "polished": "^3.4.2",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
+    "react-apollo": "^3.1.3",
     "react-dom": "^16.12.0",
     "react-helmet-async": "^1.0.4",
     "react-icons": "^3.8.0",

src/atoms/Scroll/index.js

@@ -2,7 +2,7 @@ import React, { useContext, useEffect } from 'react';
 
 import PropTypes from 'prop-types';
 
-import SectionsContext from '~/context/sectionsContext';
+import SectionsContext from '~/context/SectionsContext';
 
 function Scroll({ refs }) {
   const { selected, setSelectedByName, pageHeight } = useContext(

src/atoms/SkillItem/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import { motion } from 'framer-motion';
 import PropTypes from 'prop-types';

src/atoms/Title/index.js

@@ -3,7 +3,7 @@ import React, { useContext, useEffect } from 'react';
 import { useAnimation } from 'framer-motion';
 import PropTypes from 'prop-types';
 
-import SectionsContext from '~/context/sectionsContext';
+import SectionsContext from '~/context/SectionsContext';
 
 import { Container } from './styles';
 

src/context/ApolloContext.js

@@ -0,0 +1,14 @@
+import ApolloClient from 'apollo-boost';
+import fetch from 'isomorphic-fetch';
+
+export const client = new ApolloClient({
+  uri: 'https://api.github.com/graphql',
+  request: async operation => {
+    operation.setContext({
+      headers: {
+        authorization: `token ${process.env.GATSBY_GITHUB_TOKEN}`,
+      },
+    });
+  },
+  fetch,
+});

src/context/sectionsContext.js → src/context/SectionsContext.js

@@ -4,7 +4,7 @@ import { useViewportScroll } from 'framer-motion';
 import PropTypes from 'prop-types';
 
 const SectionsContext = createContext();
-const sections = ['home', 'education', 'skills', /* 'projects', */ 'about'];
+const sections = ['home', 'education', 'skills', 'projects', 'about'];
 
 export function SectionsProvider({ children }) {
   const [selected, setSelectedByName] = useState('home');

src/molecules/Menu/index.js

@@ -1,14 +1,70 @@
-import React, { useState, useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { FiMenu } from 'react-icons/fi';
 
-import SectionsContext from '~/context/sectionsContext';
+import { motion, useAnimation } from 'framer-motion';
 
-import { Container, MenuItem, ProfileImg } from './styles';
+import SectionsContext from '~/context/SectionsContext';
+
+import { Container, MenuItem } from './styles';
+
+const listAnimation = {
+  hidden: {
+    x: '100%',
+    transition: {
+      type: 'spring',
+      damping: 15,
+      when: 'afterChildren',
+      staggerChildren: 0.05,
+      staggerDirection: -1,
+    },
+  },
+  show: {
+    x: 0,
+    transition: {
+      type: 'tween',
+      duration: 0.6,
+      ease: 'easeOut',
+      when: 'beforeChildren',
+      staggerChildren: 0.07,
+    },
+  },
+};
+
+const itemAnimation = {
+  hidden: {
+    y: 40,
+    opacity: 0,
+    transition: {
+      y: { stiffness: 1000 },
+    },
+  },
+  show: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      type: 'spring',
+      when: 'afterChildren',
+      y: { stiffness: 1000, velocity: -100 },
+    },
+  },
+  hover: {
+    scale: 1.15,
+  },
+  tap: {
+    scale: 0.95,
+  },
+};
 
 function Menu() {
+  const controlAnimation = useAnimation();
+
   const [pressed, setPressed] = useState(false);
   const { sections, selected, setSelectedByName } = useContext(SectionsContext);
 
+  useEffect(() => {
+    controlAnimation.start(pressed ? 'show' : 'hidden');
+  }, [controlAnimation, pressed]);
+
   function handlerSelected(event, name) {
     event.preventDefault();
 
@@ -21,21 +77,31 @@ function Menu() {
   return (
     <Container pressed={pressed}>
       <FiMenu size={40} onClick={() => setPressed(!pressed)} />
-      <ProfileImg />
 
-      <ul>
+      <motion.ul
+        initial="hidden"
+        variants={listAnimation}
+        animate={controlAnimation}
+      >
         {sections.map(name => (
-          <MenuItem key={name} selected={selected === name}>
-            <a
+          <MenuItem
+            key={name}
+            initial="hidden"
+            whileHover="hover"
+            whileTap="tap"
+            variants={itemAnimation}
+            selected={selected === name}
+          >
+            <motion.a
               href={`#${name}`}
               alt={`Go to the ${name} section`}
               onClick={e => handlerSelected(e, name)}
             >
               {name}
-            </a>
+            </motion.a>
           </MenuItem>
         ))}
-      </ul>
+      </motion.ul>
     </Container>
   );
 }