Uses the macOS desktop as the interface framework, including a status bar, desktop widgets, and a Dock
SveltePortfolio
macOS-Themed-Portfolio — Svelte Portfolio Template
By ansxuman
A macOS-style interactive personal portfolio website built with SvelteKit, TailwindCSS, and TypeScript, bringing desktop, Dock, window, and other interface elements into the browser.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-02View source
What stands out
A quick read of the recorded project description.
Windows support dragging, resizing, minimizing, maximizing, and closing
Launchpad provides app-style content entry points
Built-in terminal, Dev.to blog reader, GitHub project showcase, photo gallery, and Safari browser window
Two types of desktop widgets: a music player and a clock
Built with SvelteKit, TailwindCSS, and TypeScript
Template Details
This is a personal portfolio template that uses the macOS desktop as a visual metaphor. The page organizes portfolio content into a desktop environment: a top status bar, desktop widgets, and a bottom Dock form the main interface, Launchpad provides app-like entry points, and content is presented in windows that can be dragged, resized, minimized, maximized, and closed.
The template includes several "apps": a terminal that provides an interactive command line and supports some Linux commands; a blog reader connected to Dev.to that lets you read articles directly within a window; a project showcase that pulls in GitHub repository data; a photo gallery for displaying personal photography; and a Safari browser window for browsing the web inside the portfolio. Desktop widgets include a royalty-free music player with playback controls, genre selection, and volume adjustment, plus a clock showing the real-time date and time.
The tech stack is SvelteKit + TailwindCSS + TypeScript, and the development server runs on port 1111 by default. The Dev.to article feature requires DEV_TO_API_KEY to be configured in .env in order to work; the remaining demo content depends on external data sources, and you should verify their availability before use. The project is under the Apache-2.0 license, and the repository does not state production readiness.
SveltePortfolio
Is it right for your project?
Use Cases
- Individual developers creating a stylized online portfolio
- Front-end learners studying the implementation of window management and drag interactions in SvelteKit
- Displaying blog posts, GitHub projects, and photography in a single page
- As a starting point for interaction experiments with a macOS skeuomorphic interface
Suitable For
- Developers who want a portfolio with strong interactivity and a clear visual theme
- Front-end users who are familiar with or willing to learn SvelteKit and TailwindCSS
- Personal sites that need to aggregate multiple content sources (Dev.to, GitHub, local images) into a single page
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
After cloning the repository, run npm install to install dependencies, then npm run dev to start the development server, accessible by default at http://localhost:1111
- 2
Use npm run build for a production build
- 3
The Dev.to article feature requires DEV_TO_API_KEY to be configured in a .env file
- 4
The availability of external data sources and demo assets such as music, blogs, and GitHub must be confirmed by yourself
- 5
When distributing or modifying, you must comply with the Apache-2.0 license and retain the license and attribution notices
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis listing covers the free version under the Apache-2.0 license in the public repository; the free scope is the code for that version and does not mean that external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution are permitted; when distributing, you must include the Apache-2.0 license.
- Modified files must be prominently marked as changed, and relevant copyright, patent, trademark, and attribution notices must be retained.
- If the original project includes a NOTICE file, you must retain the applicable attribution notices in it when distributing derivative works.
- The license includes an applicable contributor patent grant; initiating patent litigation as described in the license terminates that patent grant, and no trademark rights are granted.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- The Dev.to blog reader feature requires you to apply for and configure DEV_TO_API_KEY to display articles properly; without configuration, the feature is unavailable.
- The blog reader depends on the external Dev.to service, requires network access and a valid API key, and service availability is determined by the third party.
- The project showcase depends on the external GitHub API to fetch repository data and is affected by GitHub service availability and access restrictions.
- The Safari browser window embeds web pages, and actual usability is limited by whether the target site allows embedding (such as X-Frame-Options).
- The photo gallery uses the author's personal photography assets; the licensing status of these images is not stated in the README, so you must confirm it yourself before replacing or redistributing them.
- The music player uses a royalty-free playlist, but the specific track sources and licensing are not listed in the README, so you must verify them yourself before commercial use.
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; you cannot judge based solely on the code's Apache-2.0 license.
- External services such as domains, hosting, databases, payments, or AI may incur additional fees.
View Original Text Basis
no-charge, royalty-free, irrevocable copyright license
Original License Text
To make the dev.to article work,update API Key in the .env file
Original README
Connected to Dev.to
Original README
Live GitHub repository integration
Original README
Browse websites within the portfolio
Original README
Personal photography collection
Original README
https://github.com/ansxuman/macOS-Themed-Portfolio/blob/main/LICENSEhttps://github.com/ansxuman/macOS-Themed-Portfolio/blob/main/README.mdCopyright Free playlist with play controls
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 87 / 100
- Technologies
- Svelte
- Website type
- Portfolio
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-04-29
- Screenshot last checked
- 2026-10-02
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Svelte as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: 213e63674af6e49f0352a5d6421028a61d7af9ea4dd049faffd4326d3e75c911
2026-10-02T08:32:32.570Z
Source file / repository<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>  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).
Explore similar templates
Compare previews and descriptions within the same stack and category.
portfolio-template
A minimalist developer portfolio template built with SvelteKit, TypeScript, shadcn-svelte, and TailwindCSS, inspired by Magic UI and Dillion Verma. Personal information and experience data are centralized in a single src/lib/data/resume.ts file, so editing that file completes the basic setup.
Svelte · Portfolio
sveltekit-mdsvex-blog-template
A SvelteKit and MDsveX blog starter for Markdown writing with embedded Svelte components, Tailwind CSS typography, tags, dark mode, SEO metadata, and Cloudflare Workers deployment configuration. Requires Node.js 22.12+ and pnpm 11.17.0; third-party demo assets need separate license verification.
Svelte · Portfolio
portfolio
A SvelteKit personal portfolio template using Svelte, shadcn-svelte (Mira), and Tailwind CSS, targeting Cloudflare Workers. It offers a configurable homepage, local .svx articles with pnpm post:new drafts, external publications, a GitHub contribution graph, and a contact form with Resend and Turnstile.
Svelte · Portfolio
Game-Presskit-Template
A static presskit template for indie game developers, built with Svelte. It manages game information, media, team, reviews, and press materials through multiple JSON files under public/data/, with each file providing an enabled field to control section display.
Svelte · Portfolio
Svelte-Portfolio
A responsive personal portfolio template built with Svelte, offering dark and light modes and simple configuration. The README states it is fully responsive and easy to configure, with an example site and preview screenshots.
Svelte · Portfolio
sveltefolio
SvelteFolio is a single-page personal portfolio template built with Svelte and ported from Saad Pasta's developerFolio. It provides dark mode, show/hide toggles for components and navigation, GitHub API data fetching, AOS scroll animations, Font Awesome icons, and Undraw illustrations.
Svelte · Portfolio