diff --git a/src/features/about/headline/Container.tsx b/src/features/about/headline/Container.tsx index 140b686d..5f1a2d72 100644 --- 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 ( -
+
); diff --git a/src/features/about/headline/profile/Container.tsx b/src/features/about/headline/profile/Container.tsx index 2cee163d..80a78f87 100644 --- 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 ( -
-
-
- {profile.name} -
-
-
1ilsang
-
-
1ilsang
-
-
-
-
-
- I don't want to work hard. I just want to have fun. -
-
-
+ <> +
!ILSANG
+
{profileLinks.map((link) => ( ))}
-
+ ); }; diff --git a/src/features/styles/common.scss b/src/features/styles/common.scss index af304b85..65c02be4 100644 --- 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 index 70cae28f..96472bfa 100644 --- 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; - } - } -}