-
-
-
-
+ About
-항상 새로운 것을 찾고 삶을 더 간단명료하게 만들고 있는 학생 개발자 남현석입니다.
-
+
+
+ today.isangjeong +
+
+ 💕 About
+초등학교 시절 운영체제에 흥미를 느껴 컴퓨터를 시작했고, 이후 프로그래밍에 관심을 갖게 되었습니다.
+초등학교 4학년 때 Python으로 프로그래밍을 시작했으며, 현재는 TypeScript를 주로 사용합니다.
+최근에는 정보보안 분야 중 웹 해킹에 관심이 많습니다.
++
대표적인 프로젝트들은 아래와 같습니다.
+ Effect Playing Contest 2025 Broadcast Develop+ today.isangjeong +
+
+ );
+}
diff --git a/src/components/Top.tsx b/src/components/Top.tsx
new file mode 100644
index 0000000..02f1032
--- /dev/null
+++ 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
+
+
+
+
+ imnyang@adofai.gg
+
+
+
+ ----------
+ ++ Uptime:{" "} + {(() => { + 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`; + })()} +
+ ++ Experience:{" "} + {Object.values(events).flat().length} +
+ ++ WakaTime:{" "} + {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"} +
+ ++ Most used Language:{" "} + {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"} +
+ ++ Terminal: {ipData} +
+ ++ Locale: ko_KR.UTF-8 +
+ ++
+
+ ⠀⠀
+⠀⠀
+⠀⠀
+⠀⠀
+⠀⠀
+⠀⠀
+⠀⠀
+⠀⠀
+ +⠀⠀
+⠀⠀
+⠀⠀
+⠀⠀
+⠀⠀
+⠀⠀
+⠀⠀
+⠀⠀
+ {
+ 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)`;
+ }
+ }}
+ >
+
+
- (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 (
+ (
+ 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 {
+ 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 (
+
+
+
+ )
+}
+
+// TimelineContent
+function TimelineContent({
+ className,
+ ...props
+}: React.HTMLAttributes) {
+ return (
+
+ )
+}
+
+// TimelineDate
+interface TimelineDateProps extends React.HTMLAttributes {
+ asChild?: boolean
+}
+
+function TimelineDate({
+ asChild = false,
+ className,
+ ...props
+}: TimelineDateProps) {
+ const Comp = asChild ? Slot.Root : "time"
+
+ return (
+ ) {
+ return (
+
+ )
+}
+
+// TimelineIndicator
+interface TimelineIndicatorProps extends React.HTMLAttributes {
+ asChild?: boolean
+}
+
+function TimelineIndicator({
+ asChild = false,
+ className,
+ children,
+ ...props
+}: TimelineIndicatorProps) {
+ return (
+
+ )
+}
+
+// TimelineItem
+interface TimelineItemProps extends React.HTMLAttributes {
+ step: number
+}
+
+function TimelineItem({ step, className, ...props }: TimelineItemProps) {
+ const { activeStep } = useTimeline()
+
+ return (
+
+ )
+}
+
+// TimelineSeparator
+function TimelineSeparator({
+ className,
+ ...props
+}: React.HTMLAttributes) {
+ return (
+
+ )
+}
+
+// TimelineTitle
+function TimelineTitle({
+ className,
+ ...props
+}: React.HTMLAttributes) {
+ return (
+
+ )
+}
+
+export {
+ Timeline,
+ TimelineContent,
+ TimelineDate,
+ TimelineHeader,
+ TimelineIndicator,
+ TimelineItem,
+ TimelineSeparator,
+ TimelineTitle,
+}
\ No newline at end of file
diff --git a/src/hooks/use-ip-data.ts b/src/hooks/use-ip-data.ts
new file mode 100644
index 0000000..1880e16
--- /dev/null
+++ b/src/hooks/use-ip-data.ts
@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+export function useIpData() {
+ const [ipData, setIpData] = useState("");
+
+ 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;
+}
\ No newline at end of file
diff --git a/src/hooks/use-wakatime-data.ts b/src/hooks/use-wakatime-data.ts
new file mode 100644
index 0000000..c4a3fc5
--- /dev/null
+++ b/src/hooks/use-wakatime-data.ts
@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+export function useWakaTimeData() {
+ const [wakaTimeData, setWakaTimeData] = useState(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;
+}
\ No newline at end of file
diff --git a/src/lib/events.ts b/src/lib/events.ts
new file mode 100644
index 0000000..e2308c4
--- /dev/null
+++ 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",
+ },
+];
\ No newline at end of file
-
+ return (
+ me@imnya.ng
-
+
+ );
+}
diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx
new file mode 100644
index 0000000..4350af3
--- /dev/null
+++ 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
+
+
+
- )
-}
\ No newline at end of file
+ + me@imnya.ng +
+
+
+
+ );
+}
diff --git a/src/components/ui/timeline.tsx b/src/components/ui/timeline.tsx
new file mode 100644
index 0000000..89bdfe2
--- /dev/null
+++ 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
+
+
+ 🌠 수상 및 교육
++
+ {/* Left column - Year buttons */}
+
+
+ {years.map((year) => (
+
+ ))}
+
+
+ {/* Right column - Events */}
+
+
+
+ {filteredEvents.map((event, index) => (
+
+
+
+ ))}
+
+
+ {new Date(event.date).toLocaleDateString("en-US", {
+ month: "short",
+ day: "2-digit",
+ })}
+
+
+ ㆍ{event.category}
+
+
+ {event.link ? (
+
+ {event.description}{" "}
+