HTML作品集

portfolio-website — HTML 作品集模板

作者 kajalbaraiya

一个使用原生 HTML、CSS 和 JavaScript 构建的单页个人作品集网站，包含浅色/深色主题、移动端导航菜单和项目展示卡片，可部署到 GitHub Pages。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图

桌面端首页1 / 2

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

桌面端截图首屏预览

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

整站 HTML、CSS、JavaScript 集中在单个 index.html 文件中，无构建步骤和依赖

浅色/深色主题切换，选择保存在 localStorage 并默认跟随设备设置

小屏幕下折叠为汉堡菜单的响应式导航

粘性导航栏配合区块链接与平滑滚动

项目卡片包含技术标签、演示链接和悬停效果

提供简历下载按钮和自动更新的页脚年份

模板详细介绍

这是一个单页个人作品集模板，整站代码集中在 index.html 一个文件中，不依赖构建工具或第三方库。README 说明页面包含 Home、About、Skills、Projects、Contact 五个区块，并提供浅色/深色主题切换（选择保存在 localStorage，默认跟随设备设置）、小屏幕下的汉堡菜单、带区块链接的粘性导航栏与平滑滚动、带技术标签和演示链接的项目卡片、简历下载按钮以及自动更新的页脚年份。

技术栈方面，README 列出结构使用 HTML5，样式使用 CSS3（Grid、Flexbox、CSS 变量、媒体查询），行为使用原生 JavaScript，托管使用 GitHub Pages。项目结构只有 index.html、resume.pdf 和 README.md 三个文件。

README 提供了自定义说明：在 index.html 中修改姓名、简介和关于文本；通过 style 块顶部的 CSS 变量（如 --accent、--bg）调整颜色，深色模式颜色位于 :root[data-theme="dark"]；在 Skills 区增删 <span class="tag"> 项；复制 .card 块并更新标题、描述、标签和链接来添加项目；用同名文件替换 resume.pdf；更新 Contact 区的邮箱、LinkedIn 和 GitHub 链接。

README 未说明浏览器兼容范围、可访问性支持、性能表现或除 GitHub Pages 之外的其他部署方式。

HTML作品集

适合你的项目吗？

适用场景

个人开发者搭建单页作品集展示技能与项目
作为学习原生 HTML/CSS/JavaScript 的参考项目
通过 GitHub Pages 免费发布静态个人主页

适合人群

希望用纯 HTML/CSS/JavaScript 维护个人主页的开发者
需要快速替换文字、颜色和项目内容的自定义需求者
使用 GitHub Pages 托管静态站点的用户

上手与定制指南

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

1
克隆仓库：git clone https://github.com/kajalbaraiya/portfolio-website.git
2
进入目录后直接用浏览器打开 index.html，无需构建步骤或安装依赖
3
部署到 GitHub Pages：推送仓库后在 Settings → Pages 中选择 main 分支和 / (root) 文件夹并保存
4
替换 resume.pdf 时需保持文件名不变，否则下载按钮会失效

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

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

https://github.com/kajalbaraiya/portfolio-website/blob/main/LICENSE https://github.com/kajalbaraiya/portfolio-website/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

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

这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间: 2026-10-14
截图检查日期: 2026-10-15

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

审核声明: codex-user-requested-batch-review-20261017 · 2026-10-16

查看当时使用的来源资料

SHA-256: e075fde00ec488684ea9952e2468a6a42d1a2048eeea23d44f78035c63f94deb

2026-10-15T09:19:36.158Z

来源文件 / 仓库

# Portfolio Website

A responsive, single-page personal portfolio built with plain HTML, CSS, and JavaScript. It introduces me, lists my skills, and showcases my projects, with a light/dark theme and a mobile-friendly navigation menu.

**Live Demo:** 

---

## Features

- **Responsive layout** – works on mobile, tablet, and desktop
- **Light / Dark theme** – toggle button that remembers your choice (saved in `localStorage`) and defaults to your device setting
- **Mobile hamburger menu** – collapses the navigation on small screens
- **Smooth scrolling** – sticky navbar with section links
- **Sections** – Home, About, Skills, Projects, Contact
- **Project cards** – tech tags and live demo links with hover effects
- **Downloadable resume** – one-click resume download button
- **Auto-updating footer year**

## Tech Stack

| Area | Technology |
| --- | --- |
| Structure | HTML5 |
| Styling | CSS3 (Grid, Flexbox, CSS variables, media queries) |
| Behavior | Vanilla JavaScript |
| Hosting | GitHub Pages |

## Project Structure

```
portfolio-website/
├── index.html      # Entire site (HTML, CSS, JS in one file)
├── resume.pdf      # Resume used by the "Download Resume" button
└── README.md
```

## Getting Started

1. **Clone the repository**
   ```bash
   git clone https://github.com/kajalbaraiya/portfolio-website.git
   ```
2. **Open the folder**
   ```bash
   cd portfolio-website
   ```
3. **Run it** – open `index.html` in your browser (no build step or dependencies needed).

## Customization

- **Name, intro, and about text** – edit the content inside `index.html`.
- **Colors** – change the CSS variables at the top of the `<style>` block (`--accent`, `--bg`, etc.). Dark mode colors are under `:root[data-theme="dark"]`.
- **Skills** – add or remove `<span class="tag">` items in the Skills section.
- **Projects** – duplicate a `.card` block and update the title, description, tags, and link.
- **Resume** – replace `resume.pdf` with your own file (keep the same name).
- **Social links** – update the email, LinkedIn, and GitHub links in the Contact section.

## Deployment (GitHub Pages)

1. Push the project to a GitHub repository.
2. Go to **Settings → Pages**.
3. Under **Source**, select the `main` branch and the `/ (root)` folder, then save.
4. Your site will be live at `https://<your-username>.github.io/<repository-name>/`.

## Projects Featured

- **Portfolio Website** – this site
- **Pet-Heaven** – pet adoption website
- **Cognitive Twin** – AI assistant for solving simple coding problems (in progress)

## Contact

- Email: [email protected]
- LinkedIn: https://www.linkedin.com/in/kajal-baraiya-761862419
- GitHub: https://github.com/kajalbaraiya

---

© Kajal Baraiya. All rights reserved.

反馈内容错误