임시용 커밋

pnpm-lock.yaml

@@ -23,12 +23,18 @@ importers:
       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)
+      next-themes:
+        specifier: ^0.4.4
+        version: 0.4.4(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106)
       react:
         specifier: 19.0.0-rc-66855b96-20241106
         version: 19.0.0-rc-66855b96-20241106
       react-dom:
         specifier: 19.0.0-rc-66855b96-20241106
         version: 19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106)
+      react-icons:
+        specifier: ^5.4.0
+        version: 5.4.0(react@19.0.0-rc-66855b96-20241106)
       tippy.js:
         specifier: ^6.3.7
         version: 6.3.7
@@ -1573,6 +1579,12 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  next-themes@0.4.4:
+    resolution: {integrity: sha512-LDQ2qIOJF0VnuVrrMSMLrWGjRMkq+0mpgl6e0juCLqdJ+oo8Q84JRWT6Wh11VDQKkMMe+dVzDKLWs5n87T+PkQ==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
   next@15.0.3:
     resolution: {integrity: sha512-ontCbCRKJUIoivAdGB34yCaOcPgYXr9AAkV/IwqFfWWTXEPUgLYkSkqBhIk9KK7gGmgjc64B+RdoeIDM13Irnw==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
@@ -1778,6 +1790,11 @@ packages:
     peerDependencies:
       react: 19.0.0-rc-66855b96-20241106
 
+  react-icons@5.4.0:
+    resolution: {integrity: sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==}
+    peerDependencies:
+      react: '*'
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -4144,6 +4161,11 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
+  next-themes@0.4.4(react-dom@19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106))(react@19.0.0-rc-66855b96-20241106):
+    dependencies:
+      react: 19.0.0-rc-66855b96-20241106
+      react-dom: 19.0.0-rc-66855b96-20241106(react@19.0.0-rc-66855b96-20241106)
+
   next@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):
     dependencies:
       '@next/env': 15.0.3
@@ -4340,6 +4362,10 @@ snapshots:
       react: 19.0.0-rc-66855b96-20241106
       scheduler: 0.25.0-rc-66855b96-20241106
 
+  react-icons@5.4.0(react@19.0.0-rc-66855b96-20241106):
+    dependencies:
+      react: 19.0.0-rc-66855b96-20241106
+
   react-is@16.13.1: {}
 
   react@19.0.0-rc-66855b96-20241106: {}

src/app/index.css

@@ -0,0 +1,12 @@
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.avatar:hover {
+    animation: rotate 1000ms linear infinite;
+}

src/app/page.tsx

