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

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

@@ -19,8 +19,8 @@ export default function TimelineComponent() {
 
   const filteredEvents = selectedYear
     ? events.filter(
-        (event) => new Date(event.date).getFullYear() === selectedYear
-      )
+      (event) => new Date(event.date).getFullYear() === selectedYear
+    )
     : [];
 
   return (
@@ -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>