Fixing lint for sections

.eslintrc.js

@@ -5,4 +5,8 @@ module.exports = {
     'react/require-default-props': 'off',
   },
   parser: 'babel-eslint',
+  env: {
+    browser: true,
+    node: true,
+  },
 };

README.md

@@ -25,7 +25,7 @@ At the same time, as this portfolio is written with Gatsby is extremely easy to
 ## Features 🛠
 
 - [Gatsby v2](https://www.gatsbyjs.org/)
-- [Rebass](https://rebassjs.org/): styled component system
+- [Rebass 3.0 🎉](https://rebassjs.org/): styled component system
 - [React Reveal](https://www.react-reveal.com/)
 - Dynamic content from [Contentful](https://contentful.com)
 - Offline support

src/components/Hide.js

@@ -1,24 +1,31 @@
 import styled from 'styled-components';
 
-export const breakpoints = {
+const breakpoints = {
   xs: '@media screen and (max-width: 40em)',
   sm: '@media screen and (min-width: 40em) and (max-width: 52em)',
   md: '@media screen and (min-width: 52em) and (max-width: 64em)',
   lg: '@media screen and (min-width: 64em)',
 };
 
-export const hidden = key => props =>
+const hidden = key => props =>
   props[key] && {
     [breakpoints[key]]: {
       display: 'none',
     },
   };
 
-export const xs = hidden('xs');
-export const sm = hidden('sm');
-export const md = hidden('md');
-export const lg = hidden('lg');
+const xs = hidden('xs');
+const sm = hidden('sm');
+const md = hidden('md');
+const lg = hidden('lg');
 
-const Hide = styled.div([], xs, sm, md, lg);
+const customQuery = props =>
+  props.query && {
+    [props.query]: {
+      display: 'none',
+    },
+  };
+
+const Hide = styled.div([], xs, sm, md, lg, customQuery);
 
 export default Hide;

src/components/LinkAnimated.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import { path } from 'ramda';
+
+const LinkAnimated = styled.span`
+  text-decoration: none;
+  position: relative;
+  margin-bottom: 0;
+  padding-bottom: 5px;
+  color: inherit;
+  ${props =>
+    props.selected &&
+    `border-bottom:  5px solid ${props.theme.colors.primaryLight}`};
+  transition: 0.4s;
+  cursor: ${props => (props.onClick ? 'pointer' : 'default')};
+
+  &:after {
+    content: '';
+    position: absolute;
+    right: 0;
+    width: 0;
+    bottom: -5px;
+    background: ${path(['theme', 'colors', 'secondaryLight'])};
+    height: 5px;
+    transition-property: width;
+    transition-duration: 0.3s;
+    transition-timing-function: ease-out;
+  }
+
+  &:hover:after {
+    left: 0;
+    right: auto;
+    width: 100%;
+  }
+`;
+
+export default LinkAnimated;

src/components/RouteLink.js

@@ -1,48 +1,11 @@
 import React from 'react';
 import { Box } from 'rebass';
-import styled from 'styled-components';
 import PropTypes from 'prop-types';
-
-const LinkAnimated = styled.span`
-  text-decoration: none;
-  position: relative;
-  margin-bottom: 0;
-  padding-bottom: 5px;
-  color: inherit;
-  border-bottom: ${props => `${props.borderWidth} solid transparent`};
-  border-bottom-color: ${props =>
-    props.selected && props.theme.colors.primaryLight};
-  transition: 0.4s;
-  scroll-behavior: smooth;
-
-  &:after {
-    content: '';
-    position: absolute;
-    right: 0;
-    width: 0;
-    bottom: -${props => props.borderWidth};
-    background: ${props => props.theme.colors.secondary};
-    height: ${props => props.borderWidth};
-    transition-property: width;
-    transition-duration: 0.3s;
-    transition-timing-function: ease-out;
-  }
-
-  &:hover:after {
-    left: 0;
-    right: auto;
-    width: 100%;
-  }
-`;
+import LinkAnimated from './LinkAnimated';
 
 const RouteLink = ({ onClick, selected, children }) => (
-  <Box
-    ml={[2, 3]}
-    color="background"
-    fontSize={[2, 3]}
-    style={{ cursor: 'pointer' }}
-  >
-    <LinkAnimated onClick={onClick} selected={selected} borderWidth="4px">
+  <Box ml={[2, 3]} color="background" fontSize={[2, 3]}>
+    <LinkAnimated onClick={onClick} selected={selected}>
       {children}
     </LinkAnimated>
   </Box>

src/components/Section.js

@@ -1,9 +1,10 @@
-import * as React from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { Section } from 'react-scroll-section';
 import { Heading } from 'rebass';
 import PropTypes from 'prop-types';
 import Slide from 'react-reveal/Slide';
+import LinkAnimated from './LinkAnimated';
 
 const SectionContainer = styled.div`
   min-height: 100vh;
@@ -30,45 +31,13 @@ const Container = ({ id, children, Background = DefaultBackground }) => (
 Container.propTypes = {
   id: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
-  // eslint-disable-next-line
-  css: PropTypes.object,
   Background: PropTypes.func,
 };
 
-const LinkAnimated = styled.span`
-  text-decoration: none;
-  position: relative;
-  margin-bottom: 0;
-  padding-bottom: 5px;
-  color: inherit;
-  border-bottom: ${props =>
-    `${props.borderWidth} dashed ${props.theme.colors.primaryLight}`};
-  transition: 0.4s;
-
-  &:after {
-    content: '';
-    position: absolute;
-    right: 0;
-    width: 0;
-    bottom: -${props => props.borderWidth};
-    background: ${props => props.theme.colors.secondaryLight};
-    height: ${props => props.borderWidth};
-    transition-property: width;
-    transition-duration: 0.3s;
-    transition-timing-function: ease-out;
-  }
-
-  &:hover:after {
-    left: 0;
-    right: auto;
-    width: 100%;
-  }
-`;
-
 const Header = ({ name, icon = '', label = '' }) => (
   <Slide left>
     <Heading color="secondaryDark" mb={4}>
-      <LinkAnimated borderWidth="5px">
+      <LinkAnimated selected>
         {name}
         {icon && (
           <span role="img" aria-label={label} style={{ marginLeft: '10px' }}>

src/components/SocialLink.js

@@ -1,22 +1,23 @@
 import React from 'react';
 import FontAwesome from 'react-fontawesome';
 import { Link } from 'rebass';
+import { path } from 'ramda';
 import { Tooltip } from 'react-tippy';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
 const IconLink = styled(Link)`
   transition: color 0.5s;
-  color: ${props => props.theme.colors[props.color]};
+  color: ${path(['theme', 'colors', 'primary'])};
 
   &:hover {
-    color: ${props => props.theme.colors[props.hover]};
+    color: ${path(['theme', 'colors', 'primaryLight'])};
   }
 `;
 
-const SocialLink = ({ fontAwesomeIcon, name, url, color, hoverColor }) => (
+const SocialLink = ({ fontAwesomeIcon, name, url }) => (
   <Tooltip title={name} position="bottom" trigger="mouseenter">
-    <IconLink href={url} target="_blank" color={color} hover={hoverColor}>
+    <IconLink href={url} target="_blank">
       <FontAwesome name={fontAwesomeIcon} />
     </IconLink>
   </Tooltip>
@@ -26,8 +27,6 @@ SocialLink.propTypes = {
   fontAwesomeIcon: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   url: PropTypes.string.isRequired,
-  color: PropTypes.string.isRequired,
-  hoverColor: PropTypes.string.isRequired,
 };
 
 export default SocialLink;

src/pages/404.jsx → src/pages/404.js

@@ -32,7 +32,7 @@ const Background = () => (
 const NotFoundPage = () => (
   <Layout>
     <Section.Container id="404" Background={Background}>
-      <Box w={[320, 400, 600]} m="auto">
+      <Box width={[320, 400, 600]} m="auto">
         <Heading color="primaryDark" fontSize={['9rem', '13rem', '16rem']}>
           404
         </Heading>

src/sections/Landing.jsx → src/sections/Landing.js

@@ -90,11 +90,7 @@ const LandingPage = () => (
             <Flex alignItems="center" justifyContent="center" flexWrap="wrap">
               {socialLinks.map(({ id, ...rest }) => (
                 <Box mx={3} fontSize={[5, 6, 6]} key={id}>
-                  <SocialLink
-                    color="primary"
-                    hoverColor="primaryLight"
-                    {...rest}
-                  />
+                  <SocialLink {...rest} />
                 </Box>
               ))}
             </Flex>

src/sections/Projects.jsx → src/sections/Projects.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Image, Text, Flex, Box } from 'rebass';
 import { StaticQuery, graphql } from 'gatsby';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { path } from 'ramda';
 import Fade from 'react-reveal/Fade';
 import Section from '../components/Section';
@@ -46,6 +47,8 @@ const Background = () => (
 
 const CARD_HEIGHT = '200px';
 
+const MEDIA_QUERY_SMALL = '@media (max-width: 400px)';
+
 const Title = styled(Text)`
   font-size: 14px;
   font-weight: 600;
@@ -61,7 +64,7 @@ const TextContainer = styled.div`
   width: 100%;
   width: calc(100% - ${CARD_HEIGHT});
 
-  ${path(['theme', 'breakpoint', 'sm'])} {
+  ${MEDIA_QUERY_SMALL} {
     width: calc(100% - (${CARD_HEIGHT} / 2));
   }
 `;
@@ -70,7 +73,7 @@ const ImageContainer = styled.div`
   margin: auto;
   width: ${CARD_HEIGHT};
 
-  ${path(['theme', 'breakpoint', 'sm'])} {
+  ${MEDIA_QUERY_SMALL} {
     width: calc(${CARD_HEIGHT} / 2);
   }
 `;
@@ -81,8 +84,7 @@ const ProjectImage = styled(Image)`
   padding: 40px;
   margin-top: 0px;
 
-  ${path(['theme', 'breakpoint', 'sm'])} {
-    /* height: 100px !important; */
+  ${MEDIA_QUERY_SMALL} {
     height: calc(${CARD_HEIGHT} / 2);
     width: calc(${CARD_HEIGHT} / 2);
     margin-top: calc(${CARD_HEIGHT} / 4);
@@ -97,7 +99,7 @@ const ProjectTag = styled.div`
     -${CARD_HEIGHT} - 4px
   ); /*don't know why I have to add 4px here ... */
 
-  ${path(['theme', 'breakpoint', 'sm'])} {
+  ${MEDIA_QUERY_SMALL} {
     top: calc(-${CARD_HEIGHT} - 4px + (${CARD_HEIGHT} / 4));
   }
 `;
@@ -134,19 +136,13 @@ const Project = ({
           >
             <Box mx={1} fontSize={5}>
               <SocialLink
-                color="primary"
-                hoverColor="primaryLight"
                 name="Check repository"
                 fontAwesomeIcon="github"
                 url={repositoryUrl}
               />
             </Box>
             <Box mx={1} fontSize={5}>
               <SocialLink
-                color="primary"
-                hoverColor="primaryLight"
-                fontSize={5}
-                mx={1}
                 name="See project"
                 fontAwesomeIcon="globe"
                 url={projectUrl}
@@ -156,7 +152,7 @@ const Project = ({
           <ImageSubtitle bg="primaryLight" color="white" y="bottom" x="right">
             {type}
           </ImageSubtitle>
-          <Hide xs>
+          <Hide query={MEDIA_QUERY_SMALL}>
             <ImageSubtitle bg="backgroundDark" invert>
               {publishedDate}
             </ImageSubtitle>
@@ -167,6 +163,20 @@ const Project = ({
   </Card>
 );
 
+Project.propTypes = {
+  name: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  projectUrl: PropTypes.string.isRequired,
+  repositoryUrl: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  publishedDate: PropTypes.string.isRequired,
+  logo: PropTypes.shape({
+    image: PropTypes.shape({
+      src: PropTypes.string,
+    }),
+  }).isRequired,
+};
+
 const Projects = () => (
   <Section.Container id="projects" Background={Background}>
     <Section.Header name="Projects" icon="💻" Box="notebook" />