import React from 'react'
import Link from 'gatsby-link'
import Section from '../components/Section'
import HomeBanner from '../components/HomeBanner'
import About from '../components/About'
import Skills from '../components/Skills'
import Portfolio from '../components/Portfolio'
import Contact from '../components/Contact'

import { Element } from 'react-scroll'

const IndexPage = () =>
  <div className='page-sections'>
    <Section id="home" className="home-banner-section">
      <Element name="home">
        <HomeBanner />
      </Element>
    </Section>
    
    <Section id="about-me" className="about-section">
      <Element name="about">
        <About />
      </Element>
    </Section>
    
    <Section id="skills" className="skills-section">
      <Skills />
    </Section>
    
    <Section id="portfolio" className="portfolio-section">
      <Element name="portfolio">
        <Portfolio />
      </Element>
    </Section>
    
    <Section id="contact" className="contact-section">
      <Element name="contact">
        <Contact />
      </Element>
    </Section>
  </div>

export default IndexPage

@@ -417,16 +417,44 @@
 tions'%3E%0A
+    %3CElement name=%22home%22%3E%0A  
     %3CSec
@@ -511,92 +511,93 @@
     
-%3CElement name=%22home%22%3E%0A        %3CHomeBanner /%3E%0A      %3C/Element%3E%0A    %3C/Section
+  %3CHomeBanner /%3E%0A      %3C/Section%3E%0A    %3C/Element%3E%0A    %0A    %3CElement name=%22about%22
 %3E%0A    
-%0A  
   %3CS
@@ -648,37 +648,8 @@
 n%22%3E%0A
-      %3CElement name=%22about%22%3E%0A
     
@@ -666,39 +666,39 @@
  /%3E%0A      %3C/
-Element
+Section
 %3E%0A    %3C/
 Section%3E%0A   
@@ -677,39 +677,39 @@
 /Section%3E%0A    %3C/
-Section
+Element
 %3E%0A    %0A    %3CSect
@@ -781,32 +781,65 @@
 %3C/Section%3E%0A    %0A
+    %3CElement name=%22portfolio%22%3E%0A  
     %3CSection id=
@@ -891,32 +891,22 @@
     
-%3CElement name=%22p
+    %3CP
 ortfolio
 %22%3E%0A 
@@ -901,25 +901,26 @@
 ortfolio
-%22
+ /
 %3E%0A      
   %3CPortf
@@ -911,38 +911,31 @@
 %3E%0A      
- 
- %3CPortfolio /
+%3C/Section
 %3E%0A    
-  
 %3C/Elemen
@@ -937,38 +937,50 @@
 lement%3E%0A
+%0A
     %3C
-/Section
+Element name=%22contact%22
 %3E%0A    
-%0A  
   %3CSecti
@@ -1028,39 +1028,8 @@
 n%22%3E%0A
-      %3CElement name=%22contact%22%3E%0A
     
@@ -1056,23 +1056,23 @@
   %3C/
-Element
+Section
 %3E%0A    %3C/
 Sect
@@ -1063,31 +1063,31 @@
 tion%3E%0A    %3C/
-Section
+Element
 %3E%0A  %3C/div%3E%0A%0A

Fix section scrolling inside padding