Back to projects

xmuu.dev

shipped

A terminal-inspired personal portfolio built with Next.js, Velite, and a custom command-driven UI.

·#nextjs#typescript#terminal
Next.jsTypeScriptTailwindVelite
const{Fragment:e,jsx:t,jsxs:n}=arguments[0];function _createMdxContent(a){const o={code:"code",p:"p",...a.components};return n(e,{children:[t(o.p,{children:"This site is my attempt at building a portfolio that doesn't feel like every other portfolio on the internet. Instead of a generic hero section and three cards, the whole interface is modeled after a terminal — type a command, get a result, navigate a virtual filesystem, and read content rendered from MDX."}),"\n",t(o.p,{children:"The content layer is powered by Velite, which compiles MDX and YAML into typed data at build time. That gives me end-to-end type safety from a blog post's frontmatter all the way to the React component that renders it. No runtime parsing, no surprise schema drift."}),"\n",n(o.p,{children:['On the UI side, the command palette is the centerpiece. It supports argument parsing, tab completion, history, and graceful errors for unknown commands. Each "directory" in the VFS maps to a real section — projects, posts, experience — so visitors can ',t(o.code,{children:"cd"})," around and explore."]}),"\n",t(o.p,{children:"The design system leans hard into monospace typography, a tight grid, and a single accent color. The goal is to make something that feels like a tool first and a website second, while still being readable on mobile and accessible without a mouse."}),"\n",t(o.p,{children:"It's still evolving, but the architecture has held up well: a small command runtime, typed content, and a deliberately constrained visual language."})]})}return{default:function(e={}){const{wrapper:n}=e.components||{};return n?t(n,{...e,children:t(_createMdxContent,{...e})}):_createMdxContent(e)}};