# chanhdai.com

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

- [About](https://craigrosario.com/about.md): A quick intro to me, my tech stack, and how to connect.
- [Experience](https://craigrosario.com/experience.md): Highlights from my career and key roles I've taken on.
- [Projects](https://craigrosario.com/projects.md): Selected projects that show my skills and creativity.
- [Awards](https://craigrosario.com/awards.md): My key awards and honors.
- [Certifications](https://craigrosario.com/certifications.md): Certifications and credentials I've earned.

## Blog

- [The GSoC Experience](https://craigrosario.com/blog/gsoc-experience.mdx): A chill blog about the open source experience at GSoC
- [Chevrons Up Down Icon](https://craigrosario.com/blog/chevrons-up-down-icon.mdx): Animated chevrons icon that morphs between up and down directions.
- [Mobius Loop Icon](https://craigrosario.com/blog/mobius-loop-icon.mdx): Animated Mobius loop icon that morphs between circles and infinity shape.
- [Spinning Circular Text](https://craigrosario.com/blog/spinning-circular-text.mdx): Text arranged in a circle with a continuous spinning animation.
- [Dot Grid Spotlight](https://craigrosario.com/blog/dot-grid-spotlight.mdx): Interactive dot grid with a cursor-tracking spotlight effect.
- [Icon Swap](https://craigrosario.com/blog/icon-swap.mdx): Animate icon swaps with scale, blur, and fade transitions.
- [Brand Assets Menu](https://craigrosario.com/blog/brand-assets-menu.mdx): Context menu for copying brand SVGs and opening asset links.
- [Fluid Gradient Text](https://craigrosario.com/blog/fluid-gradient-text.mdx): Render text with a fluid gradient that shifts with pointer movement.
- [TOC Minimap](https://craigrosario.com/blog/toc-minimap.mdx): Navigate page sections with a compact, hoverable TOC minimap.
- [Elastic Slider](https://craigrosario.com/blog/elastic-slider.mdx): Slider with elastic rubber-band drag and magnetic snap feedback.
- [GitHub Contributions](https://craigrosario.com/blog/github-contributions.mdx): Visualize year-long GitHub contribution activity with daily counts, tooltips, and a profile link.
- [Theme Toggle Effect](https://craigrosario.com/blog/theme-toggle-effect.mdx): Animated transitions when switching between light and dark themes.
- [Twemoji](https://craigrosario.com/blog/twemoji.mdx): Render Unicode emoji as Twemoji SVG images inline with text.
- [Middle Truncation](https://craigrosario.com/blog/middle-truncation.mdx): Truncate text in the middle while preserving start and end.
- [Glow Card Grid](https://craigrosario.com/blog/glow-card-grid.mdx): Display cards with glowing border and background effects.
- [Testimonial Spotlight](https://craigrosario.com/blog/testimonial-spotlight.mdx): Testimonial card with spotlight effect on hover.
- [Haptic Feedback](https://craigrosario.com/blog/haptic.mdx): Trigger haptic feedback on mobile devices.
- [Text Flip](https://craigrosario.com/blog/text-flip.mdx): Animated text that cycles through items with a smooth flip transition.
- [Copy Button](https://craigrosario.com/blog/copy-button.mdx): Copy text to clipboard with visual, haptic, and audio feedback.
- [Code Block Command](https://craigrosario.com/blog/code-block-command.mdx): Display install commands with package manager switcher and copy button.
- [Testimonial](https://craigrosario.com/blog/testimonial.mdx): Display user feedback with author info, avatar, and verified badge.
- [Consent Manager](https://craigrosario.com/blog/consent-manager.mdx): Cookie and tracking consent banner for Next.js, built on c15t.
- [Scroll Fade Effect](https://craigrosario.com/blog/scroll-fade-effect.mdx): Fade content edges as you scroll, for both vertical and horizontal layouts.
- [GitHub Stars](https://craigrosario.com/blog/github-stars.mdx): Display GitHub repo star count with formatted numbers and full-count tooltip.
- [Shimmering Text](https://craigrosario.com/blog/shimmering-text.mdx): Smooth, light-sweeping shimmer animation for text.
- [Testimonials Marquee](https://craigrosario.com/blog/testimonials-marquee.mdx): Scrolling marquee to showcase user testimonials.
- [Slide to Unlock](https://craigrosario.com/blog/slide-to-unlock.mdx): Interactive slider inspired by the classic iPhone “slide to unlock” gesture.
- [Work Experience](https://craigrosario.com/blog/work-experience-component.mdx): Display work experiences with role details, company logos, and durations.
- [React Wheel Picker](https://craigrosario.com/blog/react-wheel-picker.mdx): iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.
- [Theme Switcher](https://craigrosario.com/blog/theme-switcher.mdx): Toggle between system, light, and dark themes in Next.js apps.
- [Apple Hello Effect](https://craigrosario.com/blog/apple-hello-effect.mdx): SVG writing animation inspired by Apple’s “Hello” screen.