HTML作品集

portfolio-template (elmejiasg) — HTML 作品集模板

作者 elmejiasg

基于 HTML、CSS 和 JavaScript 的响应式个人作品集模板，支持中西双语切换、深浅色主题和通过 GitHub API 动态加载仓库。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

01

西班牙语与英语双语切换，文案集中在 lang/*.json 中维护

02

浅色与深色主题切换，由 theme.js 控制

03

通过 GitHub REST API 动态加载并展示仓库，数据来自 github.js

04

项目展示内容由 portfolio.config.json 配置，可自定义项目、技术与横幅

05

响应式布局，适配桌面端与移动端

06

采用 Apache-2.0 许可，允许免费使用、修改、商用和分发

模板详细介绍

这是一个纯静态的个人作品集模板，使用 HTML、CSS 和 JavaScript 编写，不依赖构建工具或后端服务。页面结构、样式和交互逻辑分别位于 index.html、CSS 与若干 JavaScript 文件中，项目展示数据由 portfolio.config.json 配置，界面文案存放在 lang/ 目录下的 JSON 文件里。模板内置西班牙语与英语切换、浅色/深色主题切换，并通过 GitHub REST API 动态拉取并渲染指定用户的仓库列表。

使用前需要把 github.js 和 i18n.js 中的 "YOUR GITHUB USER NAME" 替换为真实的 GitHub 用户名，否则仓库列表和部分语言相关逻辑无法正确加载。项目可部署到 GitHub Pages 或其他静态托管服务。模板基于作者本人的个人站点制作，演示地址即该站点的实际版本。

许可方面，仓库采用 Apache-2.0，允许免费使用、修改、商用和分发，分发时需随附许可证并保留版权与归属声明，修改过的文件需显著标明改动。代码之外的演示图片、字体、图标等第三方素材需单独核对其许可。

HTML作品集

适合你的项目吗？

适用场景

  • 个人开发者搭建展示自己 GitHub 仓库与技能的作品集页面
  • 需要中英或西英双语界面的个人站点
  • 希望以纯静态方式部署到 GitHub Pages 的简历或作品展示页
  • 作为学习 HTML、CSS、JavaScript 与 GitHub API 调用的参考项目

适合人群

  • 具备基础 HTML/CSS/JavaScript 编辑能力、能自行修改配置文件的开发者
  • 希望快速获得可自定义作品集页面结构的个人用户
  • 需要静态托管、不引入后端服务的展示型站点

上手与定制指南

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

  1. 1

    克隆或 fork 仓库：git clone https://github.com/elmejiasg/portfolio-template.git

  2. 2

    将 github.js 与 i18n.js 中的 "YOUR GITHUB USER NAME" 替换为自己的 GitHub 用户名

  3. 3

    在 portfolio.config.json 中配置要展示的项目、技术标签与横幅

  4. 4

    在 lang/*.json 中修改或新增界面翻译文案

  5. 5

    部署到 GitHub Pages 或其他静态托管服务

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

  • 允许免费使用、修改、商用和分发；分发时需随附 Apache-2.0 许可证。
  • 修改过的文件需显著标明改动，并保留相关版权、专利、商标及归属声明。
  • 若原项目附有 NOTICE 文件，分发衍生作品时需保留其中适用的归属声明。
  • 许可包含适用的贡献者专利授权；发起许可所述专利诉讼会终止该专利授权，且不授予商标使用权。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 Apache-2.0 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
  • 使用前必须将 github.js 和 i18n.js 中的 "YOUR GITHUB USER NAME" 替换为自己的 GitHub 用户名，否则仓库列表与部分语言相关逻辑无法正确加载。
  • 仓库列表通过 GitHub REST API 动态加载，依赖 GitHub 外部服务；若 API 不可用或触发速率限制，仓库展示功能会受影响。
  • 项目为纯静态模板，需部署到 GitHub Pages 或其他静态托管服务后才能访问。
查看原文依据

no-charge, royalty-free, irrevocable copyright license

许可证原文

Replace `"YOUR GITHUB USER NAME"` in `github.js` and `i18n.js` with your GitHub username.

README 原文

Dynamic loading of repositories via GitHub API

README 原文

Deploy on GitHub Pages or another static host.

README 原文
https://github.com/elmejiasg/portfolio-template/blob/main/LICENSEhttps://github.com/elmejiasg/portfolio-template/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料一般 · 74 / 100
技术栈
HTML
网站类型
作品集
这个分数如何计算

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

这个项目需要核对什么

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

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: 028550039b87f4e8f9a0396dbd43647ea647db12de49a31e3a316346b30a818f

2026-10-13T04:06:00.920Z

来源文件 / 仓库
# Portfolio Template / Plantilla de Portafolio

## EN English

A responsive personal portfolio template built with HTML, CSS, and JavaScript. Includes language switcher, GitHub API integration, and dark/light mode.

### Features
- Language switcher (Spanish / English)
- Light and dark mode toggle
- Dynamic loading of repositories via GitHub API
- Fully responsive and mobile-friendly
- Accessibility-friendly HTML structure

### Technologies
- HTML5
- CSS3
- JavaScript
- GitHub REST API

### Usage
1. Fork or clone this repository:
   `git clone https://github.com/elmejiasg/portfolio-template.git`

2. Customize the content:
   - `index.html`: structure and personal info
   - `portfolio.config`.json: configure your displayed projects, technologies, and banners
   - `lang/*.json`: translated texts
   - `github.js`: GitHub API logic
   - `i18n.js`: language switching
   - `theme.js`: theme toggle

3. Replace `"YOUR GITHUB USER NAME"` in `github.js` and `i18n.js` with your GitHub username.

4. Deploy on GitHub Pages or another static host.

### Live Demo
This portfolio template is based on my own personal site.

[View the live demo here](https://elmejiasg.github.io)  
(You can explore the real version using this template.)


### License
This project is licensed under the Apache 2.0 License.  
© 2025 Elena Mejías Gil. All rights reserved.

---

## 🇪🇸 Español

Plantilla de portafolio personal responsiva y accesible construida con HTML, CSS y JavaScript. Incluye soporte multilingüe, integración con la API de GitHub y cambio de modo claro/oscuro.

### Funcionalidades
- Cambio de idioma (Español / Inglés)
- Cambio entre modo claro y oscuro
- Carga dinámica de repositorios desde GitHub mediante la API de GitHub
- Totalmente responsive y adaptable a móviles
- Estructura HTML accesible

### Tecnologías
- HTML5
- CSS3
- JavaScript
- API REST de GitHub

### Uso
1. Haz un fork o clona este repositorio:
   `git clone https://github.com/elmejiasg/portfolio-template.git` 

2. Personaliza el contenido:
   - `index.html`: estructura y contenido
   - `portfolio.config.json`: configura los proyectos que se mostrarán, sus tecnologías y banners
   - `lang/*.json`: traducciones de idiomas
   - `github.js`: integración con la API de GitHub y renderizado de proyectos
   - `i18n.js`: lógica de cambio de idioma
   - `theme.js`: cambio entre modo claro y oscuro

3. Sustituye `"YOUR GITHUB USER NAME"` en los archivos `github.js` e `i18n.js` por tu nombre de usuario real de GitHub para que se carguen tus propios repositorios.

4. Sube el proyecto a GitHub Pages o a otro hosting estático.

### Demo en vivo
Esta plantilla está basada en mi propio portafolio personal.

[Ver demo en vivo aquí](https://elmejiasg.github.io)  
(Puedes explorar la versión real creada con esta plantilla.)


### Licencia
Este proyecto está bajo la Licencia Apache 2.0.  
© 2025 Elena Mejías Gil. Todos los derechos reservados.
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

simplefolio

simplefolio

⚡️ A minimal portfolio template for Developers

HTML · 作品集

Freelancer

Freelancer

Freelancer 是 Start Bootstrap 出品的单页作品集模板，专为自由职业者、设计师和小型工作室设计。 页面结构清晰，包含多个内容区块、响应式作品集网格，每个作品项目配有模态窗口展示详情。

HTML · 作品集

Resume

Resume

Resume 是 Start Bootstrap 推出的简历与 CV 主题，基于 Bootstrap 构建，采用固定侧边栏加内容区块的结构。

HTML · 作品集

Creative

Creative

Creative 是 Start Bootstrap 团队维护的一款单页营销模板，定位明确：为创意机构或产品服务提供一个以作品展示和行动号召为核心的落地页。

HTML · 企业官网

Grayscale

Grayscale

Grayscale 是 Start Bootstrap 出品的深色系单页 HTML 模板，基于 Bootstrap 构建。 它的视觉重心放在大尺寸首屏和清晰的内容分区上，整体氛围偏暗，适合摄影、活动或品牌叙事类网站。

HTML · 企业官网

startbootstrap-stylish-portfolio

startbootstrap-stylish-portfolio

Stylish Portfolio 是 Start Bootstrap 维护的单页作品集主题，基于 Bootstrap 构建，采用多个内容区块加离屏导航菜单的结构。

HTML · 作品集