Blog 2024
Project·Blog
ShibaDEV Blog
Personal tech blog built with Next.js 14. Features posts, a toolkit of mini-tools, Pokémon TCG collection tracker, guitar cover videos, and an AI-powered Shiba chatbot.
Next.jsTypeScriptSCSSFramer MotionReduxCloudinary
Images1 / 6
Overview
ShibaDEV Blog is my personal corner of the internet — a tech blog, portfolio, and creative playground built from scratch with Next.js 14 and TypeScript. Every feature on the site is something I designed, built, and shipped myself.
Features
- Blog — Markdown-based posts with syntax highlighting, tag filtering, view counter, and social sharing
- Developer Toolkit — 7 mini-tools: QR generator, UUID generator, domain-to-IP resolver, guitar tuner, box-shadow playground, URL slug generator, and PSA tag generator
- Hobby Corner — Guitar cover videos and a Pokémon TCG collection tracker with per-set progress and themes
- ShibaBOT — AI-powered chatbot with character selection, powered by Claude API
- Galaxy Design System — Custom multi-color star background, animated card borders, float animations, glass morphism navbar
Tech Stack
| Layer | Technologies |
|---|---|
| Frontend | Next.js 14 (App Router), TypeScript, SCSS Modules |
| Animation | Framer Motion — hover, stagger, page transitions |
| State | Redux Toolkit, React Query |
| UI | PrimeReact, custom galaxy design system |
| Media | Cloudinary — optimized image delivery |
| Deploy | Vercel, auto-deploy from GitHub |
Links
- Live site: shibadev.asia
- GitHub: DoanTanLoc-2203
