chanhdai.com

# chanhdai.com

> A pixel-perfect dev portfolio and shadcn registry showcasing my work as a Design Engineer.

- [About](https://chanhdai.com/about.md): A quick intro to me, my tech stack, and how to connect.
- [Experience](https://chanhdai.com/experience.md): Highlights from my career and key roles I've taken on.
- [Education](https://chanhdai.com/education.md): Where I studied, what I focused on, and what I built along the way.
- [Projects](https://chanhdai.com/projects.md): Selected projects that show my skills and creativity.
- [Recognition](https://chanhdai.com/recognition.md): Awards, certifications, and the trademarks and copyrights registered under my name.
- [Components](https://chanhdai.com/components.md): Every registry component, with install instructions.
- [Blocks](https://chanhdai.com/blocks.md): Every registry block, grouped by category, with install instructions.
- [Blog](https://chanhdai.com/blog.md): Every blog post, newest first, with publish dates.
- [Bookmarks](https://chanhdai.com/bookmarks.md): Articles, courses, books, references, and tools I recommend.

## Components

- [JPG Card Holder](https://chanhdai.com/components/jpg-card-holder.md): Leather card holder shaped like a JPG file, with cards you can pull out.
- [Apple Carousel](https://chanhdai.com/components/apple-carousel.md): Infinite autoplay carousel with progress dots, inspired by Apple’s website.
- [Swipe Actions](https://chanhdai.com/components/swipe-actions.md): Swipe a row in a list to reveal actions on the left or right.
- [Logos Flip](https://chanhdai.com/components/logos-flip.md): Flip cards in a staggered wave to reveal the next batch of logos.
- [Carbon Ads](https://chanhdai.com/components/carbon-ads.md): Display a Carbon Ads unit in Next.js apps, styled to match your shadcn/ui theme.
- [Status Button](https://chanhdai.com/components/status-button.md): Button that shows loading and success feedback for async actions.
- [Timescale](https://chanhdai.com/components/timescale.md): Ruler-style timeline for plotting milestones along a horizontal or vertical axis.
- [Spotlight Logo](https://chanhdai.com/components/spotlight-logo.md): SVG logo with a cursor-tracking gradient highlight and tactile press.
- [Line Nav](https://chanhdai.com/components/line-nav.md): Vertical navigation with a line marker that expands on hover and active state.
- [Share Menu](https://chanhdai.com/components/share-menu.md): Share menu to copy a link or post to X, LinkedIn, and the native share sheet.
- [Testimonial 2](https://chanhdai.com/components/testimonial-2.md): Display a testimonial quote with author attribution and source link.
- [Logos Carousel](https://chanhdai.com/components/logos-carousel.md): Cycle through logos column by column in a staggered wave.
- [Chevrons Up Down Icon](https://chanhdai.com/components/chevrons-up-down-icon.md): Animated chevrons icon that morphs between up and down directions.
- [Mobius Loop Icon](https://chanhdai.com/components/mobius-loop-icon.md): Animated Mobius loop icon that morphs between circles and infinity shape.
- [Spinning Circular Text](https://chanhdai.com/components/spinning-circular-text.md): Text arranged in a circle with a continuous spinning animation.
- [Dot Grid Spotlight](https://chanhdai.com/components/dot-grid-spotlight.md): Interactive dot grid with a cursor-tracking spotlight effect.
- [Icon Swap](https://chanhdai.com/components/icon-swap.md): Animate icon swaps with scale, blur, and fade transitions.
- [Brand Assets Menu](https://chanhdai.com/components/brand-assets-menu.md): Context menu for copying brand SVGs and opening asset links.
- [Fluid Gradient Text](https://chanhdai.com/components/fluid-gradient-text.md): Render text with a fluid gradient that shifts with pointer movement.
- [TOC Minimap](https://chanhdai.com/components/toc-minimap.md): Navigate page sections with a compact, hoverable TOC minimap.
- [Elastic Slider](https://chanhdai.com/components/elastic-slider.md): Slider with elastic rubber-band drag and magnetic snap feedback.
- [GitHub Contributions](https://chanhdai.com/components/github-contributions.md): Visualize year-long GitHub contribution activity with daily counts, tooltips, and a profile link.
- [Theme Toggle Effect](https://chanhdai.com/components/theme-toggle-effect.md): Animated transitions when switching between light and dark themes.
- [Twemoji](https://chanhdai.com/components/twemoji.md): Render Unicode emoji as Twemoji SVG images inline with text.
- [Middle Truncation](https://chanhdai.com/components/middle-truncation.md): Truncate text in the middle while preserving start and end.
- [Glow Card Grid](https://chanhdai.com/components/glow-card-grid.md): Display cards with glowing border and background effects.
- [Testimonial Spotlight](https://chanhdai.com/components/testimonial-spotlight.md): Testimonial card with spotlight effect on hover.
- [Haptic Feedback](https://chanhdai.com/components/haptic.md): Trigger haptic feedback on mobile devices.
- [Text Flip](https://chanhdai.com/components/text-flip.md): Animated text that cycles through items with a smooth flip transition.
- [Copy Button](https://chanhdai.com/components/copy-button.md): Copy text to clipboard with visual, haptic, and audio feedback.
- [Code Block Command](https://chanhdai.com/components/code-block-command.md): Display install commands with package manager switcher and copy button.
- [Testimonial](https://chanhdai.com/components/testimonial.md): Display user feedback with author info, avatar, and verified badge.
- [Consent Manager](https://chanhdai.com/components/consent-manager.md): Cookie and tracking consent banner for Next.js, built on c15t.
- [Scroll Fade Effect](https://chanhdai.com/components/scroll-fade-effect.md): Fade content edges as you scroll, for both vertical and horizontal layouts.
- [GitHub Stars](https://chanhdai.com/components/github-stars.md): Display GitHub repo star count with formatted numbers and full-count tooltip.
- [Shimmering Text](https://chanhdai.com/components/shimmering-text.md): Smooth, light-sweeping shimmer animation for text.
- [Testimonials Marquee](https://chanhdai.com/components/testimonials-marquee.md): Scrolling marquee to showcase user testimonials.
- [Slide to Unlock](https://chanhdai.com/components/slide-to-unlock.md): Interactive slider inspired by the classic iPhone “slide to unlock” gesture.
- [Work Experience](https://chanhdai.com/components/work-experience-component.md): Display work experiences with role details, company logos, and durations.
- [React Wheel Picker](https://chanhdai.com/components/react-wheel-picker.md): iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.
- [Theme Switcher](https://chanhdai.com/components/theme-switcher.md): Toggle between system, light, and dark themes in Next.js apps.
- [Apple Hello Effect](https://chanhdai.com/components/apple-hello-effect.md): SVG writing animation inspired by Apple’s “Hello” screen.

## Blog

- [Joining Claude for Open Source Program](https://chanhdai.com/blog/joining-claude-for-open-source-program.md): Grateful to be accepted into the program, with 6 months of Claude Max 20x in support of my open source work.
- [React Wheel Picker joins Vercel Open Source Program](https://chanhdai.com/blog/react-wheel-picker-joins-vercel-open-source-program.md): Excited to share that my open source project is now officially supported by Vercel.
- [Followed by @shadcn on X](https://chanhdai.com/blog/followed-by-shadcn-on-x.md): Still can’t believe it — such an honor.
- [OrcDev discovered the wildest shadcn component libraries ever](https://chanhdai.com/blog/orcdev-discovered-the-wildest-shadcn-component-libraries-ever.md): 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.
- [OrcDev and Francesco Ciulla reviewed my open source portfolio](https://chanhdai.com/blog/orcdev-and-francesco-ciulla-reviewed-my-open-source-portfolio.md): My perfect last day of the year – having my portfolio reviewed by @orcdev and @FrancescoCiull4.
- [chanhdai.com highlighted in video by creator of Aceternity UI: Make your portfolio unforgettable](https://chanhdai.com/blog/chanhdai-com-highlighted-in-video-by-creator-of-aceternity-ui-make-your-portfolio-unforgettable.md): Discover actionable tips to make your portfolio stand out and get noticed.
- [Tips for creating beautiful image borders](https://chanhdai.com/blog/tips-for-creating-beautiful-image-borders.md): 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](https://chanhdai.com/blog/two-of-my-projects-featured-on-orcdev-s-youtube-channel.md): Both My Portfolio Website and React Wheel Picker were highlighted by OrcDev in his videos about shadcn tools.
- [Manu Arora reviewed my portfolio website](https://chanhdai.com/blog/manu-arora-reviewed-my-portfolio-website.md): 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](https://chanhdai.com/blog/grateful-for-the-feedback-on-my-portfolio-website.md): Some kind words from X. Thanks to those behind the tools we rely on.
- [ChanhDai Brand](https://chanhdai.com/blog/chanhdai-brand.md): Key elements of the ChanhDai visual identity, including the mark, logotype, clear space, and more.
- [Awesome Terminal — iTerm2 + Zsh + Oh My Zsh + Amazon Q](https://chanhdai.com/blog/awesome-terminal.md): 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](https://chanhdai.com/blog/uptime-kuma.md): Uptime Kuma is an easy-to-use self-hosted monitoring tool.
- [Welcome to chanhdai.com](https://chanhdai.com/blog/welcome.md): A pixel-perfect dev portfolio and shadcn registry showcasing my work as a Design Engineer.