HTML作品集

portfolio-page-template — HTML 作品集模板

作者 EemilIkonen

一个基于 Bootstrap 5.3 示例元素构建的响应式个人作品集页面模板，包含导航栏、带引言的 hero 区、项目卡片区和联系方式区，适合按 README 指引替换占位内容后使用。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图

桌面端首页1 / 2

查看源码在新标签页打开

桌面端截图首屏预览

从核验过的固定源码实际运行并截图。

全部页面与视图 2

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

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

值得关注的模板亮点

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

响应式页面结构包含导航栏、带引言的 hero 区、项目区和联系方式区

主要使用 Bootstrap v5.3.3 现成示例元素进行布局与样式

项目卡片可通过复制粘贴扩展数量，并可替换背景图与图标架中的图标

使用 Font Awesome V6 图标与 Google Fonts 的 Rubik Scribble 字体

README 提供逐项自定义指引，包括 meta 信息、Font Awesome kit URL、hero 引言和联系方式

采用 MIT 许可证，可 fork 后用于个人作品集

模板详细介绍

该模板是一个静态 HTML 作品集页面，用于展示个人项目。README 说明其设计为响应式，页面结构包括导航栏、带引言的 hero 区、项目区和联系方式区，主要使用 Bootstrap 现成元素搭建。

技术栈方面，README 列出 HTML5、CSS3、JavaScript ES6、Bootstrap v5.3.3、Font Awesome V6 和 Google Fonts（Rubik Scribble 字体）。使用方式集中在 index.html：填写 meta 信息、替换 Font Awesome kit 占位 URL、替换 hero 引言、在项目区复制粘贴项目卡片并自定义背景图和图标、替换联系方式内容，以及在 assets 目录放入自己的 favicon.ico。

限制说明：README 的安装步骤仅列出克隆仓库、自定义模板、部署三步，未提供具体部署命令或托管平台说明；也未说明浏览器兼容性、构建工具或后端能力。项目卡片数量可通过复制粘贴扩展，但 README 未描述筛选、动画或数据驱动等额外功能。

HTML作品集

适合你的项目吗？

适用场景

个人开发者制作静态作品集页面，展示若干项目卡片
按 README 指引替换占位内容，快速搭建包含导航与联系方式的单页站点
以 Bootstrap 示例元素为基础，自定义项目背景图和图标样式
fork 仓库后作为学习 HTML/CSS/JavaScript 与 Bootstrap 布局的练习项目

适合人群

希望用静态 HTML 页面展示个人项目的开发者
熟悉或愿意使用 Bootstrap 类与 HTML 编辑的用户
需要可 fork 并自行替换内容的轻量作品集模板的人

上手与定制指南

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

1
克隆仓库后，在 index.html 中填写个人 meta 信息
2
将第 14 行的 Font Awesome kit 占位 URL 替换为自己的 kit 地址
3
替换 hero 引言，并在项目区复制粘贴项目卡片、修改背景图与图标
4
在联系方式区替换占位内容，并将自己的 favicon.ico 放入 assets 目录
5
README 仅列出克隆、自定义、部署三步，未提供具体部署命令或平台说明

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
需将 index.html 第 14 行的 Font Awesome kit 占位 URL 替换为自己的 Font Awesome kit 地址，使用 Font Awesome 服务需自行注册 kit。
字体使用 Google Fonts 的 Rubik Scribble，页面依赖 Google Fonts 外部服务加载字体。
需自行准备 favicon.ico 文件并放入 assets 目录，模板未附带该图标。
作者不接受 pull request，仅可 fork 后自行使用。

查看原文依据

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

- Replace the placeholder Font Awesome kit URL in line 14 with your own. More info on kits [here](https://docs.fontawesome.com/web/setup/use-kit/).
README 原文

- Google Fonts: Used for typography. Specifically, the Rubik Scribble font is used.
README 原文

- Add your own favicon.ico file into the assets folder
README 原文

This is a personal project, so not accepting pull requests, but feel free to fork it and use it for your own portfolio!
README 原文

https://github.com/EemilIkonen/portfolio-page-template/blob/main/LICENSE https://github.com/EemilIkonen/portfolio-page-template/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

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

这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间: 2024-06-03
截图检查日期: 2026-10-21

目前没有记录演示链接。请依据仓库说明在本地评估；仅凭截图无法确认交互行为。

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

查看具体选型方法 →

介绍的制作与核对状态

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

审核声明: codex-user-requested-batch-review-20261021 · 2026-10-21

查看当时使用的来源资料

SHA-256: ea55cbd32125e0d0571cda5a45134af4c37af7ea8a2d502d415cc510ce666b6d

2026-10-20T13:26:16.836Z

来源文件 / 仓库

# Portfolio page template

## Description

This is a simple portfolio page template designed to showcase your projects. It features a responsive design with a navigation bar, a hero section with a quote, a projects section, and a contact details section. The template is built primarily using ready [Bootstrap elements](https://getbootstrap.com/docs/5.3/examples/).

![Screenshot of the portfolio page](./assets/example-image.png)

## Used Technologies

- HTML5: Used for structuring the content of the web page.
- CSS3: Used for styling the web page.
- JavaScript ES6: Used for adding interactivity to the web page.
- Bootstrap v5.3.3: Used for layout and styling.
- Font Awesome V6: Used for adding icons to the web page.
- Google Fonts: Used for typography. Specifically, the Rubik Scribble font is used.

## Installation and Setup

1. Clone the repository
2. Customize the template
3. Deploy

## Usage

Here's how you can use this template to showcase your own projects:

In `index.html`:

- Add your personal info into <meta> tags
- Replace the placeholder Font Awesome kit URL in line 14 with your own. More info on kits [here](https://docs.fontawesome.com/web/setup/use-kit/).
- Replace the hero quote with your own.
- In the projects section, replace the placeholder content with your own projects. You can add as many project cards as you want by copy & pasting the project card. You can customize the project cards by changing the background image in the style tag and by changing the icons in the icon shelf.
- To add new icons simply add them to the icon tag to the desired Icons shelf. Also add the color for the icon to the `style.css` and add the class to the icon tag.
- In the contact details section, replace the placeholder content with your own contact details.
- Add your own favicon.ico file into the assets folder

## Contributing

This is a personal project, so not accepting pull requests, but feel free to fork it and use it for your own portfolio!

## License

This project is licensed under the MIT License.

## Contact

If you have any questions or comments about this project, feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/eemil-ikonen-508142201/).

反馈内容错误