# chanhdai.com

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

- [About](https://heyrahulr.netlify.app/about.md): A quick intro to me, my tech stack, and how to connect.
- [Projects](https://heyrahulr.netlify.app/projects.md): Selected projects that show my skills and creativity.
- [Awards](https://heyrahulr.netlify.app/awards.md): My key awards and honors.
- [Certifications](https://heyrahulr.netlify.app/certifications.md): Certifications and credentials I've earned.

## Blog

- [Meet My Friends](https://heyrahulr.netlify.app/blog/meet-my-friends.mdx): A chaotic roster of human beings I voluntarily spend time with. They bounce around my life like atoms — unpredictable, high-energy, and occasionally crashing into each other.
- [Welcome to rahul.foo.ng](https://heyrahulr.netlify.app/blog/welcome.mdx): A pixel-perfect dev portfolio and shadcn registry showcasing my work as a Design Engineer.
- [Dot Grid Spotlight](https://heyrahulr.netlify.app/blog/dot-grid-spotlight.mdx): Interactive dot grid with a cursor-tracking spotlight effect.
- [Icon Swap](https://heyrahulr.netlify.app/blog/icon-swap.mdx): Animate icon swaps with scale, blur, and fade transitions.
- [Fluid Gradient Text](https://heyrahulr.netlify.app/blog/fluid-gradient-text.mdx): Render text with a fluid gradient that shifts with pointer movement.
- [TOC Minimap](https://heyrahulr.netlify.app/blog/toc-minimap.mdx): Navigate page sections with a compact, hoverable TOC minimap.
- [Elastic Slider](https://heyrahulr.netlify.app/blog/elastic-slider.mdx): Slider with elastic rubber-band drag and magnetic snap feedback.
- [GitHub Contributions](https://heyrahulr.netlify.app/blog/github-contributions.mdx): Visualize year-long GitHub contribution activity with daily counts, tooltips, and a profile link.
- [Theme Toggle Effect](https://heyrahulr.netlify.app/blog/theme-toggle-effect.mdx): Animated transitions when switching between light and dark themes.
- [Twemoji](https://heyrahulr.netlify.app/blog/twemoji.mdx): Render Unicode emoji as Twemoji SVG images inline with text.
- [Middle Truncation](https://heyrahulr.netlify.app/blog/middle-truncation.mdx): Truncate text in the middle while preserving start and end.
- [Glow Card Grid](https://heyrahulr.netlify.app/blog/glow-card-grid.mdx): Display cards with glowing border and background effects.
- [Haptic Feedback](https://heyrahulr.netlify.app/blog/haptic.mdx): Trigger haptic feedback on mobile devices.
- [Text Flip](https://heyrahulr.netlify.app/blog/text-flip.mdx): Animated text that cycles through items with a smooth flip transition.
- [Copy Button](https://heyrahulr.netlify.app/blog/copy-button.mdx): Copy text to clipboard with visual, haptic, and audio feedback.
- [Code Block Command](https://heyrahulr.netlify.app/blog/code-block-command.mdx): Display install commands with package manager switcher and copy button.
- [Consent Manager](https://heyrahulr.netlify.app/blog/consent-manager.mdx): Cookie and tracking consent banner for Next.js, built on c15t.
- [Scroll Fade Effect](https://heyrahulr.netlify.app/blog/scroll-fade-effect.mdx): Fade content edges as you scroll, for both vertical and horizontal layouts.
- [GitHub Stars](https://heyrahulr.netlify.app/blog/github-stars.mdx): Display GitHub repo star count with formatted numbers and full-count tooltip.
- [Shimmering Text](https://heyrahulr.netlify.app/blog/shimmering-text.mdx): Smooth, light-sweeping shimmer animation for text.
- [Slide to Unlock](https://heyrahulr.netlify.app/blog/slide-to-unlock.mdx): Interactive slider inspired by the classic iPhone “slide to unlock” gesture.
- [Work Experience](https://heyrahulr.netlify.app/blog/work-experience-component.mdx): Display work experiences with role details, company logos, and durations.
- [React Wheel Picker](https://heyrahulr.netlify.app/blog/react-wheel-picker.mdx): iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.
- [Theme Switcher](https://heyrahulr.netlify.app/blog/theme-switcher.mdx): Toggle between system, light, and dark themes in Next.js apps.
- [Apple Hello Effect](https://heyrahulr.netlify.app/blog/apple-hello-effect.mdx): SVG writing animation inspired by Apple’s “Hello” screen.
- [Awesome Terminal — iTerm2 + Zsh + Oh My Zsh + Amazon Q](https://heyrahulr.netlify.app/blog/awesome-terminal.mdx): 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://heyrahulr.netlify.app/blog/uptime-kuma.mdx): Uptime Kuma is an easy-to-use self-hosted monitoring tool.