# chadnpc.com

> A pixel-perfect dev portfolio and projects registry showcasing my work as a Pr09r4mm3r.

- [About](https://chadnpc.com/about.md): A quick intro to me, my tech stack, and how to connect.
- [Experience](https://chadnpc.com/experience.md): Highlights from my career and key roles I've taken on.
- [Education](https://chadnpc.com/education.md): Where I studied, what I focused on, and what I built along the way.
- [Projects](https://chadnpc.com/projects.md): Selected projects and every registry project, with install instructions.
- [Recognition](https://chadnpc.com/recognition.md): Awards, certifications, and the trademarks and copyrights registered under my name.
- [Code](https://chadnpc.com/code.md): Every code block, grouped by category, with install instructions.
- [Building](https://chadnpc.com/building.md): Ongoing projects, what is next, and the work that has already shipped.
- [Blog](https://chadnpc.com/blog.md): Every blog post, newest first, with publish dates.
- [Bookmarks](https://chadnpc.com/bookmarks.md): Articles, courses, books, references, and tools I recommend.

## Projects

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

## Blog

- [Joining Claude for Open Source Program](https://chadnpc.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://chadnpc.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://chadnpc.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://chadnpc.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://chadnpc.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.
- [chadnpc.com highlighted in video by creator of Aceternity UI: Make your portfolio unforgettable](https://chadnpc.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://chadnpc.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://chadnpc.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://chadnpc.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://chadnpc.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.
- [Chadnpc Brand](https://chadnpc.com/blog/chanhdai-brand.md): Key elements of the Chadnpc visual identity, including the mark, logotype, clear space, and more.
- [Awesome Terminal - iTerm2 + Zsh + Oh My Zsh + Amazon Q](https://chadnpc.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://chadnpc.com/blog/uptime-kuma.md): Uptime Kuma is an easy-to-use self-hosted monitoring tool.
- [Welcome to chadnpc.com](https://chadnpc.com/blog/welcome.md): A pixel-perfect dev portfolio and projects registry showcasing my work as a Pr09r4mm3r.