Consolidate functionality between nested components

Author: andydevs

src/components/spacer.js src/components/section.jssrc/components/spacer.js renamed to src/components/section.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
 // Spacer component
-export default styled.div`
-    height: 35vh;
+export default styled.section`
+    margin: 35vh 0pt;
 `

src/pages/index.js

@@ -3,21 +3,16 @@ import { Helmet } from 'react-helmet'
 import { graphql, useStaticQuery } from 'gatsby'
 import styled from 'styled-components'
 import GlobalStyle from '../styling'
-import Spacer from '../components/spacer'
 import Hero from '../sections/hero'
 import About from '../sections/about'
 import Projects from '../sections/projects'
 import Work from '../sections/work'
 import Footer from '../sections/footer'
 
 const StyledMain = styled.main`
-    margin: 12pt;
-`
-
-const WidthLockContainer = styled.div`
     margin: 0pt auto;
-    padding-left: env(safe-area-inset-left, 0px);
-    padding-right: env(safe-area-inset-right, 0pt);
+    padding-left: calc(12pt + env(safe-area-inset-left, 0px));
+    padding-right: calc(12pt + env(safe-area-inset-right, 0pt));
     max-width: 1200px;
 `
 
@@ -43,19 +38,12 @@ export default function Home() {
             </Helmet>
             <GlobalStyle />
             <Hero/>
-            <WidthLockContainer>
-                <StyledMain>
-                    <Spacer />
-                    <About />
-                    <Spacer />
-                    <Projects />
-                    <Spacer />
-                    <Work />
-                    <Spacer />
-                </StyledMain>
-            </WidthLockContainer>
+            <StyledMain>
+                <About />
+                <Projects />
+                <Work />
+            </StyledMain>
             <Footer />
-            <Spacer />
         </div>
     )
 }

src/sections/about.js

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import { GatsbyImage, getImage } from 'gatsby-plugin-image'
+import Section from '../components/section'
 
 const Grid = styled.div`
     display: grid;
@@ -105,7 +106,7 @@ export default function About() {
     `)
 
     return (
-        <section id="about">
+        <Section id="about">
             <h1
                 data-sal="slide-up"
                 data-sal-duration="500"
@@ -142,6 +143,6 @@ export default function About() {
                     </StyledLink>
                 </Description>
             </Grid>
-        </section>
+        </Section>
     )
 }

src/sections/footer.js

@@ -10,6 +10,7 @@ import {
 import styled from 'styled-components'
 
 const StyledFooter = styled.footer`
+    margin: 35vh 0px;
     padding: 12pt 0pt;
     text-align: center;
     color: var(--faded);

src/sections/projects.js

@@ -6,6 +6,7 @@ import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import IconLink from '../components/iconlink'
 import { GatsbyImage, getImage } from 'gatsby-plugin-image'
+import Section from '../components/section'
 const githubLink = github => {
     let path = github.split('/')
     return `http:`
@@ -39,7 +40,7 @@ export default function Projects() {
 
     // Render
     return (
-        <section id="projects">
+        <Section id="projects">
             <h1
                 data-sal="slide-up"
                 data-sal-duration="500"
@@ -85,6 +86,6 @@ export default function Projects() {
                     )
                 )}
             </Grid>
-        </section>
+        </Section>
     )
 }

src/sections/work.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { useStaticQuery, graphql } from 'gatsby'
 import styled from 'styled-components'
+import Section from '../components/section'
 
 const Title = styled.h3`
     font-weight: 600;
@@ -98,7 +99,7 @@ export default function Work() {
 
     // Render
     return (
-        <section id="work-experience">
+        <Section id="work-experience">
             <h1
                 data-sal="slide-up"
                 data-sal-duration="500"
@@ -137,6 +138,6 @@ export default function Work() {
                     )}
                 </tbody>
             </WorkTable>
-        </section>
+        </Section>
     )
 }