Staging

public/r/registry.json

@@ -1179,6 +1179,30 @@
       "type": "registry:block",
       "author": "ncdai <dai@chanhdai.com>"
     },
+    {
+      "name": "social-links-01",
+      "title": "Social Links 01",
+      "description": "A social links section with a lined grid layout.",
+      "registryDependencies": [
+        "https://chanhdai.com/r/style.json"
+      ],
+      "files": [
+        {
+          "path": "src/registry/blocks/social-links-01/social-links-01.tsx",
+          "type": "registry:component",
+          "target": "@components/social-links-01.tsx"
+        }
+      ],
+      "meta": {
+        "createdAt": "2026-06-16",
+        "previewClassName": "min-h-svh content-center-safe"
+      },
+      "categories": [
+        "marketing"
+      ],
+      "type": "registry:block",
+      "author": "ncdai <dai@chanhdai.com>"
+    },
     {
       "name": "style",
       "cssVars": {

public/r/social-links-01.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "social-links-01",
+  "title": "Social Links 01",
+  "author": "ncdai <dai@chanhdai.com>",
+  "description": "A social links section with a lined grid layout.",
+  "registryDependencies": [
+    "https://chanhdai.com/r/style.json"
+  ],
+  "files": [
+    {
+      "path": "src/registry/blocks/social-links-01/social-links-01.tsx",
+      "content": "import { cn } from \"@/lib/utils\"\nimport { IconPlaceholder } from \"@/registry/icons/icon-placeholder\"\n\nexport function SocialLinks01() {\n  return (\n    <div className=\"max-w-screen overflow-x-clip\">\n      <div className=\"container mx-auto px-4\">\n        <div className=\"relative border-x border-line\">\n          <div className=\"pointer-events-none absolute inset-0 -z-1 grid grid-cols-2 gap-2 md:grid-cols-3\">\n            <div className=\"border-r border-line\" />\n            <div className=\"border-l border-line md:border-x\" />\n            <div className=\"border-l border-line max-md:hidden\" />\n          </div>\n\n          <ul className=\"grid grid-cols-2 gap-2 sm:grid-cols-2 md:grid-cols-3\">\n            {SOCIAL_LINKS.map((link, index) => {\n              return (\n                <li\n                  key={index}\n                  className={cn(\n                    \"max-md:nth-[2n+1]:screen-line-top max-md:nth-[2n+1]:screen-line-bottom\",\n                    \"md:nth-[3n+1]:screen-line-top md:nth-[3n+1]:screen-line-bottom\"\n                  )}\n                >\n                  <SocialLinkItem {...link} />\n                </li>\n              )\n            })}\n          </ul>\n        </div>\n      </div>\n    </div>\n  )\n}\n\ntype SocialLink = {\n  icon: string\n  title: string\n  href: string\n}\n\nfunction SocialLinkItem({ icon, title, href }: SocialLink) {\n  return (\n    <div className=\"relative flex cursor-pointer items-center gap-4 p-4 pr-2 transition-[background-color] ease-out hover:bg-accent/50 dark:hover:bg-accent/20\">\n      <div className=\"relative shrink-0 [--image-radius:var(--radius-lg)]\">\n        <img\n          className=\"size-8 rounded-(--image-radius) select-none\"\n          src={icon}\n          alt={`${title} logo`}\n        />\n        <div className=\"pointer-events-none absolute inset-0 rounded-(--image-radius) inset-ring-1 inset-ring-black/10 dark:inset-ring-white/15\" />\n      </div>\n\n      <h3 className=\"flex-1 font-medium\">\n        <a href={href} target=\"_blank\" rel=\"noopener\">\n          <span className=\"absolute inset-0\" aria-hidden />\n          {title}\n        </a>\n      </h3>\n\n      <IconPlaceholder\n        lucide=\"ArrowUpRightIcon\"\n        tabler=\"IconArrowUpRight\"\n        hugeicons=\"ArrowUpRight03Icon\"\n        phosphor=\"ArrowUpRightIcon\"\n        remixicon=\"RiArrowRightUpLine\"\n        className=\"size-4 text-muted-foreground\"\n      />\n    </div>\n  )\n}\n\nconst SOCIAL_LINKS: SocialLink[] = [\n  {\n    icon: \"https://assets.chanhdai.com/images/link-icons/x.webp\",\n    title: \"X\",\n    href: \"https://x.com/iamncdai\",\n  },\n  {\n    icon: \"https://assets.chanhdai.com/images/link-icons/github.webp\",\n    title: \"GitHub\",\n    href: \"https://github.com/ncdai\",\n  },\n  {\n    icon: \"https://assets.chanhdai.com/images/link-icons/linkedin.webp\",\n    title: \"LinkedIn\",\n    href: \"https://linkedin.com/in/ncdai\",\n  },\n  {\n    icon: \"https://assets.chanhdai.com/images/link-icons/dailydotdev.webp\",\n    title: \"daily.dev\",\n    href: \"https://app.daily.dev/ncdai\",\n  },\n  {\n    icon: \"https://assets.chanhdai.com/images/link-icons/discord.webp\",\n    title: \"Discord\",\n    href: \"https://discord.com/users/1186630645443739651\",\n  },\n  {\n    icon: \"https://assets.chanhdai.com/images/link-icons/youtube.webp\",\n    title: \"YouTube\",\n    href: \"https://www.youtube.com/@ncdai\",\n  },\n]\n",
+      "type": "registry:component",
+      "target": "@components/social-links-01.tsx"
+    }
+  ],
+  "meta": {
+    "createdAt": "2026-06-16",
+    "previewClassName": "min-h-svh content-center-safe"
+  },
+  "categories": [
+    "marketing"
+  ],
+  "type": "registry:block"
+}

registry.json

@@ -1179,6 +1179,30 @@
       "type": "registry:block",
       "author": "ncdai <dai@chanhdai.com>"
     },
