Add Component-Specific Styles for Navigation and Buttons

Is your feature request related to a problem? Please describe.
The current style.css defines a robust color palette and global styles but lacks specific styles for key components like navigation and buttons, which are present in the portfolio’s HTML (e.g., navigation with hamburger menu, buttons like “Télécharger mon CV”). This makes the UI rely solely on external frameworks (if any) or inline styles, leading to inconsistent styling and poor maintainability. I’m frustrated when the navigation and buttons don’t reflect the defined color variables (e.g., --vt-c-indigo), causing a disconnect between the CSS and the HTML structure.

Describe the solution you'd like
I’d like to add component-specific styles for navigation and buttons in style.css, using the existing --vt-c-* color variables to ensure consistency with the light and dark themes. Specifically:

Add styles for the navigation bar (.nav-links, .burger) to support desktop and mobile layouts, including hover and active states using --vt-c-indigo.
Add styles for buttons (.btn) to match the portfolio’s aesthetic, with hover effects and accessibility-focused outlines.
Ensure responsiveness for mobile devices (e.g., hamburger menu toggle at max-width: 768px).
Use the --section-gap variable for consistent spacing in navigation and sections.

nav {
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
}

.nav-links a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--vt-c-indigo);
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--vt-c-indigo);
    color: var(--vt-c-white);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.btn:hover {
    background: var(--vt-c-text-light-1);
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .nav-links.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: var(--color-background-soft);
        padding: 1rem;
        border-top: 1px solid var(--color-border);
    }
}

Describe alternatives you've considered

• Inline Styles: Adding styles directly in the HTML (e.g., ) was considered but rejected due to poor maintainability and inconsistency with the CSS color palette.

• External Framework: Using a framework like Tailwind CSS (as in Tabrizzi’s portfolio) or Bootstrap could style components, but this would deviate from the custom style.css approach and increase bundle size unnecessarily.

• Minimal Styling: Applying only basic styles without responsive or hover effects was considered, but this wouldn’t fully leverage the color palette or enhance the UI/UX.

Additional context
This feature enhances the portfolio’s UI by aligning the CSS with the HTML structure (e.g., Raphaël’s portfolio navigation with .nav-links and .burger classes). It ensures the Vue.js-inspired color palette (--vt-c-indigo, --vt-c-white, etc.) is applied consistently, improving visual coherence. The changes also support responsiveness for mobile users and maintain compatibility with the dark mode defined in the CSS.

Start with the existing style.css and the portfolio HTML elements using nav, .nav-links, .burger, and .btn. Check how the existing --vt-c-* and theme variables are defined before adding responsive navigation, button states, spacing, and focus outlines. Done means the components use the existing palette consistently across desktop, mobile, and dark-mode layouts.