port.js

import React, { useState, useEffect } from 'react'
import { motion } from 'framer-motion'
import Cards from './Cards'

const hrHead = {
  init: { x: -800, opacity: 0 },
  enter: { x: 0, opacity: 1 },
}

export default function PortFolio() {
  const [modal, setModal] = useState(false)
  const [modal1, setModal1] = useState(false)
  const [modal2, setModal2] = useState(false)
  const [hr, setHr] = useState(false)

  const handleHr = () => {
    const offset = window.scrollY
    if (offset > 1699) {
      setHr(true)
    } else {
      setHr(false)
    }
  }

  useEffect(() => {
    window.addEventListener('scroll', handleHr)
  })

  let x = ['head']
  if (hr) {
    x.push('scrollIn')
  }

  return (
    <div className="about">
      <div className="div">
        <h1 className="head">Portfolio</h1>
      </div>
      <motion.hr
        variants={hrHead}
        initial="init"
        animate={hr ? 'enter' : 'init'}
        className="hr2"
        transition={{ duration: 1 }}
      />
      <div className="categories">
        <div className="head">All</div>
        <div className="head">React</div>
        <div className="head">React Native</div>
        <div className="head">Dapps</div>
      </div>
      <div className="boxes">
        <Cards
          src="images/pfp.jpg"
          img="img"
          custom={1}
          title="GGSWAP"
          subtitle="A fork of uniswap"
          description="A dapp that allows you to swap tokens like uniswap with our coin"
          link="www.google.com"
          modalPic="images/bombay1.png"
          modalPic1="images/bombay2.png"
          modalPic2="images/bombay3.png"
          modal={modal}
          setModal={setModal}
          text="details about project"
        />
        <Cards
          src="images/bombay2.png"
          img="img"
          custom={2}
          title="Bombay Shirts"
          subtitle="A demo eccomerce site"
          description="Created a demo for a client to sell their products"
          link="http://www.bombayshirts.com.s3-website-us-east-1.amazonaws.com/"
          modalPic="images/bombay1.png"
          modalPic1="images/bombay2.png"
          modalPic2="images/bombay3.png"
          modal={modal1}
          setModal={setModal1}
          text="selling shirts"
        />

        <Cards
          src="images/favicon.png"
          img="img"
          imgW="100%"
          imgH="100%"
          pos="relative !important"
          top="10px"
          custom={3}
          title="Juicy Swap"
          subtitle="A dapp adapted from sushiswap"
          description="Creates liqiduity pools using uniswap"
          link="http://winter-dust-4849.on.fleek.co/"
          modalPic="images/juice.png"
          modalPic1="images/juice1.png"
          modalPic2="images/juice2.png"
          modal={modal2}
          setModal={setModal2}
          text="details about"
        />
        <Cards
          src="images/OTRPIZZATOKEN.png"
          custom={4}
          img="img"
          imgW="100%"
          imgH="100%"
          pos="fixed !important"
          right="40px !important"
          top="60px"
          title="OTR Bake Sale"
          subtitle="A crowd funding dapp using an NFT"
          description="A decentralized application that allows you to name your pizza, adding toppings, purchase an NFT, and send it to friends and family."
          link="http://www.otrcoin.io"
          modalPic="images/otr.png"
          modalPic1="images/cryptoPizza.png"
          modalPic2="images/NFT.png"
          modal={modal2}
          setModal={setModal2}
          text="Decentralized Application"
        />
      </div>
    </div>
  )
}