Skip to content

dawidolko/Macos-Simulaing-System-GUI

Repository files navigation

🍏 macos.dawidolko.pl

A TypeScript + React playground that recreates the macOS desktop right inside your browser

Build Website Status Stars

Live Demo: https://macos.dawidolko.pl


πŸ“‘ Table of Contents

  1. About
  2. Project Structure
  3. Star History
  4. Getting Started
  5. Screenshots
  6. Changelog
  7. Credits
  8. Contributing
  9. License & Author

About

macos.dawidolko.pl is an open-source portfolio / desktop simulator that mirrors the look-and-feel of modern macOS (Big Sur β†’ Sonoma).
Built with React, TypeScript, Vite, UnoCSS and Zustand for state-management, it delivers buttery-smooth animations, draggable windows, launchpad apps, a dynamic dock, and light/dark appearance that respects the system preference. 🍎πŸ–₯️


Project Structure

.
β”œβ”€β”€ .github/          # GitHub Actions & issue templates
β”œβ”€β”€ .husky/           # Pre-commit hooks
β”œβ”€β”€ assets/           # Icons, wallpapers, fonts
β”œβ”€β”€ img/              # Marketing images
β”œβ”€β”€ logo/             # SVG/PNG logo variants
β”œβ”€β”€ markdown/         # Blog posts / docs (rendered in-app)
β”œβ”€β”€ music/            # Demo audio files
β”œβ”€β”€ public/           # Static assets served at /
β”œβ”€β”€ screenshots/      # Light / dark previews
β”œβ”€β”€ src/              # Application code
β”‚   β”œβ”€β”€ components/   # Re-usable React components
β”‚   β”œβ”€β”€ containers/   # Window / desktop shells
β”‚   β”œβ”€β”€ stores/       # Zustand stores
β”‚   β”œβ”€β”€ theme/        # UnoCSS & design tokens
β”‚   β”œβ”€β”€ utils/        # Helpers
β”‚   β”œβ”€β”€ main.tsx      # Entry point
β”‚   └── vite-env.d.ts # Type helpers
β”œβ”€β”€ .editorconfig
β”œβ”€β”€ .eslintrc
β”œβ”€β”€ .gitattributes
β”œβ”€β”€ .gitignore
β”œβ”€β”€ .nojekyll
β”œβ”€β”€ CNAME
β”œβ”€β”€ LICENSE
β”œβ”€β”€ README.md         # You are here!
β”œβ”€β”€ index.html        # Vite HTML shell
└── manifest.json     # PWA manifest

Star History

Star History Chart


Getting Started

Prerequisites

Installation

# 1. Clone
git clone https://github.com/dawidolko/Macos-Simulaing-System-GUI
cd Macos-Simulaing-System-GUI

# 2. Install deps
pnpm install        # or npm i / yarn

# 3. Start the dev server with HMR
pnpm dev

Production build

pnpm build          # outputs static files to /dist

Screenshots

Light mode Dark mode
Light Dark

Changelog

  • 2023-06-26 – FaceTime UI polish & bug-fixes
  • 2023-06-25 – Added Typora markdown editor (powered by Milkdown)
  • 2021-12-05 – Battery API integration + full functional-component refactor

See CHANGELOG.md for the complete list.


Credits

This project originally drew inspiration from the amazing Ubuntu/Windows simulators linked below.


Contributing

Bug reports, feature suggestions and pull requests are welcome & appreciated!

# Fork β†’ clone β†’ create a branch
git checkout -b feat/amazing-feature

# Commit & push
git commit -m "Add amazing feature"
git push origin feat/amazing-feature

# Open a PR πŸŽ‰

Please include screenshots or GIFs when UI is involved.


License & Author

Crafted with β˜•, 🎧 and a healthy dose of macOS nostalgia.

About

My portfolio website simulating macOS's GUI, developed with React and UnoCSS.

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

 
 
 

Contributors