[WIP] Refactor web project to introduce new portfolio landing page

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

Task: Refactor the existing web project to introduce a new portfolio landing page, fix image styling, and resolve link-rendering issues.

1. Style & Bug Fixes (Existing Content)
   GN Math Games UI: For the "gn math games" section, apply a filter: brightness(0.75); (25% dimming) to the title images only. Ensure the game names remain at 100% brightness for readability.

Link Resolution: Currently, the GN math games point to jsdelivr links that display raw HTML code. Modify the logic so these links render the game content correctly (e.g., by ensuring they point to the GitHub Pages deployment or a proper CDN URL that serves the correct MIME type).

2. Site Architecture Refactor
   Renaming: Rename the current index.html to launcher.html.

New Entry Point: Create a new index.html to serve as the main portfolio landing page. It must use the same CSS variables, background images, and font styles as the rest of the site to ensure a seamless transition.

3. Portfolio Landing Page (index.html)
   Content & UI:

Header: Display "verdjs" followed by a dynamic Sydney time (e.g., "5:30 PM") and current Sydney weather (e.g., "22°C, Slight rain"). Use a public API or JavaScript for the time/weather.

Main Greeting: "Hey there, I'm Verdjs (Verdis) and this is my portfolio!"

Navigation Logic: Implement a global keydown listener for Arrow Key navigation:

UP (About Me): Transition to a section containing a brief bio and a link to my GitHub profile.

LEFT (Projects & Games): Link this to the newly renamed launcher.html.
includes
(Apps & Media): * Link to the apps page.

Music Player: Integrate a functional, "fully-fledged" music player. It should use a YouTube Music API wrapper, allow playback, and match the site’s theme.

DOWN (Blog): Show a "Blog" heading that links to the main blog site, followed by these specific entries:

Tools Site - Explained: A breakdown of each tool.

Typing Test User Guide: Detailed usage features.

What is a 404 Error?: Explanation of common web errors.

Discord Snowflake Deconstructor Guide: How to find and use Message IDs.

4. Technical Requirements
   Ensure smooth CSS transitions (e.g., fades or slides) when navigating between the Up/Down/Left/Right sections.

The Music Player must be responsive and styled with the same glow/transparency effects used in the "launcher" page.

Maintain clean, modular code so I can easily add more blog posts later.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.