ReactHTML作品集

profile-site — React 作品集模板

作者 chi-0828

React 构建的 macOS 终端风格个人网站模板，JSON 配置内容，适合开发者展示简历与项目。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

macOS 终端风格界面，视觉辨识度高

基于 React，组件化结构便于维护

内容由 JSON 文件驱动，修改直观

支持展示简介、经历、项目等多个板块

提供 GitHub Pages 部署脚本

MIT 许可证，可自由使用

模板详细介绍

profile-site 是一款以 macOS 终端为视觉灵感的个人网站模板，整体界面模拟终端窗口的观感，适合开发者或技术背景的用户作为个人主页。项目基于 React 构建，内容通过 JSON 文件配置，结构清晰，便于替换为自己的信息。模板包含多个标签页，如简介、经历、项目等，能够覆盖个人展示的基本需求。

使用上，你需要修改 public/index.html 中的标题，并编辑 src/customization/ 下的 JSON 文件来更新个人介绍、工作经历、项目等内容，同时替换 src/img/ 中的图片。项目提供了 npm 脚本，可本地运行或部署到 GitHub Pages。对于熟悉 React 和 npm 的开发者，上手成本较低；若没有 npm，也可使用旧版 HTML 分支，但该分支已不再维护。

需要留意的是，模板目前仍处于开发中，README 提到计划添加终端文字打印动画等效果，因此部分交互可能尚未完善。部署到 GitHub Pages 时，需按文档修改 package.json 中的 homepage 字段，并确保仓库设置正确。建议在正式使用前，仔细核对所有 JSON 字段和图片路径，避免出现内容缺失或链接错误。

ReactHTML作品集

适合你的项目吗？

适用场景

开发者个人简历网站
技术作品集展示
极简风格的个人主页
学习 React 与 JSON 配置的示例项目

适合人群

熟悉 React 和 npm 的开发者
追求终端风格视觉的极客用户
需要快速搭建个人展示页的求职者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
需 Node.js 18 和 npm 9 以上版本
2
克隆后运行 npm install 和 npm start 本地预览。
3
自定义内容时，修改 public/index.html 的标题、src/customization/ 下 JSON 文件及 src/img/ 图片。
4
部署到 GitHub Pages 前，需在 package.json 中设置 homepage 为你的 GitHub 页面地址，然后运行 npm run deploy。
5
旧版 HTML 分支不再维护，建议使用 React 版本。

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

MIT许可证允许免费使用、修改、分发和商用该终端风格个人主页模板代码，仅需保留版权与许可声明。

使用时需要遵守

保留原作者版权声明和 MIT 许可证声明。
在所有副本或实质部分中包含版权声明和许可声明

额外费用与待核对事项

README中展示的demo截图、showcase.png等素材授权状态未明确
README中引用的patorjk等第三方工具需遵循各自条款

查看原文依据

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software
许可证原文