React作品集

portfolioInTerminal — React 作品集模板

作者 raulpy271

一个用 React 编写的单页作品集模板,界面模仿 macOS 终端窗口,终端组件可拖动和缩放,内容以文本对象集中管理。

看看你的网站会是什么样

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

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

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

采集于 2026-10-03查看来源

值得关注的模板亮点

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

01

终端窗口风格的作品集界面,终端组件支持拖动与缩放

02

内容集中在 src/text/ 的 contentEN 对象中,改文字即可替换个人信息

03

可通过向内容对象添加属性来扩展新的展示分区

04

支持多语言:新建同结构文本对象并在 textManager.js 中导入

05

README 给出 GitHub Pages 部署步骤,包括使用自定义短地址仓库的方式

06

MIT 许可,允许免费使用、修改、商用和分发

模板详细介绍

这是一个基于 React 的单页应用(SPA)作品集模板,视觉风格模仿 macOS 终端窗口。终端本身是一个可拖动、可缩放的 React 组件,内部按「关于我」等分区展示个人信息,作者将其作为个人作品集使用。

内容维护集中在 src/text/ 路径下的 contentEN 对象中,编辑该对象即可替换各分区文字;向对象添加属性可以增加新的分区。若要支持其他语言,可在同一路径下创建结构类似的对象,并在 src/text/textManager.js 中导入。README 建议直接阅读 src/text/ 下的文件来了解编辑、扩展分区和多语言的具体做法。

模板提供 GitHub Pages 的部署说明:安装 gh-pages 作为开发依赖,在 package.json 的 homepage 字段填写形如 http://{username}.github.io/{repo-name} 的地址,然后运行 npm run deploy。若希望使用 {username}.github.io 这样的短地址,需要额外创建一个同名仓库,并通过 git remote 与 gh-pages 命令将构建产物发布到该仓库。

仓库采用 MIT 许可,允许免费使用、修改、商用和分发该版本代码,分发时需保留版权声明与完整许可声明。演示图片、字体、图标等第三方素材的许可需单独核对;域名、托管等外部服务可能另外收费。

React作品集

适合你的项目吗?

适用场景

  • 开发者想要一个终端风格的个人作品集页面
  • 需要把作品集内容与界面代码分离、便于反复修改文字
  • 希望为作品集增加英文之外的其他语言版本
  • 打算把静态作品集部署到 GitHub Pages

适合人群

  • 熟悉 React 并能阅读 src/text/ 源码来调整内容的开发者
  • 接受终端视觉风格、不需要常规图文排版作品集的用户
  • 使用 GitHub 托管代码并愿意按 README 步骤部署到 GitHub Pages 的人

上手与定制指南

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

  1. 1

    先 fork 并克隆仓库,再编辑 src/text/ 路径下 contentEN 对象中的个人信息

  2. 2

    需要新增分区时,向该内容对象添加属性;需要多语言时新建同结构对象并在 src/text/textManager.js 中导入

  3. 3

    部署到 GitHub Pages 前安装 gh-pages 开发依赖,并在 package.json 的 homepage 字段填写目标地址

  4. 4

    若想使用 {username}.github.io 短地址,需创建同名仓库并通过 git remote 与 gh-pages 命令发布构建产物

  5. 5

    使用前核对演示图片、字体、图标等第三方素材的许可,MIT 仅覆盖该版本代码

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供;担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 使用该模板需先 fork 并克隆仓库,再在本地编辑 src/text/ 下的 contentEN 对象填入个人信息;模板本身不含现成内容,需自行准备文案。
  • 多语言支持需自行在 src/text/ 下新建同结构文本对象,并在 textManager.js 中导入,模板不预置其他语言内容。
  • 部署依赖 GitHub Pages 服务,需安装 gh-pages 开发依赖并配置 package.json 的 homepage 字段,属于外部托管服务。
  • 若想使用 {username}.github.io 短地址,需额外创建同名仓库并通过 git remote 与 gh-pages 命令发布构建产物。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

To use this page, first fork this repository and clone it on your machine, so you will can add your information.

README 原文

Or if you want to add support to another language you should create an object like these in the mentioned path and import it in the `src/text/textManager.js` file.

README 原文

Install github pages as dev dependecies:

README 原文

To use it, the user should create a repository named `{username}.github.io`.

README 原文
https://github.com/raulpy271/portfolioInTerminal/blob/master/LICENSEhttps://github.com/raulpy271/portfolioInTerminal/blob/master/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 87 / 100
技术栈
React
网站类型
作品集
这个分数如何计算

本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-07-26
截图检查日期
2026-10-03

已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 React。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 011edcdaf1a97ac3a7ac5c24442684308b1c55309b7ef1bd6c1b3660b9b6b237

2026-10-03T00:02:41.961Z

来源文件 / 仓库
# Portfolio In Terminal Style

![Terminal in browser](/public/example.gif)

This is a SPA in reactJS with a MacOS terminal style. The terminal is a draggable and resizable React component and has sections about me, so it's will be my personal portfolio for while.

See the [demo](https://raulpy271.github.io) page.

If you are interested in using this app for your portfolio, see the sections: [How to setup](#how-to-setup) and [Deploy](#deploy).

#### To turn the terminal draggable i used this [library](https://github.com/raulpy271/DraggableDialog)

## How to setup

To use this page, first fork this repository and clone it on your machine, so you will can add your information.

To edit the sections and put your information you should edit the `contentEN` object in the `src/text/` path. Besides, you can add more sections creating more properties to the object.

Or if you want to add support to another language you should create an object like these in the mentioned path and import it in the `src/text/textManager.js` file.

Read the files of the `src/text/` path and you'll understand more about how to edit, add more sections, or support for multiples languages.

If something isn't clear feels free to open an issue.

## Deploy

After making your changes, you can deploy the app on github pages. The steps are:

Install github pages as dev dependecies:

```sh
npm install gh-pages --save-dev
```

Put the link of your homepage in the `homepage` properties of `package.json`, the link is like this `http://{username}.github.io/{repo-name}`.

After all, run the command:

```sh
npm run deploy
```

And the application will be deployed in the `homepage` link.

## Deploy in another repository

Following the steps above, I get a repository with the source code in the branch `main` and another branch with the bundled version of the source. Besides, I get the link `https://raulpy271.github.io/portfolioInTerminal` to access the page.

The problem is that this link is too large, I want to use `https://raulpy271.github.io`. To use it, the user should create a repository named `{username}.github.io`.

But to deploy it, I should explicitly tell to github pages the new repository link. To make this I will add a remote branch in git and use this branch in the command `gh-pages`, See the steps:

```sh
git remote add homepage https://github.com/raulpy271/raulpy271.github.io
```

I added a new remote called `homepage`, and then will create a new bundled source in the directory `build`:

```sh
npx react-scripts build
```

And then I will use the files of the above directory and the new remote branch in `gh-pages`:

```sh
npx gh-pages -d build -o homepage
```

Now, the app is deployed 🚀! And I get a short link and a separate version with the production-ready code.

反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。