feat(ui/ux): add timeline, hero, and NeoFetch components + data/hooks

- Add timeline route helper - src/app/timeline/route.ts - simple helper to navigate to #timeline - Add NeoFetch component (client) - src/components/NeoFetch.tsx - Displays avatar iframe, uptime calculation, experience count, WakaTime stats, terminal/ip, locale and colour palette - Uses custom hooks useIpData and useWakaTimeData, and events data - Add Top (hero) component (client) - src/components/Top.tsx - Full-screen hero with randomized background, parallax on mouse, device orientation & motion handlers, requestPermission trigger on image click - Includes Sidebar import and optimized Image usage - Add Timeline UI component (client) - src/components/timeline.tsx - Year selector + filtered event list with links and icons - Handles initial selection and rendering grouped by year - Add reusable Timeline primitives (client) - src/components/ui/timeline.tsx - Timeline context and composable parts: Timeline, TimelineItem, Indicator, Separator, Date, Title, Content, Header - Orientation support and controlled/uncontrolled API - Add data & hooks - src/lib/events.ts - Seeded events array (education/awards/conference entries) used by timeline and NeoFetch - src/hooks/use-ip-data.ts - Fetches terminal/ip info from https://api.imnya.ng/ip - src/hooks/use-wakatime-data.ts - Fetches WakaTime summary from https://api.imnya.ng/wakatime Notes: - All new components are client-side ("use client") - Adds device motion/orientation listeners with cleanup - Provides basic error handling for network hooks - Improves homepage/UX with interactive hero and timeline data visualization
2025-10-22 22:33:40 +09:00 · 2025-10-22 22:33:40 +09:00 · 96a43a9a3c
commit 96a43a9a3c
parent 2e1f6a7ec4
34 changed files with 771 additions and 63 deletions
--- a/src/app/favicon.ico
+++ b/src/app/favicon.ico
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -1,12 +1,12 @@
+@import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css");
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@font-face {
-  font-family: 'NType82Headline';
-  src: url('https://f.imnya.ng/font/NType82-Headline.woff2') format('woff2');
-
+  font-family: "NType82Headline";
+  src: url("https://f.imnya.ng/font/NType82-Headline.woff2") format("woff2");
 }

 .font-ntype {
@ -14,43 +14,6 @@
 }

 :root {
-  --background: hsl(340 40% 98%);
-  --foreground: hsl(315 21% 8%);
-  --card: hsl(340 40% 98%);
-  --card-foreground: hsl(315 21% 8%);
-  --popover: hsl(340 40% 98%);
-  --popover-foreground: hsl(315 21% 8%);
-  --primary: hsl(340 25% 15%);
-  --primary-foreground: hsl(0 0% 98%);
-  --secondary: hsl(340 25% 95%);
-  --secondary-foreground: hsl(240 5.9% 10%);
-  --muted: hsl(340 20% 95%);
-  --muted-foreground: hsl(340 10% 60%);
-  --accent: hsl(340 25% 94%);
-  --accent-foreground: hsl(240 5.9% 10%);
-  --destructive: hsl(0 84.2% 60.2%);
-  --destructive-foreground: hsl(0 0% 98%);
-  --border: hsl(340 25% 90%);
-  --input: hsl(340 25% 90%);
-  --ring: hsl(315 21% 8%);
-  --chart-1: hsl(12 76% 61%);
-  --chart-2: hsl(173 58% 39%);
-  --chart-3: hsl(197 37% 24%);
-  --chart-4: hsl(43 74% 66%);
-  --chart-5: hsl(27 87% 67%);
-  --radius: 0.6rem;
-  --sidebar-background: hsl(340 25% 98%);
-  --sidebar-foreground: hsl(240 5.3% 26.1%);
-  --sidebar-primary: hsl(240 5.9% 10%);
-  --sidebar-primary-foreground: hsl(0 0% 98%);
-  --sidebar-accent: hsl(340 20% 95%);
-  --sidebar-accent-foreground: hsl(240 5.9% 10%);
-  --sidebar-border: hsl(340 20% 90%);
-  --sidebar-ring: hsl(217.2 91.2% 59.8%);
-  --sidebar: hsl(0 0% 98%);
-}
-
-.dark {
  --background: hsl(315 21% 8%);
  --foreground: hsl(0 0% 98%);
  --card: hsl(315 21% 8%);
@ -151,5 +114,9 @@
  }
  body {
    @apply bg-background text-foreground;
+    font-family: "Wanted Sans Variable", "Wanted Sans", -apple-system,
+      BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo",
+      "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji",
+      "Segoe UI Symbol", sans-serif;
  }
 }
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import Sidebar from "@/components/sidebar";

 export const metadata: Metadata = {
  title: "남현석 | :two_hearts: imnya.ng",
@ -15,7 +14,6 @@ export default function RootLayout({
  return (
    <html lang="ko">
      <body className="antialiased">
-        <Sidebar />
        {children}
      </body>
    </html>
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -1,18 +1,26 @@
+import NeoFetch from "@/components/NeoFetch";
+import TimelineComponent from "@/components/timeline";
+import Top from "@/components/Top";
+
 export default function Home() {
  return (
-    <main>
-      <div id="top" className="h-screen flex">
-        <div
-          className="absolute top-0 right-0 min-w-[calc(100vw-100px)] min-h-[calc(100vh-56px)] flex flex-col rounded-bl-[160px]"
-          style={{
-            background: "linear-gradient(110deg, #FF8989 21.29%, rgba(85, 0, 255, 0.2) 100%)",
-          }}
-        ></div> 
-      </div>
-      <div id="about" className="h-screen flex p-4">
-        <h1 className="text-2xl">About</h1>
-        <p>항상 새로운 것을 찾고 삶을 더 간단명료하게 만들고 있는 학생 개발자 남현석입니다.</p>
-      </div>
+    <main className="min-h-screen">
+      <Top />
+      <section id="terminal" className="h-screen">
+        <NeoFetch />
+        <div className="px-12">
+          <h1 className="text-2xl font-bold mb-4 w-full">💕 About</h1>
+          <p>초등학교 시절 운영체제에 흥미를 느껴 컴퓨터를 시작했고, 이후 프로그래밍에 관심을 갖게 되었습니다.</p>
+          <p>초등학교 4학년 때 Python으로 프로그래밍을 시작했으며, 현재는 TypeScript를 주로 사용합니다.</p>
+          <p>최근에는 정보보안 분야 중 웹 해킹에 관심이 많습니다.</p>
+          <br />
+          <p>대표적인 프로젝트들은 아래와 같습니다.</p>
+          <a href="https://www.youtube.com/watch?v=XTdqpdTMZbw&list=PLZeYZotn5_IOJDek6e35NKzUtJm09yxZD">Effect Playing Contest 2025 Broadcast Develop</a><br />
+          <a href="https://github.com/imnyang/today.isangjeong">today.isangjeong</a>
+        </div>
+
+        <TimelineComponent />
+      </section>
    </main>
  );
 }
--- a/src/app/timeline/route.ts
+++ b/src/app/timeline/route.ts
@ -0,0 +1,3 @@
+export const timeline = () => {
+    window.location.hash = '#timeline';
+};
--- a/src/components/NeoFetch.tsx
+++ b/src/components/NeoFetch.tsx
@ -0,0 +1,110 @@
+"use client";
+import { events } from "@/lib/events";
+import { useIpData } from "../hooks/use-ip-data";
+import { useWakaTimeData } from "../hooks/use-wakatime-data";
+
+export default function NeoFetch() {
+  const ipData = useIpData();
+  const wakaTimeData = useWakaTimeData();
+
+  return (
+    <div>
+      <div className="flex flex-col md:flex-row">
+        <iframe
+          src="https://f.imnya.ng/.art.html"
+          className="border-0 w-[430px] h-[430px] scale-75"
+        ></iframe>
+        <div className="px-12 md:py-12 text-lg font-mono">
+          <a href="mailto:contact@imnya.ng" className="text-[#FFD7D7]">
+            imnyang<span className="text-foreground">@</span>adofai.gg
+          </a>
+          <p>----------</p>
+
+          <p className="text-foreground">
+            <span className="text-[#FFD7D7]">Uptime</span>:{" "}
+            {(() => {
+              const startDate = new Date("2010-11-08T00:00:00+09:00");
+              const now = new Date();
+              let diff = now.getTime() - startDate.getTime();
+
+              const years = Math.floor(diff / (1000 * 60 * 60 * 24 * 365));
+              diff %= 1000 * 60 * 60 * 24 * 365;
+              const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+              diff %= 1000 * 60 * 60 * 24;
+              const hours = Math.floor(diff / (1000 * 60 * 60));
+              diff %= 1000 * 60 * 60;
+              const mins = Math.floor(diff / (1000 * 60));
+
+              return `${years} years, ${days} days, ${hours} hours, ${mins} mins`;
+            })()}
+          </p>
+
+          <p className="text-foreground">
+            <span className="text-[#FFD7D7]">Experience</span>:{" "}
+            {Object.values(events).flat().length}
+          </p>
+
+          <p className="text-foreground">
+            <span className="text-[#FFD7D7]">WakaTime</span>:{" "}
+            {wakaTimeData?.data?.total_seconds_including_other_language
+              ? (() => {
+                  const seconds = wakaTimeData.data.total_seconds_including_other_language;
+                  const days = Math.floor(seconds / 86400);
+                  const hours = Math.floor((seconds % 86400) / 3600);
+                  const minutes = Math.floor((seconds % 3600) / 60);
+                  return `${days} days, ${hours} hours, ${minutes} minutes, ${Math.round(
+                    seconds % 60
+                  )} seconds`;
+                })()
+              : "N/A"}
+          </p>
+
+          <p className="text-foreground">
+            <span className="text-[#FFD7D7]">Most used Language</span>:{" "}
+            {wakaTimeData?.data?.languages[0]?.name || "N/A"}{" "}
+            {wakaTimeData?.data?.languages[0]?.total_seconds
+              ? (() => {
+                  const seconds = wakaTimeData.data.languages[0].total_seconds;
+                  const days = Math.floor(seconds / 86400);
+                  const hours = Math.floor((seconds % 86400) / 3600);
+                  const minutes = Math.floor((seconds % 3600) / 60);
+                  return `(${days} days, ${hours} hours, ${minutes} minutes, ${Math.round(
+                    seconds % 60
+                  )} seconds)`;
+                })()
+              : "N/A"}
+          </p>
+
+          <p>
+            <span className="text-[#FFD7D7]">Terminal</span>: {ipData}
+          </p>
+
+          <p className="text-foreground">
+            <span className="text-[#FFD7D7]">Locale</span>: ko_KR.UTF-8
+          </p>
+
+          <br />
+          <div id="color" className="grid grid-cols-8 w-fit">
+            <p className="bg-background w-8">⠀⠀</p>
+            <p className="bg-[#f38ba8] w-8">⠀⠀</p>
+            <p className="bg-[#a6e3a1] w-8">⠀⠀</p>
+            <p className="bg-[#f9e2af] w-8">⠀⠀</p>
+            <p className="bg-[#89b4fa] w-8">⠀⠀</p>
+            <p className="bg-[#f5c2e7] w-8">⠀⠀</p>
+            <p className="bg-[#94e2d5] w-8">⠀⠀</p>
+            <p className="bg-muted-foreground w-8">⠀⠀</p>
+
+            <p className="bg-[#45475a] w-8">⠀⠀</p>
+            <p className="bg-[#f0c0cd] w-8">⠀⠀</p>
+            <p className="bg-[#c3e9bf] w-8">⠀⠀</p>
+            <p className="bg-[#f0e0bf] w-8">⠀⠀</p>
+            <p className="bg-[#c3d9fd] w-8">⠀⠀</p>
+            <p className="bg-[#f8d2ee] w-8">⠀⠀</p>
+            <p className="bg-[#b1faee] w-8">⠀⠀</p>
+            <p className="bg-foreground w-8">⠀⠀</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/Top.tsx
+++ b/src/components/Top.tsx
@ -0,0 +1,105 @@
+"use client";
+import Sidebar from "@/components/sidebar";
+import Image from "next/image";
+import { useEffect, useRef, useState } from "react";
+
+export default function Top() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [randomBg, setRandomBg] = useState(1);
+
+  useEffect(() => {
+    setRandomBg(Math.floor(Math.random() * 14) + 1);
+  }, []);
+
+  const requestPermission = async () => {
+    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
+
+    if (!isIOS)
+      window.addEventListener("deviceorientation", handleDeviceOrientation);
+
+    try {
+      const res = await (DeviceOrientationEvent as any).requestPermission();
+      if (res === "granted") {
+        window.addEventListener("devicemotion", handleDeviceMotion);
+        window.addEventListener("deviceorientation", handleDeviceOrientation);
+      }
+    } catch {
+      window.addEventListener("deviceorientation", handleDeviceOrientation);
+    }
+  };
+
+  const handleDeviceOrientation = (event: DeviceOrientationEvent) => {
+    if (!containerRef.current) return;
+    const gamma = event.gamma || 0;
+    const beta = event.beta || 0;
+
+    const x = (gamma / 90) * -50;
+    const y = (beta / 180) * -50;
+
+    const bg = containerRef.current;
+    bg.style.backgroundPosition = `${50 + x}% ${50 + y}%`;
+
+    const img = bg.querySelector("img");
+    if (img) img.style.transform = `translate(${x * 2}px, ${y * 2}px)`;
+  };
+
+  const handleDeviceMotion = (event: DeviceMotionEvent) => {
+    if (!containerRef.current || !event.accelerationIncludingGravity) return;
+    const { x, y } = event.accelerationIncludingGravity;
+    if (x === null || y === null) return;
+    const bg = containerRef.current;
+    bg.style.backgroundPosition = `${50 - x * 3}% ${50 - y * 3}%`;
+  };
+
+  useEffect(() => {
+    return () => {
+      window.removeEventListener("deviceorientation", handleDeviceOrientation);
+      window.removeEventListener("devicemotion", handleDeviceMotion);
+    };
+  }, []);
+
+  return (
+    <section
+      id="top"
+      className="snap-start h-screen w-full relative"
+      onWheel={(e) => {
+        e.preventDefault();
+        window.scrollBy(0, window.innerHeight * (e.deltaY > 0 ? 1 : -1));
+      }}
+    >
+      <Sidebar />
+      <div
+        ref={containerRef}
+        className="absolute top-0 right-0 w-[calc(100%-100px)] h-screen lg:h-[calc(100vh-56px)] flex flex-col items-center justify-end lg:rounded-bl-[160px] bg-cover bg-center overflow-hidden"
+        style={{
+          backgroundImage: `url('/background/${randomBg}.avif')`,
+        }}
+        onMouseMove={(e) => {
+          const { clientX, clientY } = e;
+          const { innerWidth, innerHeight } = window;
+          const x = (clientX / innerWidth - 0.5) * -50;
+          const y = (clientY / innerHeight - 0.5) * -50;
+
+          const bg = e.currentTarget;
+          if (bg) {
+            bg.style.backgroundPosition = `${50 + x}% ${50 + y}%`;
+          }
+          const img = e.currentTarget.querySelector("img");
+          if (img) {
+            img.style.transform = `translate(${x}px, ${y}px)`;
+          }
+        }}
+      >
+        <Image
+          src={"/char.avif"}
+          alt="character"
+          width={4096}
+          height={4096}
+          className="w-[50vh] lg:w-[30vw] translate-y-[10%] transition-transform duration-100 ease-out"
+          unoptimized
+          onClick={requestPermission}
+        />
+      </div>
+    </section>
+  );
+}
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@ -1,12 +1,26 @@
 import Image from "next/image";
+import { Popover } from "./ui/popover";

 export default function Sidebar() {
-    return (
-        <div className="w-[100px] h-screen absolute top-0 left-0 flex flex-col items-center gap-6">
-            <Image src="/Frame.svg" alt="logo" className="w-fit h-fit mt-[50px]" width={30} height={30} />
-            <div className="font-ntype rotate-90 mt-8 text-3xl opacity-70 flex flex-row gap-2 w-full">
-                <h1><a href="mailto:me@imnya.ng">me@imnya.ng</a></h1>
-            </div>
+  return (
+    <div className="w-[100px] h-screen absolute top-0 left-0 flex flex-col items-center justify-between">
+      <div className="w-full h-full flex flex-col items-center gap-6">
+        <Image
+          src="/Frame.svg"
+          alt="logo"
+          className="w-fit h-fit mt-[50px]"
+          width={30}
+          height={30}
+        />
+        <div className="font-ntype rotate-90 mt-8 text-3xl opacity-70 flex flex-row gap-2 w-full">
+          <h1>
+            <a href="mailto:me@imnya.ng">me@imnya.ng</a>
+          </h1>
        </div>
-    )
-}
+      </div>
+      <div>
+        <Popover />
+      </div>
+    </div>
+  );
+}
--- a/src/components/timeline.tsx
+++ b/src/components/timeline.tsx
@ -0,0 +1,86 @@
+"use client";
+import { events } from "@/lib/events";
+import { LinkIcon } from "lucide-react";
+import { useEffect, useState, useRef } from "react";
+
+export default function TimelineComponent() {
+  const [selectedYear, setSelectedYear] = useState<number | null>(null);
+
+  const years = Array.from(
+    new Set(events.map((event) => new Date(event.date).getFullYear()))
+  ).sort((a, b) => b - a);
+
+  useEffect(() => {
+    if (years.length > 0 && selectedYear === null) {
+      setSelectedYear(years[0]);
+    }
+  }, [years, selectedYear]);
+
+  const filteredEvents = selectedYear
+    ? events.filter(
+        (event) => new Date(event.date).getFullYear() === selectedYear
+      )
+    : [];
+
+  return (
+    <div
+      id="timeline"
+      className="w-full flex flex-col items-center justify-center px-12 mt-8"
+    >
+      <div className="w-full">
+        <h1 className="text-2xl font-bold mb-4 w-full">🌠 수상 및 교육</h1>
+        <br />
+        <div className="flex flex-col md:flex-row gap-4 h-full">
+          {/* Left column - Year buttons */}
+          <div className="w-full md:w-24 flex flex-row md:flex-col gap-2 overflow-y-auto pr-2">
+            {years.map((year) => (
+              <button
+                key={year}
+                onClick={() => setSelectedYear(year)}
+                className={`px-4 py-2 rounded-lg font-semibold transition-all text-sm ${
+                  selectedYear === year
+                    ? "bg-primary text-primary-foreground"
+                    : "bg-background border border-border hover:bg-muted"
+                }`}
+              >
+                {year}
+              </button>
+            ))}
+          </div>
+
+          {/* Right column - Events */}
+          <div className="flex-1 overflow-y-auto pr-2">
+            <div className="space-y-2">
+              {filteredEvents.map((event, index) => (
+                <div
+                  key={index}
+                  className="rounded-lg border bg-background px-4 py-3"
+                >
+                  <div className="flex flex-row gap-2 mb-1">
+                    <span className="text-md font-semibold fixed-width-number">
+                      {new Date(event.date).toLocaleDateString("en-US", {
+                        month: "short",
+                        day: "2-digit",
+                      })}
+                    </span>
+                    <span className="text-md font-semibold fixed-width-number text-muted-foreground">
+                      ㆍ{event.category}
+                    </span>
+                  </div>
+                  {event.link ? (
+                    <a href={event.link} className="">
+                      {event.description}{" "}
+                      <LinkIcon className="inline-block w-4 h-4 mb-1 ml-1" />
+                    </a>
+                  ) : (
+                    <span>{event.description}</span>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/ui/timeline.tsx
+++ b/src/components/ui/timeline.tsx
@ -0,0 +1,210 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+// Types
+type TimelineContextValue = {
+  activeStep: number
+  setActiveStep: (step: number) => void
+}
+
+// Context
+const TimelineContext = React.createContext<TimelineContextValue | undefined>(
+  undefined
+)
+
+const useTimeline = () => {
+  const context = React.useContext(TimelineContext)
+  if (!context) {
+    throw new Error("useTimeline must be used within a Timeline")
+  }
+  return context
+}
+
+// Components
+interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultValue?: number
+  value?: number
+  onValueChange?: (value: number) => void
+  orientation?: "horizontal" | "vertical"
+}
+
+function Timeline({
+  defaultValue = 1,
+  value,
+  onValueChange,
+  orientation = "vertical",
+  className,
+  ...props
+}: TimelineProps) {
+  const [activeStep, setInternalStep] = React.useState(defaultValue)
+
+  const setActiveStep = React.useCallback(
+    (step: number) => {
+      if (value === undefined) {
+        setInternalStep(step)
+      }
+      onValueChange?.(step)
+    },
+    [value, onValueChange]
+  )
+
+  const currentStep = value ?? activeStep
+
+  return (
+    <TimelineContext.Provider
+      value={{ activeStep: currentStep, setActiveStep }}
+    >
+      <div
+        data-slot="timeline"
+        className={cn(
+          "group/timeline flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
+          className
+        )}
+        data-orientation={orientation}
+        {...props}
+      />
+    </TimelineContext.Provider>
+  )
+}
+
+// TimelineContent
+function TimelineContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="timeline-content"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+// TimelineDate
+interface TimelineDateProps extends React.HTMLAttributes<HTMLTimeElement> {
+  asChild?: boolean
+}
+
+function TimelineDate({
+  asChild = false,
+  className,
+  ...props
+}: TimelineDateProps) {
+  const Comp = asChild ? Slot.Root : "time"
+
+  return (
+    <Comp
+      data-slot="timeline-date"
+      className={cn(
+        "text-muted-foreground mb-1 block text-xs font-medium group-data-[orientation=vertical]/timeline:max-sm:h-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+// TimelineHeader
+function TimelineHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div data-slot="timeline-header" className={cn(className)} {...props} />
+  )
+}
+
+// TimelineIndicator
+interface TimelineIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean
+}
+
+function TimelineIndicator({
+  asChild = false,
+  className,
+  children,
+  ...props
+}: TimelineIndicatorProps) {
+  return (
+    <div
+      data-slot="timeline-indicator"
+      className={cn(
+        "border-primary/20 group-data-completed/timeline-item:border-primary absolute size-4 rounded-full border-2 group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:left-0 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:top-0 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:-translate-x-1/2",
+        className
+      )}
+      aria-hidden="true"
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+// TimelineItem
+interface TimelineItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  step: number
+}
+
+function TimelineItem({ step, className, ...props }: TimelineItemProps) {
+  const { activeStep } = useTimeline()
+
+  return (
+    <div
+      data-slot="timeline-item"
+      className={cn(
+        "group/timeline-item has-[+[data-completed]]:[&_[data-slot=timeline-separator]]:bg-primary relative flex flex-1 flex-col gap-0.5 group-data-[orientation=horizontal]/timeline:mt-8 group-data-[orientation=horizontal]/timeline:not-last:pe-8 group-data-[orientation=vertical]/timeline:ms-8 group-data-[orientation=vertical]/timeline:not-last:pb-12",
+        className
+      )}
+      data-completed={step <= activeStep || undefined}
+      {...props}
+    />
+  )
+}
+
+// TimelineSeparator
+function TimelineSeparator({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="timeline-separator"
+      className={cn(
+        "bg-primary/10 absolute self-start group-last/timeline-item:hidden group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:h-0.5 group-data-[orientation=horizontal]/timeline:w-[calc(100%-1rem-0.25rem)] group-data-[orientation=horizontal]/timeline:translate-x-4.5 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:h-[calc(100%-1rem-0.25rem)] group-data-[orientation=vertical]/timeline:w-0.5 group-data-[orientation=vertical]/timeline:-translate-x-1/2 group-data-[orientation=vertical]/timeline:translate-y-4.5",
+        className
+      )}
+      aria-hidden="true"
+      {...props}
+    />
+  )
+}
+
+// TimelineTitle
+function TimelineTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      data-slot="timeline-title"
+      className={cn("text-sm font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Timeline,
+  TimelineContent,
+  TimelineDate,
+  TimelineHeader,
+  TimelineIndicator,
+  TimelineItem,
+  TimelineSeparator,
+  TimelineTitle,
+}
--- a/src/hooks/use-ip-data.ts
+++ b/src/hooks/use-ip-data.ts
@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+export function useIpData() {
+  const [ipData, setIpData] = useState<string>("");
+
+  useEffect(() => {
+    const fetchIpData = async () => {
+      try {
+        const response = await fetch("https://api.imnya.ng/ip");
+        const data = await response.text();
+        setIpData(data);
+      } catch (error) {
+        console.error("Failed to fetch IP data:", error);
+      }
+    };
+
+    fetchIpData();
+  }, []);
+
+  return ipData;
+}
--- a/src/hooks/use-wakatime-data.ts
+++ b/src/hooks/use-wakatime-data.ts
@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+export function useWakaTimeData() {
+  const [wakaTimeData, setWakaTimeData] = useState<any>(null);
+
+  useEffect(() => {
+    const fetchWakaTimeData = async () => {
+      try {
+        const response = await fetch("https://api.imnya.ng/wakatime");
+        const data = await response.json();
+        setWakaTimeData(data);
+      } catch (error) {
+        console.error("Failed to fetch WakaTime data:", error);
+      }
+    };
+
+    fetchWakaTimeData();
+  }, []);
+
+  return wakaTimeData;
+}
--- a/src/lib/events.ts
+++ b/src/lib/events.ts
@ -0,0 +1,146 @@
+export const events = [
+  {
+    description: "화이트햇스쿨 3기 이수",
+    category: "Education",
+    date: "2025-09-24",
+    link: "https://whitehatschool.kr/home/kor/main.do",
+  },
+  {
+    date: "2025-09-13",
+    description: "선린인터넷고 소프트웨어 나눔축제 AnA 이수",
+    category: "Education",
+    link: "https://ssf.sunrin.io/",
+  },
+  {
+    date: "2025-07-26",
+    description: "선린인터넷고 여름방학 중학생 특별교육 우수 이수 (프로그래밍)",
+    category: "Education",
+    link: "https://sunrint.sen.hs.kr/",
+  },
+  {
+    date: "2025-01-19",
+    description: "2024 Sunrin LOGCON(TeamLog 주최) 중등부 3위",
+    category: "Award",
+    link: "https://teamlog.kr",
+  },
+  {
+    date: "2025-01-12",
+    description: "2024 Sunrin Layer7 CTF 중등부 2위",
+    category: "Award",
+    link: "https://layer7.kr",
+  },
+  {
+    date: "2025-01-10",
+    description: "선린인터넷고 겨울방학 중학생 특별교육 이수 (IT경영학과)",
+    category: "Education",
+    link: "https://sunrint.sen.hs.kr/",
+  },
+  {
+    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: "글로벌 스타트업 학교 팀 1위",
+    category: "Award",
+    link: "https://ncf.or.kr",
+  },
+  {
+    date: "2024-12-07",
+    description: "글로벌 스타트업 학교 개인 최우수상",
+    category: "Award",
+    link: "https://ncf.or.kr",
+  },
+  {
+    date: "2024-08-18",
+    description: "29회 해킹캠프 CTF 1위 (고민중독)",
+    category: "Award & Conference",
+    link: "https://ctf.hackingcamp.org/",
+  },
+  {
+    date: "2024-08-01",
+    description:
+      "글로벌 스타트업 학교 2기 베트남 해외 연수 데모데이 대상 (1위)",
+    category: "Award",
+    link: "http://ncf.or.kr",
+  },
+  {
+    date: "2024-05-16",
+    description: "글로벌 스타트업 학교 2기 합격",
+    category: "Education",
+    link: "http://ncf.or.kr",
+  },
+  {
+    date: "2024-05-11",
+    description: "LG AI 청소년 캠프 1기 LG 탐색상 수상",
+    category: "Award",
+    link: "https://lgaiyouthcamp.or.kr/",
+  },
+  {
+    date: "2024-05-11",
+    description: "LG AI 청소년 캠프 1기 수료",
+    category: "Award & Education",
+    link: "https://lgaiyouthcamp.or.kr/",
+  },
+  {
+    date: "2023-11-14",
+    description: "인천상정중학교 2023학년도 SW 문제 해결 활동 우수상(2위) 수여",
+    category: "Award",
+  },
+  {
+    date: "2023-09-02",
+    description:
+      "선린인터넷고등학교 제6회 소프트웨어나눔축제 Layer7 부서 과정 이수",
+    category: "Education",
+  },
+  {
+    date: "2023-07-24",
+    description: "한국정보기술연구원이 주도하는 사이버 가디언즈 보안캠프 수료",
+    category: "Education",
+  },
+  {
+    date: "2023-05-15",
+    description: "한국 코드페어 예선 진출",
+    category: "Award",
+  },
+  {
+    date: "2022-12-20",
+    description: "2022 SW영재 창작대회 은상 수상",
+    category: "Award",
+  },
+  {
+    date: "2022-09-27",
+    description: "2022 삼성 주니어 SW 창작대회 본선 진출",
+    category: "Award",
+  },
+  {
+    date: "2022-05-23",
+    description: "2022학년도 석정초SW영재학급 첫 수업",
+    category: "Education",
+  },
+  {
+    date: "2022-07-26",
+    description: "제 14회 맑은하늘 맑은웃음 공모전에서 맑은웃음상 수여",
+    category: "Award",
+  },
+  {
+    date: "2021-11-14",
+    description: "Become a ZEPETO Creator 이수",
+    category: "Education",
+  },
+  {
+    date: "2021-05-19",
+    description:
+      "소프트웨어와 전자신문이 주관한 소프트웨어재단 꿈찾기 캠프 이수",
+    category: "Education",
+  },
+  {
+    date: "2018-01-27",
+    description:
+      "제4회 맑은하늘 맑은웃음 어린이 문예공모전에서 위닉스상(2위) 수여",
+    category: "Award",
+  },
+];