diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index 80b5877..e48e96f 100644 --- a/src/components/Text/Text.tsx +++ b/src/components/Text/Text.tsx @@ -4,7 +4,8 @@ import { onSmall } from '@styles/mediaQuery' export interface TextProps { size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' - weight: 'regular' | 'bold' | number + weight: 'regular' | 'bold' + color?: string activate: boolean children: React.ReactNode } @@ -18,7 +19,7 @@ const textStyleProps = { } as const const Text = forwardRef(function Text( - { size, children, ...props }: PropsWithChildren, + { size, children, color = 'white', ...props }: PropsWithChildren, ref ) { return ( @@ -31,9 +32,11 @@ const Text = forwardRef(function Text( export const BodyText = styled.p<{ size: string weight: 'regular' | 'bold' | number + color?: string activate: boolean }>` width: 100%; + color: ${({ color }) => color}; ${({ size, weight }) => css` font-size: ${size}; @@ -43,11 +46,9 @@ export const BodyText = styled.p<{ ${({ activate }) => activate ? css` - color: #fff; opacity: 1; ` : css` - color: #f5f5f7; opacity: 0.2; `} diff --git a/src/components/TextWithEffect/TextWithEffect.Scroll.tsx b/src/components/TextWithEffect/TextWithEffect.Scroll.tsx index 9408add..347511f 100644 --- a/src/components/TextWithEffect/TextWithEffect.Scroll.tsx +++ b/src/components/TextWithEffect/TextWithEffect.Scroll.tsx @@ -9,6 +9,7 @@ import { TextProps } from '../Text/Text' function TextWithScrollEffect({ size, weight, + color, children, }: PropsWithChildren>) { const [activated, isActivated] = useState(false) @@ -34,7 +35,7 @@ function TextWithScrollEffect({ }, []) return ( - + {children} ) diff --git a/src/pages/AboutMe/components/Cards/Cards.IntroMe.tsx b/src/pages/AboutMe/components/Cards/Cards.IntroMe.tsx index e494c08..a072c62 100644 --- a/src/pages/AboutMe/components/Cards/Cards.IntroMe.tsx +++ b/src/pages/AboutMe/components/Cards/Cards.IntroMe.tsx @@ -1,19 +1,30 @@ +import TextWithEffectScroll from '@components/TextWithEffect' +import { useScreenContext } from '@hooks/useScreenContext' +import { introText } from '@pages/AboutMe/data' import React from 'react' import * as S from './Cards.style' function IntroMe() { + const { isSmall } = useScreenContext() + + if (!isSmall) { + return ( + + {introText.split('\n').map((text) => ( + + {text} + + ))} + + ) + } return ( 저는 __하는 개발자입니다.
- -

- HCI, UXUI를 수학하고 관련 분야에서 일해본 경험이 있어 -
사용자 경험 개선에 대해 함께 고민하고,
어떻게 하면 효과적으로 매 Sprint마다 - MVP를 만들 수 있는지
- 생각할 수 있는 역량을 가진 개발자. -

-
+ +
{introText}
+
) } diff --git a/src/pages/AboutMe/components/Cards/Cards.style.ts b/src/pages/AboutMe/components/Cards/Cards.style.ts index 4da826d..9769393 100644 --- a/src/pages/AboutMe/components/Cards/Cards.style.ts +++ b/src/pages/AboutMe/components/Cards/Cards.style.ts @@ -17,9 +17,14 @@ export const IntroduceMeWrap = styled.div` export const Title = styled.p` color: #4f83f9; ` - -export const Description = styled.div` +export const DevelopScr = styled.div` + width: 100%; color: white; + + pre { + word-break: keep-all; + } + ${onSmall} { color: #205284; } diff --git a/src/pages/AboutMe/data.ts b/src/pages/AboutMe/data.ts new file mode 100644 index 0000000..7d34565 --- /dev/null +++ b/src/pages/AboutMe/data.ts @@ -0,0 +1 @@ +export const introText = `HCI, UXUI를 수학하고 관련 분야에서 일해본 경험이 있어\n사용자 경험 개선에 대해 함께 고민하고,\n어떻게 하면 효과적으로 매 Sprint마다 MVP를 만들 수 있는지\n생각할 수 있는 역량을 가진 개발자.`