feat: add remark-gfm, Vercel Speed Insights, fix hydration error, update current work

- Add remark-gfm to enable markdown table rendering in MDX blog posts
- Add @vercel/speed-insights to app layout
- Fix nested <p> hydration error in Callout component
- Update current-work.mdx to reflect MCPX project

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Codestz

package.json

@@ -27,6 +27,7 @@
     "@types/mdx": "^2.0.13",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vercel/analytics": "^1.6.1",
+    "@vercel/speed-insights": "^2.0.0",
     "clsx": "^2.1.1",
     "fuse.js": "^7.1.0",
     "gray-matter": "^4.0.3",
@@ -40,6 +41,7 @@
     "react-dom": "19.2.3",
     "react-syntax-highlighter": "^16.1.0",
     "reading-time": "^1.5.0",
+    "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -7,6 +7,7 @@ import { Button, Badge } from '@/components/ui';
 import { contentService } from '@/lib/services';
 import { ROUTES } from '@/lib/constants';
 import type { Metadata } from 'next';
+import remarkGfm from 'remark-gfm';
 import { mdxComponents } from '../../../../mdx-components';
 import { generateProjectMetadata } from '@/lib/utils';
 import type { ExperiencePageProps } from './page.types';
@@ -163,7 +164,15 @@ export default async function ExperienceDetailPage({ params }: ExperiencePagePro
 
             {/* Project Content */}
             <div className="mt-8">
-              <MDXRemote source={project.content} components={mdxComponents} />
+              <MDXRemote
+                source={project.content}
+                components={mdxComponents}
+                options={{
+                  mdxOptions: {
+                    remarkPlugins: [remarkGfm],
+                  },
+                }}
+              />
             </div>
           </article>
         </div>