HTML作品集

Portfolio (thalytabdn) — HTML 作品集模板

作者 thalytabdn

一个使用 HTML、CSS 和 JavaScript 编写的响应式个人作品集模板，页面内容由 data.js 中的数据对象驱动渲染。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图

桌面端首页1 / 2

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

桌面端截图首屏预览

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

全部页面与视图 2

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

采集于 2026-09-30查看来源

值得关注的模板亮点

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

纯 HTML、CSS、JavaScript 实现，无构建步骤

Introduction、About Me、Skills、Projects 四个板块的数据集中在 data.js 中维护

通过 renderTemplate.js 按对象渲染并插入页面元素，减少重复 HTML

简历以 assets/Resume.pdf 路径引用

提供 GitHub Pages 在线演示

MIT 许可，可修改与分发

模板详细介绍

这是一个简单的响应式作品集模板，使用 HTML、CSS 和 JavaScript 构建。模板把页面内容与结构分离：Introduction、About Me、Skills 和 Projects 四个板块的数据集中放在 data.js 文件中，由 renderTemplate.js 读取对象并插入页面，从而减少重复的 HTML 代码。

使用方式为克隆仓库后，在 data.js 中修改或新增各板块的对象属性；简历文件需以 Resume.pdf 的名称放在 assets 目录下。README 说明也可参照 data.js 与 renderTemplate.js 的逻辑自行扩展修改。仓库采用 MIT 许可，演示页面托管在 GitHub Pages。

HTML作品集

适合你的项目吗？

适用场景

个人开发者搭建简单的在线作品集页面
把简历与项目列表集中在一个静态页面展示
作为学习用 JavaScript 对象渲染页面内容的示例
在 GitHub Pages 上免费托管个人主页

适合人群

希望用静态页面展示个人介绍与项目的开发者
接受通过编辑 JS 数据文件而非可视化后台来更新内容的人
需要可自由修改源码的前端学习者

上手与定制指南

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

1
克隆仓库：git clone https://github.com/thalytabdn/Portfolio
2
在 data.js 中修改或添加 Introduction、About Me、Skills、Projects 各板块的对象属性
3
将简历文件命名为 Resume.pdf 并放入 assets 目录
4
如需调整渲染逻辑，可参照 data.js 与 renderTemplate.js 的对应关系修改
5
演示图片、字体、图标等第三方素材需自行核对各自许可

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

使用简历板块时，需自行准备简历文件并以 Resume.pdf 为文件名放入 assets 目录，否则该部分内容无法正常显示。
页面内容不是通过后台或可视化编辑器维护，必须直接编辑 data.js 中的对象属性来更新 Introduction、About Me、Skills 和 Projects 各板块。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

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

Upload your Resume under asset folder as Resume.pdf
README 原文

You need to open the data.js file and change or add object properties for each session on the page
README 原文

https://github.com/thalytabdn/Portfolio/blob/master/LICENSE https://github.com/thalytabdn/Portfolio/blob/master/README.md

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

项目核对记录与介绍依据

模板资料

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

这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间: 2021-11-16
截图检查日期: 2026-09-30

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: 213b4527e92d28009c045e9f49176c7b94d88353a05738794fbfc9a370421906

2026-09-30T11:00:13.910Z

来源文件 / 仓库


# Portfolio :sparkles:

To view a demo example, **[click here](https://thalytabdn.github.io/Portfolio/)**

<a id="About"></a>

## 📝 About

A simple and responsive portfolio template.
You need to open the data.js file and change or add object properties for each session on the page: Introduction, About Me, Skills and Project.
You can follow the guide below.

<img  alt="skills" background="red" width="30" height="30" src="https://user-images.githubusercontent.com/59892368/141498539-73b3e352-1972-45af-b028-575c27e54903.gif">

* This adaptation helps to reduce the repetition of HTML lines.
* Insertion and addition of elements in a clean and practical way through JS.

> Following the logic of data.js and renderTemplate.js files, modifications are possible.
> The construction of rendering and inserting data using object is based on: <a href="https://youtu.be/QzDjdlF1BQI?t=40">Source</a> 

### Introduction
<img src="assets/intro.png" alt="Intro" width="800px" />
[Go to code] (https://github.com/DIGOARTHUR/Portfolio/blob/7d31ed9ba6adeeaa4105ca38d15f82dadf98fc5b/data/data.js#L8)

#### `Look here`
<video  alt="gif_"  src="https://user-images.githubusercontent.com/59892368/141475461-8acf2881-5dbd-4b1b-bbe7-1f713e050ced.mp4"></video>



### About me
<img src="assets/about-me.png" alt="About me" width="800px" />
[Go to code] (https://github.com/DIGOARTHUR/Portfolio/blob/7d31ed9ba6adeeaa4105ca38d15f82dadf98fc5b/data/data.js#L55)

#### `Look here`
<video  alt="gif_"  src="https://user-images.githubusercontent.com/59892368/141464404-afa9a8ad-c55a-4f65-b483-40543a8fdf6f.mp4"></video>



Upload your Resume under asset folder as Resume.pdf : 

[Go to code] (https://github.com/thalytabdn/Portfolio/blob/master/assets/Resume.pdf)

### Skills
<img src="assets/skills.png" alt="Skills" width="800px" />
[Go to code] (https://github.com/DIGOARTHUR/Portfolio/blob/7d31ed9ba6adeeaa4105ca38d15f82dadf98fc5b/data/data.js#L68)

#### `Look here`
<video  alt="gif_"  src="https://user-images.githubusercontent.com/59892368/141464522-7c41e484-a79f-4bad-9b60-0be3e401dd54.mp4"></video>


### Projects
<img src="assets/projects.png" alt="Projects" width="800px" />
[Go to code] (https://github.com/DIGOARTHUR/Portfolio/blob/7d31ed9ba6adeeaa4105ca38d15f82dadf98fc5b/data/data.js#L92)


#### `Look here`
<video  alt="gif_"  src="https://user-images.githubusercontent.com/59892368/141464535-d61d5498-0784-48e6-a8c5-96d5c3258eaf.mp4"></video>


<a id="used-technologies"></a>

## :rocket: Used Technologies

This project was developed using the following technologies

- HTML
- CSS
- JS

<a id="how-to-use"></a>

## :rocket: How to use

1. Make a clone :

```sh
  $ git clone https://github.com/thalytabdn/Portfolio
```

2. Add your information in the data.js file

## ✨ Contributing

1. Fork this repository
2. Improve current code by:
    - improving the style
    - adding new feature
    - improving the documentation
3. Push your work and create a Pull Request

## License 📄

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details

  ---
<h4 align="center">
    Build with 💓 by <a href="https://www.linkedin.com/in/thalytabdn/" target="_blank">Thalyta Barbosa</a>
</h4>

反馈内容错误