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.

components.json

@@ -1,11 +1,11 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
+  "style": "radix-mira",
   "rsc": true,
   "tsx": true,
   "tailwind": {
     "config": "",
-    "css": "src/app/globals.css",
+    "css": "app/globals.css",
     "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""
@@ -18,5 +18,7 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
+  "menuColor": "default",
+  "menuAccent": "subtle",
   "registries": {}
 }

package.json

@@ -13,7 +13,7 @@
     "@hookform/resolvers": "^5.2.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "^16.0.10",
+    "@next/mdx": "^16.1.3",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
@@ -45,30 +45,31 @@
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
-    "framer-motion": "^12.23.26",
+    "framer-motion": "^12.26.2",
     "gray-matter": "^4.0.3",
     "highlight.js": "^11.11.1",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.562.0",
-    "next": "16.0.10",
+    "next": "16.1.3",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
     "react": "19.2.3",
-    "react-day-picker": "^9.12.0",
+    "react-day-picker": "^9.13.0",
     "react-dom": "19.2.3",
-    "react-hook-form": "^7.68.0",
+    "react-hook-form": "^7.71.1",
-    "react-resizable-panels": "^3.0.6",
+    "react-resizable-panels": "^4.4.1",
     "react-snowfall": "^2.4.0",
-    "recharts": "3.5.1",
+    "recharts": "3.6.0",
+    "shadcn": "^3.7.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "vaul": "^1.1.2",
-    "zod": "^4.1.13"
+    "zod": "^4.3.5"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.8",
+    "@biomejs/biome": "2.3.11",
     "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.0.1",
+    "@types/node": "^25.0.9",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
     "tailwindcss": "^4.1.18",

src/app/globals.css

@@ -3,9 +3,75 @@
 @import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "shadcn/tailwind.css";
 
 @custom-variant dark (&:is(.dark *));
 
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+
 @font-face {
   font-family: "NType82Headline";
   src: url("https://f.imnya.ng/font/NType82-Headline.woff2") format("woff2");
@@ -44,7 +110,7 @@
   --chart-3: hsl(197 37% 24%);
   --chart-4: hsl(43 74% 66%);
   --chart-5: hsl(27 87% 67%);
-  --radius: 0.6rem;
+  --radius: 0.625rem;
   --sidebar-background: hsl(340 25% 98%);
   --sidebar-foreground: hsl(240 5.3% 26.1%);
   --sidebar-primary: hsl(240 5.9% 10%);
@@ -98,65 +164,6 @@
   --scrollbar-hover: hsla(340 10% 60% / 0.8);
 }
 
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar-background);
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-}
-
 @layer base {
   * {
     @apply border-border outline-ring/50;

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 ${
+                variant={selectedYear === year ? "default" : "outline"}
-                  selectedYear === year
+                className="font-semibold"
-                    ? "bg-primary text-primary-foreground"
-                    : "bg-background border border-border hover:bg-muted"
-                }`}
               >
                 {year}
-              </button>
+              </Button>
             ))}
           </div>