@@ -19,32 +19,25 @@ import { Text } from "@chakra-ui/react"
 import { Heart, ChartBar } from "lucide-react";
 
 const events = [
-  { date: '2024-12-07', description: '글로벌 스타트업 학교 팀 1위', link: 'https://blog.imnyang.xyz/blog/gss' },
+  { date: '2024-12-14', description: '2024 글로벌스타트업학교 K-청소년스타트업 경진대회 우수상 수상', category: "Award", link: "https://www.ncf.or.kr/projects/'2024-%EA%B8%80%EB%A1%9C%EB%B2%8C%EC%8A%A4%ED%83%80%ED%8A%B8%EC%97%85%ED%95%99%EA%B5%90-k-%EC%B2%AD%EC%86%8C%EB%85%84%EC%8A%A4%ED%83%80%ED%8A%B8%EC%97%85-%EA%B2%BD%EC%A7%84%EB%8C%80%ED%9A%8C'-%EC%B0%B8%EA%B0%80%EC%9E%90-%EB%AA%A8%EC%A7%91" },
-  { date: '2024-12-07', description: '글로벌 스타트업 학교 개인 최우수상', link: 'https://blog.imnyang.xyz/blog/gss' },
+  { date: '2024-12-07', description: '글로벌 스타트업 학교 팀 1위', category: "Award", link: 'https://blog.imnyang.xyz/blog/gss' },
-  { date: '2024-08-18', description: '29회 해킹캠프 CTF 1위 (고민중독)', link: 'https://ctf.hackingcamp.org/' },
+  { date: '2024-12-07', description: '글로벌 스타트업 학교 개인 최우수상', category: "Award", link: 'https://blog.imnyang.xyz/blog/gss' },
-  { date: '2024-08-05', description: '29회 해킹캠프 선발', link: 'https://hackingcamp.org/' },
+  { date: '2024-08-18', description: '29회 해킹캠프 CTF 1위 (고민중독)', category: "Award", link: 'https://ctf.hackingcamp.org/' },
-  { date: '2024-08-01', description: '글로벌 스타트업 학교 2기 베트남 해외 연수 데모데이 대상 (1위)', link: 'http://ncf.or.kr' },
+  { date: '2024-08-05', description: '29회 해킹캠프 선발', category: "Conference", link: 'https://hackingcamp.org/' },
-  { date: '2024-05-16', description: '글로벌 스타트업 학교 2기 합격', link: 'http://ncf.or.kr' },
+  { date: '2024-08-01', description: '글로벌 스타트업 학교 2기 베트남 해외 연수 데모데이 대상 (1위)', category: "Award", link: 'http://ncf.or.kr' },
-  { date: '2024-05-11', description: 'LG AI 청소년 캠프 1기 LG 탐색상 수상', link: 'https://lgaiyouthcamp.or.kr/' },
+  { date: '2024-05-16', description: '글로벌 스타트업 학교 2기 합격', category: "Education", link: 'http://ncf.or.kr' },
-  { date: '2024-05-11', description: 'LG AI 청소년 캠프 1기 수료', link: 'https://lgaiyouthcamp.or.kr/' },
+  { date: '2024-05-11', description: 'LG AI 청소년 캠프 1기 LG 탐색상 수상', category: "Award", link: 'https://lgaiyouthcamp.or.kr/' },
-  { date: '2024-04-22', description: '@isangjeong.today (인천상정중학교의 오늘 급식)', link: 'https://www.instagram.com/isangjeong.today/' },
+  { date: '2024-05-11', description: 'LG AI 청소년 캠프 1기 수료', category: "Award", link: 'https://lgaiyouthcamp.or.kr/' },
-  { date: '2024-04-06', description: 'TimeTable (Sekai 개조판 배포) [API 유실]', link: 'https://timeline.imnyang.xyz' },
+  { date: '2024-04-22', description: '@isangjeong.today (인천상정중학교의 오늘 급식)', category: "Project", link: 'https://www.instagram.com/isangjeong.today/' },
   { 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: 'Ubuntu Mirror [Not Working Now]', 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-03-24', description: '내 목소리로 AI Cover 만들기', category: "Project", 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기 합격', category: "Education" },
-  { date: '2023-12-20', description: 'LG AI 청소년 캠프 1기 합격' },
+  { date: '2023-11-14', description: '인천상정중학교 2023학년도 SW 문제 해결 활동 우수상(2위) 수여', category: "Award" },
-  { date: '2023-11-14', description: '인천상정중학교 2023학년도 SW 문제 해결 활동 우수상(2위) 수여' },
+  { date: '2023-11-01', description: '블로그 시작', link: 'https://blog.imnyang.xyz', category: "Project" },
-  { 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영재학급 첫 수업' },
@@ -92,7 +85,7 @@ export default function Home() {
       if (searchParams.has("fast")) {
         const style = document.createElement("style");
         style.innerHTML = `
-          .profile:hover {
+          .avatar:hover {
             animation: rotate 1ms linear infinite;
           }
         `;
@@ -157,6 +150,7 @@ export default function Home() {
         <div className="profile flex flex-col items-center gap-4 mt-10 mb-10">
           <Image src={imageSrc} width={128} height={128} className="rounded-full avatar" alt="Profile" priority />
           <h1 className="text-white text-2xl font-bold">hyun._.suk</h1>
+          <p>Team. <Link href="https://sqlare.com">Sqlare</Link> & <Link href="https://github.com/objectiveTM">Objective</Link></p>
           <div className="flex flex-row gap-6">
             {isMobile && (
               <SocialLink href="supertoss://send?bank=토스뱅크&accountNo=100079352039&origin=qr" icon="fa-solid fa-circle-dollar-to-slot" tooltip="Toss" />
@@ -167,7 +161,7 @@ export default function Home() {
             <SocialLink href="https://x.com/fur_local" icon="fa-brands fa-x-twitter" tooltip="X" />
           </div>
         </div>
-          <Stack width="full" maxW="400px" mx="auto">
+          <Stack width="full" maxW="450px" mx="auto">
             <AccordionRoot multiple collapsible value={value} onValueChange={(e) => setValue(e.value)}>
               {items.map((item) => (
                 <AccordionItem key={item.value} value={item.value}>
@@ -193,12 +187,44 @@ const items = [
     icon: <Heart />,
     title: "About",
     content:
-      "사람이래요.",
+      "안녕하세요. imnyang이라는 닉네임으로 활동중인 남현석입니다.\n",
+  },
+  {
+    "value": "project",
+    "icon": <ChartBar />,
+    "title": "Project",
+    "content": 
+    <div className="flex flex-col text-sky-300">
+      <p className="text-white">imnyang</p>
+      <Link href={"https://instagram.com/today.isangjeong"}>오늘 인천 상정중학교</Link>
+      <Link href={"https://time.imnyang.xyz"}>Local Time</Link>
+      <Link href={"https://github.com/imnyang/siru"}>Siru</Link>
+      <Link href={"https://github.com/imnyang/discord-voice-rec"}>Discord Voice Recorder</Link>
+      <br />
+      <p className="text-white">Sqlare</p>
+      <Link href={"https://github.com/sqlare/sqlr.kr/tree/main"}>sqlr.kr (sqlite)</Link>
+    </div>
   },
   {
     value: "timeline",
     icon: <ChartBar />,
     title: "Timeline",
-    content: <div className="timeline text-white">{events.map((event, index) => (<div key={index} className="flex flex-col gap-2 mb-3"><p className="tabular-nums text-base text-gray-400">{event.date}</p><div className="flex items-center">{event.link && (<Link href={event.link} className="flex gap-2 text-base"><span className="text-base">{event.description}</span><LinkIcon width={18} /></Link>)}{!event.link && <span className="text-base">{event.description}</span>}</div></div>))}</div>,
+    content: 
+    <div className="timeline text-white">
+      {events.map((event, index) => (
+        <div key={index} className="flex flex-col gap-2 mb-3">
+          <p className="tabular-nums text-base text-gray-400">{event.date}</p>
+          <div className="flex items-center">
+            {event.link && (
+              <Link href={event.link} className="flex gap-2 text-base">
+                <span className="text-base">{event.description}</span>
+                <LinkIcon width={18} />
+              </Link>)
+            }
+            {!event.link && <span className="text-base">{event.description}</span>}
+          </div>
+        </div>
+      ))}
+    </div>,
   },
 ]