it works omg

compsoc-edinburgh · Oct 29, 2023 · 46588ac · 46588ac
1 parent 9233f00
commit 46588ac
Show file tree

Hide file tree

Showing 6 changed files with 189 additions and 136 deletions.
diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx
@@ -1,58 +1,28 @@
 import styled from 'styled-components'
-import { ACCENT_COLOR, SECONDARY_COLOR } from '../constants'
-import Logo from '../components/Logo'
-
-const StyledSubHeader = styled.p`
-  font-size: 1.25rem;
-  font-weight: 400;
-  color: ${SECONDARY_COLOR};
-  margin: 0;
-
-  @media (max-width: 768px) {
-    font-size: 1rem;
-  }
-`
+import { ACCENT_COLOR } from '../constants'
 
 const StyledHeader = styled.h1`
   font-size: 5rem;
   font-weight: 500;
   margin: 0;
-  line-height: 4rem;
+  line-height: 4.5rem;
   color: ${ACCENT_COLOR};
+  width: min-content;
 
   @media (max-width: 768px) {
     font-size: 3rem;
     line-height: 3rem;
   }
 `
 
-const LogoMobileOnly = styled.div`
-  display: block;
-  box-sizing: border-box;
-  line-height: 0;
-
-  @media (min-width: 768px) {
-    display: none;
-  }
-
-  margin-right: 1rem;
-`
-
 const Header = () => {
   return (
     <div
       style={{
         display: 'flex',
         alignItems: 'center',
       }}>
-      <LogoMobileOnly>
-        <Logo size={126} />
-      </LogoMobileOnly>
-
-      <div>
-        <StyledSubHeader>Story behind your project</StyledSubHeader>
-        <StyledHeader>Project Share</StyledHeader>
-      </div>
+      <StyledHeader>Project Share</StyledHeader>
     </div>
   )
 }

diff --git a/src/Pages/Home.tsx b/src/Pages/Home.tsx
@@ -33,19 +33,40 @@ const Home = () => {
           background:
             'repeating-conic-gradient(rgb(252, 246, 254) 0%, rgb(252, 246, 254) 25%, rgb(242, 225, 247) 0%, rgb(242, 225, 247) 50%) 50% center / 3px 3px',
           width: 'calc(100%-2vw)',
-          height: '90vh',
+          height: '87dvh',
           margin: 'auto',
           borderRadius: '25px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
         }}>
-        <div
-          style={{
-            position: 'absolute',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-          }}>
-          <Title />
-        </div>
+        <Title />
+      </div>
+
+      <div
+        style={{
+          border: '5px solid #7816F4',
+          background:
+            'repeating-conic-gradient(rgb(252, 246, 254) 0%, rgb(252, 246, 254) 25%, rgb(242, 225, 247) 0%, rgb(242, 225, 247) 50%) 50% center / 3px 3px',
+          height: '5vh',
+          width: 'min-contents',
+          margin: 'auto',
+          marginTop: '1rem',
+          borderRadius: '50px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '1rem',
+          position: 'fixed',
+          padding: '0 2rem 0 2rem',
+          bottom: '1vw',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          zIndex: '100',
+        }}>
+        <b>Home</b>
+        <b>About</b>
+        <b>Team</b>
+        <b>Discord</b>
       </div>
 
       <StyledMain>

diff --git a/src/components/AnimatedTextCharacter.tsx b/src/components/AnimatedTextCharacter.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import { motion } from 'framer-motion'
+
+const AnimatedTextCharacter = ({ text }: { text: string }) => {
+  // splitting text into letters
+  const letters = Array.from(text)
+
+  // Variants for Container
+  const container = {
+    hidden: { opacity: 0 },
+    visible: (i = 1) => ({
+      opacity: 1,
+      transition: { staggerChildren: 0.01, delayChildren: 0.01 * i },
+    }),
+  }
+
+  // Variants for each letter
+  const child = {
+    visible: {
+      opacity: 1,
+      x: 0,
+      y: 0,
+      transition: {
+        type: 'spring',
+        damping: 12,
+        stiffness: 100,
+      },
+    },
+    hidden: {
+      opacity: 0,
+      x: 0,
+      y: 10,
+      transition: {
+        type: 'spring',
+        damping: 12,
+        stiffness: 100,
+      },
+    },
+  }
+
+  return (
+    <motion.div
+      style={{ overflow: 'hidden', display: 'flex', fontSize: '1rem' }}
+      variants={container}
+      initial="hidden"
+      animate="visible">
+      <b>
+        {letters.map((letter, index) => (
+          <motion.span variants={child} key={index}>
+            {letter === ' ' ? '\u00A0' : letter}
+          </motion.span>
+        ))}
+      </b>
+    </motion.div>
+  )
+}
+
+export default AnimatedTextCharacter
diff --git a/src/components/FlippableCard.tsx b/src/components/FlippableCard.tsx
@@ -1,6 +1,7 @@
 import { motion, useSpring } from 'framer-motion'
 import { useState, useRef, useEffect } from 'react'
 import styled from 'styled-components'
