Enhance Project Details UI/UX (Hybrid Approach)

Hey guys! Let's dive into upgrading the UI/UX for the “xem chi tiết dự án” feature, embracing a hybrid approach to deliver a fantastic experience on both desktop and mobile. We'll be focusing on making project details easier to view and navigate, without disrupting the existing structure too much. This means focusing on a quick view modal for a fast overview and a dedicated detail page for a deeper dive.

Project Goals and Objectives

Our primary goal is to provide a seamless and intuitive experience for users to view project details. We're targeting two key environments:

• Desktop: We want a quick view accessible via a modal (no full-page navigation) and a dedicated page for in-depth exploration. This allows users to quickly glance at information or delve into specifics as needed. The modal is key here to avoid disrupting the current workflow.
• Mobile: We're aiming for a user-friendly modal in the form of a bottom sheet or a full-screen drawer for easy one-handed operation. The detail page should be optimized for reading and scrolling, considering the mobile experience is paramount.

We need to minimize impact on other sections of the site. The changes should primarily touch the “Projects” section and introduce a new route. We will not be modifying other sections of the site to avoid unexpected side effects. We will also be preserving i18n support, using the existing ?lang= parameter in BaseLayout.astro. This ensures that language switching continues to function correctly across both the modal and detail pages. The current modal is being built using innerHTML in Projects.astro, pulling data from i18n.t.projects.items. We have some data available: name, period, description, etc. We will add an id/slug to help with routing.

UX Decisions: The Hybrid Approach

Here’s the proposed user flow, or what the user will see, to improve your overall experience. When a project card is clicked, the current quick view modal should open. Within the modal, we’ll add a “View Details” CTA (call to action) that leads to a dedicated project page (e.g., /projects/<id>?lang=<vi|en>). This dedicated page will include a “Back to Projects” CTA, allowing users to return to the original section (/#du-an?lang=…), thereby maintaining their position within the site. The implementation requires minimal changes to the original Astro layout for a faster, more effective integration process. We will also incorporate the current i18n system to ensure a seamless experience for all our users regardless of the language they choose.

Proposed UI/UX Design

Let's get into the specifics. Here’s a detailed breakdown of the UI/UX design, keeping both desktop and mobile in mind:

A) Quick View Modal (Within the Projects Section)

Desktop

• Modal Center: Centered modal with a max-width of around 900px, enabling content scrolling if necessary.
• Scrolling Content: The content within the modal should scroll independently of the main page, allowing users to view all project information without scrolling the entire page.
• Backdrop: The background behind the modal should be darkened to indicate focus and direct attention to the modal content. This provides visual clarity and indicates the modal’s focus.

Mobile

• Bottom Sheet or Full-Screen Drawer: A bottom sheet (min-height ~70vh) or a full-screen drawer for easy one-handed operation. We want it to be intuitive on mobile devices.
• Sticky Header: The header should be visible as the user scrolls through the content. This ensures they always know which project they are viewing and allows for quick navigation.

Standard Interactions

• ESC to Close: Pressing the ESC key should close the modal.
• Click Backdrop to Close: Clicking outside the modal (on the backdrop) should also close it. These are standard interactions for modal behavior.
• Focus Trap + Restore Focus (a11y): Implement a focus trap to ensure keyboard focus stays within the modal, and restore focus to the originating element when the modal closes. This is crucial for accessibility. A focus trap means that when the user presses Tab in the modal, the focus cycles within the modal only. This ensures that users navigating with a keyboard can easily interact with the modal content.
• Proper Body Scroll Locking: Correctly lock the body scroll when the modal is open to prevent accidental scrolling of the main content behind the modal. The body scroll should be disabled when the modal is open and re-enabled when the modal is closed.
• (Optional) History Synchronization: Consider using history.pushState to add modal opening/closing to the browser history (allowing the back button to close the modal). This adds a more advanced level of user experience, but it also adds complexity.

Content

• Header: Project name, time period, and role.
• Impact/Results: Highlight key metrics using metric cards for a visual representation.
• Tools: Display tools using chips for easy readability.
• Gallery: Keep the current GLightbox functionality for displaying images, as it is already working well.
• CTAs: Include “View Details” and “Close” buttons.

B) Project Detail Page (Dedicated URL)

Layout

• Modern Layout: Modern layout for easy readability.
• Hero Section: Project title, time period, and role.
• Overview (Description) + Impact: The general description and key results.
• Tasks (Bullets) + Tech Stack: Lists of tasks performed and technologies used.
• Gallery Grid + Lightbox: A gallery of images.
• Navigation: Back to Projects button (/#du-an).
• Independent of fullpage.js: Using a standard layout to avoid conflicts with fullpage.js.

Data Changes: Project IDs

We need to modify the data to include a unique and stable id for each project. This will be the backbone for our routing and ensure that project details are always accessible. The edits will involve both the English and Vietnamese translation files.

1) Adding Stable IDs for Each Project

• Modify vi.json and en.json: Add an id field to each item in the projects.items[] array. For example: `{