HTML作品集

personal-portfolio-website — HTML 作品集模板

作者 yucezis

一个面向 .NET 与 Flutter 方向的初级全栈开发者个人作品集，使用原生 HTML/CSS/JavaScript 构建，支持英土双语切换与深浅主题，用于展示技术项目、工程背景与实习意向。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图

桌面端首页1 / 2

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

桌面端截图首屏预览

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

纯 HTML/CSS/原生 JavaScript 实现，不依赖前端框架

内置英土双语切换，国际化逻辑不依赖外部库

深色与浅色两套主题，深色以深酒红与碳黑为基调

使用 CSS Grid 与 Flexbox 实现响应式布局

设有 Articles 区域展示 Medium 技术文章，并提供 CV 下载入口

代码按 index.html、style.css、script.js 与 assets 目录组织

模板详细介绍

该模板是开发者 Zişan Yüce 的个人作品集网站源码，采用纯 HTML、CSS 与原生 JavaScript 实现，不依赖前端框架。页面结构围绕求职场景组织：介绍工程背景与职业目标，列出 ZenBudget、Books、Pixel Processor、NBA Predictor 等项目，并设有 Articles 区域用于展示 Medium 上的技术文章，同时提供 CV 下载入口。

视觉上提供深色与浅色两套主题，深色主题以深酒红与碳黑为基调；排版使用 Google Fonts 的 DM Serif Display 与 DM Sans。站点内置英土双语切换，语言逻辑由自定义脚本实现，不引入外部国际化库。布局使用 CSS Grid 与 Flexbox，适配桌面与移动端。

代码按 Clean Architecture 思路拆分为 index.html、style.css、script.js 与 assets 目录。仓库采用 MIT 许可，可免费使用、修改与分发，但演示图片、字体、图标等第三方素材需单独核对许可；域名、托管等外部服务可能产生费用。

HTML作品集

适合你的项目吗？

适用场景

开发者展示个人技术项目与工程背景的求职作品集
需要英土双语切换的个人网站场景
希望以原生 JavaScript 实现主题切换与语言切换的参考实现
展示 Medium 技术文章并提供简历下载的求职页面

适合人群

正在寻找实习或初级岗位的全栈开发者
偏好无框架、纯静态前端实现的作品集需求
需要英土双语支持的个人网站
希望参考原生 JS 国际化与主题切换写法的开发者

上手与定制指南

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

1
克隆仓库后可直接用浏览器打开 index.html，或在 VS Code 中使用 Live Server 启动
2
页面使用 Google Fonts 的 DM Serif Display 与 DM Sans，需联网加载字体
3
CV 等 PDF 文件需放入 assets 目录并确认链接路径正确
4
演示图片、字体、图标等第三方素材需按各自许可单独核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
页面排版依赖 Google Fonts 的 DM Serif Display 与 DM Sans，需联网从 Google 服务器加载字体，离线环境下字体将回退，且使用该字体服务需遵守 Google Fonts 自身的许可与条款。
README 指向的在线演示部署在 Vercel 上，若自行部署到 Vercel 等托管平台，可能受其免费额度与使用条款约束，超出免费额度可能产生费用。
Articles 区域用于展示 Medium 上的文章，实际使用时需自行提供 Medium 账号与文章链接，Medium 平台本身有其独立的使用条款与内容政策。

查看原文依据

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

- **Google Fonts** – Utilizing *DM Serif Display* and *DM Sans* for a sophisticated typographic feel
README 原文

💫 **Check out the live portfolio here:** [Click here to visit](https://zisan-yuce.vercel.app/)
README 原文

A dedicated **"Articles"** section to display my Medium publications and technical insights on .NET and Flutter.
README 原文

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

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

项目核对记录与介绍依据

模板资料

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

这个分数如何计算

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

这个项目需要核对什么

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

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: c3374f49b8f0240f7e71f52d7620faeb5876abb11ae6d6c199697b026fe70fa9

2026-10-13T09:02:54.708Z

来源文件 / 仓库

# ✨ Full-Stack Developer Portfolio – Zişan Yüce

Welcome to my personal portfolio project! This repository contains the source code for my portfolio website, designed to showcase my journey as a **Junior Full-Stack Developer** specializing in **.NET** and **Flutter**.

The project is built with a focus on **Clean Architecture principles**, **maintainability**, and a unique **Dark Academia aesthetic**.

---
💫 **Check out the live portfolio here:** [Click here to visit](https://zisan-yuce.vercel.app/)

---


## Key Features

- **Goal-Oriented Design**  
  Specifically tailored to showcase my technical projects, engineering background, and mandatory internship availability.

- **Advanced Theme Switcher**  
  Features a custom-designed Dark Mode inspired by *90s Grunge* and *Dark Academia* aesthetics (**Deep Burgundy & Carbon Black**) and a clean, professional Light Mode.

- **Multilingual Support (i18n)**  
  The architecture is prepared for multiple language options (**English** and **Turkish**) to cater to both local and global opportunities.

- **Fully Responsive**  
  Optimized for all screen sizes, from large desktop monitors to mobile devices, using modern **CSS Grid** and **Flexbox** layouts.

- **Technical Writing Showcase**  
  A dedicated **"Articles"** section to display my Medium publications and technical insights on .NET and Flutter.

- **Direct CV Access**  
  Integrated **"Download CV"** functionality for quick access by recruiters.

---

## Tech Stack

### Frontend
- **HTML5 & CSS3** – Semantic markup and custom CSS variables for theme management  
- **Vanilla JavaScript** – Lightweight and efficient DOM manipulation for animations and theme logic  
- **Google Fonts** – Utilizing *DM Serif Display* and *DM Sans* for a sophisticated typographic feel  

---

## Projects Showcased

- **ZenBudget**  
  A fintech mobile app built with **Flutter** & **.NET Core**

- **Books**  
  An **E-commerce suite** (Graduation Project)

- **Pixel Processor**  
  Algorithmic image processing in **C#**

- **NBA Predictor**  
  Machine Learning analysis using **Python**

---

## Project Structure

Following the **Clean Architecture** philosophy, the project is organized into modular and maintainable files:
```
my-portfolio/
│
├── index.html # Semantic structure and content
├── style.css # Design tokens, themes (Dark/Light), and layouts
├── script.js # Interaction logic, animations, and theme persistence
├── assets/ # Images, icons, and PDF documents (CV)
└── README.md # Documentation
```

---

## Getting Started

To run the project locally:

### 1. Clone the repository
```bash
git clone https://github.com/yucezis/my-portfolio.git
```

## Getting Started

### 2. Open with a local server

- **If using VS Code:**  
  Right-click `index.html` → **"Open with Live Server"**

- **Or simply:**  
  Open `index.html` in your favorite browser

---

## Contact & Socials

- **Email:** [email protected]  
- **LinkedIn:** https://linkedin.com/in/zisanyuce  
- **Medium:** @yucezisan  
- **GitHub:** https://github.com/yucezis  

---

## Author

Crafted with care by **Zişan Yüce** © 2026

反馈内容错误