feat(ui): implement SUPERCOMMAND component and integrate it into the layout; add Projects component for project display

src/components/Projects.tsx

@@ -0,0 +1,55 @@
+import { SquareArrowOutUpRight } from 'lucide-react';
+
+{/* <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> */}
+
+const projects = [
+  {
+    name: 'EPC 2025 Broadcast Manager',
+    url: 'https://github.com/NY0510/slunchv2',
+    desc: '얼불춤 끼얏호우',
+    detail: '달성이 주관하고 ADOFAI.gg가 공동 주최하는 Effect Playing Contest 2025 방송 화면의 대부분의 기능을 개발하였습니다.',
+    tags: ['React', 'ElysiaJS'],
+  },
+  {
+    name: '@today.isangjeong',
+    url: 'https://instagram.com/today.isangjeong',
+    desc: '인스타에서 급식 공유를 간편하게',
+    detail: '오늘의 급식을 사진으로 공유하는 인스타그램 계정입니다. 매일 학교 급식을 자동으로 정리하여 제공합니다.',
+    tags: ['TypeScript', '자체 개발 Instagram Library', '@napi-rs/canvas'],
+  },
+];
+
+export default function Projects() {
+  return (
+    <section className="break-keep break-words w-full md:w-1/2">
+      <div className="space-y-8">
+        {projects.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">
+                {project.url ? (
+                  <a href={project.url} target="_blank" rel="noopener noreferrer" className="text-lg text-nowrap items-center gap-x-2 flex flex-row">
+                    {project.name}
+                    <SquareArrowOutUpRight size={16} />
+                  </a>
+                ) : (
+                  <span className="text-lg font-medium">{project.name}</span>
+                )}
+                <span className="text-sm text-muted-foreground text-nowrap">{project.desc}</span>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">{project.detail}</p>
+              </div>
+            </div>
+            <div className="flex gap-2 *:bg-muted *:px-2 *:py-0.5 *:rounded *:text-xs *:font-medium *:text-muted-foreground">
+              {project.tags.map((tag, i) => (
+                <span key={i}>{tag}</span>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}