feat: update configuration, styles, and components for improved UI and functionality

next.config.ts

@@ -8,6 +8,9 @@ const nextConfig: NextConfig = {
   turbopack: {
     root: path.join(__dirname, '.'),
   },
+  images: {
+    remotePatterns: [new URL('https://api.imnya.ng/**')],
+  },
   output: 'standalone',
 };
 

src/app/globals.css

@@ -209,3 +209,7 @@ body {
   scroll-snap-align: start;
   scroll-snap-stop: always;
 }
+
+strong {
+  font-weight: 600;
+} 

src/app/not-found.tsx

@@ -0,0 +1,18 @@
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+
+export default function NotFound() {
+    return (
+        <div className="flex flex-col items-center justify-center min-h-screen">
+            <figure>
+                <picture className="block bg-gray-100 rounded-xl aspect-1-1 overflow-hidden image-scale object-shadowed mb-8">
+                    <Image src="https://api.imnya.ng/mitda/miku" width={200} height={200} alt="Not Found Image" />
+                </picture>
+            </figure>
+            <h1 className="text-4xl font-bold">404</h1>
+            <p>괜찮아요. 이런날도 있는거죠</p>
+            <br/>
+            <a href="/">← Go Home</a>
+        </div>
+    )
+}

src/app/page.tsx

@@ -1,35 +1,16 @@
-'use client';
 import Projects from "@/components/Projects";
 import TimelineComponent from "@/components/timeline";
 import Image from "next/image";
 import DraggableWindow from "@/components/DraggableWindow";
 import ReadmeWindow from "@/components/ReadmeWindow";
-// import Snowfall from 'react-snowfall';
-import { useTheme } from "next-themes";
-// import { Banner } from "@/components/ui/banner";
-import { LinkIcon, TreeDeciduous, TreePalmIcon, TreesIcon } from "lucide-react";
-import { useState } from "react";
 import Contact from "@/components/Contact";
