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

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'>
    <Element name="home">
      <Section id="home" className="home-banner-section">
        <HomeBanner />
      </Section>
    </Element>
    
    <Element name="about">
      <Section id="about-me" className="about-section">
        <About />
      </Section>
    </Element>
    
    <Section id="skills" className="skills-section">
      <Skills />
    </Section>
    
    <Element name="portfolio">
      <Section id="portfolio" className="portfolio-section">
          <Portfolio />
      </Section>
    </Element>

    <Element name="contact">
      <Section id="contact" className="contact-section">
        <Contact />
      </Section>
    </Element>
  </div>

export default IndexPage

Fix section scrolling inside padding
Fix section scrolling inside padding
