UI Overlap / Z-Index Bug on Window Interaction

[ZarrarPeshimam]

Description

When interacting with window-style components (like “About Me” or “Projects”), clicking on a window that’s behind another does not bring it to the front.
It appears that the z-index or stacking context isn’t updating properly when a window gains focus.

Steps to Reproduce

1. Open the portfolio site (https://www.ekas.site/) or run it locally.
2. Open multiple macOS-style windows (e.g., About, Projects, Contact).
3. Click on a window that’s currently behind another.
4. Observe that it remains behind instead of moving to the front.

Expected Behavior

The clicked or active window should move to the front (highest z-index), just like in macOS Finder or other desktop environments.

Actual Behavior

The window remains behind others even after being clicked.

Screenshots / Visual Evidence

Possible Cause & Suggested Fix

The application is missing a centralized state management system for window stacking order.

• In page.tsx (The Parent Component):
  • Implement a state (stackOrder) to track the list of open window IDs, where the last ID is the active/frontmost window.
  • Create a function (bringWindowToFront(id)) to move the given id to the end of the stackOrder array.
  • Calculate and pass a dynamic style={{ zIndex: ... }} prop to each Window component based on its position in the stackOrder array.
• In Window.tsx (The Child Component):
  • Add an onFocus prop to the WindowProps interface.
  • Call props.onFocus(props.id) within the main window's onMouseDown handler (the main div or the title bar) to signal to the parent that it has been clicked.

Environment

• Browser: (e.g., Chrome 118, Edge 127)
• OS: Windows/macOS/Linux
• Reproducible on both desktop and mobile view

---

I would love to work on this issue. Kindly consider assign this issue to me so I can work on it under Hacktoberfest.