在这个低代码和建站工具泛滥的时代，回归原生代码（HTML/CSS/JS）依然是理解Web本质、获得极致性能控制和完全自定义能力的最佳途径。本文将手把手带你从零开始，仅使用原生HTML5、CSS3和少量JavaScript，搭建一个美观、适配手机/平板/桌面的响应式个人网站。

我们将构建包含固定导航栏、英雄区（Hero Section）、关于我、作品展示网格、联系表单等核心模块的完整页面，并提供部署建议。

一、准备工作：项目结构

首先，在你的电脑上创建一个文件夹（例如 my-portfolio），并在其中创建以下文件结构：

my-portfolio/

├── index.html        # 主页面结构

├── style.css         # 样式与响应式布局

├── script.js         # 交互逻辑（移动端菜单等）

└── images/           # 存放图片资源（logo, 作品图等）

    ├── logo.png

    ├── hero-bg.jpg

    └── project1.jpg

提示：为了演示方便，下文中的图片链接将使用占位图服务，你在实战时可替换为自己的本地图片。

二、HTML5：构建语义化骨架

打开 index.html，我们将使用HTML5的语义化标签（