-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1. typed.js 추가 및 타이핑 효과 적용 2. 메인 배너 디자인 변경 3. 회사다닌경험 experience칸 섹션 추가 4. project들 ref추가 및 경험탭에서 프로젝트클릭시 이동기능 추가
- Loading branch information
Showing
8 changed files
with
5,931 additions
and
5,700 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| "use client" | ||
|
|
||
| import { useEffect, useState } from "react"; | ||
|
|
||
| type Props = { | ||
| inputText: string; | ||
| speed?: number; | ||
| } | ||
| export const TypingContainer = ({ inputText, speed = 100 }: Props) => { | ||
| const [textLines, setTextLines] = useState<string[]>([]); | ||
| const [typingIndex, setTypingIndex] = useState<number>(0); | ||
| // const speed: number = 100; // 타이핑 속도 (milliseconds); | ||
|
|
||
| useEffect(() => { | ||
| const originalText: string = inputText; | ||
|
|
||
| // 입력된 텍스트를 줄바꿈 문자(\n)을 기준으로 나누어 배열로 변환 | ||
| const lines: string[] = originalText.split('\n'); | ||
|
|
||
| const typingInterval: NodeJS.Timeout = setInterval(() => { | ||
| if (typingIndex < lines.length) { | ||
| // 한 줄씩 타이핑 효과 적용 | ||
| setTextLines((prevLines: string[]) => { | ||
| const newLines = [...prevLines]; | ||
| newLines[typingIndex] += lines[typingIndex][newLines[typingIndex].length]; | ||
| return newLines; | ||
| }); | ||
| setTypingIndex((prevIndex: number) => prevIndex + 1); | ||
| } else { | ||
| clearInterval(typingInterval); | ||
| } | ||
| }, speed); | ||
|
|
||
|
|
||
| return () => clearInterval(typingInterval); | ||
| }, [typingIndex]) | ||
| return ( | ||
| <> | ||
| {textLines.map((line, index) => ( | ||
| <p key={index}>{line}</p> | ||
| ))} | ||
| </> | ||
|
|
||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| "use client" | ||
| import React, { useEffect, useRef } from 'react'; | ||
| import Typed from 'typed.js'; | ||
|
|
||
| type Props = { | ||
| strings: string[]; | ||
| size?: string; | ||
| } | ||
| export const TypingEffect = ({ strings, size = '1rem' }: Props) => { | ||
| const el = useRef<HTMLSpanElement>(null); | ||
| const typed = useRef<Typed | null>(null); | ||
|
|
||
| useEffect(() => { | ||
| const options = { | ||
| strings, | ||
| typeSpeed: 50, | ||
| backSpeed: 25, | ||
| loop: false, | ||
| showCursor: false, | ||
| }; | ||
|
|
||
| if (el.current) { | ||
| typed.current = new Typed(el.current, options); | ||
| } | ||
|
|
||
| return () => { | ||
| if (typed.current) { | ||
| typed.current.destroy(); | ||
| } | ||
| }; | ||
| }, []); | ||
|
|
||
| return <span ref={el} style={{ whiteSpace: 'pre', fontSize: size }} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.