Profile page

components/Header.js

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { motion } from 'framer-motion';
@@ -69,7 +70,7 @@ const Header = ({
   return (
     <>
       <motion.header style={{ color: accentColor }}>
-        <div className="logo"><Link href="/">TYLER VERGHO</Link></div>
+        <div className="logo"><Link href="/"><a>TYLER VERGHO</a></Link></div>
 
         {typeof window !== 'undefined' && width > 768 && (
           <DesktopNav secondaryColor={secondaryColor} links={links} />

components/Portfolio/Backdrop.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import styles from 'styles/portfolio.module.scss';
+import { motion } from 'framer-motion';
+import useDelay from 'utils/useDelay';
+import PropTypes from 'prop-types';
+
+const Backdrop = ({
+  onMouseEnter, onMouseLeave, showBackdrop, height, width, title, description, technologies, href,
+}) => {
+  const delayClose = useDelay(showBackdrop, 300, false, true);
+  const delayOpen = useDelay(showBackdrop, 300, true, false);
+
+  return (
+    <a href={href} target="_blank" rel="noreferrer">
+      <motion.div
+        className={styles.backdrop}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        animate={{ opacity: showBackdrop ? 0.9 : 0 }}
+        style={{ display: delayClose ? '' : 'none', height, width }}
+      >
+        <h1>{title}</h1>
+        <motion.div className={styles.divider} animate={{ width: delayOpen ? '80%' : '0%' }} transition={{ duration: delayOpen ? 0.6 : 0 }} />
+        <div className={styles.desc}>{description}</div>
+        <div className={styles.tech}>{technologies.join(', ')}</div>
+      </motion.div>
+    </a>
+  );
+};
+
+Backdrop.propTypes = {
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  showBackdrop: PropTypes.bool.isRequired,
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  description: PropTypes.string,
+  technologies: PropTypes.arrayOf(PropTypes.string),
+  href: PropTypes.string,
+};
+
+export default Backdrop;

components/Portfolio/Portfolio.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useEmblaCarousel } from 'embla-carousel/react';
+import styles from 'styles/portfolio.module.scss';
+import PortfolioSlide from './PortfolioSlide';
+
+const Portfolio = ({ inputRef }) => {
+  const [EmblaCarouselReact] = useEmblaCarousel({ loop: false });
+
+  return (
+    <section id="portfolio" className="container" ref={inputRef} style={{ position: 'relative' }}>
+      <EmblaCarouselReact className={styles.emblaViewport}>
+        <div className={styles.emblaContainer}>
+          <PortfolioSlide
+            title="RecMe"
+            image={require('public/recme.png')}
+            description="RecMe is an app that makes it easy to share businesses with friends and earn cashback rewards."
+            technologies={['React Native', 'React', 'AWS', 'Serverless', 'GraphQL']}
+            href="https://recme.app/"
+          />
+          <PortfolioSlide
+            title="High Frequency Tones"
+            image={require('public/frequency.png')}
+            description="Precisely generate sound waves and test the limits of what you can hear."
+            technologies={['React Native', 'tone.js']}
+            href="https://apps.apple.com/us/app/id1511601653"
+          />
+          <PortfolioSlide
+            title="nchtr.io"
+            image={require('public/nchtr.png')}
+            description="nchtr.io allows you to crowdsource your texts for when you have no clue how to respond."
+            technologies={['React', 'node.js', 'Firebase', 'AWS S3']}
+            href="http://nchtr.io/"
+          />
+        </div>
+      </EmblaCarouselReact>
+    </section>
+  );
+};
+
+export default Portfolio;

components/Portfolio/PortfolioSlide.js

@@ -0,0 +1,74 @@
+import React, { useState, useEffect, useRef } from 'react';
+import useWindowSize from 'utils/useWindowSize';
+import styles from 'styles/portfolio.module.scss';
+import PropTypes from 'prop-types';
+import Backdrop from './Backdrop';
+
+const PortfolioSlide = ({
+  image, title, description, technologies, href,
+}) => {
+  const [showBackdrop, setShowBackdrop] = useState(false);
+
+  const imgRef = useRef(null);
+  const { width: windowWidth, height: windowHeight } = useWindowSize();
+  const [width, setWidth] = useState();
+  const [height, setHeight] = useState();
+
+  useEffect(() => {
+    if (imgRef?.current) {
+      const { naturalWidth, naturalHeight } = imgRef.current;
+      const maxWidth = windowWidth - 20;
+      const maxHeight = windowHeight * 0.7;
+
+      const widthRatio = maxWidth / naturalWidth;
+      const heightRatio = maxHeight / naturalHeight;
+
+      if (widthRatio <= heightRatio) {
+        console.log('resize width', naturalHeight, maxWidth);
+        setHeight(naturalHeight * (maxWidth / naturalWidth));
+        setWidth(maxWidth);
+      } else {
+        console.log('resize height', naturalWidth, maxHeight);
+        setWidth(naturalWidth * (maxHeight / naturalHeight));
+        setHeight(maxHeight);
+      }
+    }
+  }, [imgRef, windowWidth, windowHeight]);
+
+  const onHover = () => {
+    setShowBackdrop(true);
+  };
+
+  const onUnhover = () => {
+    setShowBackdrop(false);
+  };
+
+  return (
+    <div className={styles.emblaSlide}>
+      <div className={styles.inner}>
+        <img src={image} alt={title} onMouseEnter={onHover} onMouseLeave={onUnhover} ref={imgRef} onClick={onHover} style={{ width, height }} />
+        <Backdrop
+          onMouseEnter={onHover}
+          onMouseLeave={onUnhover}
+          showBackdrop={showBackdrop}
+          height={height}
+          width={width}
+          title={title}
+          description={description}
+          technologies={technologies}
+          href={href}
+        />
+      </div>
+    </div>
+  );
+};
+
+PortfolioSlide.propTypes = {
+  image: PropTypes.node.isRequired,
+  title: PropTypes.string,
+  description: PropTypes.string,
+  technologies: PropTypes.arrayOf(PropTypes.string),
+  href: PropTypes.string,
+};
+
+export default PortfolioSlide;

components/Skills.js

@@ -17,8 +17,8 @@ const SkillItem = ({
     <div className={styles.skill}>
       <Icon />
 
-      <div className={styles.skillContent}>
-        <div className={styles.skillName}>{name}</div>
+      <div className={styles.content}>
+        <div className={styles.name}>{name}</div>
         <div className={styles.progress}>
           <motion.div
             className={styles.progressFill}

components/index.js

@@ -1,6 +1,6 @@
 import Contact from './Contact';
 import Intro from './Intro';
-import Portfolio from './Portfolio';
+import Portfolio from './Portfolio/Portfolio';
 import Profile from './Profile';
 import Skills from './Skills';
 import Header from './Header';

package.json

@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "embla-carousel": "^3.0.28",
     "eslint-import-resolver-alias": "^1.1.2",
     "framer-motion": "^2.4.3-beta.2",
     "imagemin-mozjpeg": "^9.0.0",

styles/portfolio.module.scss

@@ -0,0 +1,130 @@
+$teal: #3bb3a4;
+
+.emblaViewport {
+  width: 100%;
+  overflow: hidden;
+}
+
+.emblaContainer {
+  display: flex;
+}
+
+.emblaSlide {
+  position: relative;
+  min-width: 100%;
+  padding: 0px 10px;
+
+  .inner {
+    position: relative;
+    overflow: hidden;
+    height: 70vh;
+
+    img {
+      position: absolute;
+      display: block;
+      max-height: 100%;
+      height: auto;
+      width: auto;
+      max-width: 100%;      
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      object-fit: contain;
+    }
+  }
+}
+
+.backdrop {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: $teal;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  overflow: hidden;
+
+  h1 {
+    font-size: 2.5rem;
+    margin-top: 0px;
+    margin-bottom: 30px;
+    text-align: center;
+  }
+
+  a {
+    color: inherit;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .divider {
+    height: 2px;
+    min-height: 2px;
+    background-color: white;    
+  }
+
+  .desc {
+    width: 80%;
+    max-width: 80%;
+    font-size: 1.3rem;
+    text-align: center;
+    font-weight: 400;
+    margin-top: 30px;
+  }
+
+  .tech {
+    width: 80%;
+    max-width: 80%;
+    font-size: 1rem;
+    text-align: center;
+    font-weight: 300;
+    margin-top: 30px;
+  }
+}
+
+@media screen and (max-height: 600px) {
+  .backdrop {
+    h1 {
+      font-size: 1.5rem;
+    }
+  }
+}
+
+@media screen and (max-width: 500px), screen and (max-height: 600px) {  
+  .backdrop {
+    h1 {
+      margin-bottom: 10px !important;
+    }
+  }
+  .desc {
+    margin-top: 10px !important;
+    font-size: 1.1rem
+  }
+  .tech {
+    margin-top: 10px !important;
+  }
+}
+
+@media screen and (max-width: 374px) {
+  .backdrop {
+    h1 {
+      font-size: 1.5rem;
+    }
+  }
+  .desc, .tech {
+    font-size: 0.9rem !important;
+  }
+}
+
+@media screen and (max-height: 430px) {
+  .desc {
+    display: none;
+  }
+}

styles/profile.module.scss

@@ -121,8 +121,9 @@ $silver: #E1E1E1;
     max-width: 37vw;
     height: auto;
     margin-top: 100px;
+    margin-bottom: 20px;
+    margin-left: 25px;
     align-self: center;
     position: relative;
-    margin-left: 25px;
   }
 }

styles/skills.module.scss

@@ -1,4 +1,5 @@
-$silver: #E1E1E1;
+$teal: #60e2d2;
+$silver: #F5F5F5;
 
 .container {
   padding: 0px 5vw;
@@ -43,13 +44,13 @@ $silver: #E1E1E1;
   justify-content: flex-start;
   margin-bottom: 3vh;
 
-  .skillName {
+  .name {
     font-size: 1.3rem;
     font-weight: 400;
     color: white;
   }
 
-  .skillContent {
+  .content {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -68,7 +69,7 @@ $silver: #E1E1E1;
   }
 
   .progressFill {
-    background-color: #60e2d2;
+    background-color: $teal;
     position: absolute;
     height: 30px;
     top: 0px;

yarn.lock

@@ -2852,6 +2852,11 @@ elliptic@^6.5.3:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+embla-carousel@^3.0.28:
+  version "3.0.28"
+  resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-3.0.28.tgz#9396113695d52e6fe58597dd214ff09c93562e21"
+  integrity sha512-39LFEYNkmAhPx0lg0bbporWjBic6KbcPzFV3DHd4lT3TGPTh9aCieDvERjfIIQyS4/82dpiZNpqGLUvLBSM8ZQ==
+
 emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"