refactor(about): Change header to jumbotron

1ilsang · Mar 27, 2024 · 3277d99 · 3277d99
1 parent 4075267
commit 3277d99
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 188 deletions.
diff --git a/src/features/about/headline/Container.tsx b/src/features/about/headline/Container.tsx
@@ -4,7 +4,7 @@ import ProfileContainer from './profile/Container';
 
 const HeadlineContainer: FunctionComponent = () => {
   return (
-    <header>
+    <header className="about-profile-container">
       <ProfileContainer />
     </header>
   );

diff --git a/src/features/about/headline/profile/Container.tsx b/src/features/about/headline/profile/Container.tsx
@@ -2,38 +2,18 @@ import { FunctionComponent } from 'react';
 
 import ProfileLogo from './Logo';
 
-import profile from '~data/1ilsang.json';
 import { profileLinks } from '~data/profile';
 
 const ProfileContainer: FunctionComponent = () => {
   return (
-    <div className="about-profile-container">
-      <div>
-        <div className="image-section">
-          <img
-            className="image"
-            src={profile.profileImage}
-            alt={profile.name}
-          />
-          <div className="focus-font font-container">
-            <div className="wrapper">
-              <div className="focus">1ilsang</div>
-              <div className="mask">
-                <div className="text">1ilsang</div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="description">
-          I don&apos;t want to work hard. I just want to have fun.
-        </div>
-      </div>
-      <div className="about-profile-logo-container">
+    <>
+      <div className="jumbotron">!ILSANG</div>
+      <div className="logo-container">
         {profileLinks.map((link) => (
           <ProfileLogo key={link.label} {...link} />
         ))}
       </div>
-    </div>
+    </>
   );
 };
 

diff --git a/src/features/styles/common.scss b/src/features/styles/common.scss
@@ -37,118 +37,6 @@ $target: #e73c7e;
   text-decoration: underline;
 }
 
-.focus-font {
-  $clip-size: 90px;
-  $font-size: 75px;
-  $text-width: 350px;
-  $animation-width: 255px;
-  $m-font-size: 50px;
-  $m-text-width: 250px;
-  $m-animation-width: 170px;
-
-  @mixin base-text {
-    position: absolute;
-    font-weight: bold;
-    text-transform: uppercase;
-    letter-spacing: 3px;
-    font-size: $font-size;
-
-    @include mobile {
-      font-size: $m-font-size;
-    }
-  }
-
-  .wrapper {
-    width: $text-width;
-    white-space: nowrap;
-
-    @include mobile {
-      width: $m-text-width;
-    }
-  }
-
-  .focus {
-    @include base-text;
-
-    width: $text-width;
-    opacity: 0.6;
-    background: linear-gradient(-90deg, #ee7752, #e73c7e, #23a6d5, #e73c7e);
-    background-clip: text;
-    color: transparent;
-    filter: blur(3px);
-
-    @include mobile {
-      width: $m-text-width;
-    }
-  }
-
-  .mask {
-    @include base-text;
-
-    clip: rect(0, $clip-size, 120px, 0);
-    width: $clip-size;
-    background:
-      linear-gradient($target, $target 0) no-repeat,
-      linear-gradient(to right, $target, $target 0) no-repeat,
-      linear-gradient(to right, $target, $target 0) bottom left no-repeat,
-      linear-gradient(to right, $target, $target 0) bottom left no-repeat;
-    background-size:
-      0 6px,
-      0 6px,
-      0 6px,
-      0 0;
-    color: transparent;
-    transform: translateX(0);
-    box-sizing: border-box;
-    animation: mask 2.5s ease infinite alternate;
-
-    @include mobile {
-      $clip-size: 70px;
-
-      clip: rect(0, $clip-size, 120px, 0);
-      width: $clip-size;
-    }
-  }
-
-  .text {
-    transform: translateX(0);
-    background: linear-gradient(-90deg, #ee7752, #e73c7e, #23a6d5, #e73c7e);
-    background-clip: text;
-    width: $text-width;
-    animation: text 2.5s ease infinite alternate;
-
-    @include mobile {
-      width: $m-text-width;
-    }
-  }
-
-  @keyframes mask {
-    to {
-      transform: translateX($animation-width);
-    }
-  }
-
-  @keyframes text {
-    to {
-      transform: translateX(-$animation-width);
-    }
-  }
-
-  @include mobile {
-    @keyframes mask {
-      to {
-        transform: translateX($m-animation-width);
-      }
-    }
-
-    @keyframes text {
-      to {
-        transform: translateX(-$m-animation-width);
-      }
-    }
-  }
-}
-
 @keyframes skeleton-gradient {
   0% {
     background-color: rgba(165, 165, 165, 10%);

diff --git a/src/features/styles/ui/about/index.scss b/src/features/styles/ui/about/index.scss
@@ -22,51 +22,60 @@
 
   &-container {
     @include root-container;
+
+    @include mobile {
+      margin: 0 1rem;
+    }
   }
 
   &-profile {
     &-container {
       display: flex;
       justify-content: space-between;
+      align-items: flex-end;
 
-      .image-section {
+      @include mobile {
+        flex-direction: column;
+        align-items: normal;
+      }
+
+      .jumbotron {
         display: flex;
-        height: 100px;
-        align-items: center;
-
-        .image {
-          position: relative;
-          width: 75px;
-          height: 75px;
-          border: 1px solid $base-color;
-          border-radius: 90px;
-        }
+        justify-content: start;
+        background: linear-gradient(-90deg, #ee7752, #e73c7e, #23a6d5, #e73c7e);
+        background-clip: text;
+        color: transparent;
+        font-size: 8rem;
+        line-height: 8.5rem;
+        letter-spacing: 0.2rem;
+        font-weight: bold;
+        filter: drop-shadow(2px 4px 4px black);
 
-        .font-container {
-          margin-left: 20px;
-          height: 110px;
-          width: 117px;
+        @include mobile {
+          font-size: 6rem;
+          letter-spacing: 1px;
         }
       }
 
-      .description {
-        padding: 10px 0 20px;
-      }
-    }
+      .logo-container {
+        display: flex;
+        flex-direction: column;
 
-    &-logo {
-      display: flex;
-      justify-content: flex-end;
-      padding-bottom: 1px;
+        .about-profile-logo {
+          display: flex;
+          justify-content: flex-end;
+          padding-bottom: 1px;
 
-      a {
-        display: flex;
-        align-items: center;
-      }
+          a {
+            display: flex;
+            align-items: center;
+          }
 
-      img {
-        padding-left: 5px;
-        padding-bottom: 4px;
+          img {
+            padding-left: 5px;
+            padding-bottom: 4px;
+          }
+        }
       }
     }
   }
@@ -219,24 +228,3 @@
     }
   }
 }
-
-/* MOBILE */
-@media (width <= 700px) {
-  .about-profile-container {
-    flex-direction: column;
-
-    .image-section {
-      flex-direction: column;
-      align-items: flex-start;
-      height: auto;
-
-      .font-container {
-        margin-left: 0;
-      }
-    }
-
-    .description {
-      padding: 0 0 30px;
-    }
-  }
-}