Building modern web experiences with Next.js 16, TypeScript & Modular Architecture.
A cutting-edge, high-performance portfolio website designed to showcase my journey as a Developer. Not just a portfolio, it's a Digital Garden where I share knowledge through my technical blog.
Built with the latest Next.js 16 (App Router) ecosystem, utilizing a Modular Monolith architecture for scalability and maintainability.
| Feature | Description |
|---|---|
| 🏗️ Modular Arch | Scalable folder structure (Domain-driven design) |
| ✍️ MDX Blog | Technical blog with Syntax Highlighting & Mermaid |
| 🌐 I18n Ready | Multi-language support (VI/EN) via next-intl |
| ⚡ Performance | Server Components (RSC) & Dynamic Imports |
| 🎨 UI/UX | Smooth animations with Framer Motion |
| 🔍 Command K | Fast, accessible search dialog (Cmd+K) |
| 📱 Responsive | Mobile-first design with Tailwind CSS |
| 🤖 SEO Ops | Dynamic Metadata, Sitemap, JSON-LD & OpenGraph |
Core:
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS, Lucide React
- Runtime: Bun (Super fast!)
Features:
- Animations: Framer Motion
- Internationalization: next-intl
- Content: MDX (Gray-matter, next-mdx-remote)
- Diagrams: Mermaid.js
This project uses Bun for blazing fast package management.
# 1. Clone the repository
git clone [https://github.com/ngxccc/portfolio.git](https://github.com/ngxccc/portfolio.git)
# 2. Install dependencies
bun install
# 3. Setup Environment Variables
cp example.env .env.local
# (Update .env.local with your own keys)
# 4. Start development server
bun devVisit http://localhost:3000 to see the magic happen! ✨
I follow a Modular Monolith approach to keep things organized:
src/
├── content/
│ └── post/ # All posts
├── app/ # Next.js App Router (Routing & Layouts)
├── modules/ # 👈 Feature Modules (The heart of the app)
│ ├── blog/ # Logic for Blog (MDX, Components)
│ ├── projects/ # Logic for Projects showcase
│ ├── home/ # Landing page components
│ └── ...
├── shared/ # Shared Utilities, UI Components, Configs
├── messages/ # I18n translation files (en.json, vi.json)
├── i18n/ # I18n config files
└── ...
- 📱 Responsive navigation
- 🔍 Mobile-optimized search
- 👆 Touch-friendly interactions
- 🖼️ Optimized images
- 📊 Mobile performance metrics
| Section | Description |
|---|---|
| 🏠 Home | Hero section & Introduction |
| 📝 Blog | Technical tutorials & insights |
| 👨💻 About | Background, Skills & Bio |
| 📂 Projects | Showcase of my best work |
| 💼 Experience | Work history |
| 🎓 Education | Education timeline |
| 🏆 Certificates | Professional certifications |
| 📞 Contact | Connection channels |
Trần Văn Ngọc · Ngxc · Next.js Portfolio · Fresher Web Developer · React Intern · Vietnamese Developer · MDX Blog · Web Development
This project is licensed under the MIT License - see the LICENSE file for details.