-// import DraggableWindose from "@/components/DraggableWindose";
+import DDayComponent from "@/components/dday";
 
 export default function Page() {
-  const { theme } = useTheme();
-  // const [show, setShow] = useState(true);
-  // const [targetPosition, setTargetPosition] = useState<{ x: number; y: number } | null>(null);
-  // const [windowVisible, setWindowVisible] = useState(true);
-
-  // const handleTXTHover = (position: { x: number; y: number } | null) => {
-  //   setTargetPosition(position);
-  //   if (position) {
-  //     setWindowVisible(true);
-  //   }
-  // };
-
   return (
     <main className="min-h-screen w-screen overflow-y-scroll snap-y snap-mandatory relative">
-      {/* <Snowfall color={theme === 'dark' ? '#ffffff' : '#bcbcd6ff'} /> */}
-
-      <div className="max-w-3xl w-full flex flex-row h-auto mx-auto gap-4 items-center my-8 lg:px-0 px-8">
+      <div className="max-w-3xl w-full flex flex-row h-auto mx-auto my-8 items-center justify-between lg:px-0 px-8">
+        <div className="flex flex-row gap-4 items-center">
           <Image
             src="/Frame.svg"
             alt="logo"
@@ -41,33 +22,15 @@ export default function Page() {
             <a href="mailto:me@imnya.ng">me@imnya.ng</a>
           </h1>
         </div>
+        <DDayComponent targetDate={new Date('2010-11-08T03:00:00+09:00')} label="🎂 Birth" />
+      </div>
       <div className="max-w-3xl w-full flex mx-auto mb-8 px-8 lg:px-0">
         <Contact />
       </div>
       <section id="about" className="w-full snap-start snap-always flex flex-col items-center justify-center px-8 lg:px-0">
-        {/* <div className="max-w-3xl w-full mb-8">
-          <Banner
-            show={show}
-            onHide={() => setShow(false)}
-            icon={
-              <TreeDeciduous className="w-4 h-4 text-green-800" />
-            }
-            title={
-              <>
-                제 크리스마스 트리를 꾸며주세요!
-              </>
-            }
-            action={{
-              label: "트리 꾸미러 가기",
-              onClick: () => window.open("https://imnya.ng/tree", "_blank"),
-            }}
-          />
-        </div> */}
-
-        {/* <DraggableWindose targetPosition={targetPosition} isVisible={windowVisible} onClose={() => setWindowVisible(false)} onDragStart={() => setTargetPosition(null)} /> */}
         <DraggableWindow />
-        <div className="max-w-3xl w-full">
-          <p>나의 <strong>어두움</strong>이 다른 사람들에겐 <strong>빛</strong>이 되길 바라는 <strong>개발자, 정보보안전문가</strong> 암냥입니다.</p>
+        <div className="max-w-3xl w-full lg:px-0 px-8">
+          <p><strong>더 멋진 세상</strong>을 만들기 위해 노력하는 암냥입니다.</p>
           <p><strong>초등학교 시절 운영체제</strong>에 흥미를 느껴 컴퓨터를 시작했고, 이후 프로그래밍에 관심을 갖게 되었습니다.</p>
           <p><strong>초등학교 4학년 때 Python</strong>으로 프로그래밍을 시작했으며, 현재는 <strong>TypeScript</strong>를 주로 사용합니다.</p>
           <p>최근에는 정보보안 분야 중 <strong>웹 해킹</strong>에 관심이 많습니다.</p>

src/components/Projects.tsx

@@ -1,31 +1,45 @@
+"use client";
 import { SquareArrowOutUpRight } from 'lucide-react';
-import { url } from 'node:inspector';
-
-{/* <a href="https://www.youtube.com/playlist?list=PLZeYZotn5_IOJDek6e35NKzUtJm09yxZD">Effect Playing Contest 2025 Broadcast Develop</a><br />
-<a href="https://github.com/imnyang/today.isangjeong">today.isangjeong</a> */}
+import React from 'react';
 
 const projects = [
   {
     name: 'EPC 2025 Broadcast Manager',
-    url: 'https://www.youtube.com/@adofaigg',
-    desc: '얼불춤 끼얏호우',
+    url: 'https://www.youtube.com/playlist?list=PLZeYZotn5_IOJDek6e35NKzUtJm09yxZD',
+    desc: 'ADOFAI is web-scale',
     detail: '달성이 주관하고 ADOFAI.gg가 공동 주최하는 Effect Playing Contest 2025 방송 화면의 대부분의 기능을 개발하였습니다.',
     tags: ['React', 'ElysiaJS'],
   },
   {
-    name: 'NYL',
-    url: 'https://nyl.ny64.kr',
-    desc: '상위 호환',
-    detail: '전국의 중고등학교의 시간표와 급식을 쉽게 확인할 수 있는 앱을 유지보수하고 있습니다.',
-    tags: ['React Native', 'ElysiaJS']
+    name: 'newsletter',
+    url: 'https://github.com/imnyang/newsletter',
+    desc: 'For Memos',
+    detail: '그저 이메일이 오면 Discord 웹훅으로 포워딩합니다.',
+    tags: ['Rust', 'IMAP']
+  },
+  {
+    name: 'memos-rss',
+    url: 'https://github.com/imnyang/memos-rss',
+    desc: 'For Memos',
+    detail: 'Discord 포럼 채널에 RSS 피드에 올라온 내용을 포워딩합니다.',
+    tags: ['Rust', 'Discord Bot', 'RSS']
+  },
+  {
+    name: 'today.isangjeong',
+    url: 'https://instagram.com/today.isangjeong',
+    desc: 'Instagram Bot',
+    detail: '매일 학교의 급식 메뉴를 자동으로 업로드하는 인스타그램 봇입니다.',
+    tags: ['TypeScript', 'Instagram', '@napi-rs/canvas']
   }
 ];
 
 export default function Projects() {
+  const [visibleCount, setVisibleCount] = React.useState(3);
+
   return (
     <section className="break-keep break-words w-full">
       <div className="space-y-8">
-        {projects.map((project, idx) => (
+        {projects.slice(0, visibleCount).map((project, idx) => (
           <div className="space-y-2" key={idx}>
             <div className="space-y-1">
               <div className="flex justify-between items-center gap-y-2 gap-x-4">
@@ -35,7 +49,7 @@ export default function Projects() {
                     <SquareArrowOutUpRight size={16} />
                   </a>
                 ) : (
-                  <span className="text-lg font-medium">{project.name}</span>
+                  <span className="text-lg">{project.name}</span>
                 )}
                 <span className="text-sm text-muted-foreground text-nowrap">{project.desc}</span>
               </div>
@@ -51,6 +65,14 @@ export default function Projects() {
           </div>
         ))}
       </div>
+      {visibleCount < projects.length && (
+        <button
+          onClick={() => setVisibleCount(visibleCount + 3)}
+          className="mt-6 px-4 py-2 bg-muted text-muted-foreground rounded font-medium text-sm hover:bg-muted/80"
+        >
+          더 불러오기
+        </button>
+      )}
     </section>
   );
 }

src/components/dday.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+interface DDayComponentProps {
+    targetDate: Date;
+    label: string;
+
+}
+
+export default function DDayComponent({ targetDate, label }: DDayComponentProps) {
+    const today = new Date();
+    const diffTime = targetDate.getTime() - today.getTime();
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+    const getLabel = () => {
+        if (diffDays > 0) return `D-${diffDays}`;
+        if (diffDays < 0) return `D+${Math.abs(diffDays)}`;
+        return `D-Day`;
+    };
+
+    return (
+        <div className="flex flex-col items-end text-right text-sm">
+            <span>{getLabel()}</span>
+            <span className="text-muted-foreground">{label} | {targetDate.toDateString()}</span>
+        </div>
+    );
+}

src/components/timeline.tsx

@@ -75,6 +75,13 @@ export default function TimelineComponent() {
                   )}
                 </div>
               ))}
+              {selectedYear === new Date().getFullYear() && (
+                <div className="my-8 flex items-center gap-4">
+                  <div className="flex-1 h-px bg-gradient-to-r from-transparent via-muted-foreground to-transparent"></div>
+                    <span className="text-xs text-muted-foreground whitespace-nowrap">✨ | D-{Math.ceil((new Date(new Date().getFullYear() + 1, 0, 1).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24))}동안 만들어나갈 멋진 것들을 기대해주세요.</span>
+                  <div className="flex-1 h-px bg-gradient-to-r from-transparent via-muted-foreground to-transparent"></div>
+                </div>
+              )}
             </div>
           </div>
         </div>

src/lib/events.ts

@@ -1,4 +1,9 @@
 export const events = [
+  {
+    description: "선린인터넷고등학교 121기 입학",
+    category: "Education",
+    date: "2026-03-03"
+  },
   {
     description: "리눅스 마스터 2급",
     category: "License",