diff --git a/old design/src/App.js b/old design/src/App.js
new file mode 100644
index 00000000..a7d5309a
--- /dev/null
+++ b/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 (
+
+
+ {size => (
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ )
+}
+
+export default App
diff --git a/src/components/About/InfoList.js b/old design/src/components/About/InfoList.js
similarity index 95%
rename from src/components/About/InfoList.js
rename to old design/src/components/About/InfoList.js
index b1161a5b..5d298fc4 100644
--- a/src/components/About/InfoList.js
+++ b/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')
diff --git a/src/components/About/SkillBox.js b/old design/src/components/About/SkillBox.js
similarity index 100%
rename from src/components/About/SkillBox.js
rename to old design/src/components/About/SkillBox.js
diff --git a/src/components/About/Skills.js b/old design/src/components/About/Skills.js
similarity index 93%
rename from src/components/About/Skills.js
rename to old design/src/components/About/Skills.js
index 3c214e7e..91e6064d 100644
--- a/src/components/About/Skills.js
+++ b/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')
diff --git a/src/components/About/index.js b/old design/src/components/About/index.js
similarity index 96%
rename from src/components/About/index.js
rename to old design/src/components/About/index.js
index ce113190..e56a9494 100644
--- a/src/components/About/index.js
+++ b/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'
diff --git a/src/components/Contact/index.js b/old design/src/components/Contact/index.js
similarity index 96%
rename from src/components/Contact/index.js
rename to old design/src/components/Contact/index.js
index 54a69af7..8fe6cf92 100644
--- a/src/components/Contact/index.js
+++ b/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')
diff --git a/src/components/Footer.js b/old design/src/components/Footer.js
similarity index 91%
rename from src/components/Footer.js
rename to old design/src/components/Footer.js
index 69f7d4ee..957f0bde 100644
--- a/src/components/Footer.js
+++ b/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 }) => (
diff --git a/src/components/Intro/index.js b/old design/src/components/Intro/index.js
similarity index 96%
rename from src/components/Intro/index.js
rename to old design/src/components/Intro/index.js
index 3fdb8c56..ed3c973e 100644
--- a/src/components/Intro/index.js
+++ b/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 }) => (
diff --git a/src/components/Nav.js b/old design/src/components/Nav.js
similarity index 95%
rename from src/components/Nav.js
rename to old design/src/components/Nav.js
index 67c9e5c4..af2fb1af 100644
--- a/src/components/Nav.js
+++ b/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'
diff --git a/src/components/NavLink.js b/old design/src/components/NavLink.js
similarity index 100%
rename from src/components/NavLink.js
rename to old design/src/components/NavLink.js
diff --git a/src/components/Portfolio/PortfolioItem.js b/old design/src/components/Portfolio/PortfolioItem.js
similarity index 100%
rename from src/components/Portfolio/PortfolioItem.js
rename to old design/src/components/Portfolio/PortfolioItem.js
diff --git a/src/components/Portfolio/index.js b/old design/src/components/Portfolio/index.js
similarity index 97%
rename from src/components/Portfolio/index.js
rename to old design/src/components/Portfolio/index.js
index a6df5997..de52c6ae 100644
--- a/src/components/Portfolio/index.js
+++ b/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')
diff --git a/src/components/Resume/TimelineItem.js b/old design/src/components/Resume/TimelineItem.js
similarity index 100%
rename from src/components/Resume/TimelineItem.js
rename to old design/src/components/Resume/TimelineItem.js
diff --git a/src/components/Resume/index.js b/old design/src/components/Resume/index.js
similarity index 96%
rename from src/components/Resume/index.js
rename to old design/src/components/Resume/index.js
index 3b4b9e45..d880632b 100644
--- a/src/components/Resume/index.js
+++ b/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é')
diff --git a/src/components/SectionHeading.js b/old design/src/components/SectionHeading.js
similarity index 100%
rename from src/components/SectionHeading.js
rename to old design/src/components/SectionHeading.js
diff --git a/src/components/SocialIcon.js b/old design/src/components/SocialIcon.js
similarity index 100%
rename from src/components/SocialIcon.js
rename to old design/src/components/SocialIcon.js
diff --git a/old design/src/config.json b/old design/src/config.json
new file mode 100644
index 00000000..2496a84d
--- /dev/null
+++ b/old design/src/config.json
@@ -0,0 +1,267 @@
+{
+ "info": {
+ "name": "Alex Lee",
+ "occupation": "Web Developer",
+ "email": "alex@alex-lee.site",
+ "resumeLink": "https://github.com/alexlee-dev/portfolio/raw/master/src/assets/Resume.pdf",
+ "heroImage": "https://res.cloudinary.com/alexlee-dev/image/upload/c_scale,q_90,w_1152,f_auto/v1538630398/portfolio/portfolio_portland_dark_min.jpg",
+ "profileImage": "https://avatars2.githubusercontent.com/u/41493792?s=400&u=d55d8a934c12a5a11c0618657aa60e2efb5e89d4&v=4"
+ },
+ "social": [
+ {
+ "icon": "Mail",
+ "link": "mailto:alex@alex-lee.site"
+ },
+ {
+ "icon": "Github",
+ "link": "https://github.com/alexlee-dev/"
+ },
+ {
+ "icon": "Cube",
+ "link": "https://www.npmjs.com/~alexlee-dev"
+ },
+ {
+ "icon": "Twitter",
+ "link": "https://twitter.com/alexlee_dev"
+ },
+ {
+ "icon": "Linkedin",
+ "link": "https://www.linkedin.com/in/alexlee-dev"
+ }
+ ],
+ "sections": [
+ {
+ "title": "Home"
+ },
+ {
+ "title": "About",
+ "heading": "About",
+ "subHeading": "Let me introduce myself.",
+ "copy": "I'm a passionate Web Developer. Since I was 11, I've been fascinated with computers and design. I started writing in Visual Basic. Now I'm proud to say that I've grown in my development and design skillsets, making me a valuable asset to any team.",
+ "profile": "I love to brainstorm in a team environment; however, I'm also incredibly self-motivated. In every project, I'm determined to get the job done without compromising on quality.",
+ "skillsCopy": "As a self-taught developer, I've gained a variety of skillsets that I can apply to my projects. Currently, I'm focused on React.js. With an industry that's ever-evolving, no one is a master at every language. I aim to let my excitement for learning new things guide me in my path toward growth.",
+ "skills": [
+ {
+ "sectionTitle": "HTML",
+ "languages": [
+ { "color": "accent-3", "title": "HTML5" },
+ { "color": "neutral-1", "title": "JSX" },
+ { "color": "accent-4", "title": "MDX" },
+ { "color": "status-critical", "title": "Markdown" }
+ ]
+ },
+ {
+ "sectionTitle": "CSS",
+ "languages": [
+ { "color": "accent-4", "title": "CSS3" },
+ { "color": "accent-3", "title": "Bootstrap" }
+ ]
+ },
+ {
+ "sectionTitle": "JavaScript",
+ "languages": [
+ { "color": "neutral-3", "title": "JavaScript" },
+ { "color": "accent-4", "title": "React.js" },
+ { "color": "accent-2", "title": "Node.js" },
+ { "color": "neutral-1", "title": "JQuery" }
+ ]
+ },
+ {
+ "sectionTitle": "Other",
+ "languages": [
+ { "color": "accent-4", "title": "Java" },
+ { "color": "accent-2", "title": "C#" },
+ { "color": "accent-3", "title": "JSON" }
+ ]
+ },
+ {
+ "sectionTitle": "Tools / Software",
+ "languages": [
+ { "color": "neutral-3", "title": "MS Visual Studio" },
+ { "color": "status-critical", "title": "Adobe Photoshop" },
+ { "color": "accent-4", "title": "Adobe Illustrator" }
+ ]
+ }
+ ]
+ },
+ {
+ "title": "Résumé",
+ "copy": "With a “can do” attitude and a determination to put my best work into fruition, I can be a positive asset to any team.",
+ "experience": [
+ {
+ "title": "Application Developer",
+ "startDate": "December 2018",
+ "present": true,
+ "icon": "Code",
+ "organization": "U.S. Bank",
+ "summary": "Identified system dependencies by designing an end-to-end testing framework with Cypress. Created an accessible product by rewriting codebase to be compliant with WCAG 2.0 AA. Strengthened the codebase by increasing coverage to greater than 90%."
+ },
+ {
+ "title": "Web Developer",
+ "startDate": "June 2016",
+ "endDate": "December 2018",
+ "icon": "Code",
+ "organization": "Quantum Learning Network",
+ "summary": "Developed an integrated payroll information system for site administrators. Spearheaded a new staff branding by redesigning staff website for SuperCamp. Improved hiring efficiency by developing an employee contracting tool."
+ }
+ ]
+ },
+ {
+ "title": "Portfolio",
+ "heading": "Portfolio",
+ "subHeading": "Check out some of my projects.",
+ "works": [
+ {
+ "column1": {
+ "title": "Reposier",
+ "description": "Tasty CLI on the outside, simple integration with GitHub's API on the inside.",
+ "category": "CLI",
+ "image": "https://res.cloudinary.com/alexlee-dev/image/upload/c_scale,q_90,w_384,f_auto/v1538177964/portfolio/reposier.png",
+ "languages": [
+ { "color": "accent-2", "title": "Node.js" },
+ { "color": "neutral-3", "title": "JavaScript" }
+ ],
+ "source": {
+ "href": "https://github.com/alexlee-dev/reposier",
+ "title": "Source"
+ },
+ "link": {
+ "href": "https://www.reposier.com/",
+ "title": "www.reposier.com"
+ }
+ },
+ "column2": {
+ "title": "Contractor Tool",
+ "description": "A tool used to contract employees. Ability to export important information in a specific format. A part of the Staffing Dashboard.",
+ "category": "Tool",
+ "image": "https://res.cloudinary.com/alexlee-dev/image/upload/c_scale,q_90,w_384,f_auto/v1538177963/portfolio/contractor.png",
+ "languages": [
+ { "color": "accent-3", "title": "HTML5" },
+ { "color": "accent-4", "title": "CSS3" },
+ { "color": "neutral-3", "title": "JavaScript" }
+ ],
+ "source": {
+ "href": "https://github.com/alexlee-dev/Staffing/blob/master/contractor.html",
+ "title": "Source"
+ },
+ "link": {
+ "href": "https://demo-staffing-dashboard.netlify.com/contractor.html",
+ "title": "Demo"
+ }
+ }
+ },
+ {
+ "column1": {
+ "title": "SuperCamp Facilitator Page",
+ "description": "A staff showcase for SuperCamp. Used to show clients the staff of SuperCamp, and their credentials. Successful marketing campaign.",
+ "category": "Website",
+ "image": "https://res.cloudinary.com/alexlee-dev/image/upload/c_scale,q_90,w_384,f_auto/v1538177964/portfolio/facilitator-website.png",
+ "languages": [
+ { "color": "accent-3", "title": "HTML5" },
+ { "color": "accent-4", "title": "CSS3" },
+ { "color": "neutral-3", "title": "JavaScript" }
+ ],
+ "link": {
+ "href": "http://www.supercamp.com/our-staff/",
+ "title": "www.supercamp.com/our-staff"
+ }
+ },
+ "column2": {
+ "title": "Payroll Admin",
+ "description": "A comprehensive dashboard to view payroll information. Used by companies to manage previous, current, and future reports. Ability to export data in a variety of formats.",
+ "category": "Dashboard",
+ "image": "https://res.cloudinary.com/alexlee-dev/image/upload/c_scale,q_90,w_384,f_auto/v1538177963/portfolio/payroll-admin.png",
+ "languages": [
+ { "color": "accent-3", "title": "HTML5" },
+ { "color": "accent-4", "title": "CSS3" },
+ { "color": "neutral-3", "title": "JavaScript" }
+ ],
+ "link": {
+ "href": "https://demo-payroll-admin.netlify.com/admin/",
+ "title": "Demo"
+ }
+ }
+ },
+ {
+ "column1": {
+ "title": "Payroll Form",
+ "description": "A form integrated with a dashboard to collect and process employee payroll information.",
+ "category": "Form",
+ "image": "https://res.cloudinary.com/alexlee-dev/image/upload/c_scale,q_90,w_384,f_auto/v1538177964/portfolio/payroll-form.png",
+ "languages": [
+ { "color": "accent-3", "title": "HTML5" },
+ { "color": "accent-4", "title": "CSS3" },
+ { "color": "neutral-3", "title": "JavaScript" }
+ ],
+ "source": {
+ "href": "https://github.com/alexlee-dev/Payroll/",
+ "title": "Source"
+ },
+ "link": {
+ "href": "https://demo-payroll-admin.netlify.com/",
+ "title": "Demo"
+ }
+ },
+ "column2": {
+ "title": "Pickitt",
+ "description": "A comprehensive dashboard to view payroll information. Used by companies to manage previous, current, and future reports. Ability to export data in a variety of formats.",
+ "category": "Utility",
+ "image": "https://res.cloudinary.com/alexlee-dev/image/upload/c_scale,q_90,w_384,f_auto/v1538177964/portfolio/pickitt.png",
+ "languages": [
+ { "color": "accent-2", "title": "Node.js" },
+ { "color": "neutral-3", "title": "JavaScript" }
+ ],
+ "source": {
+ "href": "https://github.com/alexlee-dev/pickitt",
+ "title": "Source"
+ },
+ "link": {
+ "href": "https://pickitt.netlify.com/",
+ "title": "www.pickitt.netlify.com"
+ }
+ }
+ },
+ {
+ "column1": {
+ "title": "reposier",
+ "description": "Tasty CLI on the outside, simple integration with GitHub's API on the inside.",
+ "category": "CLI",
+ "image": "https://res.cloudinary.com/alexlee-dev/image/upload/c_scale,q_90,w_384,f_auto/v1538177964/portfolio/reposier.png",
+ "languages": [
+ { "color": "accent-2", "title": "Node.js" },
+ { "color": "neutral-3", "title": "JavaScript" }
+ ],
+ "source": {
+ "href": "https://github.com/alexlee-dev/reposier",
+ "title": "Source"
+ },
+ "link": {
+ "href": "https://www.reposier.com/",
+ "title": "www.reposier.com"
+ }
+ },
+ "column2": {
+ "title": "Splague",
+ "description": "Be prepared. A web game built with React, inspired by the popular game 'Plague Inc'. Control either a disease, or a doctor to destroy or save the world.",
+ "category": "Game",
+ "image": "https://res.cloudinary.com/alexlee-dev/image/upload/c_scale,q_90,w_384,f_auto/v1538177964/portfolio/splague.png",
+ "languages": [{ "color": "accent-4", "title": "React.js" }],
+ "source": {
+ "href": "https://github.com/alexlee-dev/splague",
+ "title": "Source"
+ },
+ "link": {
+ "href": "https://www.splague.com/",
+ "title": "www.splague.com"
+ }
+ }
+ }
+ ]
+ },
+ {
+ "title": "Contact",
+ "heading": "Contact",
+ "subHeading": "I'd love to hear from you."
+ }
+ ]
+}
diff --git a/old design/src/hooks/useHover.js b/old design/src/hooks/useHover.js
new file mode 100644
index 00000000..06ac5d07
--- /dev/null
+++ b/old design/src/hooks/useHover.js
@@ -0,0 +1,25 @@
+import { useRef, useState, useEffect } from 'react'
+
+export function useHover() {
+ const [value, setValue] = useState(false)
+
+ const ref = useRef(null)
+
+ const handleMouseOver = () => setValue(true)
+ const handleMouseOut = () => setValue(false)
+
+ useEffect(() => {
+ const node = ref.current
+ if (node) {
+ node.addEventListener('mouseover', handleMouseOver)
+ node.addEventListener('mouseout', handleMouseOut)
+
+ return () => {
+ node.removeEventListener('mouseover', handleMouseOver)
+ node.removeEventListener('mouseout', handleMouseOut)
+ }
+ }
+ })
+
+ return [ref, value]
+}
diff --git a/old design/src/index.css b/old design/src/index.css
new file mode 100644
index 00000000..597419ea
--- /dev/null
+++ b/old design/src/index.css
@@ -0,0 +1,25 @@
+.primary-color {
+ /* background-color: #0077c2; */
+ /* background-color: #eb1736; */
+ background-color: #5252d4;
+ color: #eee;
+}
+
+.nav-link {
+ color: rgba(255, 255, 255, 0.85) !important;
+ font-weight: 400;
+}
+
+.nav-link:hover,
+.nav-link.active {
+ color: rgba(255, 255, 255, 1) !important;
+ text-decoration: none !important;
+}
+
+.uppercase {
+ text-transform: uppercase;
+}
+
+.slow-transition {
+ transition: all 0.5s;
+}
diff --git a/old design/src/index.js b/old design/src/index.js
new file mode 100644
index 00000000..521cbf3d
--- /dev/null
+++ b/old design/src/index.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import * as Sentry from '@sentry/browser'
+import LogRocket from 'logrocket'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+import * as serviceWorker from './serviceWorker'
+
+const { NODE_ENV } = process.env
+
+if (NODE_ENV === 'production') {
+ Sentry.init({
+ dsn: 'https://5a28f5da01f34b0283639b079218978e@sentry.io/1492278'
+ })
+
+ LogRocket.init('alex-lee/portfolio-prod')
+}
+
+ReactDOM.render(, document.getElementById('root'))
+
+serviceWorker.register()
diff --git a/old design/src/serviceWorker.js b/old design/src/serviceWorker.js
new file mode 100644
index 00000000..f8c7e50c
--- /dev/null
+++ b/old design/src/serviceWorker.js
@@ -0,0 +1,135 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+ window.location.hostname === 'localhost' ||
+ // [::1] is the IPv6 localhost address.
+ window.location.hostname === '[::1]' ||
+ // 127.0.0.1/8 is considered localhost for IPv4.
+ window.location.hostname.match(
+ /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+ )
+);
+
+export function register(config) {
+ if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+ // The URL constructor is available in all browsers that support SW.
+ const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+ if (publicUrl.origin !== window.location.origin) {
+ // Our service worker won't work if PUBLIC_URL is on a different origin
+ // from what our page is served on. This might happen if a CDN is used to
+ // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+ return;
+ }
+
+ window.addEventListener('load', () => {
+ const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+ if (isLocalhost) {
+ // This is running on localhost. Let's check if a service worker still exists or not.
+ checkValidServiceWorker(swUrl, config);
+
+ // Add some additional logging to localhost, pointing developers to the
+ // service worker/PWA documentation.
+ navigator.serviceWorker.ready.then(() => {
+ console.log(
+ 'This web app is being served cache-first by a service ' +
+ 'worker. To learn more, visit https://bit.ly/CRA-PWA'
+ );
+ });
+ } else {
+ // Is not localhost. Just register service worker
+ registerValidSW(swUrl, config);
+ }
+ });
+ }
+}
+
+function registerValidSW(swUrl, config) {
+ navigator.serviceWorker
+ .register(swUrl)
+ .then(registration => {
+ registration.onupdatefound = () => {
+ const installingWorker = registration.installing;
+ if (installingWorker == null) {
+ return;
+ }
+ installingWorker.onstatechange = () => {
+ if (installingWorker.state === 'installed') {
+ if (navigator.serviceWorker.controller) {
+ // At this point, the updated precached content has been fetched,
+ // but the previous service worker will still serve the older
+ // content until all client tabs are closed.
+ console.log(
+ 'New content is available and will be used when all ' +
+ 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+ );
+
+ // Execute callback
+ if (config && config.onUpdate) {
+ config.onUpdate(registration);
+ }
+ } else {
+ // At this point, everything has been precached.
+ // It's the perfect time to display a
+ // "Content is cached for offline use." message.
+ console.log('Content is cached for offline use.');
+
+ // Execute callback
+ if (config && config.onSuccess) {
+ config.onSuccess(registration);
+ }
+ }
+ }
+ };
+ };
+ })
+ .catch(error => {
+ console.error('Error during service worker registration:', error);
+ });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+ // Check if the service worker can be found. If it can't reload the page.
+ fetch(swUrl)
+ .then(response => {
+ // Ensure service worker exists, and that we really are getting a JS file.
+ const contentType = response.headers.get('content-type');
+ if (
+ response.status === 404 ||
+ (contentType != null && contentType.indexOf('javascript') === -1)
+ ) {
+ // No service worker found. Probably a different app. Reload the page.
+ navigator.serviceWorker.ready.then(registration => {
+ registration.unregister().then(() => {
+ window.location.reload();
+ });
+ });
+ } else {
+ // Service worker found. Proceed as normal.
+ registerValidSW(swUrl, config);
+ }
+ })
+ .catch(() => {
+ console.log(
+ 'No internet connection found. App is running in offline mode.'
+ );
+ });
+}
+
+export function unregister() {
+ if ('serviceWorker' in navigator) {
+ navigator.serviceWorker.ready.then(registration => {
+ registration.unregister();
+ });
+ }
+}
diff --git a/old design/src/setupTests.js b/old design/src/setupTests.js
new file mode 100644
index 00000000..1b4377fb
--- /dev/null
+++ b/old design/src/setupTests.js
@@ -0,0 +1,5 @@
+// setup file
+import { configure } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+configure({ adapter: new Adapter() })
diff --git a/src/tests/App.test.js b/old design/src/tests/App.test.js
similarity index 100%
rename from src/tests/App.test.js
rename to old design/src/tests/App.test.js
diff --git a/src/tests/__snapshots__/App.test.js.snap b/old design/src/tests/__snapshots__/App.test.js.snap
similarity index 100%
rename from src/tests/__snapshots__/App.test.js.snap
rename to old design/src/tests/__snapshots__/App.test.js.snap
diff --git a/src/tests/components/About/About.test.js b/old design/src/tests/components/About/About.test.js
similarity index 100%
rename from src/tests/components/About/About.test.js
rename to old design/src/tests/components/About/About.test.js
diff --git a/src/tests/components/About/InfoList.test.js b/old design/src/tests/components/About/InfoList.test.js
similarity index 100%
rename from src/tests/components/About/InfoList.test.js
rename to old design/src/tests/components/About/InfoList.test.js
diff --git a/src/tests/components/About/SkillBox.test.js b/old design/src/tests/components/About/SkillBox.test.js
similarity index 100%
rename from src/tests/components/About/SkillBox.test.js
rename to old design/src/tests/components/About/SkillBox.test.js
diff --git a/src/tests/components/About/Skills.test.js b/old design/src/tests/components/About/Skills.test.js
similarity index 100%
rename from src/tests/components/About/Skills.test.js
rename to old design/src/tests/components/About/Skills.test.js
diff --git a/src/tests/components/About/__snapshots__/About.test.js.snap b/old design/src/tests/components/About/__snapshots__/About.test.js.snap
similarity index 100%
rename from src/tests/components/About/__snapshots__/About.test.js.snap
rename to old design/src/tests/components/About/__snapshots__/About.test.js.snap
diff --git a/src/tests/components/About/__snapshots__/InfoList.test.js.snap b/old design/src/tests/components/About/__snapshots__/InfoList.test.js.snap
similarity index 100%
rename from src/tests/components/About/__snapshots__/InfoList.test.js.snap
rename to old design/src/tests/components/About/__snapshots__/InfoList.test.js.snap
diff --git a/src/tests/components/About/__snapshots__/SkillBox.test.js.snap b/old design/src/tests/components/About/__snapshots__/SkillBox.test.js.snap
similarity index 100%
rename from src/tests/components/About/__snapshots__/SkillBox.test.js.snap
rename to old design/src/tests/components/About/__snapshots__/SkillBox.test.js.snap
diff --git a/src/tests/components/About/__snapshots__/Skills.test.js.snap b/old design/src/tests/components/About/__snapshots__/Skills.test.js.snap
similarity index 100%
rename from src/tests/components/About/__snapshots__/Skills.test.js.snap
rename to old design/src/tests/components/About/__snapshots__/Skills.test.js.snap
diff --git a/src/tests/components/Contact/Contact.test.js b/old design/src/tests/components/Contact/Contact.test.js
similarity index 100%
rename from src/tests/components/Contact/Contact.test.js
rename to old design/src/tests/components/Contact/Contact.test.js
diff --git a/src/tests/components/Contact/__snapshots__/Contact.test.js.snap b/old design/src/tests/components/Contact/__snapshots__/Contact.test.js.snap
similarity index 100%
rename from src/tests/components/Contact/__snapshots__/Contact.test.js.snap
rename to old design/src/tests/components/Contact/__snapshots__/Contact.test.js.snap
diff --git a/src/tests/components/Footer.test.js b/old design/src/tests/components/Footer.test.js
similarity index 100%
rename from src/tests/components/Footer.test.js
rename to old design/src/tests/components/Footer.test.js
diff --git a/src/tests/components/Intro/Intro.test.js b/old design/src/tests/components/Intro/Intro.test.js
similarity index 100%
rename from src/tests/components/Intro/Intro.test.js
rename to old design/src/tests/components/Intro/Intro.test.js
diff --git a/src/tests/components/Intro/__snapshots__/Intro.test.js.snap b/old design/src/tests/components/Intro/__snapshots__/Intro.test.js.snap
similarity index 100%
rename from src/tests/components/Intro/__snapshots__/Intro.test.js.snap
rename to old design/src/tests/components/Intro/__snapshots__/Intro.test.js.snap
diff --git a/src/tests/components/Nav.test.js b/old design/src/tests/components/Nav.test.js
similarity index 100%
rename from src/tests/components/Nav.test.js
rename to old design/src/tests/components/Nav.test.js
diff --git a/src/tests/components/NavLink.test.js b/old design/src/tests/components/NavLink.test.js
similarity index 100%
rename from src/tests/components/NavLink.test.js
rename to old design/src/tests/components/NavLink.test.js
diff --git a/src/tests/components/Portfolio/Portfolio.test.js b/old design/src/tests/components/Portfolio/Portfolio.test.js
similarity index 100%
rename from src/tests/components/Portfolio/Portfolio.test.js
rename to old design/src/tests/components/Portfolio/Portfolio.test.js
diff --git a/src/tests/components/Portfolio/PortfolioItem.test.js b/old design/src/tests/components/Portfolio/PortfolioItem.test.js
similarity index 100%
rename from src/tests/components/Portfolio/PortfolioItem.test.js
rename to old design/src/tests/components/Portfolio/PortfolioItem.test.js
diff --git a/src/tests/components/Portfolio/__snapshots__/Portfolio.test.js.snap b/old design/src/tests/components/Portfolio/__snapshots__/Portfolio.test.js.snap
similarity index 100%
rename from src/tests/components/Portfolio/__snapshots__/Portfolio.test.js.snap
rename to old design/src/tests/components/Portfolio/__snapshots__/Portfolio.test.js.snap
diff --git a/src/tests/components/Portfolio/__snapshots__/PortfolioItem.test.js.snap b/old design/src/tests/components/Portfolio/__snapshots__/PortfolioItem.test.js.snap
similarity index 100%
rename from src/tests/components/Portfolio/__snapshots__/PortfolioItem.test.js.snap
rename to old design/src/tests/components/Portfolio/__snapshots__/PortfolioItem.test.js.snap
diff --git a/src/tests/components/Resume/Resume.test.js b/old design/src/tests/components/Resume/Resume.test.js
similarity index 100%
rename from src/tests/components/Resume/Resume.test.js
rename to old design/src/tests/components/Resume/Resume.test.js
diff --git a/src/tests/components/Resume/TimelineItem.test.js b/old design/src/tests/components/Resume/TimelineItem.test.js
similarity index 100%
rename from src/tests/components/Resume/TimelineItem.test.js
rename to old design/src/tests/components/Resume/TimelineItem.test.js
diff --git a/src/tests/components/Resume/__snapshots__/Resume.test.js.snap b/old design/src/tests/components/Resume/__snapshots__/Resume.test.js.snap
similarity index 100%
rename from src/tests/components/Resume/__snapshots__/Resume.test.js.snap
rename to old design/src/tests/components/Resume/__snapshots__/Resume.test.js.snap
diff --git a/src/tests/components/Resume/__snapshots__/TimelineItem.test.js.snap b/old design/src/tests/components/Resume/__snapshots__/TimelineItem.test.js.snap
similarity index 100%
rename from src/tests/components/Resume/__snapshots__/TimelineItem.test.js.snap
rename to old design/src/tests/components/Resume/__snapshots__/TimelineItem.test.js.snap
diff --git a/src/tests/components/SectionHeading.test.js b/old design/src/tests/components/SectionHeading.test.js
similarity index 100%
rename from src/tests/components/SectionHeading.test.js
rename to old design/src/tests/components/SectionHeading.test.js
diff --git a/src/tests/components/SocialIcon.test.js b/old design/src/tests/components/SocialIcon.test.js
similarity index 100%
rename from src/tests/components/SocialIcon.test.js
rename to old design/src/tests/components/SocialIcon.test.js
diff --git a/src/tests/components/__snapshots__/Footer.test.js.snap b/old design/src/tests/components/__snapshots__/Footer.test.js.snap
similarity index 100%
rename from src/tests/components/__snapshots__/Footer.test.js.snap
rename to old design/src/tests/components/__snapshots__/Footer.test.js.snap
diff --git a/src/tests/components/__snapshots__/Nav.test.js.snap b/old design/src/tests/components/__snapshots__/Nav.test.js.snap
similarity index 100%
rename from src/tests/components/__snapshots__/Nav.test.js.snap
rename to old design/src/tests/components/__snapshots__/Nav.test.js.snap
diff --git a/src/tests/components/__snapshots__/NavLink.test.js.snap b/old design/src/tests/components/__snapshots__/NavLink.test.js.snap
similarity index 100%
rename from src/tests/components/__snapshots__/NavLink.test.js.snap
rename to old design/src/tests/components/__snapshots__/NavLink.test.js.snap
diff --git a/src/tests/components/__snapshots__/SectionHeading.test.js.snap b/old design/src/tests/components/__snapshots__/SectionHeading.test.js.snap
similarity index 100%
rename from src/tests/components/__snapshots__/SectionHeading.test.js.snap
rename to old design/src/tests/components/__snapshots__/SectionHeading.test.js.snap
diff --git a/src/tests/components/__snapshots__/SocialIcon.test.js.snap b/old design/src/tests/components/__snapshots__/SocialIcon.test.js.snap
similarity index 100%
rename from src/tests/components/__snapshots__/SocialIcon.test.js.snap
rename to old design/src/tests/components/__snapshots__/SocialIcon.test.js.snap
diff --git a/old design/src/util.js b/old design/src/util.js
new file mode 100644
index 00000000..05b29259
--- /dev/null
+++ b/old design/src/util.js
@@ -0,0 +1,8 @@
+export const smoothlyScroll = elementId => {
+ const element = document.getElementById(elementId)
+ if (element) {
+ element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+ } else {
+ console.log(`Could not locate element: ${elementId}`)
+ }
+}
diff --git a/package.json b/package.json
index caf8b54c..6d39ea9f 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
"dependencies": {
"@sanity/client": "^0.141.1",
"@sentry/browser": "^5.4.3",
+ "animejs": "^3.0.1",
"grommet": "^2.7.1",
"grommet-icons": "^4.2.0",
"logrocket": "^1.0.1",
diff --git a/src/App.js b/src/App.js
index a7d5309a..0878144a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,42 +1,83 @@
-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'
+import React, { useEffect } from 'react'
+import { Grommet, grommet, ResponsiveContext, Box } from 'grommet'
+import anime from 'animejs'
const App = () => {
- const [introRef, isIntroInView] = useInView()
- const [aboutRef, isAboutInView] = useInView()
- const [resumeRef, isResumeInView] = useInView()
- const [portfolioRef, isPortfolioInView] = useInView()
- const [contactRef, isContactInView] = useInView()
+ useEffect(() => {
+ animateLines()
+ }, [])
- const views = [
- { title: 'Home', isInView: isIntroInView },
- { title: 'About', isInView: isAboutInView },
- { title: 'Résumé', isInView: isResumeInView },
- { title: 'Portfolio', isInView: isPortfolioInView },
- { title: 'Contact', isInView: isContactInView }
- ]
+ const animateLines = () => {
+ anime({
+ targets: '.top',
+ width: '100%',
+ easing: 'spring(1, 20, 10, 0)'
+ })
+
+ anime({
+ targets: '.right',
+ height: '100%',
+ easing: 'spring(1, 20, 10, 0)'
+ })
+
+ anime({
+ targets: '.left',
+ height: '100%',
+ easing: 'spring(1, 20, 10, 0)'
+ })
+
+ anime({
+ targets: '.bottom',
+ width: '100%',
+ easing: 'spring(1, 20, 10, 0)'
+ })
+ }
return (
{size => (
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
)}
diff --git a/src/index.css b/src/index.css
index 597419ea..44981b7c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,10 +1,10 @@
-.primary-color {
+/* .primary-color {
/* background-color: #0077c2; */
- /* background-color: #eb1736; */
- background-color: #5252d4;
- color: #eee;
-}
-
+/* background-color: #eb1736; */
+/* background-color: #5252d4; */
+/* color: #eee; */
+/* } */
+/*
.nav-link {
color: rgba(255, 255, 255, 0.85) !important;
font-weight: 400;
@@ -22,4 +22,4 @@
.slow-transition {
transition: all 0.5s;
-}
+} */
diff --git a/yarn.lock b/yarn.lock
index c284c3d3..bbcd065c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1690,6 +1690,11 @@ alphanum-sort@^1.0.0:
resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
+animejs@^3.0.1:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/animejs/-/animejs-3.0.1.tgz#8b808bad575e3b6106489d8b04b92bc4062166fe"
+ integrity sha512-7mMoBQScvA7s4zm3EVgnuXXrtOu6TJNAhU+Ajo7HsXYH0NwbuZIcRHMO65a9NyUlmAXz4VPxlK5cENNOQbCi8g==
+
ansi-colors@^3.0.0:
version "3.2.4"
resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"