Merge pull request #166 from 100-hours-a-week/feature/elle

Feature/elle
100-hours-a-week · Aug 28, 2024 · 0eb61a2 · 0eb61a2
2 parents 3b710d3 + 5794ec1
commit 0eb61a2
Show file tree

Hide file tree

Showing 12 changed files with 266 additions and 244 deletions.
diff --git a/src/Component/Button/Animation/HyperText.tsx b/src/Component/Button/Animation/HyperText.tsx
@@ -2,6 +2,15 @@
 
 import { useEffect, useRef, useState } from "react";
 import { motion, Variants } from "framer-motion";
+import styled from "styled-components";
+
+const MotionH1 = styled(motion.h1)`
+  font-size: 25px;
+
+  @media (max-width: 768px) {
+    font-size: 20px;
+  }
+`;
 
 interface HyperTextProps {
   text: string;
@@ -37,54 +46,47 @@ export default function HyperText({
   };
 
   useEffect(() => {
-    const interval = setInterval(
-      () => {
-        if (!animateOnLoad && isFirstRender.current) {
-          clearInterval(interval);
-          isFirstRender.current = false;
-          return;
-        }
-        if (interations.current < text.length) {
-          setDisplayText((t) =>
-            t
-              .split("")
-              .map((l, i) =>
-                l === " "
-                  ? l
-                  : i <= interations.current
-                  ? text[i]
-                  : numbers[getRandomInt(10)]
-              )
-              .join("")
-          );
-          interations.current = interations.current + 0.1;
-        } else {
-          setTrigger(false);
-          clearInterval(interval);
-        }
-      },
-      duration / (text.length * 10)
-    );
+    const interval = setInterval(() => {
+      if (!animateOnLoad && isFirstRender.current) {
+        clearInterval(interval);
+        isFirstRender.current = false;
+        return;
+      }
+      if (interations.current < text.length) {
+        setDisplayText((t) =>
+          t
+            .split("")
+            .map((l, i) =>
+              l === " "
+                ? l
+                : i <= interations.current
+                ? text[i]
+                : numbers[getRandomInt(10)]
+            )
+            .join("")
+        );
+        interations.current = interations.current + 0.1;
+      } else {
+        setTrigger(false);
+        clearInterval(interval);
+      }
+    }, duration / (text.length * 10));
     // Clean up interval on unmount
     return () => clearInterval(interval);
   }, [text, duration, trigger, animateOnLoad]);
-    
-    useEffect(() => {
-        setDisplayText(text);
-    }, [text]);
+
+  useEffect(() => {
+    setDisplayText(text);
+  }, [text]);
 
   return (
     <div
       className="overflow-hidden py-2 flex cursor-default scale-100"
       onMouseEnter={triggerAnimation}
     >
-        <motion.h1
-              style={{ fontSize: "32px", marginLeft: "-100px" }}
-        className={`font-mono ${className}`}
-        {...framerProps}
-        >
+      <MotionH1 className={`font-mono ${className}`} {...framerProps}>
         {displayText}
-      </motion.h1>
+      </MotionH1>
     </div>
   );
 }
diff --git a/src/Component/Button/DeleteButton.tsx b/src/Component/Button/DeleteButton.tsx
@@ -2,25 +2,24 @@ import React from "react";
 import "./DeleteButtonStyle.css";
 
 interface AnimatedButtonProps {
-    onClick: () => void;
+  onClick: () => void;
 }
 
 const DeleteButton: React.FC<AnimatedButtonProps> = ({ onClick }) => {
-    return (
-        <button
-            className="delete"
-            onClick={onClick}
-            style={{
-                position: "absolute",
-                left: "410px",
-                cursor: "pointer",
-                top: "-2px",
-            }}
-        >
-            <div className="top"></div>
-            <div className="bottom"></div>
-        </button>
-    );
+  return (
+    <div
+      className="delete"
+      onClick={onClick}
+      style={{
+        left: "410px",
+        cursor: "pointer",
+        top: "-2px",
+      }}
+    >
+      <div className="top"></div>
+      <div className="bottom"></div>
+    </div>
+  );
 };
 
 export default DeleteButton;
diff --git a/src/Component/Button/DeleteButtonStyle.css b/src/Component/Button/DeleteButtonStyle.css
@@ -1,101 +1,101 @@
 /* Variables converted to standard CSS */
 
 .deleteContainer > button {
-    position: relative;
-    display: block;
-    width: 25%;
-    height: 100%;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    z-index: 99;
-    outline: none;
-    backface-visibility: hidden;
-    -webkit-touch-callout: none;
+  position: relative;
+  display: block;
+  width: 25%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  z-index: 99;
+  outline: none;
+  backface-visibility: hidden;
+  -webkit-touch-callout: none;
 }
 
 .deleteContainer > button > div {
-    position: absolute;
-    top: 10px;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    margin: auto;
+  position: absolute;
+  top: 10px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: auto;
 }
 
 /* Delete Button Styles */
 .delete:hover .top {
-    animation: delete 0.8s ease-out;
-    background: #615efc;
+  animation: delete 0.8s ease-out;
+  background: #615efc;
 }
 
 .delete:hover .top::before {
-    background: #615efc;
+  background: #615efc;
 }
 
 .delete:hover .bottom {
-    background: #615efc;
+  background: #615efc;
 }
 
 .delete .top {
-    position: absolute;
-    top: 2px;
-    width: 24px;
-    height: 4px;
-    background: rgb(88, 88, 88);
-    z-index: 1;
+  position: absolute;
+  top: 2px;
+  width: 24px;
+  height: 4px;
+  background: rgb(88, 88, 88);
+  z-index: 1;
 }
 
 .delete .top::before {
-    content: "";
-    position: absolute;
-    top: -2px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
-    width: 14px;
-    height: 6px;
-    background: rgb(88, 88, 88);
-    border-radius: 8px;
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 14px;
+  height: 6px;
+  background: rgb(88, 88, 88);
+  border-radius: 8px;
 }
 
 .delete .bottom {
-    position: absolute;
-    top: 8px;
-    width: 24px;
-    height: 26px;
-    background: rgb(88, 88, 88);
-    border-radius: 0 0 6px 6px;
+  position: absolute;
+  top: 8px;
+  width: 24px;
+  height: 26px;
+  background: rgb(88, 88, 88);
+  border-radius: 0 0 6px 6px;
 }
 
 /* Keyframes for Delete */
 @keyframes delete {
-    0% {
-        transform: rotate(0) translateY(0);
-    }
-    20% {
-        transform: rotate(0) translateY(-4px);
-    }
-    30% {
-        transform: rotate(20deg) translateY(-4px);
-    }
-    40% {
-        transform: rotate(-20deg) translateY(-4px);
-    }
-    50% {
-        transform: rotate(20deg) translateY(-4px);
-    }
-    60% {
-        transform: rotate(-10deg) translateY(-4px);
-    }
-    70% {
-        transform: rotate(10deg) translateY(-4px);
-    }
-    80% {
-        transform: rotate(0) translateY(-4px);
-    }
-    100% {
-        transform: rotate(0) translateY(0);
-    }
+  0% {
+    transform: rotate(0) translateY(0);
+  }
+  20% {
+    transform: rotate(0) translateY(-4px);
+  }
+  30% {
+    transform: rotate(20deg) translateY(-4px);
+  }
+  40% {
+    transform: rotate(-20deg) translateY(-4px);
+  }
+  50% {
+    transform: rotate(20deg) translateY(-4px);
+  }
+  60% {
+    transform: rotate(-10deg) translateY(-4px);
+  }
+  70% {
+    transform: rotate(10deg) translateY(-4px);
+  }
+  80% {
+    transform: rotate(0) translateY(-4px);
+  }
+  100% {
+    transform: rotate(0) translateY(0);
+  }
 }
diff --git a/src/Component/Carousel/EmblaCarousel.tsx b/src/Component/Carousel/EmblaCarousel.tsx
@@ -14,9 +14,7 @@ import {
 import { DotButton, useDotButton } from "./EmblaCarouselDotButton";
 import { formatPrice, formatROR } from "../../util/util";
 import myPortfolioImg from "../../img/myPortfolioImg.png";
-import axios from "axios";
 import { usePortfolioStore } from "../../store/usePortfolioStore";
-import state from "sweetalert/typings/modules/state";
 
 const TWEEN_FACTOR_BASE = 0.52;