Description:

A background color should be dynamically added to the header component to enhance its visibility and improve the readability of navigation links as the page scrolls. This feature will ensure the header remains prominent against varying content backgrounds as the user scrolls through the page.

Expected Behavior:

• Initially, the header should be transparent or have no background color when the page is at the top.
• As the user scrolls down, a background color fades in or instantly appears on the header.
• The background color should be consistent with the website's color scheme and should not obstruct any underlying page content.

Steps to Implement:

1. Add an event listener for the scroll event in the Header component.
2. Determine the scroll threshold at which the background should be added.
3. Use state to toggle a CSS class on the header that applies the background color when the scroll threshold is surpassed.
4. Remove the background color (by toggling the class off) when the user scrolls back to the top of the page.
5. Ensure the transition of the background color is smooth and visually appealing.

Relevant Files:

• Header component (path: components/Header/Header.tsx)
• CSS/SCSS files for dynamic background styling

Additional Notes:

• Test across different browsers and devices to ensure compatibility and responsiveness.
• Consider the performance impact of scroll event handling and optimize as necessary, potentially by debouncing or throttling the event handler.

Description:

The current implementation of the header component needs more visual feedback so that the user can quickly identify which tab/page is currently active. Enhancing the UI with an underline for the currently selected tab would improve the user experience by clearly indicating the active page.

Expected Behavior:

• The tab corresponding to the page currently viewed by the user should have an underline.
• This underline should only appear on the active tab.
• The underline should be consistent with the website's color scheme and design principles.

Steps to Implement:

1. Utilize Next.js's use router hook to determine the current path.
2. Compare the current path with the href of each Link in the NavigationMenu.
3. For the tab that matches the current path, apply a CSS class that adds an underline to that tab.
4. Ensure the underline style is responsive and visually integrates well with the overall design of the header.

Relevant Files:

• Header component (path: components/Header/Header.tsx)
• CSS/SCSS files associated with the Header component

Additional Notes:

• Consider accessibility implications and ensure that the visual feedback does not negatively affect accessibility.

Objective:
I want to add GitHub and LinkedIn icons to the homepage of my personal portfolio website. These icons will link to my profiles on the respective platforms, making it easier for visitors to find and explore my professional and programming projects.

Requirements:

1. Icon Placement: I prefer the icons placed in the header or footer, as these locations are intuitive for users searching for social media links.
2. Design Consistency: The icons should match the overall design theme of my portfolio, adhering to the existing color scheme and aesthetic. Official icons approved by GitHub and LinkedIn should be used to ensure brand accuracy.
3. Responsiveness: These icons must be easily viewable on devices of various sizes without negatively impacting the website's layout or user experience.
4. Accessibility: Each icon must have an appropriate alt text (e.g., "Visit my GitHub profile", "Connect with me on LinkedIn"), ensuring the site remains accessible to all users, including those using screen readers.
5. Links:
   • For GitHub: https://github.com/rlajous
   • For LinkedIn: https://www.linkedin.com/in/rodrigo-manuel-navarro-lajous/