React作品集

portfolio-website — React 作品集模板

作者 bomdiaola

一个以黑客主题为视觉风格的 React 个人作品集模板，首页带 Matrix 代码雨动画与头像故障效果，项目列表通过 GitHub API 实时拉取公开仓库。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

3 个预览视图

桌面端首页1 / 3

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

桌面端截图首屏预览

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

全部页面与视图 3

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

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

值得关注的模板亮点

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

首页使用 Matrix 风格代码雨动画背景，配合终端风格界面

头像带自定义 glitch 故障效果，整体保持黑客主题一致性

项目区块调用 GitHub REST API，实时展示账号下的公开仓库

生产环境通过 Vercel 环境变量存放 GitHub Personal Access Token

响应式布局，适配手机与桌面等不同屏幕尺寸

基于 Duerme 的 React 模板改造，采用 MIT 许可

模板详细介绍

这是一个基于 React 的个人作品集网站，作者 Joan Garcés 用它展示自己在攻击性网络安全、软件开发方面的项目与实践经历，定位是面向招聘方和行业人士的交互式求职材料。

视觉上采用统一的“黑客”风格：首页有 Matrix 风格的代码雨动画背景，头像带自定义故障（glitch）效果，界面整体参考终端风格。项目区块直接调用 GitHub REST API，实时获取并展示公开仓库，因此作品列表会随 GitHub 账号更新而自动变化。生产环境中 GitHub Personal Access Token 通过 Vercel 的环境变量管理。

技术栈为 React.js、JavaScript（ES6+）、HTML5 与 CSS3，部署在 Vercel 上并使用其 CI/CD，版本控制使用 Git 与 GitHub。README 说明该项目最初基于 Duerme 创建的 React 模板改造而来，并声明采用 MIT 许可。

需要注意的是，README 未提供具体依赖版本、浏览器兼容范围或无障碍支持说明；项目列表依赖 GitHub API 与访问令牌配置，未配置令牌时该部分能否正常展示需自行验证。

React作品集

适合你的项目吗？

适用场景

个人开发者搭建展示安全或开发项目的作品集页面
求职者用交互式网页替代静态简历，向招聘方呈现项目经历
需要作品列表随 GitHub 仓库更新自动同步的展示场景
练习 React 动画背景、视觉特效与第三方 API 集成的参考项目

适合人群

具备 React 与 JavaScript 基础、能自行配置环境变量的开发者
希望作品集呈现黑客或终端视觉风格的个人
以 GitHub 仓库为主要项目展示来源的开发者
使用 Vercel 或类似平台部署前端项目的用户

上手与定制指南

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

1
克隆仓库后执行 npm install 安装依赖
2
在项目根目录创建 .env 文件，写入 REACT_APP_GITHUB_TOKEN=你的令牌
3
执行 npm start 启动本地开发服务器
4
部署到 Vercel 时需在平台环境变量中配置同一 GitHub 令牌
5
演示图片、字体、图标等第三方素材需按各自许可单独核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
使用项目列表功能需自行申请 GitHub Personal Access Token，并在项目根目录创建 .env 文件配置 REACT_APP_GITHUB_TOKEN；未配置令牌时 GitHub API 拉取公开仓库的部分可能无法正常工作。
生产环境需在 Vercel 平台配置环境变量存放 GitHub Personal Access Token，部署时依赖该外部平台的环境变量机制。
项目展示区依赖 GitHub REST API 实时获取公开仓库，属于外部服务依赖，API 可用性或访问限制会影响该功能。
项目基于 Duerme 创建的模板改造，使用时需注意保留对原模板作者的署名与致谢。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

Create a `.env` file in the project root and add your GitHub API Key: ``` REACT_APP_GITHUB_TOKEN=ghp_YourTokenHere ```
README 原文

* **Secure API Key:** Use of environment variables on Vercel to protect the GitHub Personal Access Token in production.
README 原文

* **Dynamic Projects:** The portfolio section consumes the GitHub API to automatically display public repositories.
README 原文

* This project was built upon the template created by **Duerme**.
README 原文

https://github.com/bomdiaola/portfolio-website/blob/main/LICENSE https://github.com/bomdiaola/portfolio-website/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 80 / 100
技术栈: React
网站类型: 作品集

这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间: 2025-10-16
截图检查日期: 2026-10-13

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

审核声明: [email protected] · 2026-10-13

查看当时使用的来源资料

SHA-256: b15f256561335c3e2e3d11900c0966e79b7557ee04dcb27e257cd464d33f0774

2026-10-13T06:25:01.435Z

来源文件 / 仓库

# Joan Garcés - Cybersecurity Portfolio

![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)

### [View Live Demo](https://portfolio-website-delta-one-98.vercel.app/)

A dynamic and personal web portfolio created to demonstrate skills in offensive cybersecurity, software development, and problem-solving through projects and practical experience.

![gif](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExcWkzcWwybW1xMzhpNGFpemlyMXh6bm51Y3h6bTdkeDFtM2Rzc2V3cyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/fOsYC0EPkvBbLH40Gb/giphy.gif)

---

## About This Project

This project started as a React template and has been transformed into a fully functional and stylized personal portfolio with a "hacker" theme. The main goal is to serve as an interactive cover letter for recruiters and industry professionals, showcasing not only completed projects but also frontend development skills.

The homepage features a "Matrix"-style animated background and a profile picture with a "glitch" effect to maintain a cohesive aesthetic. The projects section connects directly to the GitHub API, securely fetching and displaying my public repositories in real-time.

---

## Technologies Used

* **Frontend:** React.js, JavaScript (ES6+), HTML5, CSS3
* **Deployment:** Vercel (with CI/CD)
* **Version Control:** Git & GitHub
* **APIs:** GitHub REST API

---

## Key Features

* **Animated Background:** "Matrix"-style code rain for a complete thematic immersion.
* **Dynamic Projects:** The portfolio section consumes the GitHub API to automatically display public repositories.
* **Secure API Key:** Use of environment variables on Vercel to protect the GitHub Personal Access Token in production.
* **Visual Effects:** Custom "glitch" effect for the profile picture and a terminal-inspired user interface.
* **Responsive Design:** Adaptable to different screen sizes, from mobile to desktop.

---

## Local Setup

To run this project locally, follow these steps:

1.  **Clone the repository**
    ```sh
    git clone [https://github.com/bomdiaola/portfolio-website.git](https://github.com/bomdiaola/portfolio-website.git)
    ```
2.  **Install dependencies**
    ```sh
    npm install
    ```
3.  **Set up your environment variables**
    Create a `.env` file in the project root and add your GitHub API Key:
    ```
    REACT_APP_GITHUB_TOKEN=ghp_YourTokenHere
    ```
4.  **Start the development server**
    ```sh
    npm start
    ```

---

## Acknowledgements

* This project was built upon the template created by **Duerme**.

---

## License

Distributed under the MIT License. See `LICENSE` for more information.

反馈内容错误