+    {
+      "name": "social-links-01",
+      "title": "Social Links 01",
+      "description": "A social links section with a lined grid layout.",
+      "registryDependencies": [
+        "https://chanhdai.com/r/style.json"
+      ],
+      "files": [
+        {
+          "path": "src/registry/blocks/social-links-01/social-links-01.tsx",
+          "type": "registry:component",
+          "target": "@components/social-links-01.tsx"
+        }
+      ],
+      "meta": {
+        "createdAt": "2026-06-16",
+        "previewClassName": "min-h-svh content-center-safe"
+      },
+      "categories": [
+        "marketing"
+      ],
+      "type": "registry:block",
+      "author": "ncdai <dai@chanhdai.com>"
+    },
     {
       "name": "style",
       "cssVars": {

src/app/(app)/page.tsx

@@ -4,13 +4,13 @@ import type { ProfilePage as PageSchema, WithContext } from "schema-dts"
 
 import { JsonLdScript } from "@/lib/json-ld"
 import { cn } from "@/lib/utils"
-import { About } from "@/features/portfolio/components/about"
 import { Awards } from "@/features/portfolio/components/awards"
 import { Blog } from "@/features/portfolio/components/blog"
 import { Bookmarks } from "@/features/portfolio/components/bookmarks"
 import { Certifications } from "@/features/portfolio/components/certifications"
 import { Components } from "@/features/portfolio/components/components"
 import { Experiences } from "@/features/portfolio/components/experiences"
+import { Hello } from "@/features/portfolio/components/hello"
 import {
   Insights,
   InsightsSkeleton,
@@ -43,7 +43,7 @@ export default function HomePage() {
           <SocialLinks />
           <Separator />
 
-          <About />
+          <Hello />
           <Separator />
 
           <TechStack />

src/components/command-menu.tsx

@@ -13,6 +13,7 @@ import {
   CrownIcon,
   DownloadIcon,
   FileTextIcon,
+  LayersIcon,
   LineChartIcon,
   MonitorIcon,
   MoonStarIcon,
@@ -119,6 +120,12 @@ const PORTFOLIO_LINKS: CommandLinkItem[] = [
     kind: "page",
     icon: <TextInitialIcon />,
   },
+  {
+    title: "Stack",
+    href: "/#stack",
+    kind: "page",
+    icon: <LayersIcon />,
+  },
   {
     title: "Experience",
     href: "/#experience",

src/features/portfolio/components/about.tsx → src/features/portfolio/components/hello.tsx

@@ -13,7 +13,7 @@ import { USER } from "@/features/portfolio/data/user"
 
 const ID = "hello"
 
-export function About() {
+export function Hello() {
   return (
     <Panel id={ID}>
       <PanelHeader>

src/registry/__blocks__.json

@@ -1,4 +1,11 @@
 [
+  {
+    "name": "social-links-01",
+    "description": "A social links section with a lined grid layout.",
+    "categories": [
+      "marketing"
+    ]
+  },
   {
     "name": "metrics-01",
     "description": "A metrics section with a line chart.",

src/registry/__index__.tsx

@@ -790,6 +790,23 @@ export const Index: Record<string, any> = {
     categories: ["marketing"],
     meta: {"createdAt":"2026-05-24","previewClassName":"min-h-svh content-center-safe"},
   },
+  "social-links-01": {
+    name: "social-links-01",
+    description: "A social links section with a lined grid layout.",
+    type: "registry:block",
+    files: [{
+      path: "src/registry/blocks/social-links-01/social-links-01.tsx",
+      type: "registry:component",
+      target: "@components/social-links-01.tsx",
+    }],
+    component: React.lazy(async () => {
+      const mod = await import("@/registry/blocks/social-links-01/social-links-01.tsx")
+      const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name
+      return { default: mod.default || mod[exportName] }
+    }),
+    categories: ["marketing"],
+    meta: {"createdAt":"2026-06-16","previewClassName":"min-h-svh content-center-safe"},
+  },
   "text-flip-demo": {
     name: "text-flip-demo",
     description: "",

src/registry/blocks/_registry.ts

@@ -210,4 +210,23 @@ export const blocks: Registry["items"] = [
       previewClassName: "min-h-svh content-center-safe",
     },
   },
+  {
+    name: "social-links-01",
+    title: "Social Links 01",
+    description: "A social links section with a lined grid layout.",
+    type: "registry:block",
+    registryDependencies: [getRegistryItemUrl("style")],
+    files: [
+      {
+        path: "blocks/social-links-01/social-links-01.tsx",
+        type: "registry:component",
+        target: "@components/social-links-01.tsx",
+      },
+    ],
+    categories: ["marketing"],
+    meta: {
+      createdAt: "2026-06-16",
+      previewClassName: "min-h-svh content-center-safe",
+    },
+  },
 ]