wistant.me : Developer Portfolio & Component Registry

Welcome to wistant.me, the official digital home, blog, and custom component registry of Wistant Kode.

This project is not just a personal landing page; it is a labor of design engineering passion. It is a highly optimized, fully responsive playground that merges dashboard-inspired grid symmetry with smooth, physical animations and an embedded code distribution engine.

Whoever reads this should know: every line, every border, and every spring animation curve was crafted with a relentless obsession for UI excellence.

---

🎨 The Genesis: A Passion for Pure UI/UX and Grid Symmetry

Most personal sites use generic templates or basic component libraries. For wistant.me, I wanted to build something that feels alive—a space inspired by terminal panels, developer dashboards, and pixel-aligned grids.

Inspired by design pioneers like Chanh Dai, I designed a custom grid layout from scratch. Instead of using generic CSS borders, the grid dividers (e.g. .screen-line-top and .screen-line-bottom) are engineered using repeating linear gradients to render custom pixel dashes. This creates a dashboard layout that locks perfectly on all viewports, providing a consistent structural frame.

---

⚡ The Elements: Crafting the Perfect Micro-Interactions

A premium user interface is defined by its details. Every hover state and transaction on this site has been optimized with spring-physics calculations rather than generic CSS durations:

1. The Interactive Profile Bio & About Panel

The top section features a gorgeous profile card. It incorporates an interactive AvatarLights profile image with custom hover-lighting effects, verified badges, real-time timezone calculators, name pronunciation audio, and animated text flips that slide effortlessly.

2. The Active Console Footer Status Bar

To match the header's layout, the footer utilizes a signature h-12 console status bar enclosed in pixel lines. It acts as an active terminal widget:

• SYS: ACTIVE — A glowing, pulsing green LED indicating system health.
• Social Links — Minimalist social icons with custom background hover highlights (hover:scale-108 hover:bg-muted/40).
• Command Shortcuts — A live indicator reminding users that pressing ⌘K opens the search console.

---

📦 The Component Distribution Engine

Beyond writing articles, the site is designed to distribute React primitives. I built an AST-based compilation pipeline that acts as a custom component registry:

• Component Source: Advanced animated components, custom hooks, and blocks are written inside src/registry/.
• AST Parsing Script: A compiler script (pnpm registry:build) parses the React files, inspects imports, and resolves internal package dependencies.
• Manifest Generation: The compiler outputs JSON manifests to /public/r/[name].json, enabling direct imports via the shadcn CLI or one-click copy installations.

---

🛠️ The Atomic Commit Discipline & Pipeline Orchestration

For me, clean code is just as important as clean UI. The repository is governed by the Atomic Commit Protocol. Every commit represents a single, isolated logical intention (e.g., feat, fix, ui, refactor).

To enforce this discipline, I built a custom pipeline wrapper under /tooling:

• tooling/push.sh — Run pre-push checks (Prettier format, ESLint, TypeScript check, changesets) to guarantee zero regressions.
• tooling/sync.sh — Ensures rebase-based upstream synchronizations.
• tooling/make-release-description.sh — Automatically generates release notes from semantic commits.

This site represents my journey as a Design Engineer—where strict front-end performance metrics meet aesthetic passion.