ZVIOLIN
PROJ-06
PROJ-06 Frontend 维护中

Web 小项目集

GitHub Pages 部署的前端小项目合集

独立开发的 4 个 GitHub Pages 前端小项目合集：方言可视化地图、图片轮播、Unity WebGL 交互与节日动效网页，全部在线可访问，覆盖原生 JS、地图 API 与 WebGL 嵌入场景。

HTML5CSS3JavaScriptGitHub PagesVercel
★ 1 Stars
公开访问 用户
LCP < 2s 性能
2025 年份
查看源码 返回列表
web-projects.json 
{
  "id": "web-projects",
  "title": "Web 小项目集",
  "type": "Frontend",
  "year": "2025",
  "status": "maintenance",
  "category": "前端小项目",
  "tech": ["HTML5", "CSS3", "JavaScript", "GitHub Pages", "Vercel"],
  "github": "https://github.com/Zviolin"
}
01

项目概述

独立开发的 4 个 GitHub Pages 前端小项目合集：方言可视化地图、图片轮播、Unity WebGL 交互与节日动效网页，全部在线可访问，覆盖原生 JS、地图 API 与 WebGL 嵌入场景。

02

核心特性

🚀

一键部署 — 所有项目均通过 GitHub Pages 自动部署，推送即上线

🌐

在线可访问 — 每个项目都有独立的 GitHub Pages 在线地址，可直接访问体验

📱

响应式设计 — 适配桌面端和移动端，随时随地浏览

🔧

轻量纯前端 — 无需后端服务，纯 HTML/CSS/JS 实现，加载快速

03

技术架构

前端
HTML5 + CSS3 + 原生 JavaScript
部署
GitHub Pages + Vercel 静态托管
版本管理
Git + GitHub
04

性能指标

项目数量 4个
已部署 4/4
总 Stars 1
平均加载 < 2s
05

项目结构

project-structure 
Web-Projects/
├── DialectMap/          # 方言地图
│   ├── index.html
│   ├── css/
│   ├── js/
│   └── assets/
├── PictureShow/        # 图片展示
│   ├── index.html
│   ├── css/
│   └── js/
├── unity-xier/         # Unity 交互
│   ├── index.html
│   └── assets/
├── Thanksgiving_Web/    # 感恩节网页
│   ├── index.html
│   ├── css/
│   └── js/
└── (各项目独立 GitHub 仓库)
06

子项目列表

DialectMap - 方言地图

中国方言可视化与交互平台，支持方言区域浏览、语音对比和数据探索

HTML5CSS3JavaScriptMap API
源码 在线访问

PictureShow - 图片展示

图片轮播展示应用，支持多种切换效果和响应式布局

JavaScriptHTML5CSS3
源码 在线访问

unity-xier - Unity 交互

基于 HTML 的 Unity 交互展示页面，嵌入 Unity WebGL 内容

HTML5Unity WebGLJavaScript
源码 在线访问

Thanksgiving_Web - 感恩节网页

感恩节主题互动网页，包含动画效果和节日内容展示

HTML5CSS3JavaScript
源码 在线访问
07

详细说明

项目概述

这是一组部署在 GitHub Pages 上的前端小项目合集。每个项目都是独立的 GitHub 仓库，通过 GitHub Pages 自动部署，可在线访问。

这些项目涵盖了数据可视化、图片展示、Unity WebGL 交互和节日主题网页等多种类型，展示了前端开发的不同方向和实践。全部项目由本人独立设计与开发，覆盖原生 JS 交互、地图 API 集成、Unity WebGL 嵌入等场景，并熟悉 GitHub Pages / Vercel 双平台静态部署流程。

子项目列表

1. DialectMap - 方言地图

中国各地方言区域可视化展示，支持交互式地图浏览、语音对比试听和数据探索。综合运用地图 API 集成、音频交互与区域数据组织能力，是合集中唯一获得外部 star 的项目。

2. PictureShow - 图片展示

图片轮播展示应用，支持多种切换效果和响应式布局，实践轮播逻辑的组件化封装与移动端适配。

3. unity-xier - Unity 交互

基于 HTML 的 Unity 交互展示页面，嵌入 Unity WebGL 内容，实践 WebGL 构建产物在网页端的加载与 3D 交互能力展示。

4. Thanksgiving_Web - 感恩节网页

感恩节主题互动网页，包含动画效果和节日内容展示，实践纯前端 CSS 动画的实现与页面动效编排。

部署方式

所有项目均通过 GitHub Pages 自动部署：

  1. 推送代码到 GitHub 仓库
  2. 在仓库 Settings → Pages 中启用 GitHub Pages
  3. GitHub 自动构建并部署到 https://Zviolin.github.io/{仓库名}/

部分项目同时部署在 Vercel 上作为备用访问地址。

技术特点

  • 纯前端实现：无需后端服务，所有逻辑在浏览器端运行
  • 轻量级：每个项目体积小，加载速度快
  • 响应式：适配桌面端和移动端
  • 独立部署：每个项目独立仓库、独立部署、独立访问