React 实现的个人简历与作品集页面
ReactJS-Portfolio — React 作品集模板
作者 prahladtimalsina
基于 React 的个人简历与作品集网站模板,内容通过 public/resumeData.json 配置,源自 Clever Programmer 的 ReactJS 挑战项目。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
目前有 1 张原始预览,可打开完整图片查看设计细节。
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
个人信息与项目内容集中在 public/resumeData.json 中配置
README 提供从下载、编辑到构建、部署的完整步骤
构建产物为 build 文件夹,可直接拖放到 Netlify 发布
基于 Tim Baker 的 react-resume-template,HTML 设计来自 Styleshout 的 Ceevee 模板
采用 MIT 许可,可免费使用、修改、商用和分发
模板详细介绍
这是一个 ReactJS 个人简历网站模板,面向 Clever Programmer「The 6 Figure JavaScript ReactJS Challenge」的参与者,用于搭建展示个人履历与项目的作品集页面。
模板把个人信息与项目数据集中放在 public/resumeData.json 中,使用者编辑该文件即可替换为自己的资料,无需改动页面结构。README 给出的流程是:从 GitHub 下载 zip 并解压,用 VS Code 打开,修改 resumeData.json,然后在终端依次执行 npm init、npm install、npm run build,最后把生成的 build 文件夹拖放到 Netlify 完成部署。
项目基于 Tim Baker 的 react-resume-template,HTML 设计来自 Styleshout 的 Ceevee 模板,页头与推荐语照片分别来自 Unsplash 的 Casey Horner 和 Samuel Zeller。仓库采用 MIT 许可,可免费使用、修改、商用和分发,但演示图片、字体、图标等第三方素材需按各自许可单独核对。
适合你的项目吗?
适用场景
- 个人求职时展示简历、技能与项目经历
- 作为 React 练习项目,学习用 JSON 数据驱动页面内容
- 快速搭建一个可部署到 Netlify 的静态个人主页
适合人群
- 希望用 React 搭建个人简历页的开发者
- Clever Programmer ReactJS 挑战的参与者
- 需要一份可直接修改 JSON 即可上线作品集的人
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
需先安装 Node.js,并注册 Netlify 账号用于部署
- 2
从 GitHub 下载 zip 解压后用 VS Code 打开项目
- 3
编辑 public/resumeData.json,填入个人信息与项目内容
- 4
在终端依次运行 npm init、npm install、npm run build
- 5
将生成的 build 文件夹拖放到 Netlify 完成发布
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 部署到线上需要注册 Netlify 账号,属于外部服务依赖;不使用该服务则无法按 README 流程发布。
- 本地构建需先安装 Node.js 运行环境,属于外部工具依赖。
- 项目基于 Tim Baker 的 react-resume-template 二次开发,使用时需保留原作者署名与 MIT 版权声明。
- HTML 设计来自 Styleshout 的 Ceevee 模板,该设计素材可能受其自身许可约束,需单独核对。
- 页头照片来自 Unsplash 摄影师 Casey Horner,图片素材需按 Unsplash 许可单独核对。
- 推荐语照片来自 Unsplash 摄影师 Samuel Zeller,图片素材需按 Unsplash 许可单独核对。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
Sign up for a Netlify account
README 原文
Install Node JS in your computer
README 原文
All Credits Goes to Tim Baker
README 原文
Ceevee Template by Styleshout
README 原文
Header photo credit
README 原文
https://github.com/prahladtimalsina/ReactJS-Portfolio/blob/master/LICENSEhttps://github.com/prahladtimalsina/ReactJS-Portfolio/blob/master/README.mdTestimonial photo credit
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较少 · 53 / 100
- 技术栈
- React
- 网站类型
- 作品集
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2020-09-08
- 截图检查日期
- 2026-10-03
目前没有记录演示链接。请依据仓库说明在本地评估;仅凭截图无法确认交互行为。
目录记录的主要技术栈是 React。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
审核声明: [email protected] · 2026-10-04
查看当时使用的来源资料
SHA-256: 3619866901be409d8fddac6ddc4721f282dfa11e3a5df156e6daaa32f63cdc8f
2026-10-03T15:36:23.874Z
来源文件 / 仓库# Clever Programmer ReactJS Portfolio Template ## 👇 WATCH THIS FIRST 👇 ## https://tinyurl.com/customizeReactPortfolio  ## <a href="https://prahlad-timalsina.netlify.app/">LIVE DEMO</a> ## Description This is a ReactJS based personal resume website template for participants of The 6 Figure JavaScript ReactJS Challenge by Clever ## Make it Your Own! #### PREREQUISITES: - Sign up for a Netlify account <a href='https://www.netlify.com'>HERE</a> - Install Node JS in your computer <a href='https://nodejs.org/en/'>HERE</a> #### PROCEDURE: - Download the zip folder from Github and unzip it Here is the link to download zip 👉 <a href='https://github.com/CleverProgrammers/react-portfolio'>HERE</a> - Open the folder in VS Code - Edit <code>public/resumeData.json</code> and add your personal details and projects - Open terminal in VS Code - RUN <code>npm init</code> , this command can be used to set up a new or existing npm package - RUN <code>npm install</code> , this command pulls out all the require node modules - RUN <code>npm run build</code>, this command will create a build folder for you - DRAG AND DROP the BUILD folder on Netlify, your app is live now for the world to see ## Credits #### All Credits Goes to Tim Baker <a href='https://github.com/tbakerx/react-resume-template'>Original Repo</a> HTML Design Template <a href="https://www.styleshout.com/free-templates/ceevee/">Ceevee Template by Styleshout</a> Header photo credit <a href="https://unsplash.com/@mischievous_penguins?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge">Casey Horner</a> Testimonial photo credit <a href="https://unsplash.com/@samuelzeller?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge">Samuel Zeller</a>
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

react-portfolio-template
React powered portfolio website template for developers
React · 作品集

personal-website-react
personal-website-react 是一个面向开发者的个人作品集单页模板,由 React 和 Material-UI 构建,并通过 Create React App 初始化。
React · 作品集

karngyan.com
karngyan.com 是一个面向开发者的个人网站与博客模板,作者用它搭建了自己的站点,并公开了完整代码。 模板的核心定位很明确:让写作者专注于内容,而不是花时间搭建基础设施。
React · 作品集

react-portfolio-template
react-portfolio-template 是一个由 Ryan Balieiro 开发的 React 作品集模板,定位为“sleek, futuristic”,适合开发者展示个人履历。
React · 作品集

portfolio
Personal website, Data scientist portfolio template
React · 作品集

react-portfolio
react-portfolio 是一个面向开发者的个人作品集模板,基于 React 16 和 Create React App 构建,界面样式采用 Material-UI。
React · 作品集
