feat: add MDX support and blog functionality

- Updated next.config.ts to include MDX support with new page extensions.
- Added dependencies for MDX in package.json.
- Refactored Home component to include BlogList.
- Adjusted layout and styling in Projects and Timeline components.
- Implemented dynamic blog post routing with generateStaticParams and BlogPost component.
- Created BlogLayout for consistent blog page structure.
- Added initial blog post in MDX format.
- Developed BlogList component to display a list of blog posts.
- Introduced blog utility functions to read and parse MDX files.

src/components/BlogList.tsx

@@ -0,0 +1,55 @@
+import Link from "next/link";
+import { getPosts, type Post } from "@/lib/blog";
+import { Badge } from "@/components/ui/badge";
+import { ArrowRight } from "lucide-react";
+
+
+export default async function BlogList() {
+    const posts = await getPosts();
+
+    return (
+        <div className="space-y-2">
+            {posts.length === 0 ? (
+                <div className="rounded-lg border bg-background px-4 py-3">
+                    <p className="text-muted-foreground text-center">No posts yet...</p>
+                </div>
+            ) : (
+                posts.map((post) => (
+                    <Link
+                        key={post.slug}
+                        href={`/blog/${post.slug}`}
+                        className="block group"
+                    >
+                        <div className="rounded-lg border bg-background px-4 py-3 hover:bg-muted transition-colors">
+                            <div className="flex justify-between items-start gap-4 mb-2">
+                                <div className="flex-1">
+                                    <h3 className="font-semibold group-hover:text-primary transition-colors">
+                                        {post.title}
+                                    </h3>
+                                    <p className="text-xs text-muted-foreground mt-1">
+                                        {post.date}
+                                    </p>
+                                </div>
+                                <ArrowRight className="h-4 w-4 opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
+                            </div>
+                            {post.description && (
+                                <p className="text-sm text-muted-foreground mb-2">
+                                    {post.description}
+                                </p>
+                            )}
+                            {post.tags && post.tags.length > 0 && (
+                                <div className="flex gap-2 flex-wrap">
+                                    {post.tags.map((tag) => (
+                                        <Badge key={tag} variant="secondary" className="text-xs">
+                                            {tag}
+                                        </Badge>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </Link>
+                ))
+            )}
+        </div>
+    );
+}

src/components/Projects.tsx

@@ -22,7 +22,7 @@ const projects = [
 
 export default function Projects() {
   return (
-    <section className="break-keep break-words w-full lg:w-1/2">
+    <section className="break-keep break-words w-full lg:w-2/3 xl:w-1/2">
       <div className="space-y-8">
         {projects.map((project, idx) => (
           <div className="space-y-2" key={idx}>

src/components/timeline.tsx

@@ -25,7 +25,7 @@ export default function TimelineComponent() {
   return (
     <div
       id="timeline"
-      className="w-full lg:w-1/2 flex flex-col items-center justify-center px-12 mt-8"
+      className="w-full lg:w-2/3 xl:w-1/2 flex flex-col items-center justify-center px-12 mt-8"
     >
       <div className="w-full">
         <h1 className="text-2xl font-bold mb-4 w-full">🌠 수상 및 교육</h1>