HTML作品集

Portfolio-Mobile-First-Skeleton — HTML 作品集模板

作者 Luffytaro22

基于 Figma 模板复刻的移动优先作品集页面骨架，使用 HTML 与 CSS 构建，含在线演示。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图

桌面端首页1 / 2

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

桌面端截图首屏预览

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

参照 Figma 设计稿复刻的作品集页面布局

采用移动优先的响应式写法，从 375px 宽度起适配

仅使用 HTML 与 CSS，无构建步骤和框架依赖

提供 GitHub Pages 在线演示可直接查看效果

MIT 许可，允许使用、修改、商用与分发

模板详细介绍

这是一个作品集页面模板，作者的目标是参照一份 Figma 设计稿，用移动优先（Mobile First）的方式复刻出页面布局。项目定位为作者未来个人作品集的页面骨架，而非完整成品。

技术栈为 HTML 与 CSS，仓库中没有构建工具或框架依赖。README 列出的关键特性包括多平台支持、移动优先和现代界面，并说明运行环境只需网络连接和宽度至少 375px 的设备。

README 的 Future Features 部分列出了尚未实现的内容：菜单弹窗、更优化的显示效果、更易读的 CSS 代码。也就是说，当前版本在交互与代码组织上仍属早期阶段。仓库采用 MIT 许可，可免费使用、修改、商用与分发，但演示中的图片、字体、图标等第三方素材需另行核对各自许可。

HTML作品集

适合你的项目吗？

适用场景

作为个人作品集页面的起始骨架，在其上填充自己的内容
学习移动优先布局与响应式 CSS 的练习参考
对照 Figma 设计稿进行 HTML/CSS 还原的示例

适合人群

需要轻量 HTML/CSS 作品集起点的前端初学者
想研究移动优先实现方式的学习者
希望以 MIT 许可自由修改代码的开发者

上手与定制指南

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

1
使用 git clone 将仓库克隆到本地文件夹
2
运行环境只需网络连接，以及宽度至少 375px 的设备
3
README 未提供安装、测试与本地启动命令，直接打开 HTML 文件即可查看
4
README 列出的菜单弹窗、显示优化与 CSS 可读性改进尚未实现

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

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

查看原文依据

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

https://github.com/Luffytaro22/Portfolio-Mobile-First-Skeleton/blob/main/LICENSE https://github.com/Luffytaro22/Portfolio-Mobile-First-Skeleton/blob/main/readme.md

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

项目核对记录与介绍依据

模板资料

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

这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间: 2023-10-20
截图检查日期: 2026-10-02

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: 3d44a0240c4e2363b4aa2b107da54ec17ee7ae6b00a9522f74655bcadb61ca7b

2026-10-02T17:33:25.842Z

来源文件 / 仓库

<a id="readme-top"></a>

<!-- TABLE OF CONTENTS -->

<details>
  <summary><h1>📗 Table of Contents</h1></summary>
  <ul>
    <li><a href="#about-project">📖 About the Project</a>
      <ul>
        <li><a href="#built-with">🛠 Built With</a></li>
        <li><a href="#tech-stack">Tech Stack</a></li>
        <li><a href="#key-features">Key Features</a></li>
      </ul>
    </li>
    <li><a href="#live-demo">🚀 Live Demo</a></li>
    <li><a href="#getting-started">💻 Getting Started</a>
      <ul>
        <li><a href="#setup">Setup</a></li>
        <li><a href="#prerequisites">Prerequisites</a></li>
        <li><a href="#install">Install</a></li>
        <li><a href="#usage">Usage</a></li>
        <li><a href="#run-tests">Run tests</a></li>
        <li><a href="#deployment">Deployment</a></li>
      </ul>
    </li>
    <li><a href="#authors">👥 Authors</a></li>
    <li><a href="#future-features">🔭 Future Features</a></li>
    <li><a href="#contributing">🤝 Contributing</a></li>
    <li><a href="#support">⭐️ Show your support</a></li>
    <li><a href="#acknowledgements">🙏 Acknowledgements</a></li>
    <li><a href="#license">📝 License</a></li>
  </ul>
</details>

<!-- PROJECT DESCRIPTION -->

# 📖 Portfolio: setup and mobile first <a id="about-project"></a>

**Portfolio: setup and mobile first** is a layout for my future portfolio using Mobile First Responsive Desgin.

## 🛠 Built With <a id="built-with"></a>

### Tech Stack

* HTML
* CSS

<!-- Features -->

### Key Features
* Multiple Platform's Supportive.
* Mobile First.
* Modern and attractive Interface.
<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- LIVE DEMO -->

## 🚀 Live Demo <a id="live-demo"></a>
* [Live Demo Link](https://luffytaro22.github.io/Portfolio-Mobile-First-Skeleton/)

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- GETTING STARTED -->

## 💻 Getting Started <a id="getting-started"></a>

### Prerequisites
In order to run this project you need:
* Internet connection.
* Any device with a width of at least 375px.

### Setup
To clone this repository to your desired folder, run the following command: <br>

```
git clone https://github.com/Luffytaro22/Portfolio-Mobile-First-Skeleton.git
```


### Deployment
You can deploy this project with [This Link](https://luffytaro22.github.io/Portfolio-Mobile-First-Skeleton/)


<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- AUTHORS -->

## 👥 Authors <a id="authors"></a>

👤 **Manuel Sánchez**

- GitHub: [@githubhandle](https://github.com/Luffytaro22)
- LinkedIn: [LinkedIn](https://www.linkedin.com/in/manuel-alejandro-sanchez-sierra-4b358b14a/)
- Twitter: [@twitterhandle](https://twitter.com/Luffytaro_san22)

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- FUTURE FEATURES -->

## 🔭 Future Features <a id="future-features"></a>
* A pop-up for the menu.
* A more optimized display.
* More readable CSS code.
<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- CONTRIBUTING -->

## 🤝 Contributing <a id="contributing"></a>

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](../../issues/).

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- SUPPORT -->

## ⭐️ Show your support <a id="support"></a>
If you like this project please give it a star ⭐️

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- ACKNOWLEDGEMENTS -->

## 🙏 Acknowledgments <a id="acknowledgements"></a>

I would like to give credits to the following:
* **Microverse** for this readme template.

<p align="right">(<a href="#readme-top">back to top</a>)</p>

<!-- LICENSE -->

## 📝 License <a id="license"></a>

This project is [MIT](./LICENSE) licensed.

<p align="right">(<a href="#readme-top">back to top</a>)</p>

反馈内容错误