diff --git a/src/features/about/Container.tsx b/src/features/about/Container.tsx index 56b5ad97..22fe9f9d 100644 --- a/src/features/about/Container.tsx +++ b/src/features/about/Container.tsx @@ -4,6 +4,7 @@ import WorkContainer from './work/Container'; import HeadlineContainer from './headline/Container'; import ActivityContainer from './activity/Container'; import EducationContainer from './education/Container'; +import IntroductionContainer from './introduction/Container'; const DATE_FORMAT = 'yyyy.MM'; @@ -11,6 +12,7 @@ const AboutContainer: FunctionComponent = () => { return (
+ diff --git a/src/features/about/introduction/Container.tsx b/src/features/about/introduction/Container.tsx new file mode 100644 index 00000000..4e4ab7f7 --- /dev/null +++ b/src/features/about/introduction/Container.tsx @@ -0,0 +1,42 @@ +import Link from 'next/link'; +import { FunctionComponent } from 'react'; + +import ExternalLink from '~/shared/components/ExternalLink'; + +const IntroductionContainer: FunctionComponent = () => { + return ( +
+
+

+ 어느덧 5년 차 프런트엔드 개발자가 되었습니다. +
+ + "일의 격" + + 을 읽고 저는 일을 어떻게 대하는 사람인지, 어떠한 동료가 되고 싶은지 + 고민해 봤습니다. +

+
    +
  • 저는 즐겁게 일하고 싶습니다.
  • +
  • 저는 기술적 책임을 질 수 있는 동료가 되고 싶습니다.
  • +
+

+ 웃으면서 일하고 싶습니다. 농담을 즐기고 어떻게 하면 동료를 웃길 수 + 있을지 늘 탐구합니다. 또한 영향력 있는 동료가 되고 싶습니다. 성장 + 자극을 줄 수 있는 동료이고 싶습니다. 맡은 부분에 대한 기술적 책임을 + 지려고 노력합니다. 기술에 대한 탐구욕이 강하며 공유할 거리가 생기면 + 어떤 웃긴 제목으로 발표할지 고민하며 입꼬리가 절로 올라갑니다. +

+

+ Smilegate에서 프런트엔드 인턴을 시작으로 TeamBlind에서 풀스택으로 + 일했으며 현재 LINE+에서 4년 가까이 프런트엔드 개발자로 즐겁게 일하고 + 있습니다. 퇴근 후에는{' '} + 한국팀의 + Organizer로 활동하고 있습니다. +

+
+
+ ); +}; + +export default IntroductionContainer; diff --git a/src/features/styles/common.scss b/src/features/styles/common.scss index 65c02be4..4c4a6f55 100644 --- a/src/features/styles/common.scss +++ b/src/features/styles/common.scss @@ -116,41 +116,6 @@ $target: #e73c7e; } } -.progress { - display: flex; - flex-direction: column; - padding-bottom: 4px; - padding-left: 0.5rem; - cursor: context-menu; - - progress { - appearance: none; - width: 80px; - height: 13px; - } - - ::-webkit-progress-bar { - transform: skew(-25deg); - background-color: $min-color; - } - - ::-webkit-progress-value { - background: $sub-color; - } - - .tooltip { - position: absolute; - margin: -35px 0 0 -3px; - z-index: 5; - border-radius: 4px; - border: 1px solid $sub-color; - background-color: $min-color; - color: $base-color; - opacity: 0.7; - padding: 5px; - } -} - .show { @keyframes fade { 0% { diff --git a/src/features/styles/ui/about/index.scss b/src/features/styles/ui/about/index.scss index 96472bfa..dda43ba4 100644 --- a/src/features/styles/ui/about/index.scss +++ b/src/features/styles/ui/about/index.scss @@ -49,7 +49,7 @@ line-height: 8.5rem; letter-spacing: 0.2rem; font-weight: bold; - filter: drop-shadow(2px 4px 4px black); + filter: drop-shadow(2px 4px 1px black); @include mobile { font-size: 6rem; @@ -80,6 +80,24 @@ } } + &-introduction { + @include container; + + .description { + margin: 3rem 0 1rem; + line-height: 2rem; + + p { + margin: 2rem 0; + } + + li::before { + content: '❑'; + margin-right: 0.5rem; + } + } + } + &-work { @include container; @@ -196,7 +214,7 @@ .category { min-width: 120px; - color: $sub-color; + color: $min-color; } .link-wrap { diff --git a/src/features/styles/ui/navigation.scss b/src/features/styles/ui/navigation.scss index 0bb5f799..d856d50d 100644 --- a/src/features/styles/ui/navigation.scss +++ b/src/features/styles/ui/navigation.scss @@ -41,7 +41,6 @@ z-index: 101; width: 100%; height: 3px; - accent-color: red; } }