feat: update components and styles for improved UI

- Changed the style in components.json from "new-york" to "radix-mira".
- Updated Tailwind CSS configuration path in components.json.
- Added menu color and accent properties in components.json.
- Upgraded various dependencies in package.json, including Next.js and framer-motion.
- Enhanced globals.css with new theme variables and animations for accordion components.
- Added new social media links in Contact component and replaced anchor tags with Link component for better routing.
- Removed outdated project entry from Projects component.
- Refactored Timeline component to use Button component for year selection.
- Added new icon for maishift in public directory.

src/components/Contact.tsx

@@ -5,6 +5,7 @@ import {
     TooltipTrigger,
 } from "@/components/ui/tooltip";
 import Image from "next/image";
+import Link from "next/link";
 
 const contact = [
     {
@@ -27,11 +28,21 @@ const contact = [
         "url": "https://instagram.com/imnya.ng",
         "icon": <Instagram className="w-5 h-5" />
     },
+    {
+        "name": "𝕏",
+        "url": "https://x.com/imnya_ng",
+        "icon": <p className="text-[20px] font-bold">𝕏</p>
+    },
     {
         "name": "Discord",
         "url": "https://imnya.ng/discord",
         "icon": <Image src="/icon/discord.svg" alt="Discord" width={20} height={20} className="w-5 h-5 invert-0 dark:invert" />
     },
+    {
+        "name": "maishift",
+        "url": "https://mai.sft.sh/imnyang",
+        "icon": <Image src="/icon/maimai.webp" alt="mai.sft.sh" width={20} height={20} className="w-5 h-5 invert-0 dark:invert" />
+    }
 ]
 
 export default function Contact() {
@@ -40,14 +51,14 @@ export default function Contact() {
             {contact.map((method) => (
                 <Tooltip key={method.name} >
                     <TooltipTrigger asChild>
-                        <a
+                        <Link
                             href={method.url}
                             className="flex items-center space-x-2 text-foreground/80 hover:text-foreground transition-colors"
                             target="_blank"
                             rel="noopener noreferrer"
                         >
                             {method.icon}
-                        </a>
+                        </Link>
                     </TooltipTrigger>
                     <TooltipContent>
                         <p>{method.name}</p>

src/components/Projects.tsx

@@ -12,13 +12,6 @@ const projects = [
     detail: '달성이 주관하고 ADOFAI.gg가 공동 주최하는 Effect Playing Contest 2025 방송 화면의 대부분의 기능을 개발하였습니다.',
     tags: ['React', 'ElysiaJS'],
   },
-  {
-    name: '@today.isangjeong',
-    url: 'https://instagram.com/today.isangjeong',
-    desc: '인스타에서 급식 공유를 간편하게',
-    detail: '오늘의 급식을 사진으로 공유하는 인스타그램 계정입니다. 매일 학교 급식을 자동으로 정리하여 제공합니다.',
-    tags: ['TypeScript', 'igramapi', '@napi-rs/canvas'],
-  },
   {
     name: 'NYL',
     url: 'https://nyl.ny64.kr',

src/components/timeline.tsx

@@ -2,6 +2,7 @@
 import { events } from "@/lib/events";
 import { LinkIcon } from "lucide-react";
 import { useEffect, useState, useRef } from "react";
+import { Button } from "@/components/ui/button";
 
 export default function TimelineComponent() {
   const [selectedYear, setSelectedYear] = useState<number | null>(null);
@@ -34,18 +35,14 @@ export default function TimelineComponent() {
           {/* 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
+              <Button
                 key={year}
-                type="button"
                 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"
-                }`}
+                variant={selectedYear === year ? "default" : "outline"}
+                className="font-semibold"
               >
                 {year}
-              </button>
+              </Button>
             ))}
           </div>