chanhdai.com

A minimal, pixel-perfect dev portfolio, shadcn registry, and blog to showcase my work as a Design Engineer.

About: A quick intro to me, my tech stack, and how to connect.
Experience: Highlights from my career and key roles I've taken on.
Projects: Selected projects that show my skills and creativity.
Awards: My key awards and honors.
Certifications: Certifications and credentials I've earned.

Blog

React Wheel Picker joins Vercel Open Source Program: Excited to share that my open source project is now officially supported by Vercel.
Followed by @shadcn on X: Still can’t believe it — such an honor.
Chevrons Up Down Icon: Animated chevrons icon that morphs between up and down directions.
Mobius Loop Icon: Animated Mobius loop icon that morphs between circles and infinity shape.
Spinning Circular Text: Text arranged in a circle with a continuous spinning animation.
Dot Grid Spotlight: Interactive dot grid with a cursor-tracking spotlight effect.
Icon Swap: Animate icon swaps with scale, blur, and fade transitions.
Brand Assets Menu: Context menu for copying brand SVGs and opening asset links.
Fluid Gradient Text: Render text with a fluid gradient that shifts with pointer movement.
TOC Minimap: Navigate page sections with a compact, hoverable TOC minimap.
Elastic Slider: Slider with elastic rubber-band drag and magnetic snap feedback.
GitHub Contributions: Visualize year-long GitHub contribution activity with daily counts, tooltips, and a profile link.
Theme Toggle Effect: Animated transitions when switching between light and dark themes.
Twemoji: Render Unicode emoji as Twemoji SVG images inline with text.
Middle Truncation: Truncate text in the middle while preserving start and end.
Glow Card Grid: Display cards with glowing border and background effects.
OrcDev discovered the WILDEST shadcn component libraries ever: Recently, OrcDev discovered some of the wildest component libraries built on shadcn, and a few of them genuinely stand out. Each library targets a completely different use case and aesthetic, showing just how flexible and future-ready this ecosystem is becoming.
Testimonial Spotlight: Testimonial card with spotlight effect on hover.
Haptic Feedback: Trigger haptic feedback on mobile devices.
Text Flip: Animated text that cycles through items with a smooth flip transition.
Copy Button: Copy text to clipboard with visual, haptic, and audio feedback.
Code Block Command: Display install commands with package manager switcher and copy button.
Testimonial: Display user feedback with author info, avatar, and verified badge.
OrcDev and Francesco Ciulla Reviewed My Open Source Portfolio: My perfect last day of the year – having my portfolio reviewed by @orcdev and @FrancescoCiull4.
Consent Manager: Cookie and tracking consent banner for Next.js, built on c15t.
Scroll Fade Effect: Fade content edges as you scroll, for both vertical and horizontal layouts.
chanhdai.com Highlighted in Video by Creator of Aceternity UI: Make Your Portfolio Unforgettable: Discover actionable tips to make your portfolio stand out and get noticed.
GitHub Stars: Display GitHub repo star count with formatted numbers and full-count tooltip.
Shimmering Text: Smooth, light-sweeping shimmer animation for text.
Testimonials Marquee: Scrolling marquee to showcase user testimonials.
Slide to Unlock: Interactive slider inspired by the classic iPhone “slide to unlock” gesture.
Tips for Creating Beautiful Image Borders: Borders help images stand out, but fixed colors often clash with the content. Here’s a simple tip to make borders look more natural and balanced.
Two of My Projects Featured on OrcDev’s YouTube Channel: Both My Portfolio Website and React Wheel Picker were highlighted by OrcDev in his videos about shadcn tools.
Manu Arora reviewed My Portfolio Website: A heartfelt moment when the creator of Aceternity UI — Manu Arora, shared his thoughts on my portfolio website.
Grateful for the Feedback on My Portfolio Website: Some kind words from X. Thanks to those behind the tools we rely on.
Work Experience: Display work experiences with role details, company logos, and durations.
React Wheel Picker: iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.
ChanhDai Brand: Key elements of the ChanhDai visual identity, including the mark, logotype, clear space, and more.
Theme Switcher: Toggle between system, light, and dark themes in Next.js apps.
Apple Hello Effect: SVG writing animation inspired by Apple’s “Hello” screen.
Awesome Terminal — iTerm2 + Zsh + Oh My Zsh + Amazon Q: Optimize your terminal with iTerm2, Zsh, Oh My Zsh, and Amazon Q - a guide to installation, theme customization, plugins, and configuration for an enhanced command-line experience.
Installing Uptime Kuma with Docker and setting up NGINX with SSL: Uptime Kuma is an easy-to-use self-hosted monitoring tool.
Welcome to chanhdai.com: A pixel-perfect dev portfolio and shadcn registry showcasing my work as a Design Engineer.