Building My Personal Page
How this portfolio combines Next.js App Router, Tailwind CSS, static MDX writing, Web3Forms, and small UX interactions.
This personal homepage started as a small portfolio surface and gradually became a place to practice product thinking.
The goal was simple: build a site that feels personal, loads quickly, and gives visitors a clear path through my background, projects, writing, and contact details.
Stack
- Next.js App Router for routing and static generation.
- Tailwind CSS for fast visual iteration.
- MDX for blog content that can mix Markdown with React components later.
- Web3Forms for a lightweight contact workflow.
Architecture
The site is split into focused routes: the homepage introduces my profile, the about page expands the story, the blog route renders MDX posts, and the contact route sends messages through an external form service.
The MDX layer is intentionally simple. Each post exports metadata, the blog index imports those posts, and the dynamic route uses the slug to render a statically generated article page. This keeps the writing flow close to the codebase while still giving the site real blog behavior.
Design Notes
I kept the layout direct and readable: a homepage intro, an about page with a visual travel section, a blog area for technical notes, and a contact page that can actually send messages.
Small interactions matter here. The rotating travel section resets its timer after manual navigation, the contact form reports submission state, and the footer text is written to match the site's ongoing nature.
Knowledge Points
- App Router routes can combine server-rendered pages with client components where interaction is needed.
- MDX works well for a developer portfolio because articles can stay version controlled beside the application.
- Environment variables should keep public form access keys out of committed source while still allowing local and Vercel deployments.
- User experience details such as timer reset, loading text, and disabled submit states make a small site feel much more polished.
- A personal page benefits from being treated as a product: clear navigation, purposeful copy, and real contact paths matter as much as visuals.
What I Would Improve Next
- Add richer project case studies with screenshots and design decisions.
- Add analytics to understand which pages visitors actually read.
- Add Playwright checks for core routes and the contact form.
这个个人主页最初只是一个小型作品集展示，逐渐变成了一个练习产品思维的地方。
目标很简单：建一个感觉是个人的、加载很快，并且能让访问者清晰地了解我的背景、项目、写作和联系方式的网站。
技术栈
- Next.js App Router，负责路由和静态生成。
- Tailwind CSS，用于快速视觉迭代。
- MDX，用于博客内容，后续可以把 Markdown 和 React 组件混用。
- Web3Forms，提供轻量级的联系表单工作流。
架构
网站被分成几个专注的路由：首页介绍个人信息，About 页面展开故事，博客路由渲染 MDX 文章，联系页面通过外部表单服务发送消息。
MDX 层有意保持简单：每篇文章导出 metadata，博客索引引入这些文章，动态路由通过 slug 渲染静态生成的文章页面。这样写作流程和代码库保持紧密关联，同时让网站具备真实的博客功能。
设计思路
我保持了布局直接、易读：首页介绍、附带旅行照片展示的 About 页面、用于技术笔记的博客区域，以及真正能发送消息的联系页面。
小的交互细节很重要：旅行照片轮播在手动切换后重置计时器，联系表单汇报提交状态，页脚文字反映了网站持续更新的本质。
知识点
- App Router 路由可以将服务端渲染页面与需要交互的客户端组件结合使用。
- MDX 非常适合开发者作品集，因为文章可以与应用代码一起做版本控制。
- 环境变量应该让表单 access key 不进入提交的源码，同时支持本地和 Vercel 部署。
- 计时器重置、加载文字、禁用提交状态等用户体验细节能让小网站感觉打磨得更精良。
- 个人主页适合被当作产品来对待：清晰的导航、有目的的文案、真实的联系路径，和视觉设计一样重要。
下一步想改进的地方
- 添加更丰富的项目案例研究，包含截图和设计决策。
- 添加分析功能，了解访问者实际在读哪些页面。
- 为核心路由和联系表单添加 Playwright 测试。