Update cert

modules/core/components/SectionLoading.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import ScaleLoader from 'react-spinners/ScaleLoader'
+import theme from '~/modules/core/theme/styleguide/theme'
+
+const Loading = () => (
+  <div className="progress-theme">
+    <div className="inner">
+      <div className="loader">
+        <ScaleLoader
+          sizeUnit={'px'}
+          height={100}
+          width={15}
+          color={theme.colors.colorAccent}
+          loading
+        />
+      </div>
+    </div>
+
+    <style jsx>{`
+      .progress-theme {
+        -webkit-transition: all 0.2s ease-out;
+        -moz-transition: all 0.2s ease-out;
+        -o-transition: all 0.2s ease-out;
+        transition: all 0.2s ease-out;
+        z-index: 9999999;
+        position: relative;
+        margin: 128px;
+      }
+      .inner {
+        -webkit-transition: all 0.3s ease-out;
+        -moz-transition: all 0.3s ease-out;
+        -o-transition: all 0.3s ease-out;
+        transition: all 0.3s ease-out;
+        display: flex;
+        justify-content: center;
+      }
+      .loader {
+        display: block;
+        width: 200px;
+        height: 120px;
+        text-align: center;
+        font-size: ${theme.fontSizes.XXXL};
+        line-height: 90px;
+      }
+    `}</style>
+  </div>
+)
+
+export default Loading

modules/core/utils/helpers.js

@@ -11,7 +11,7 @@ export const initHashLocation = () => {
       setTimeout(() => {
         const offset = $(location.hash).offset()
         window.scrollTo(offset.left, offset.top)
-      }, 300)
+      }, 1000)
     }
   }
 }

modules/home/async-components/AsyncBody.js

@@ -1,22 +1,37 @@
 import React, { Fragment } from 'react'
-import Experiences from '~/modules/home/components/Experiences'
-import SideProjects from '~/modules/home/components/SideProjects'
-import Certification from '~/modules/home/components/Certification'
-import Project from '~/modules/home/components/Project'
-import Contact from '~/modules/home/components/Contact'
-import Footer from '~/modules/home/components/Footer'
+import dynamic from 'next/dynamic'
 import SlideIterator from '~/modules/core/components/SlideIterator'
 
+import 'react-vertical-timeline-component/style.min.css'
+
+const AsyncExperiences = dynamic(
+  import('~/modules/home/components/Experiences')
+)
+
+const AsyncSideProjects = dynamic(
+  import('~/modules/home/components/SideProjects')
+)
+
+const AsyncCertification = dynamic(
+  import('~/modules/home/components/Certification')
+)
+
+const AsyncProject = dynamic(import('~/modules/home/components/Project'))
+
+const AsyncContact = dynamic(import('~/modules/home/components/Contact'))
+
+const AsyncFooter = dynamic(import('~/modules/home/components/Footer'))
+
 const HomePage = () => (
   <Fragment>
-    <Experiences />
+    <AsyncExperiences />
     <SlideIterator>
-      <SideProjects />
-      <Project />
-      <Certification />
-      <Contact />
+      <AsyncSideProjects />
+      <AsyncProject />
+      <AsyncCertification />
+      <AsyncContact />
     </SlideIterator>
-    <Footer />
+    <AsyncFooter />
   </Fragment>
 )
 

modules/home/components/Certification.js

@@ -1,64 +1,39 @@
-import React, { useState } from 'react'
-import styled from 'styled-components/macro'
-import CertItem from '~/modules/home/components/certification/CertItem'
+import React from 'react'
 import CertInfo from '~/modules/home/components/certification/CertInfo'
 import { CERTIFICATIONS } from '~/modules/home/consts/pages'
-import { ITEM, INFO } from '~/modules/home/consts/certification'
+import { INFO } from '~/modules/home/consts/certification'
 import Header from '~/modules/home/components/common/section/Header'
 import Anchor, {
   ANCHOR_DISTANCE_TO_TOP_OF_SECTION
 } from '~/modules/home/components/common/Anchor'
-import Row from 'react-bootstrap/Row'
 import Container from 'react-bootstrap/Container'
 import SectionContainer from '~/modules/home/components/common/section/Container'
 import { Translate } from 'react-localize-redux'
+import { Carousel } from 'react-bootstrap'
 
-const Certification = () => {
-  const [itemSelected, setSelectedItem] = useState(1)
-
-  return (
-    <SectionContainer>
-      <Anchor id={CERTIFICATIONS} top={ANCHOR_DISTANCE_TO_TOP_OF_SECTION} />
-      <Container>
-        <Header>
-          <h2>
-            <Translate id="Certifications and Prizes" />
-          </h2>
-        </Header>
-        <List>
-          <Row>
-            {ITEM.map((name, index) => (
-              <CertItem
-                id={`cert-item-${index + 1}`}
-                key={index}
-                itemSelected={itemSelected}
-                setSelectedItem={setSelectedItem}
-                idnum={index + 1}
-                name={name}
-              />
-            ))}
-          </Row>
-          <Row>
-            {INFO.map((info, index) => (
-              <CertInfo
-                key={index}
-                itemSelected={itemSelected}
-                id={`cert-info-${index + 1}`}
-                idnum={index + 1}
-                title={info.title}
-                content={info.content}
-              />
-            ))}
-          </Row>
-        </List>
-      </Container>
-    </SectionContainer>
-  )
-}
+const Certification = () => (
+  <SectionContainer>
+    <Anchor id={CERTIFICATIONS} top={ANCHOR_DISTANCE_TO_TOP_OF_SECTION} />
+    <Container>
+      <Header>
+        <h2>
+          <Translate id="Certifications and Prizes" />
+        </h2>
+      </Header>
+      <Carousel interval={2000}>
+        {INFO.map((info, index) => (
+          <CertInfo
+            key={index}
+            id={`cert-info-${index + 1}`}
+            coverMobile={info.coverMobile}
+            cover={info.cover}
+            title={info.title}
+            content={info.content}
+          />
+        ))}
+      </Carousel>
+    </Container>
+  </SectionContainer>
+)
 
 export default Certification
-
-const List = styled.div`
-  position: relative;
-  height: 360px;
-`

modules/home/components/Contact.js

@@ -11,7 +11,7 @@ import Anchor, {
 import SectionContainer from '~/modules/home/components/common/section/Container'
 
 const Contact = () => (
-  <SectionContainer>
+  <ContactContainer>
     <Anchor id={CONTACTS} top={ANCHOR_DISTANCE_TO_TOP_OF_SECTION} />
     <Container>
       <Card>
@@ -20,11 +20,14 @@ const Contact = () => (
       </Card>
     </Container>
     <Map />
-  </SectionContainer>
+  </ContactContainer>
 )
 
 export default Contact
 
+const ContactContainer = styled(SectionContainer)`
+  padding-bottom: 0;
+`
 const Card = styled.section`
   z-index: 50;
   width: 75%;