diff --git a/package.json b/package.json index 262d30e..f48d752 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@tippyjs/react": "^4.2.6", + "lucide-react": "^0.468.0", "next": "15.0.3", "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e5b1f1b..bf8a0fe 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: '@tippyjs/react': specifier: ^4.2.6 version: 4.2.6(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106) + lucide-react: + specifier: ^0.468.0 + version: 0.468.0(react@19.0.0-rc-66855b96-20241106) next: specifier: 15.0.3 version: 15.0.3(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106) @@ -1140,6 +1143,11 @@ packages: lru-cache@10.4.3: resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} + lucide-react@0.468.0: + resolution: {integrity: sha512-6koYRhnM2N0GGZIdXzSeiNwguv1gt/FAjZOiPl76roBi3xKEXa4WmfpxgQwTTL4KipXjefrnf3oV4IsYhi4JFA==} + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc + merge2@1.4.1: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} engines: {node: '>= 8'} @@ -2905,6 +2913,10 @@ snapshots: lru-cache@10.4.3: {} + lucide-react@0.468.0(react@19.0.0-rc-66855b96-20241106): + dependencies: + react: 19.0.0-rc-66855b96-20241106 + merge2@1.4.1: {} micromatch@4.0.8: diff --git a/src/app/components/Timeline.tsx b/src/app/components/Timeline.tsx index 3cd14df..98d265c 100644 --- a/src/app/components/Timeline.tsx +++ b/src/app/components/Timeline.tsx @@ -38,7 +38,7 @@ export default function Timeline() { return (
{events.map((event, index) => ( -
+

{event.date}

{event.link ? {event.description} : event.description}
diff --git a/src/app/page.tsx b/src/app/page.tsx index e7923aa..4b20048 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,13 +2,51 @@ import { useEffect, useState, forwardRef, Ref } from "react"; import { useSearchParams } from "next/navigation"; -import Link from "next/link"; import Image from "next/image"; -import Repos from "./components/repos"; +import Link from "next/link"; import Tippy from "@tippyjs/react"; import "tippy.js/dist/tippy.css"; import "./index.css"; +import { Link as LinkIcon } from 'lucide-react'; + +const events = [ + { date: '2024-12-07', description: '글로벌 스타트업 학교 팀 1위', link: 'https://blog.imnyang.xyz/blog/gss' }, + { date: '2024-12-07', description: '글로벌 스타트업 학교 개인 최우수상', link: 'https://blog.imnyang.xyz/blog/gss' }, + { date: '2024-08-18', description: '29회 해킹캠프 CTF 1위 (고민중독)', link: 'https://ctf.hackingcamp.org/' }, + { date: '2024-08-05', description: '29회 해킹캠프 선발', link: 'https://hackingcamp.org/' }, + { date: '2024-08-01', description: '글로벌 스타트업 학교 2기 베트남 해외 연수 데모데이 대상 (1위)', link: 'http://ncf.or.kr' }, + { date: '2024-05-16', description: '글로벌 스타트업 학교 2기 합격', link: 'http://ncf.or.kr' }, + { date: '2024-05-11', description: 'LG AI 청소년 캠프 1기 LG 탐색상 수상', link: 'https://lgaiyouthcamp.or.kr/' }, + { date: '2024-05-11', description: 'LG AI 청소년 캠프 1기 수료', link: 'https://lgaiyouthcamp.or.kr/' }, + { date: '2024-04-22', description: '@isangjeong.today (인천상정중학교의 오늘 급식)', link: 'https://www.instagram.com/isangjeong.today/' }, + { date: '2024-04-06', description: 'TimeTable (Sekai 개조판 배포) [API 유실]', link: 'https://timeline.imnyang.xyz' }, + { date: '2024-03-24', description: 'Dreamhack #133', link: 'https://dreamhack.io/users/40116/wargame' }, + { date: '2024-03-24', description: 'Ubuntu Mirror', link: 'https://launchpad.net/ubuntu/+mirror/mirror.imnyang.xyz-release' }, + { date: '2024-03-24', description: '내 목소리로 AI Cover 만들기', link: 'https://colab.research.google.com/drive/1a4G4hD9huBeGRZhEL2HNDMpqSuf4y61k?usp=sharing' }, + { date: '2024-01-26', description: 'Fastapi를 통해 API 제작', link: 'https://github.com/imnyang/api' }, + { date: '2023-12-20', description: 'LG AI 청소년 캠프 1기 합격' }, + { date: '2023-11-14', description: '인천상정중학교 2023학년도 SW 문제 해결 활동 우수상(2위) 수여' }, + { date: '2023-11-01', description: '블로그 시작', link: 'https://blog.imnyang.xyz' }, + { date: '2023-10-12', description: '나는 로컬 시간을 알고 싶다', link: 'https://time.imnyang.xyz/' }, + { date: '2023-09-24', description: 'sqlr.kr 기획 및 초기 개발', link: 'https://github.com/sqlare/sqlr.kr/tree/main' }, + { date: '2023-09-02', description: '선린인터넷고등학교 제6회 소프트웨어나늠축제 Layer7 부서 과정 이수' }, + { date: '2023-08-26', description: '컴시간 시간표를 더 나아보이게 Sekai', link: 'https://github.com/imnyang/Sekai' }, + { date: '2023-08-23', description: '디스코드 통화방 녹음', link: 'https://github.com/imnyang/discord-voice-rec'}, + { date: '2023-07-24', description: '한국정보기술연구원이 주도하는 사이버 가디언즈 보안캠프 수료' }, + { date: '2023-03-20', description: '디스코드에서 대화형 인공지능 Siru 제작', link: 'https://github.com/imnyang/siru' }, + { date: '2023-05-15', description: '한국 코드페어 예선 진출' }, + { date: '2023-03-14', description: '타이머', link: 'https://github.com/imnyang/imnyang-timer' }, + { date: '2022-12-20', description: '2022 SW영재 창작대회 은상 수상'}, + { date: '2022-09-27', description: '2022 삼성 주니어 SW 창작대회 본선 진출' }, + { date: '2022-05-23', description: '2022학년도 석정초SW영재학급 첫 수업' }, + { date: '2022-07-26', description: '제 14회 맑은하늘 맑은웃음 공모전에서 맑은웃음상 수여' }, + { date: '2021-11-14', description: 'Become a ZEPETO Creator 이수' }, + { date: '2021-05-19', description: '소프트웨어와 전자신문이 주관한 소프트웨어재단 꿈찾기 캠프 이수' }, + { date: '2018-01-27', description: '제4회 맑은하늘 맑은웃음 어린이 문예공모전에서 위닉스상(2위) 수여' }, +]; + + interface TippyWrapperProps extends React.AnchorHTMLAttributes { children: React.ReactNode; ref?: Ref; @@ -37,45 +75,47 @@ export default function Home() { }, []); const searchParams = useSearchParams(); - const [imageSrc, setImageSrc] = useState( - "https://f.imnyang.xyz/profile/imnyang.webp", - ); + const [imageSrc, setImageSrc] = useState("https://f.imnyang.xyz/profile/imnyang.webp"); const [gotoHref, setGotoHref] = useState("/"); const [isMobile, setIsMobile] = useState(false); useEffect(() => { - setIsMobile(window.innerWidth <= 768); const handleResize = () => { setIsMobile(window.innerWidth <= 768); }; + handleResize(); // 초기화 시점에 호출 window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); useEffect(() => { - if (searchParams.has("kawaii")) { - setImageSrc("https://f.imnyang.xyz/profile/hatchu_imnyang.webp"); - setGotoHref("/"); - } else { - setImageSrc("https://f.imnyang.xyz/profile/imnyang.webp"); - setGotoHref("/?kawaii"); - } - if (searchParams.has("no_hair") && searchParams.has("no_ear")) { - setImageSrc("https://f.imnyang.xyz/profile/no_ear_no_long_hair.png"); - } else if (searchParams.has("no_ear")) { - setImageSrc("https://f.imnyang.xyz/profile/no_ear.png"); - } else if (searchParams.has("no_hair")) { - setImageSrc("https://f.imnyang.xyz/profile/no_hair.avif"); - } - if (searchParams.has("fast")) { - const style = document.createElement("style"); - style.innerHTML = ` - .profile:hover { - animation: rotate 1ms linear infinite; - } - `; - document.head.appendChild(style); - } + const updateImageSrc = () => { + if (searchParams.has("kawaii")) { + setImageSrc("https://f.imnyang.xyz/profile/hatchu_imnyang.webp"); + setGotoHref("/"); + } else { + setImageSrc("https://f.imnyang.xyz/profile/imnyang.webp"); + setGotoHref("/?kawaii"); + } + if (searchParams.has("no_hair") && searchParams.has("no_ear")) { + setImageSrc("https://f.imnyang.xyz/profile/no_ear_no_long_hair.png"); + } else if (searchParams.has("no_ear")) { + setImageSrc("https://f.imnyang.xyz/profile/no_ear.png"); + } else if (searchParams.has("no_hair")) { + setImageSrc("https://f.imnyang.xyz/profile/no_hair.avif"); + } + if (searchParams.has("fast")) { + const style = document.createElement("style"); + style.innerHTML = ` + .profile:hover { + animation: rotate 1ms linear infinite; + } + `; + document.head.appendChild(style); + } + }; + + updateImageSrc(); }, [searchParams]); interface SocialLinkProps { @@ -103,19 +143,35 @@ export default function Home() { return (
-
+
Profile

hyun._.suk

{isMobile && ( )} - +
+
+ {events.map((event, index) => ( +
+

{event.date}

+
+ {event.link && ( + + + {event.description} + + )} + {!event.link && {event.description}} +
+
+ ))} +
); } \ No newline at end of file