A unique and immersive personal portfolio website that simulates a complete desktop operating system experience. This modern web application features realistic OS interactions, beautiful animations, and comprehensive portfolio content presentation.
- Realistic OS Interface: Full desktop simulation with taskbar, start menu, and system tray
- Power-On Experience: Authentic boot sequence with BIOS screen and loading animations
- Interactive Desktop: Clickable desktop icons with file-like representations
- Window Management: Fully functional windows with drag, resize, minimize, maximize, and close
- Task Switching: Alt+Tab style window switching with visual preview
- Desktop Background: Dynamic animated background with particles and geometric shapes
- Procedural Background Music: Web Audio API-powered ambient music generation
- Audio Controls: Music toggle and volume slider with visual feedback
- Particle System: Animated colorful particles floating across the background
- Smooth Animations: Hardware-accelerated CSS transitions and micro-interactions
- Glass Morphism: Modern glass-like effects with backdrop blur filters
- Loading Screens: Professional boot sequence and loading animations
- Ctrl + Tab: Switch between open windows
- Ctrl + W: Close active window
- Ctrl + Space: Toggle start menu
- Ctrl + D: Show desktop (minimize all windows)
- Tab: Open task view
- Esc: Close overlays and menus
- Start Menu: Quick access to all portfolio sections
- Search Functionality: Search through portfolio content
- System Tray: Security, volume, network, and battery indicators
- Live Clock: Real-time clock and date display
- Notification Center: System notifications and alerts
- Hidden Icons: Expandable system tray with additional options
- Context Menus: Right-click functionality on taskbar elements
- About Me: Personal introduction and background
- Resume: Professional experience, education, and achievements
- Projects: Showcase of work with detailed descriptions and links
- Skills: Technical expertise and competencies
- Contact: Contact information and communication methods
- Social Links: Professional social media and networking profiles
- Optimized Rendering: RequestAnimationFrame-based animations
- DOM Caching: Efficient element caching for better performance
- Throttled Functions: Performance-optimized event handling
- Responsive Design: Works seamlessly on desktop and mobile devices
- Memory Management: Proper cleanup and resource management
- Object-Oriented Design: Clean class-based structure with DesktopPortfolio main class
- Event-Driven: Comprehensive event handling for all interactions
- Modular Functions: Separated content generation and UI management
- Performance Optimized: Efficient rendering and memory usage
- Web Audio API: Advanced audio context management
- Procedural Generation: Dynamic music creation and manipulation
- Gain Control: Professional audio volume management
- Browser Compatibility: Fallback support for different browsers
- CSS Animations: Smooth, hardware-accelerated transitions
- Particle Physics: Realistic particle movement and behavior
- Dynamic Styling: Runtime style generation and management
- Responsive Layouts: Adaptive design for all screen sizes
my-portfolio/
├── index.html # Main HTML structure
├── styles.css # Complete styling and animations
├── script.js # Full JavaScript functionality
├── icons/ # Desktop icon assets
│ ├── user.svg # About Me icon
│ ├── document.svg # Resume icon
│ ├── folder.svg # Projects icon
│ ├── code.svg # Skills icon
│ ├── mail.svg # Contact icon
│ └── network.svg # Social Links icon
├── README.md # This documentation
└── LICENSE # MIT License
- Download/Clone: Get all project files
- Open: Launch
index.htmlin any modern web browser - Power On: Click the power button to start the system
- Enable Audio: Click anywhere to enable audio context (browser requirement)
- Explore: Use desktop icons, start menu, or keyboard shortcuts to navigate
- Chrome (Recommended - best performance)
- Firefox (Full compatibility)
- Safari (Full compatibility)
- Edge (Full compatibility)
Modern browsers with support for:
- CSS Grid and Flexbox
- Web Audio API
- ES6+ JavaScript features
- CSS backdrop-filter
Update your portfolio content by modifying these functions in script.js:
getAboutContent() // Personal information and bio
getResumeContent() // Work experience and education
getProjectsContent() // Project showcase and links
getSkillsContent() // Technical skills and expertise
getContactContent() // Contact information
getSocialContent() // Social media linksModify styles.css to customize:
- Color Schemes: Change CSS custom properties for consistent theming
- Typography: Update font families and sizing
- Animations: Adjust timing and easing functions
- Layout: Modify spacing and positioning
- Background: Change desktop wallpaper and particle effects
Replace SVG files in the icons/ directory to customize desktop appearance.
- Push code to a GitHub repository
- Enable GitHub Pages in repository settings
- Select source branch (usually
mainormaster) - Access via
https://username.github.io/repository-name
- Connect GitHub repository to Netlify
- Configure build settings (static site, no build command needed)
- Deploy automatically on code changes
- Import GitHub repository to Vercel
- Deploy as static site
- Automatic deployments on push
- Upload all files to web hosting service
- Maintain file structure
- Ensure HTTPS for audio features
- Built-in performance tracking
- Memory usage optimization
- Frame rate monitoring for animations
- Keyboard navigation support
- Screen reader compatibility
- High contrast mode support
- Focus management for windows
- Touch-friendly interactions
- Responsive window management
- Mobile-specific UI adaptations
- Gesture support
Feel free to submit issues, feature requests, or pull requests to improve this portfolio template.
This project is licensed under the MIT License - see the LICENSE file for details.
Planned features for future versions:
- Right-click Context Menus: Desktop and window context options
- Multiple Desktops: Virtual desktop switching
- Drag & Drop: File-like drag and drop interactions
- Window Snapping: Automatic window positioning
- Screen Saver: Idle state animations
- Theme Customization: Multiple visual themes
- Virtual File System: Nested folder navigation
- Progressive Web App: Offline functionality and app-like experience
Built with ❤️ using modern web technologies
Enjoy your unique desktop portfolio experience!