Introduction
This is my personal portfolio and technical engineering blog, architected to showcase my professional background, software projects, interactive tools, and technical writings.
It serves as my personal digital headquarters to connect with fellow engineers, recruiters, and the open-source community.
Core Site Sections
1. Interactive 3D Hero
- Space-themed Three.js particle canvas with floating developer glyphs.
- Terminal typewriter effect cycling through core engineering roles.
- High-visibility calls to action and direct social links.
2. About & Technical Expertise
- Concise narrative of my background and software engineering philosophy.
- Interactive skill cards broken down into Frontend, Backend, Databases, DevOps, and Mobile.
3. Professional Journey (Timeline)
- Interactive reverse-chronological career timeline with automated duration calculations.
- Detailed breakdown of responsibilities and technology stacks per company.
4. Project Showcase & Case Studies
- Multi-category filtering (Web, Mobile, AI & ML).
- Comprehensive MDX-driven deep-dive case study pages with interactive carousels and code snippets.
5. Technical Insights & Blog
- Multi-tag categorized articles with fast client-side fuzzy search via Fuse.js.
- Rich syntax-highlighted code blocks, copyable anchor links, and estimated reading times.
6. Interactive Micro-Apps Portal
- Embedded iframe-powered web utility tools (JSON Editor, DevTools Suite, Quick Edit, Quiz Master) with bi-directional query param syncing.
Open Source Architecture
- Complete source code is publicly accessible on GitHub: dlir2404/portfolio.
- Built with static generation (
trailingSlash: true,images.unoptimized: true) for ultra-fast static CDN hosting. - Fully bilingual internationalization (English at
/and Vietnamese at/vi/).
Technologies Used
- Framework: Next.js 14 (App Router, Static Export).
- Styling & UI: Tailwind CSS, Framer Motion animations, Three.js.
- Content: MDX with custom React component mapping (
next-mdx-remote). - Search: Fuse.js over build-time generated static index.
- Analytics & Notifications: Vercel Analytics, Sonner toast notifications.
