Add Component-Specific Styles for Navigation and Buttons

[Joaquimdacosta1999]

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.

[diptipradeep]

Hi 👋
I’m a beginner learning web development and would love to work on this issue to gain some open-source experience.
Could you please assign it to me? I’ll do my best to follow the existing style guidelines and ask if I need any help.
Thank you! 😊

[Joaquimdacosta1999]

You just need to Pull request and work on it

[diptipradeep]

Thank you! I’ll go ahead and make the changes, then submit a pull request. I’ll make sure to follow the style guidelines and reach out if I need any help.