🐧 A desktop with a blog inside it — Deepin Linux rebuilt in Vue 2, with a terminal, a music player and markdown articles
A portfolio and blog wearing the Deepin Linux desktop. Windows open, move, resize and layer as they do on the real system, and the applications are not decorative: a toy terminal, a music player, a recursive file system and a blog whose articles are markdown files rendered in a window.
Everything is pre-rendered into /docs, so the whole desktop — blog included — is a static site hosted free on GitHub Pages.
Live: linux.dawidolko.pl
- A blog that lives in a window — articles are markdown files rendered by
markdown-it-vue, so writing a post means adding a file. - A toy terminal — commands, a prompt and a recursive file system behind it, rather than a static image of a shell.
- A music player —
vue-aplayerinside one of the windows. - Real window management — open, move, resize and layer, with the stacking order maintained.
- Pre-rendered to static files — the build lands in
/docs, which GitHub Pages serves directly. - A generator script —
generate.pyprepares the article index, so the blog does not need a backend to list itself.
| Technology | Version | Role |
|---|---|---|
| Vue.js | 2.6 | The desktop, the windows and the apps. |
| Vuetify | — | UI components. |
| Tailwind CSS | 2 | Styling of the Deepin shell. |
| Vue Router + Vuex | — | Routing and shared state. |
| Axios | 0.21 | Fetching article content. |
| markdown-it-vue | 1.1 | Rendering the blog posts. |
| vue-aplayer | 1.6 | The music player. |
- Node.js 14 or newer
- npm
git clone https://github.com/dawidolko/Linux-Simulaing-System-GUI.git
cd Linux-Simulaing-System-GUInpm installnpm run serve # development server at http://localhost:8080
npm run build # static build into docs/
npm run lint # ESLintLinux-Simulaing-System-GUI/
├── blog/ # markdown articles
├── generate.py # builds the article index
├── docs/ # the static build GitHub Pages serves
└── src/
├── App.vue # the desktop shell
├── components/ # windows, terminal, player, file system
├── router/ store/ # routing and state
├── network/ # article fetching
└── assets/
This is one of four desktop-simulator portfolios, each built on a different stack:
| Desktop | Stack | Live |
|---|---|---|
| Windows 10 | React + Fluent UI | windows.dawidolko.pl |
| Ubuntu 20.04 | Next.js + Tailwind CSS | ubuntu.dawidolko.pl |
| macOS | React + TypeScript + Vite | macos.dawidolko.pl |
| Deepin Linux | Vue 2 + Vuetify | linux.dawidolko.pl |
MIT © Dawid Olko