✨Initial Welcome Screen animation work

old design/src/App.js

@@ -0,0 +1,46 @@
+import React, { Fragment } from 'react'
+import { Grommet, grommet, ResponsiveContext } from 'grommet'
+import Nav from './components/Nav'
+import Intro from './components/Intro'
+import About from './components/About'
+import Resume from './components/Resume'
+import Portfolio from './components/Portfolio'
+import Contact from './components/Contact'
+import Footer from './components/Footer'
+import { useInView } from 'react-intersection-observer'
+
+const App = () => {
+  const [introRef, isIntroInView] = useInView()
+  const [aboutRef, isAboutInView] = useInView()
+  const [resumeRef, isResumeInView] = useInView()
+  const [portfolioRef, isPortfolioInView] = useInView()
+  const [contactRef, isContactInView] = useInView()
+
+  const views = [
+    { title: 'Home', isInView: isIntroInView },
+    { title: 'About', isInView: isAboutInView },
+    { title: 'Résumé', isInView: isResumeInView },
+    { title: 'Portfolio', isInView: isPortfolioInView },
+    { title: 'Contact', isInView: isContactInView }
+  ]
+
+  return (
+    <Grommet full theme={grommet}>
+      <ResponsiveContext.Consumer>
+        {size => (
+          <Fragment>
+            <Nav size={size} views={views} />
+            <Intro navRef={introRef} size={size} />
+            <About navRef={aboutRef} size={size} />
+            <Resume navRef={resumeRef} size={size} />
+            <Portfolio navRef={portfolioRef} size={size} />
+            <Contact navRef={contactRef} size={size} />
+            <Footer size={size} />
+          </Fragment>
+        )}
+      </ResponsiveContext.Consumer>
+    </Grommet>
+  )
+}
+
+export default App

src/components/About/InfoList.js → old design/src/components/About/InfoList.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Box, Heading, Paragraph, Text } from 'grommet'
-import { info, sections } from '../../config.json'
+import { info, sections } from '../../config.json.js'
 
 const about = sections.find(({ title }) => title === 'About')
 

src/components/About/Skills.js → old design/src/components/About/Skills.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Box, Heading } from 'grommet'
-import { sections } from '../../config.json'
-import SkillBox from './SkillBox.js'
+import { sections } from '../../config.json.js'
+import SkillBox from './SkillBox.js.js'
 
 const about = sections.find(({ title }) => title === 'About')
 

src/components/About/index.js → old design/src/components/About/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Box, Paragraph, Heading } from 'grommet'
 import SectionHeading from '../SectionHeading'
-import { info, sections } from '../../config.json'
+import { info, sections } from '../../config.json.js'
 import InfoList from './InfoList'
 import Skills from './Skills'
 

src/components/Contact/index.js → old design/src/components/Contact/index.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types'
 import sanityClient from '@sanity/client'
 import { Box, Button, Form, FormField, TextArea } from 'grommet'
 import { Alert, CloudUpload, Send, Validate } from 'grommet-icons'
-import { sections } from '../../config.json'
-import SectionHeading from '../SectionHeading.js'
+import { sections } from '../../config.json.js'
+import SectionHeading from '../SectionHeading.js.js'
 
 const contact = sections.find(({ title }) => title === 'Contact')
 

src/components/Footer.js → old design/src/components/Footer.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Box, Button, Text } from 'grommet'
-import SocialIcon from '../components/SocialIcon'
-import { social } from '../config.json'
+import SocialIcon from './SocialIcon'
+import { social } from '../config.json.js'
 import { smoothlyScroll } from '../util'
 
 const Footer = ({ size }) => (

src/components/Intro/index.js → old design/src/components/Intro/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Box, Heading, Text } from 'grommet'
-import { info, social } from '../../config.json'
+import { info, social } from '../../config.json.js'
 import SocialIcon from '../SocialIcon'
 
 const Intro = ({ navRef, size }) => (

src/components/Nav.js → old design/src/components/Nav.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Box, Button, Menu, Text } from 'grommet'
-import NavLink from './NavLink.js'
-import { sections } from '../config.json'
+import NavLink from './NavLink.js.js'
+import { sections } from '../config.json.js'
 import { More } from 'grommet-icons'
 import { smoothlyScroll } from '../util'
 

src/components/Portfolio/index.js → old design/src/components/Portfolio/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Box } from 'grommet'
 import SectionHeading from '../SectionHeading'
-import { sections } from '../../config.json'
+import { sections } from '../../config.json.js'
 import PortfolioItem from './PortfolioItem'
 
 const portfolio = sections.find(({ title }) => title === 'Portfolio')

src/components/Resume/index.js → old design/src/components/Resume/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Box, Button, Paragraph } from 'grommet'
 import { Download } from 'grommet-icons'
 import SectionHeading from '../SectionHeading'
-import { info, sections } from '../../config.json'
+import { info, sections } from '../../config.json.js'
 import TimelineItem from './TimelineItem'
 
 const resume = sections.find(({ title }) => title === 'Résumé')