- Added some jiggly motion to the hero page

KyleKlus · Jan 22, 2024 · 9691393 · 9691393
1 parent be29e9e
commit 9691393
Show file tree

Hide file tree

Showing 4 changed files with 239 additions and 29 deletions.
diff --git a/src/components/container/PortfolioCard.tsx b/src/components/container/PortfolioCard.tsx
@@ -15,13 +15,15 @@ interface IPortfolioCardProps {
 export default function PortfolioCard(props: React.PropsWithChildren<IPortfolioCardProps>) {
   return (
     <div className={[styles.portfolioCard].join(' ')}>
-      <Image
-        className={[styles.portfolioCardImg].join(' ')}
-        src={props.image} alt={props.alt}
-        priority={true}
-        loading={'eager'}
-        quality={100}
-      />
+      <div className={[styles.portfolioCardImg].join(' ')}>
+        <Image
+          src={props.image} alt={props.alt}
+          priority={true}
+          loading={'eager'}
+          quality={100}
+          fill
+        />
+      </div>
       <hr />
       <Text className={[styles.portfolioCardText].join(' ')}>
         {props.children}

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -86,19 +86,19 @@ export default function Home() {
       <Main>
         <div id={'top'}></div>
         <Content id="heroPage" className={[homeStyles.heroPage, 'dotted'].join(' ')}>
-          <div className={homeStyles.slideInWrapper}>
-            <p className={[homeStyles.xxLarge, textStyles.left, homeStyles.slideInRight].join(' ')}>Hi there👋, I am Kyle!</p>
+          <div className={homeStyles.jiggleWrapper}>
+            <p className={[homeStyles.xxLarge, textStyles.left].join(' ')} content={'Hi there👋, I am Kyle!'}>Hi there👋, I am Kyle!</p>
             <br />
             <br />
-            <p className={[homeStyles.xLarge, textStyles.right, homeStyles.slideInLeft].join(' ')}>I am a computer science student,</p>
-            <p className={[homeStyles.large, textStyles.left, homeStyles.slideInRight].join(' ')}>a passionate cook 🍳,</p>
+            <p className={[homeStyles.xLarge, textStyles.right].join(' ')} content={'I am a computer science student,'}>I am a computer science student,</p>
+            <p className={[homeStyles.large, textStyles.left].join(' ')} content={'a passionate cook 🍳,'}>a passionate cook 🍳,</p>
             <br />
             <br />
-            <p className={[homeStyles.xxLarge, textStyles.left, homeStyles.slideInRight].join(' ')}>a software developer🚀,</p>
+            <p className={[homeStyles.xxLarge, textStyles.left].join(' ')} content={'a software developer🚀,'}>a software developer🚀,</p>
             <br />
-            <p className={[homeStyles.xLarge, textStyles.center, homeStyles.slideInLeftToCenter].join(' ')}>a woodworking hobbyist</p>
+            <p className={[homeStyles.xLarge, textStyles.center].join(' ')} content={'a woodworking hobbyist'}>a woodworking hobbyist</p>
             <br />
-            <p className={[homeStyles.large, textStyles.right, homeStyles.slideInLeft].join(' ')}>and overall a DIY lover ❤️.</p>
+            <p className={[homeStyles.large, textStyles.right].join(' ')} content={'and overall a DIY lover ❤️.'}>and overall a DIY lover ❤️.</p>
           </div>
         </Content>
         <Content id="portfolioPage" className={[homeStyles.portfolioPage, 'applyHeaderOffset'].join(' ')}>

diff --git a/src/styles/components/container/PortfolioCard.module.css b/src/styles/components/container/PortfolioCard.module.css
@@ -1,7 +1,7 @@
 /** @format */
 
 
-.portfolioCard{
+.portfolioCard {
   max-width: clamp(600px, 100%, 900px);
   height: fit-content;
 
@@ -15,10 +15,15 @@
 
 .portfolioCardImg {
   width: calc(60% - 16px);
-  height: 100%;
+  aspect-ratio: 16/9;
+  border-radius: var(--border-radius);
+  outline: 1px solid var(--bg-color-40);
+  position: relative;
+}
+
+.portfolioCardImg > * {
   border-radius: var(--border-radius);
   box-shadow: var(--shadowElevation_5);
-  outline: 1px solid var(--bg-color-40)
 }
 
 .portfolioCardText {
@@ -30,40 +35,40 @@
 @media (max-width: 600px) {
 
   .portfolioCard {
-      width: 95%;
+    width: 95%;
   }
 
   .portfolioCardText > h4 {
-      text-align: center;
-      font-size: medium;
+    text-align: center;
+    font-size: medium;
   }
 
   .portfolioCard {
-      flex-direction: column;
+    flex-direction: column;
   }
 
   .portfolioCardImg {
-      width: 100%;
+    width: 100%;
   }
 
   .portfolioCardText {
-      max-width: 100%;
-      font-size: medium;
+    max-width: 100%;
+    font-size: medium;
   }
 }
 
 @media (max-width: 520px) {
 
   .portfolioCard {
-      width: 100%;
+    width: 100%;
   }
 
   .portfolioCardText > h4 {
-      font-size: small;
+    font-size: small;
   }
 
 
   .portfolioCardText {
-      font-size: small;
+    font-size: small;
   }
 }
diff --git a/src/styles/pages/Home.module.css b/src/styles/pages/Home.module.css
@@ -98,7 +98,7 @@
 
 .aboutPage_thirdBreak,
 .aboutPage_fourthBreak,
-.aboutPage_secondBreak{
+.aboutPage_secondBreak {
     gap: 24px;
 }
 
@@ -222,6 +222,209 @@
     animation: slide-out-dotted 60s linear infinite;
 }
 
+@keyframes slide-left-rotate-right {
+    from {
+        rotate: 0deg;
+        translate: 0px;
+    }
+
+    25% {
+        rotate: 0.9deg;
+        translate: -5px;
+    }
+
+    60% {
+        rotate: 0deg;
+        translate: -8px;
+    }
+
+    80% {
+        rotate: 1.3deg;
+        translate: -4px;
+    }
+
+    to {
+        rotate: 0deg;
+        translate: 0px;
+    }
+}
+
+@keyframes slide-right-rotate-right {
+    from {
+        rotate: 0deg;
+        translate: 0px;
+    }
+
+    25% {
+        rotate: 1deg;
+        translate: 5px;
+    }
+
+    60% {
+        rotate: 0deg;
+        translate: 8px;
+    }
+
+    80% {
+        rotate: 1.5deg;
+        translate: 2px;
+    }
+
+    to {
+        rotate: 0deg;
+        translate: 0px;
+    }
+}
+
+@keyframes slide-right-rotate-left {
+    from {
+        rotate: 0deg;
+        translate: 0px;
+    }
+
+    25% {
+        rotate: -1.4deg;
+        translate: 5px;
+    }
+
+    60% {
+        rotate: 0deg;
+        translate: 8px;
+    }
+
+    80% {
+        rotate: -1deg;
+        translate: 4px;
+    }
+
+    to {
+        rotate: 0deg;
+        translate: 0px;
+    }
+}
+
+@keyframes slide-left-rotate-left {
+    from {
+        rotate: 0deg;
+        translate: 0px;
+    }
+
+    25% {
+        rotate: -1deg;
+        translate: -15px;
+    }
+
+    60% {
+        rotate: 0deg;
+        translate: -10px;
+    }
+
+    80% {
+        rotate: -1.5deg;
+        translate: -6px;
+    }
+
+    to {
+        rotate: 0deg;
+        translate: 0px;
+    }
+}
+
+.jiggleWrapper > * {
+    animation: slide-left-rotate-left 12s linear infinite;
+}
+
+.jiggleWrapper > *:nth-child(n) {
+    animation-name: slide-right-rotate-right;
+}
+
+.jiggleWrapper > *:nth-child(2n) {
+    animation-name: slide-right-rotate-left;
+}
+
+.jiggleWrapper > *:nth-child(3n) {
+    animation-name: slide-left-rotate-right;
+}
+
+.jiggleWrapper > *:nth-child(5n) {
+    animation-name: slide-left-rotate-left;
+}
+
+@keyframes glitch {
+
+    2%,
+    64% {
+        transform: translate(2px, 0) skew(0deg);
+    }
+
+    4%,
+    60% {
+        transform: translate(-2px, 0) skew(0deg);
+    }
+
+    62% {
+        transform: translate(0, 0) skew(5deg);
+    }
+}
+
+.glitchWrapper > * {
+    animation: glitch 1s linear infinite;
+}
+
+.glitchWrapper > *::before,
+.glitchWrapper > *::after {
+    content: attr(content);
+    position: absolute;
+    left: 0;
+}
+
+@keyframes glitchTop {
+
+    2%,
+    64% {
+        transform: translate(2px, -2px);
+    }
+
+    4%,
+    60% {
+        transform: translate(-2px, 2px);
+    }
+
+    62% {
+        transform: translate(13px, -1px) skew(-13deg);
+    }
+}
+
+.glitchWrapper > *::before {
+    animation: glitchTop 1s linear infinite;
+    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
+}
+
+@keyframes glitchBottom {
+
+    2%,
+    64% {
+        transform: translate(-2px, 0);
+    }
+
+    4%,
+    60% {
+        transform: translate(-2px, 0);
+    }
+
+    62% {
+        transform: translate(-22px, 5px) skew(21deg);
+    }
+}
+
+.glitchWrapper > *::after {
+    animation: glitchBottom 1.5s linear infinite;
+    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
+    -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
+}
+
+
 .blurredImageWrapper {
     width: 100%;
     height: 100%;
@@ -421,7 +624,7 @@
         font-size: large;
     }
 
-    .aboutPageProfileSkillText{
+    .aboutPageProfileSkillText {
         font-size: small;
     }