🌐 Frutiger Aero OS — Interactive Portfolio

An interactive web-based operating system portfolio inspired by late 2000s Frutiger Aero aesthetics.

English | Русский

---

🌟 About

Frutiger Aero OS Portfolio is more than just a portfolio website — it's an interactive web desktop environment. The project is inspired by late-2000s UI design (Windows Vista / 7 Aero Glass, glossy textures, skeumorphism) combined with modern web frameworks and fluid animations.

---

✨ Features

• 🖥️ Web OS Desktop:
  • Animated boot screen & login prompt.
  • Taskbar with running app badges and system clock.
  • Top MenuBar with power management (Shutdown / Restart).
• 🪟 Window Management:
  • Drag & drop positioning with desktop bounds checking.
  • Resizing, maximizing, and minimizing to taskbar.
  • Cascading initial position and dynamic z-index layering.
• 🎨 Personalization & Effects:
  • Wallpaper switching persisted via localStorage.
  • Customizable Aero glass blur intensity.
  • Sound effects toggle.
• 🔊 Sound Engine (Web Audio API):
  • Synthesized procedural sound effects for boot, click, window open, and minimize.
• 📱 Built-in Applications:
  • 📁 Projects — Interactive showcase with tag filters, screenshots, and live/repo links.
  • 👤 About Me — Personal background, skills, and experience.
  • ✉️ Contact — Contact details and message form.
  • 🎛️ Personalization — Control panel for wallpapers, glass blur, and audio.

---

🛠 Tech Stack

Category	Technology
Framework	React 19
Build Tool	Vite 7
Styling	Tailwind CSS v4
Animations	Framer Motion 12
Icons	Lucide React
Deployment	GitHub Pages

---

🚀 Quick Start

Prerequisites

• Node.js (v18.0 or higher)
• npm (or pnpm / yarn)

Installation & Development

1. Clone the repository:

   git clone https://github.com/Fuheshka/portfolio.git
   cd portfolio

2. Install dependencies:

   npm install

3. Run development server:

   npm run dev

   Open http://localhost:5173 in your browser.

---

📜 Scripts

• npm run dev — Launch Vite dev server with HMR.
• npm run build — Build production bundle in dist/.
• npm run preview — Locally preview production build.
• npm run lint — Lint code with ESLint.

---

📁 Project Structure

portfolio/
├── public/              # Static assets (sounds, wallpapers)
├── src/
│   ├── assets/          # Images and UI assets
│   ├── components/      # Web OS components & application windows
│   │   ├── Window.jsx           # Universal window wrapper
│   │   ├── Taskbar.jsx          # Taskbar & Start Menu
│   │   ├── MenuBar.jsx          # Top system bar
│   │   ├── Personalization.jsx # Customization control panel
│   │   ├── ProjectList.jsx     # Projects app
│   │   ├── About.jsx           # About Me app
│   │   └── Contact.jsx         # Contact app
│   ├── data/            # Projects & profile data
│   ├── utils/           # Web Audio API & helpers
│   ├── App.jsx          # Root OS state manager
│   └── main.jsx         # React entry point
├── index.html           # HTML template
├── package.json
└── vite.config.js

---

📄 License

This project is licensed under the MIT License.