--- title: "phatdev.net" url: https://phatdev.net/en/projects/phatdev-portfolio lang: en alternate: vi: https://phatdev.net/vi/projects/phatdev-portfolio markdown: https://phatdev.net/en/projects/phatdev-portfolio.md --- # phatdev.net > A bilingual Next.js 14 portfolio with a custom MySQL-backed CMS, plugin documentation, a plugin update server and an MCP endpoint that lets AI agents query projects and docs. - Role: Full-stack · Next.js · CMS - Status: Live in production - Technology: Next.js, TypeScript, MySQL, MCP, SEO - Live site: https://phatdev.net - Docs and changelog: https://phatdev.net/docs/phatdev-portfolio - All projects: https://phatdev.net/en/projects.md ## Project facts - Role: Design, development, operations - Platform: Next.js 14, MySQL, PM2, Nginx - Languages: Vietnamese, English - For AI: MCP (12 tools), WebMCP (7 tools), llms.txt ## Metrics - 99 / 100: PageSpeed mobile / desktop, measured 19 Oct 2026 - 12: read-only MCP tools for AI agents - 18: bilingual (vi / en) technical blog posts - 2: languages rendered server-side with hreflang ## Highlights - **MCP for AI agents**: A Model Context Protocol endpoint at /api/mcp lets AI read the profile and projects and search plugin docs; read-only and rate-limited. - **Bilingual SEO**: Server rendering with canonical and hreflang per page, an auto-generated sitemap, and Person, CreativeWork and TechArticle structured data. - **Custom CMS and docs**: Profile, projects, skills, contacts and plugin docs managed on MySQL, with no third-party CMS. - **Plugin update server**: Ships updates for in-house plugins and themes with licensing and download stats. - **Light, dark and context-aware images**: Follows the device setting; project images switch by language and theme, with 4K originals in a lightbox. ## In-depth analysis ### Goal One place that presents skills and products while also serving the plugins: documentation, updates and licensing. Fully self-owned code, no prebuilt template. ### Architecture #### Application Next.js 14 (App Router) under PM2 behind Nginx; data in MySQL through an account limited to reading and writing rows, with no schema privileges. #### CMS A custom admin for profile, projects, galleries, skills, contacts and plugin docs, with JWT sessions and login rate limiting. #### Docs and updates Every plugin has documentation and a changelog; the update server ships new releases to the sites that use them. ### For search engines and AI - Server rendering with canonical and vi / en hreflang on every page. - Auto-generated sitemap and robots.txt, schema.org structured data. - llms.txt describing the content for language models. - A read-only MCP endpoint so AI agents can query projects and docs. ### Interface Light and dark modes that follow the device, self-hosted fonts with full Vietnamese coverage, and project images that switch by language and theme. ### Compared to other portfolio approaches | Criterion | phatdev.net | Framer / WordPress template | Linktree | |---|---|---|---| | Owns its source code | ✓ | ~ | ✗ | | Custom MySQL CMS | ✓ | ✓ | ✗ | | Server-rendered bilingual SEO | ✓ | ~ | ✗ | | Built-in plugin docs | ✓ | ✗ | ✗ | | MCP for AI agents | ✓ | ✗ | ✗ | ## License Source code is not public, all rights reserved. The project does not declare any license in its code (no LICENSE file and no license field). ## Third-party libraries and resources (34) | Name | Type | Version | License | Source | |---|---|---|---|---| | @types/bcryptjs | Library (TypeScript types) | 2.4.6 | MIT | https://github.com/DefinitelyTyped/DefinitelyTyped | | @types/node | Library (TypeScript types) | 20.16.10 | MIT | https://github.com/DefinitelyTyped/DefinitelyTyped | | @types/nodemailer | Library (TypeScript types) | 6.4.16 | MIT | https://github.com/DefinitelyTyped/DefinitelyTyped | | @types/qrcode | Library (TypeScript types) | 1.5.6 | MIT | https://github.com/DefinitelyTyped/DefinitelyTyped | | @types/react | Library (TypeScript types) | 18.3.11 | MIT | https://github.com/DefinitelyTyped/DefinitelyTyped | | @types/react-dom | Library (TypeScript types) | 18.3.0 | MIT | https://github.com/DefinitelyTyped/DefinitelyTyped | | bcryptjs | Library | 2.4.3 | MIT | https://github.com/dcodeIO/bcrypt.js | | dompurify | Library | 3.4.3 | (MPL-2.0 OR Apache-2.0) | https://github.com/cure53/DOMPurify | | framer-motion | Library | 11.11.0 | MIT | https://github.com/framer/motion/ | | isomorphic-dompurify | Library | 3.13.0 | MIT | https://github.com/kkomelin/isomorphic-dompurify | | jose | Library | 5.9.4 | MIT | https://github.com/panva/jose | | marked | Library | 18.0.3 | MIT | https://github.com/markedjs/marked | | mysql2 | Library | 3.11.3 | MIT | https://github.com/sidorares/node-mysql2 | | next | Library | 14.2.35 | MIT | https://github.com/vercel/next.js | | nodemailer | Library | 8.0.5 | MIT-0 | https://github.com/nodemailer/nodemailer | | qrcode | Library | 1.5.4 | MIT | https://github.com/soldair/node-qrcode | | react | Library | 18.3.1 | MIT | https://github.com/facebook/react | | react-dom | Library | 18.3.1 | MIT | https://github.com/facebook/react | | sharp | Library | 0.35.5 | Apache-2.0 | https://github.com/lovell/sharp | | zod | Library | 3.23.8 | MIT | https://github.com/colinhacks/zod | | autoprefixer | Library (development only) | 10.4.20 | MIT | https://github.com/postcss/autoprefixer | | jsdom | Library (development only) | 29.0.2 | MIT | https://github.com/jsdom/jsdom | | playwright-core | Library (development only) | 1.48.1 | Apache-2.0 | https://github.com/microsoft/playwright | | postcss | Library (development only) | 8.4.47 | MIT | https://github.com/postcss/postcss | | tailwindcss | Library (development only) | 3.4.13 | MIT | https://github.com/tailwindlabs/tailwindcss | | typescript | Library (development only) | 5.6.2 | Apache-2.0 | https://github.com/microsoft/TypeScript | | Inter | Font (admin area) | - | OFL-1.1 | https://rsms.me/inter/ | | JetBrains Mono | Font (public site) | - | OFL-1.1 | https://www.jetbrains.com/lp/mono/ | | Space Grotesk | Font (public site) | - | OFL-1.1 | https://fonts.google.com/specimen/Space+Grotesk | | Font Awesome Free. Only the SVG paths of a few icons are used; the CSS and font are not loaded. | Icon (public site) | 6.7.2 | CC-BY-4.0 AND OFL-1.1 AND MIT | https://fontawesome.com/license/free | | Font Awesome Free. Admin area. | Icon (admin area) | 6.5.2 | CC-BY-4.0 AND OFL-1.1 AND MIT | https://fontawesome.com/license/free | | Ảnh minh hoạ trong bài blog (36). AI-generated images; they do not show real people. | Image | - | Created with OpenAI's image model through ChatGPT, under OpenAI's terms of use | - | | Real-ESRGAN (mô hình realesrgan-x4plus). Upscales blog images to 4K. | Tool (build tool) | - | BSD-3-Clause | https://github.com/xinntao/Real-ESRGAN | | Real-ESRGAN-ncnn-vulkan (chương trình chạy mô hình) | Tool (build tool) | - | MIT | https://github.com/xinntao/Real-ESRGAN-ncnn-vulkan | Credit: Font Awesome Free by @fontawesome, https://fontawesome.com. Icons: CC BY 4.0, fonts: SIL OFL 1.1, code: MIT. Copyright Fonticons, Inc. - Blog cover images (18): Hand-drawn SVG (3D pattern and vector), rendered to WebP. - Project screenshots and covers (152): Taken by me from the running version of each project; covers are rebuilt from those screenshots. See the License and credits page: https://phatdev.net/en/licenses.md