``` With this technique, the border is visible enough to separate the image from the background, but it won’t steal focus from the image itself. ## Real-world example This technique is already used in real products. For example, here’s a screenshot from the App Store, where images have subtle adaptive borders. The borders are soft enough to separate the image from the background, while still keeping the focus on the content inside. ## Conclusion If you want your images to look cleaner and more polished, try switching from a fixed `border-color` to a `ring` that adapts to the image. It’s a small change, but it makes the design feel much more modern and balanced. Last updated on September 13, 2025 --- title: "Two of my projects featured on OrcDev’s YouTube channel" description: "Both My Portfolio Website and React Wheel Picker were highlighted by OrcDev in his videos about shadcn tools." last_updated: "September 6, 2025" source: "https://chanhdai.com/blog/two-of-my-projects-featured-on-orcdev-s-youtube-channel" --- # 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. I’m thrilled that two of my projects were recently featured by [OrcDev](https://www.youtube.com/@orcdev) on his YouTube channel in videos about [shadcn](https://ui.shadcn.com) tools! My Portfolio Website ([chanhdai.com](https://chanhdai.com)) was highlighted in "**Top 10 Shadcn Tools You Need Right Now!**" — OrcDev described it as one of the best open-source developer portfolios, built with Next.js and shadcn/ui. > Source: [https://www.youtube.com/watch?v=-rdqQhw1\_4M\&t=313s](https://www.youtube.com/watch?v=-rdqQhw1_4M\&t=313s) [React Wheel Picker](https://react-wheel-picker.chanhdai.com) appeared in "**10 Tools to Make Your Shadcn Apps Beautiful**" — It’s an iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support, proudly backed by the [▲Vercel OSS Program](https://vercel.com/blog/summer-2025-oss-program#react-wheel-picker). > Source: [https://www.youtube.com/watch?v=udfFLIx\_ITc\&t=272s](https://www.youtube.com/watch?v=udfFLIx_ITc\&t=272s) Big thanks to [OrcDev](https://x.com/theorcdev) for featuring both projects. If you’re building with shadcn, I’d love for you to check them out and see how they can fit into your apps! Last updated on September 6, 2025 --- title: "Manu Arora reviewed my portfolio website" description: "A heartfelt moment when the creator of Aceternity UI — Manu Arora, shared his thoughts on my portfolio website." last_updated: "August 4, 2025" source: "https://chanhdai.com/blog/manu-arora-reviewed-my-portfolio-website" --- # Manu Arora reviewed my portfolio website A heartfelt moment when the creator of Aceternity UI — Manu Arora, shared his thoughts on my portfolio website. Here’s the moment that made my day. Watch [Manu Arora](https://x.com/mannupaaji) react to my portfolio site in his YouTube video: > Source: [https://www.youtube.com/watch?v=zAeQAiP8PwA\&t=1444s](https://www.youtube.com/watch?v=zAeQAiP8PwA\&t=1444s) Thank you so much for the incredibly kind and thoughtful review of my portfolio website! It truly means a lot to hear such detailed and encouraging feedback from someone I admire. I’m so glad you appreciated the design choices, spacing, and component structure — I put a lot of heart into it. Your insights not only made my day but also motivated me to keep improving and sharing more with the community. Thanks again for the support and shoutout! Last updated on August 4, 2025 --- title: "Grateful for the feedback on my portfolio website" description: "Some kind words from X. Thanks to those behind the tools we rely on." last_updated: "August 19, 2025" source: "https://chanhdai.com/blog/grateful-for-the-feedback-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. I shared my new portfolio website on X recently. I was really surprised and truly grateful to see some thoughtful responses, including from people whose projects and tools I use every day. Their likes and comments meant a lot to me. These are some of the messages I wanted to save and share here as a small thank you. Grateful for these likes on X from people I really respect. This one made my day. It means a lot coming from someone I admire. I was really surprised and grateful to get this message from [Jordan Walke](https://x.com/jordwalke), the creator of [React](https://react.dev/community/acknowledgements): Last updated on August 19, 2025 --- title: "ChanhDai Brand" description: "Key elements of the ChanhDai visual identity, including the mark, logotype, clear space, and more." last_updated: "June 1, 2025" source: "https://chanhdai.com/blog/chanhdai-brand" --- # ChanhDai Brand Key elements of the ChanhDai visual identity, including the mark, logotype, clear space, and more. ## Mark

Download Mark ## Logotype

Download Logotype ## Clear Space Maintain a clear space of 1/2 the height of the Mark on all sides of the logo, except in limited cases where the logo remains clearly recognizable and legible.

Last updated on June 1, 2025 --- title: "Awesome Terminal — iTerm2 + Zsh + Oh My Zsh + Amazon Q" description: "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." last_updated: "April 2, 2025" source: "https://chanhdai.com/blog/awesome-terminal" --- # 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. ## Install iTerm2 ### Download [https://iterm2.com/downloads.html](https://iterm2.com/downloads.html) ### Custom theme [https://draculatheme.com/iterm](https://draculatheme.com/iterm) ## Install Oh My Zsh Reference: [https://ohmyz.sh/#install](https://ohmyz.sh/#install) ```bash sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" ``` ## Install Oh My Zsh theme Reference: [https://github.com/ncdai/ncdai.zsh-theme](https://github.com/ncdai/ncdai.zsh-theme) ```bash git clone git@github.com:ncdai/ncdai.zsh-theme.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/themes/ncdai.zsh-theme ``` **Activate the theme** ```bash title="~/.zshrc" ZSH_THEME="ncdai.zsh-theme/ncdai" ``` ## Install Oh My Zsh plugins ### zsh-z Reference: [https://github.com/agkozak/zsh-z#installation](https://github.com/agkozak/zsh-z#installation) ```bash git clone https://github.com/agkozak/zsh-z $ZSH_CUSTOM/plugins/zsh-z ``` ### zsh-syntax-highlighting Reference: [https://github.com/zsh-users/zsh-syntax-highlighting/blob/master/INSTALL.md](https://github.com/zsh-users/zsh-syntax-highlighting/blob/master/INSTALL.md) ```bash git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting ``` ### zsh-autosuggestions Reference: [https://github.com/zsh-users/zsh-autosuggestions/blob/master/INSTALL.md](https://github.com/zsh-users/zsh-autosuggestions/blob/master/INSTALL.md) ```bash git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions ``` ### Activate plugins ```bash title="~/.zshrc" plugins=(git zsh-z zsh-syntax-highlighting zsh-autosuggestions) ``` ## User configuration ```bash title="~/.zshrc" # Language environment export LANG=en_US.UTF-8 # Alias alias workspace-on-mac="cd ~/Workspace" # Homebrew export HOMEBREW_EDITOR="/usr/bin/nano" ``` ## Install Amazon Q for command line Reference: [https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-installing.html](https://docs.aws.amazon.com/amazonq/latest/qdeveloper-ug/command-line-installing.html) Last updated on April 2, 2025 --- title: "Installing Uptime Kuma with Docker and setting up NGINX with SSL" description: "Uptime Kuma is an easy-to-use self-hosted monitoring tool." last_updated: "April 2, 2025" source: "https://chanhdai.com/blog/uptime-kuma" --- # Installing Uptime Kuma with Docker and setting up NGINX with SSL Uptime Kuma is an easy-to-use self-hosted monitoring tool. ## Installation ### Run ```bash docker run -d --restart=always -p 5556:3001 -v uptime-kuma:/app/data --name uptime-kuma louislam/uptime-kuma:1 ``` Uptime Kuma is now running on [http://0.0.0.0:5556](http://0.0.0.0:5556) ### Configure NGINX ```bash sudo nano /etc/nginx/sites-available/uptime-kuma ``` ```ini server { listen 80; # Remove '#' in the next line to enable IPv6 # listen [::]:80; server_name status.example.com; location / { proxy_pass http://localhost:5556; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; } } ``` ```bash sudo ln -s /etc/nginx/sites/available/uptime-kuma /etc/nginx/sites-enabled/ ``` ### Configure SSL Installing Certbot: [https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-22-04](https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-22-04) Add an A record for `status.example.com` pointing to the server’s public IP address. ```bash sudo certbot --nginx -d status.example.com sudo systemctl restart nginx ``` ## References * [Uptime Kuma](https://github.com/louislam/uptime-kuma) * [How To Secure Nginx with Let's Encrypt on Ubuntu](https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-22-04) Last updated on April 2, 2025 --- title: "Welcome to chanhdai.com" description: "A pixel-perfect dev portfolio and shadcn registry showcasing my work as a Design Engineer." last_updated: "May 7, 2026" source: "https://chanhdai.com/blog/welcome" --- # Welcome to chanhdai.com A pixel-perfect dev portfolio and shadcn registry showcasing my work as a Design Engineer. ## Stack * Next.js 16 * Tailwind CSS v4 * shadcn/ui ## Featured * Clean & modern design * Light/Dark themes * vCard integration * SEO optimized ([JSON-LD schema](https://json-ld.org), sitemap, robots) * AI-ready with [/llms.txt](https://llmstxt.org) * Spam-protected email * Installable as PWA * Analytics with [PostHog](https://posthog.com) and [OpenPanel](https://openpanel.dev) ## Content Centralized document system powered by MDX: * Unified content layer for blog posts and component docs * Category-based content organization * Raw `.mdx` endpoints for AI readability * Syntax highlighting with code blocks * Dynamic OG images for rich link previews * RSS feed for content distribution ## Registry Easily build and distribute reusable components, hooks, and pages using a custom registry powered by the [shadcn CLI](https://ui.shadcn.com/docs/cli). Each entry is well-documented and includes: * Live preview & code snippets * Beautiful, readable code blocks * One-click command blocks (pnpm, npm, yarn, bun) ## License Licensed under the [MIT license](https://github.com/ncdai/chanhdai.com/blob/main/LICENSE). The source code is available on [GitHub](https://github.com/ncdai/chanhdai.com). > You’re free to use my code! Just make sure to remove all my personal information before publishing your website. It’s awesome to see my code being useful to someone! Last updated on May 7, 2026