A stunning, fully interactive macOS-inspired web experience built with vanilla JavaScript, HTML, and CSS. This project recreates the macOS interface with functional apps, dynamic status updates, and beautiful animations.
- Floating Particles - Dynamic particle system with smooth animations
- Noise Texture - Subtle grain overlay for authentic depth
- Vector Graphics - Animated SVG paths with gradient effects
- Glass Morphism - Modern blur effects throughout the UI
- Click the Apple logo to reveal the dropdown menu
- About This Mac - Modal window displaying system information:
- MacBook Air M3 (2023) specs
- Chip, Memory, Serial Number, and macOS version
- Authentic macOS-style dark theme window
- Functional close button (minimize/maximize disabled as in real macOS)
- "More Info..." button links to this GitHub repository
- Live Status Display - Real-time Discord status using Lanyard API
- Dynamic Island - Expandable status widget showing:
- Online/Idle/DND/Offline status with colored indicators
- Currently playing Spotify track (if active)
- Album artwork
- Song name and artist
- Live progress bar with elapsed/total time
- Auto-updates every 3 seconds
- Custom status and activity display
- Live time and date display
- Format:
Day Mon DD YYYY HH:MM AM/PM - Updates every second
- Navigate to personal portfolio section
- Showcases projects and work
- non-functional
- Direct link to osu! profile
- Opens Discord profile
- Links to Spotify profile
- Direct link to GitHub profile
- Opens default email client
- Contact via: info.sheepex@gmail.com
- Links to Instagram profile
- non-functional
- Fully Functional Calculator App
- Basic operations: +, −, ×, ÷
- Decimal point support
- Percentage calculations
- Clear and backspace (AC/C)
- macOS-style design with orange accent
- Draggable window with traffic lights
- Keyboard input support
- Note-Taking Application
- Create and edit notes
- macOS-style interface
- Draggable and resizable window
- Traffic light controls (close, minimize, maximize)
- Text formatting support
- Auto-save functionality
- Interactive Terminal Emulator
- Command-line interface
- Draggable and resizable window
- Multiple terminal support
- Custom commands and scripts
- macOS-style design
- Traffic light window controls
- System Settings App
- Wallpaper Customization
- Light/Dark wallpaper variants
- Grid-based wallpaper selection
- Live preview
- Theme-aware options
- Appearance Settings
- Draggable window interface
- macOS-style sidebar navigation
- Wallpaper Customization
- non-functional
- Draggable Windows - All app windows can be moved around
- Resizable Windows - Drag edges and corners to resize (Terminal)
- Traffic Light Controls:
- Close - Closes the window
- Minimize - Minimizes to dock (disabled in some apps)
- Maximize - Fullscreen toggle (disabled in some apps)
- Focus Management - Click to bring window to front
- Z-index Stacking - Proper window layering
- Fade-in animations on page load
- Smooth window open/close transitions
- Hover effects on interactive elements
- Progress bar animations
- Dynamic Island expansion
- Parallax scrolling effects
- HTML5 - Semantic structure
- CSS3 - Modern styling with custom properties
- JavaScript (ES6+) - Vanilla JS, no frameworks
- Tailwind CSS - Utility-first styling (CDN)
- SVG - Vector graphics
- Lanyard API - Discord/Spotify integration
- Google Analytics - Traffic tracking
iOS-ish-linktree/
├── index.html # Main page
├── styles.css # Global styles
├── script.js # Main JavaScript
├── window-manager.js # Window dragging/resizing
├── calculator.css # Calculator styles
├── calculator.js # Calculator logic
├── notes.css # Notes app styles
├── notes.js # Notes app logic
├── terminal-embed.css # Terminal styles
├── terminal-embed.js # Terminal logic
├── terminal.js # Terminal commands
├── settings.css # Settings styles
├── settings.js # Settings logic
├── Portfolio/ # Portfolio section
├── osu/ # osu! integration
├── kps-tester/ # KPS testing tool
├── mania-rates/ # Mania calculator
└── regex/ # Regex tool
-
Clone the repository
git clone https://github.com/sheepexx/iOS-ish-linktree.git cd iOS-ish-linktree -
Open in browser
- Simply open
index.htmlin your browser - Or use a local server:
python -m http.server 8000 # or npx serve
- Simply open
-
Customize
- Update Discord User ID in
script.js:const DISCORD_USER_ID = 'YOUR_DISCORD_ID';
- Modify links in
index.html - Customize colors in CSS files
- Update Discord User ID in
// In script.js
const DISCORD_USER_ID = '872804344909664266'; // Replace with your ID/* In styles.css */
:root {
--pink: #ff64d4;
--blue: #7dd3fc;
--text: #ffffff;
--menubar-bg: rgba(30, 30, 35, 0.85);
}<!-- In index.html -->
<button class="icon" onclick="yourFunction()">
<img src="your-icon.png" alt="Your App" />
</button>- Design Inspiration: Apple macOS
- Developer: sheepex_
- Icons: Custom icon set via CDN
- API: Lanyard (Discord presence)
This project is open source and available under the MIT License.
- Live Demo: sheepex.net
- GitHub: @sheepexx
- Discord: sheepex_
- osu!: sheepex_
Contributions, issues, and feature requests are welcome!
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Give a star if you like this project!
© 2024-2025 sheepex - All Rights not Reserved.
Made with love and way too much CSS