Svelte作品集

macOS-Themed-Portfolio — Svelte 作品集模板

作者 ansxuman

基于 SvelteKit、TailwindCSS 与 TypeScript 构建的 macOS 风格交互式个人作品集网站，把桌面、Dock、窗口等界面元素搬进浏览器。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图

桌面端首页1 / 2

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

桌面端截图首屏预览

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

以 macOS 桌面为界面框架，包含状态栏、桌面小组件与 Dock

窗口支持拖拽、缩放、最小化、最大化和关闭

Launchpad 提供应用式的内容入口

内置终端、Dev.to 博客阅读器、GitHub 项目展示、照片画廊和 Safari 浏览器窗口

音乐播放器与时钟两类桌面小组件

使用 SvelteKit、TailwindCSS 和 TypeScript 构建

模板详细介绍

这是一个以 macOS 桌面为视觉隐喻的个人作品集模板。页面把作品集内容组织成一套桌面环境：顶部状态栏、桌面小组件和底部 Dock 构成主界面，Launchpad 提供类似应用的入口，内容则以可拖拽、可缩放、可最小化/最大化/关闭的窗口形式呈现。

模板内置若干“应用”：终端提供交互式命令行并支持部分 Linux 命令；博客阅读器连接 Dev.to，可在窗口内直接阅读文章；项目展示区接入 GitHub 仓库数据；照片画廊用于陈列个人摄影；Safari 浏览器窗口可在作品集内部浏览网页。桌面小组件包含带播放控制、流派选择与音量调节的免版权音乐播放器，以及显示实时日期时间的时钟。

技术栈为 SvelteKit + TailwindCSS + TypeScript，开发服务器默认运行在 1111 端口。Dev.to 文章功能需要在 .env 中配置 DEV_TO_API_KEY 才能工作，其余演示内容依赖外部数据源，使用前需自行核对可用性。项目采用 Apache-2.0 许可，仓库未声明生产就绪程度。

Svelte作品集

适合你的项目吗？

适用场景

个人开发者制作风格化的在线作品集
前端学习者参考 SvelteKit 中窗口管理与拖拽交互的实现
把博客、GitHub 项目和摄影作品集中在一个页面展示
作为 macOS 拟物界面交互实验的起点

适合人群

希望作品集有强交互和明确视觉主题的开发者
熟悉或愿意学习 SvelteKit 与 TailwindCSS 的前端使用者
需要把多个内容源（Dev.to、GitHub、本地图片）聚合到单一页面的个人站点

上手与定制指南

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

1
克隆仓库后执行 npm install 安装依赖，npm run dev 启动开发服务器，默认访问 http://localhost:1111
2
生产构建使用 npm run build
3
Dev.to 文章功能需要在 .env 文件中配置 DEV_TO_API_KEY
4
音乐、博客、GitHub 等外部数据源与演示素材的可用性需自行确认
5
分发或修改时需遵守 Apache-2.0 许可，保留许可证与归属声明

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

Dev.to 博客阅读器功能需要自行申请并配置 DEV_TO_API_KEY 才能正常显示文章，未配置时该功能不可用。
博客阅读器依赖 Dev.to 外部服务，需要网络访问与有效 API Key，服务可用性由第三方决定。
项目展示区依赖 GitHub 外部接口获取仓库数据，受 GitHub 服务可用性与访问限制影响。
Safari 浏览器窗口内嵌浏览网页，实际可用性受目标站点是否允许被嵌入（如 X-Frame-Options）限制。
照片画廊使用作者个人摄影素材，这些图片的授权情况未在 README 中说明，替换或再分发前需自行确认。
音乐播放器使用免版权播放列表，但具体曲目来源与授权未在 README 中列明，商用前需自行核实。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 Apache-2.0 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

no-charge, royalty-free, irrevocable copyright license
许可证原文

To make the dev.to article work,update API Key in the .env file
README 原文

Connected to Dev.to
README 原文

Live GitHub repository integration
README 原文

Browse websites within the portfolio
README 原文

Personal photography collection
README 原文

Copyright Free playlist with play controls
README 原文

https://github.com/ansxuman/macOS-Themed-Portfolio/blob/main/LICENSE https://github.com/ansxuman/macOS-Themed-Portfolio/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

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

这个分数如何计算

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

这个项目需要核对什么

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

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: 213e63674af6e49f0352a5d6421028a61d7af9ea4dd049faffd4326d3e75c911

2026-10-02T08:32:32.570Z

来源文件 / 仓库

<h1 align="center">
 macOS-Themed Portfolio
</h1>

  <br>

A unique, interactive portfolio website inspired by the macOS interface : https://ssh-i.in || https://macosportfolio.netlify.app
<p align="center">
  <a href="#projectoverview">ProjectOverview</a> •
  <a href="#installation">Installation</a> •
  <a href="#contributing">Contributing</a> •
  <a href="#license">License</a> •
</p>

![macOS-Themed Portfolio](https://github.com/user-attachments/assets/2859e409-c4d2-47ce-a810-885c01cddd83)
  Powered by [SvelteKit](https://kit.svelte.dev/), [TailwindCSS](https://tailwindcss.com/) and [TypeScript](https://www.typescriptlang.org/).


## ProjectOverview

This project is a personal portfolio website that mimics the look and feel of macOS. It features:

## Core Features
- A desktop-like interface with Status Bar, Widgets and Dock
- Launchpad for an app-like experience
- Draggable and resizable windows
- Minimizable, maximizable and closable windows

## Desktop Widgets
- Music Player
  - Copyright Free playlist with play controls
  - Genre selection and volume control
- Clock Widget
  - Live date and time display

## Applications
- Terminal
  - Interactive command-line interface
  - Supports basic Linux commands
- Blog Viewer
  - Connected to Dev.to
  - Read articles directly in the window
- Project Showcase
  - Live GitHub repository integration
- Photo Gallery
  - Personal photography collection
- Safari Browser
  - Browse websites within the portfolio

## installation

Clone the repo:
   ```bash
   git clone https://github.com/ansxuman/macOS-Themed-Portfolio/
   ```

Install dependencies:
   ```bash
   npm install
   ```
Run the development server:
   ```bash
   npm run dev
   ```
Open http://localhost:1111 in your browser to see the result.

Build for production:
   ```bash
   npm run build
   ```

To make the dev.to article work,update API Key in the .env file
   ```bash
   DEV_TO_API_KEY=<YOUR_API_KEY>
   ```
## Contributing

Contributions are what make the open-source community an incredible space for learning, inspiration, and creativity. Any contribution you make is deeply appreciated.

1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

## Donations

If you find this content useful, please consider donating to support its development and future improvements.

<a href="https://buymeacoffee.com/ansxuman" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>



## License

This project is licensed under the [Apache-2.0 license](LICENSE).

反馈内容错误