使用 Next.js、React、TypeScript 和 React Icons 构建
portfolio-template (fahimsweb) — Next.js 作品集模板
作者 fahimsweb
基于 Next.js、React、TypeScript 与 React Icons 的开源个人作品集起始模板,个人信息从 package.json 读取。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 2
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
个人信息(作者、名称、描述、主页)统一从 package.json 读取
README 定位为极简起始模板,可按需定制和扩展
提供 npm、yarn、pnpm、bun 四种开发服务器启动命令
贡献流程要求遵循 Semantic Release 提交规范,并在 PR 前通过 npm run lint
采用 MIT 许可证,并包含行为准则文件
模板详细介绍
这是一个开源的个人作品集起始模板,使用 Next.js、React、TypeScript 和 React Icons 构建,README 将其定位为极简的起步配置,方便使用者按自己的需要个性化修改和扩展。
模板的一个特点是个人信息来源集中:作者、名称、描述和主页等个人资料都从 package.json 的对应字段读取,README 说明这样设计是为了保持简单并便于快速定制。
使用方式为 fork 或克隆仓库后,在终端运行 npm run dev(或 yarn、pnpm、bun 的 dev 命令),然后在浏览器打开 http://localhost:3000 查看结果。README 还给出了参与贡献的约定,包括遵循 Semantic Release 的提交信息与版本管理规范、提交 PR 前运行 npm run lint 检查(CI 构建会因 eslint 失败而失败)、不要修改现有的 authors 与 scripts 部分,以及提交信息采用 <type>(<scope>): <subject> 格式。项目采用 MIT 许可证,并附有行为准则文件。README 未提供页面区块构成、样式方案、部署步骤或性能方面的说明。
适合你的项目吗?
适用场景
- 作为个人作品集网站的起步代码,在其基础上替换和补充自己的内容
- 用于学习 Next.js 与 TypeScript 组合的项目结构
- 作为需要集中管理个人元数据(从 package.json 读取)的小型站点起点
- 作为开源项目练习 Semantic Release 提交规范与 PR 流程的载体
适合人群
- 希望以现成起始模板快速搭建个人作品集的开发者
- 熟悉或愿意使用 Next.js、React、TypeScript 的前端开发者
- 需要按 Semantic Release 规范参与开源贡献的贡献者
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
fork 或克隆仓库到本地
- 2
在终端运行 npm run dev(也可使用 yarn dev、pnpm dev 或 bun dev)
- 3
在浏览器打开 http://localhost:3000 查看结果
- 4
提交 PR 前运行 npm run lint 检查,可用 npm run format 自动修复 lint 错误
- 5
按 README 要求不要修改现有的 authors 与 scripts 部分,提交信息遵循 <type>(<scope>): <subject> 格式
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
- 贡献者不应修改现有的 authors 与 scripts 部分,但可以新增 script 或 authors 属性。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
https://github.com/fahimsweb/portfolio-template/blob/main/LICENSEhttps://github.com/fahimsweb/portfolio-template/blob/main/README.mdPlease refrain from altering the existing authors or scripts sections. However, you are welcome to add a new script or authors property if you'd like.
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-14。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料一般 · 73 / 100
- 技术栈
- Next.js · React
- 网站类型
- 作品集
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2024-10-09
- 截图检查日期
- 2026-10-14
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
审核声明: codex-user-requested-batch-review-20261015 · 2026-10-15
查看当时使用的来源资料
SHA-256: 4629866b8023a93855f980c7f5de53ae144c3063b2ee9cd10a5c84ef30a05f40
2026-10-14T02:23:21.735Z
来源文件 / 仓库# Portfolio Template
This is an open-source starter portfolio template built with **Next.js**, **React**, **TypeScript**, and some cool **React Icons**. It’s a minimalist setup to help you get started and personalize it as you wish.
Feel free to **customize and extend** it, and of course, contributions are always welcome!
All personal details are pulled from the `package.json` properties, including the **author**, **name**, **description**, and **homepage** sections. This design aims to keep things simple while still allowing for quick customization.
## Getting Started
Fork or clone the repo.
Open terminal and run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Contributing to the Project
Thank you for considering contributing to this project! To maintain a clean and efficient workflow, I followed the **Semantic Release** guidelines for commit messages and versioning. Please read through this guide before submitting your contributions.
#### Linting
Please check your code using npm run lint before submitting your pull requests, as the CI build will fail if eslint fails.
```bash
npm run format # To fix lint errors automatically
```
#### What not to modify
Please refrain from altering the existing authors or scripts sections. However, you are welcome to add a new script or authors property if you'd like.
#### Commit Message Format
[Read more about Semantic-versioning](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#-commit-message-format)
All commit messages should adhere to the following format:
```bash
<type>(<scope>): <subject>
```
- **feat**: A new feature
- **fix**: A bug fix
- **docs**: Documentation changes
- **style**: Changes that do not affect the meaning of the code (white-space, formatting, etc.)
- **refactor**: A code change that neither fixes a bug nor adds a feature
- **perf**: A code change that improves performance
- **test**: Adding or updating tests
- **chore**: Changes to the build process or auxiliary tools and libraries
#### Scope
_Optional._ A scope may be provided to denote the section of the codebase affected. For example, `ui`, `api`, `cli`, etc.
#### Subject
The subject should be a brief summary of the change, written in the imperative mood (e.g., "add", "fix", "update").
#### Example Commit Messages
- `feat(ui): add responsive layout`
- `fix(api): resolve user authentication error`
- `docs: update README with installation instructions`
#### Bumping the Package Version
When you make a change that requires a version bump, follow these steps:
1. **Determine the Version Bump Type**: Based on your commits, decide whether it’s a major, minor, or patch version change:
- **Major version**: Breaking changes (e.g., `1.0.0` → `2.0.0`)
- **Minor version**: New features (e.g., `1.0.0` → `1.1.0`)
- **Patch version**: Bug fixes (e.g., `1.0.0` → `1.0.1`)
2. **Update `package.json`**:
- Open the `package.json` file.
- Update the `version` field according to the version bump type determined above.
3. **Commit the Version Bump**:
- Use a commit message like:
```
chore(release): bump version to <new-version>
```
- For example:
```
chore(release): bump version to 1.1.0
```
4. **Push Changes**: After committing your changes, push them to the repository:
```bash
git push origin your-branch-name
```
5. **Create a Pull Request**: Go to the repository and create a pull request. Ensure to describe the changes made and reference any relevant improvements/issues.
## Code of Conduct
Please adhere to the [Code of Conduct](CODE_OF_CONDUCT.md) in all interactions within the repository.
## Licence
This project is licensed under the [MIT License](LICENSE). See the [LICENSE](LICENSE) file for more details.
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

react-resume-template
A personal resume website template built with React.js, Typescript, Next.js, and styled with Tailwind css
Next.js · 作品集

nxt-lnk
Custom bio links for creatives who love coding. A perfect custom alternative for linktree, bio and other short…
Next.js · 作品集

sylph
A minimal portfolio template.
Next.js · 作品集

sleek-portfolio
sleek-portfolio 是一个面向开发者个人品牌展示的现代作品集模板,基于 Next.js 15、TypeScript、Tailwind CSS 和 Shadcn UI 构建。
Next.js · 作品集

research-website-template
React + Next.js template for research websites (for PhD students, researchers, etc)
Next.js · 作品集

shadcn-portfolio
shadcn-portfolio 是一个面向开发者的作品集模板,技术栈为 Next.js 15、shadcn/ui、Tailwind CSS 和 Framer Motion。
Next.js · 作品集