+import AnimatedTextCharacter from './AnimatedTextCharacter'
 
 const springConfig = {
   type: 'spring',
@@ -25,18 +26,24 @@ const CardSide = styled(motion.div)<{ isHovered: boolean }>`
   transition: 0.2s box-shadow;
   border: 5px solid #7816f4;
   background: white;
+  cursor: pointer;
 `
 
-const Long = styled(motion.div)`
-  width: 100%;
-  height: 50%;
+const Long = styled(motion.div).attrs({
+  initial: { x: '-50%' },
+  animate: { x: '-50%' },
+})`
   border-radius: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: 0.2s box-shadow;
   border: 5px solid #7816f4;
   background: white;
+  overflow: hidden;
+  padding: 1rem 2rem 1rem 2rem;
+  position: fixed;
+  top: 2dvh;
 `
 
 interface FlippableCardProps {
@@ -45,16 +52,13 @@ interface FlippableCardProps {
   key: string
 }
 
-const FlippableCard = ({
-  frontContent,
-  backContent,
-  key,
-}: FlippableCardProps) => {
+const FlippableCard = ({ frontContent, backContent }: FlippableCardProps) => {
   const [isFlipped, setIsFlipped] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
-  const [isMerged, setIsMerged] = useState(false)
+  const [isMerged, setIsMerged] = useState(true)
 
   const ref = useRef<HTMLDivElement>(null)
+  const anchorRef = useRef<HTMLDivElement>(null)
 
   const [rotateX, setRotateX] = useState(0)
   const [rotateY, setRotateY] = useState(0)
@@ -77,19 +81,17 @@ const FlippableCard = ({
 
     if (element) {
       const elementRect = element.getBoundingClientRect()
-      setIsHovered(true)
-      zoom.set(1.1)
+      if (!isHovered) {
+        setIsHovered(true)
+        zoom.set(1.1)
+      }
       const x = event.clientX - (elementRect.left + elementRect.width / 2)
       const y = event.clientY - (elementRect.top + elementRect.height / 2)
-      setRotateX((y / elementRect.height) * 20)
-      setRotateY((x / elementRect.width) * 20)
+      setRotateX((y / elementRect.height) * 50)
+      setRotateY((x / elementRect.width) * 50)
     }
   }
 
-  const toggleMerge = () => {
-    setTimeout(() => setIsMerged(!isMerged), 100)
-  }
-
   const handleMouseLeave = () => {
     setRotateX(0)
     setRotateY(0)
@@ -104,49 +106,64 @@ const FlippableCard = ({
   //   }, 3000)
   // }, [])
 
-  return (
-    <>
-      <button onClick={toggleMerge}>Toggle Merge</button>
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) {
+          setIsMerged(false)
+        } else {
+          setIsMerged(true)
+          setRotateX(0)
+          setRotateY(0)
+          setIsHovered(false)
+          zoom.set(1)
+        }
+      },
+      {
+        root: null,
+        rootMargin: '-200px',
+        threshold: 0.1,
+      }
+    )
+
+    if (anchorRef.current) {
+      observer.observe(anchorRef.current)
+    }
 
-      <br />
-      <br />
-      <br />
-      <p>Spacing</p>
-      <br />
-      <br />
-      <br />
+    // Cleanup
+    return () => {
+      if (anchorRef.current) {
+        observer.unobserve(anchorRef.current)
+      }
+    }
+  }, [])
 
+  return (
+    <>
       {isMerged ? (
         <motion.div
           ref={ref}
           onClick={() => {
             setIsFlipped(!isFlipped)
           }}
-          onMouseMove={handleMouseMove}
-          onMouseLeave={handleMouseLeave}
           style={{
-            width: 500,
-            height: 200,
+            width: '500px',
+            height: '200px',
             perspective: 1200,
             transformStyle: 'preserve-3d',
-            scale: zoom,
-            transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`,
-            transition: '0.2s',
           }}>
-          <br />
-          <br />
-          <br />
-
           <motion.div
-            // key={key}
-            // layout
-            // layoutId={`${key}`}
+            onMouseMove={handleMouseMove}
+            onMouseLeave={handleMouseLeave}
+            layoutId="uniqueid"
             style={{
               width: '100%',
               height: '100%',
-              rotateX: dx,
-              rotateY: dy,
               perspective: 1200,
+              scale: zoom,
+              rotateY: dy,
+              rotateX: dx,
+
               transformStyle: 'preserve-3d',
             }}>
             {/* Front side */}
@@ -170,10 +187,18 @@ const FlippableCard = ({
           </motion.div>
         </motion.div>
       ) : (
-        <Long key={key} layout layoutId={`${key}`} transition={springConfig}>
-          This should only be shown after clicking button
+        <Long
+          style={{ zIndex: 10 }}
+          layoutId="uniqueid"
+          layout
+          transition={{
+            type: 'spring',
+            damping: 12,
+          }}>
+          <AnimatedTextCharacter text="Next meet-up • Weds 25th Oct • AT_2.11 • 11hrs 5mins 3secs" />
         </Long>
       )}
+      <div ref={anchorRef}></div>
     </>
   )
 }

diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
@@ -39,7 +39,7 @@ const Logo: FC<LogoProps> = ({ size = 126, animated = false }) => {
     <svg
       width={size}
       height={size}
-      viewBox="0 0 102 102"
+      viewBox="-1 -1 105 105"
       fill="none"
       xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_69_284)">
@@ -60,14 +60,17 @@ const Logo: FC<LogoProps> = ({ size = 126, animated = false }) => {
         <path
           d="M51 101.311C78.7859 101.311 101.311 78.7859 101.311 51C101.311 23.2141 78.7859 0.689209 51 0.689209C23.2141 0.689209 0.689209 23.2141 0.689209 51C0.689209 78.7859 23.2141 101.311 51 101.311Z"
           stroke="#7816F4"
+          strokeWidth={3}
         />
         <path
           d="M101.311 0.689209H0.689209V101.311H101.311V0.689209Z"
           stroke="#7816F4"
+          strokeWidth={3}
         />
         <path
           d="M0.459473 101.541L51 51M51 51L101.541 0.459473M51 51L0.459473 0.459473M51 51L101.541 101.541"
           stroke="#7816F4"
+          strokeWidth={3}
         />
       </g>
     </svg>