React Templates & Themes Logo React Templates & Themes
Playground Macos screenshot

Playground Macos

Author Avatar Theme by Renovamen
Updated: 2 May 2024
3338 Stars

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

Github Live Preview

Categories

Vite Tailwind Portfolio

Overview:

The playground-macos is a portfolio website that simulates the graphical user interface (GUI) of macOS. It is powered by React, Zustand, UnoCSS, TypeScript, and Vite. The website offers both light mode and dark mode for user preference.

Features:

  • GUI Simulation: The website replicates the look and feel of macOS’s GUI.
  • React Powered: Built with React for dynamic and interactive components.
  • Light and Dark Mode: Offers both light and dark mode themes for users to choose from.
  • Battery State Simulation: Simulates the device’s actual battery state using the Battery API, showing 100% charge on unsupported browsers.

Installation:

  1. Clone the repository:
    git clone [repository-url]
  2. Install dependencies:
    npm install
  3. Start the development server with hot reloading:
    npm run dev
  4. Build for production with minification to the dist folder:
    npm run build

Summary:

The playground-macos portfolio website is a unique project that replicates the macOS GUI using modern web technologies like React, Zustand, UnoCSS, TypeScript, and Vite. With features like battery state simulation and light/dark modes, this website offers an interactive and visually appealing user experience. The clear installation guide makes it easy for users to set up the project and explore its functionalities.