Desktop Widgets and Icons
Relevant source files
The following files were used as context for generating this wiki page:
The Desktop Widgets and Icons system provides the primary interactive surface for the portfolio's macOS-style environment. It consists of informational "widgets" located on the top-left and functional application shortcuts (icons) positioned along the right edge of the screen.
These components are designed to provide a familiar desktop experience, allowing users to view real-time data like date and weather while providing quick access to internal applications such as "About Me", "Projects", and "Contact". The system relies on a centralized WindowManagerContext to handle application state and transitions.
Sources: features/desktop/components/Desktop.tsx:21-27, features/desktop/components/DesktopIcons.tsx:11-15, features/desktop/components/Widgets.tsx:94-101
Desktop Component Hierarchy
The Desktop component serves as the orchestrator, rendering widgets and icons only when the viewport is not in a mobile state.
The desktop layout uses absolute positioning to place these elements over the Wallpaper component, ensuring they remain accessible while other windows are open.
Sources: features/desktop/components/Desktop.tsx:13-31
Desktop Widgets
The Widgets system provides glanceable information through two primary components: CalendarWidget and WeatherWidget. They are styled using the lg-chip utility class, which implements a "Liquid Glass" effect featuring backdrop blur and saturation.
Sources: features/desktop/components/Widgets.tsx:94-101, app/globals.css:163-171
Calendar Widget
The CalendarWidget dynamically generates a monthly calendar view. It uses the Intl.DateTimeFormat API to ensure locale-aware headers and month names.
- Logic: It calculates the
startOffset(using Monday as the first day of the week) and the totaldaysInMonthto build a grid of 7 columns. - Highlighting: The current date is highlighted with a red circular background.
Sources: features/desktop/components/Widgets.tsx:10-67
Weather Widget
The WeatherWidget displays current environmental conditions. While currently using static placeholder values (e.g., 33°), it is fully integrated with the internationalization (next-intl) system for labels like city names and conditions.
Sources: features/desktop/components/Widgets.tsx:69-92, messages/en.json:20-25
| Widget | Data Points | Styling |
|---|---|---|
| Calendar | Current Month, Weekday Initials, Day Numbers | Slate text, Red highlights |
| Weather | City Name, Temperature, Condition, High/Low | Sky-Blue gradient, Amber Sun icon |
Sources: features/desktop/components/Widgets.tsx:50-91
Desktop Icons
DesktopIcons represents the application shortcuts appearing on the right side of the screen. These icons are generated dynamically from the apps configuration.
Interaction Logic
When a user clicks a desktop icon, it triggers the open method from the WindowManagerContext. This method requires the application ID and its defaultGeometry (initial position and size).
Visual Implementation
The icons use the Folder component from lucide-react. They are styled with a soft drop shadow and a text shadow to maintain legibility against diverse wallpaper backgrounds.
// Example of icon styling and interaction
<button
onClick={() => open(app.id, app.defaultGeometry)}
className="group flex w-20 flex-col items-center gap-1 rounded-lg p-1 outline-none focus-visible:bg-white/25"
>
<Folder className="size-12 text-sky-300 drop-shadow-[...]" />
<span className="text-white [text-shadow:0_1px_3px_rgba(2,32,64,0.7)]">
{t(app.titleKey)}
</span>
</button>
Sources: features/desktop/components/DesktopIcons.tsx:26-38
Configuration and Styling
Application Registry
The content of the desktop icons is driven by lib/apps.config.tsx. Each app entry defines its visual identity and initial window state.
| Field | Description | Source |
|---|---|---|
id | Unique identifier (e.g., 'about', 'projects') | lib/apps.config.tsx:8 |
titleKey | Translation key for the app name | lib/apps.config.tsx:10 |
tile | Tailwind gradient classes for icon backgrounds | lib/apps.config.tsx:13 |
defaultGeometry | Initial x, y, width, height for the window | lib/apps.config.tsx:14 |
Sources: lib/apps.config.tsx:7-15
Liquid Glass System
Both widgets and icons (when focused) utilize a custom CSS surface system defined in globals.css. The lg-chip class used for widgets provides:
background-color: rgb(255 255 255 / 0.35)backdrop-filter: blur(20px) saturate(180%)box-shadowinvolving an inner highlight and a soft outer shadow.
Sources: app/globals.css:163-171
Conclusion
The Desktop Widgets and Icons module effectively creates a functional bridge between the static wallpaper and the interactive application windows. By combining locale-aware components like the CalendarWidget with a dynamic application registry for DesktopIcons, the system ensures a scalable and consistent user experience within the portfolio desktop.