A Modern WebOS-Inspired Portfolio Showcase

webOS Portfolio is an innovative personal portfolio project that recreates the classic webOS interface in a modern web application. It serves as a comprehensive showcase of various web development projects, games, and applications, all accessible through an intuitive desktop-like environment.

• Responsive Layout: Optimized for both desktop and mobile devices
• Smooth Animations: Powered by Framer Motion for fluid transitions
• Dark Theme: Consistent dark aesthetic with customizable brightness, SOON GONNA BE LIGHT/DARK/CUSTOMISABLE

• Window Management: Full window controls (minimize, maximize, close)
• Draggable Windows: Intuitive drag-and-drop functionality
• Z-Index Management: Proper layering of multiple open applications
• Taskbar Integration: Real-time app switching and management

• Login Screen: Authentication with time/date display
• Quick Settings: Volume and brightness controls
• System Tray: Time, date, and notification area
• Start Menu: Logout functionality

webOS-portofolio/
├── frontend/
│   ├── public/
│   │   ├── index.html          # Main HTML template
│   │   ├── manifest.json       # PWA configuration
│   │   └── assets/             # Static images
│   ├── src/
│   │   ├── components/
│   │   │   ├── Apps/           # Individual application components
│   │   │   │   ├── TerminalApp.js
│   │   │   │   ├── GoogleApp.js
│   │   │   │   └── ...         # Other app components
│   │   │   ├── Taskbar.js      # Bottom taskbar
│   │   │   ├── WinBar.js       # Start menu
│   │   │   └── QuickSettings.js # System settings panel
│   │   ├── pages/
│   │   │   ├── Login.js        # Authentication screen
│   │   │   └── Main.js         # Desktop environment
│   │   ├── hooks/
│   │   │   └── useWindowSize.js # Window dimensions hook
│   │   ├── context/            # React context 
│   │   ├── utils/              # Utility functions
│   │   ├── App.js              # Main application component
│   │   └── index.js            # Application entry point
│   ├── package.json            # Dependencies and scripts
│   └── tailwind.config.js      # Tailwind CSS configuration
├── LICENSE                     # MIT License
└── README.md                   # Project documentation
   # Project documentation

• React 18 - Modern JavaScript library for building user interfaces
• React Router DOM - Declarative routing for React

• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Animation library for React
• Lucide React - Beautiful icon library

• React Draggable - Drag and drop functionality
• React DOM - React rendering library

• Implement basic window management
• Add responsive design
• Integrate multiple portfolio projects
• Create login/authentication system

• File System Integration

  • Add local file explorer
  • Create file management system, saving in local host

• Enhanced Terminal

  • Add more Linux commands
  • Create custom shell scripts

• System Customization

  • Multiple desktop wallpapers
  • Customizable themes
  • User profile management

• Additional Applications

  • Code Editor (VS Code-like)
  • Image Gallery
  • Music Player
  • Calculator

• More complex login system

  • actual user and password

  +lots more

This project is licensed under the MIT License - see the LICENSE file for details.