Mon Portfolio.

:root {
    /* --- COULEURS DE FOND --- */
    /* J'utilise un noir très profond mais pas pur (#000) pour plus de douceur */
    --bg-dark: #050505;           
    --bg-panel: #0a0a0a;          
    
    /* --- PALETTE OR (ACCENTUATION) --- */
    /* Couleur principale utilisée pour les titres et les lignes */
    --accent: #d4af37;            
    --gold-main: #d4af37;
    
    /* Variante foncée pour créer du relief dans les ombres */
    --gold-dark: #aa8c2c;         
    
    /* Variante claire pour les reflets métalliques */
    --gold-light: #f9e5a0;        
    
    /* Dégradé complexe utilisé sur les boutons pour un effet 'Lingot d'Or' */
    --gold-gradient: linear-gradient(135deg, #d4af37 0%, #aa8c2c 100%);
    
    /* --- TYPOGRAPHIE --- */
    /* Police avec empattement pour le côté prestigieux */
    --font-serif: 'Playfair Display', serif; 
    /* Police sans empattement pour la lisibilité du texte courant */
    --font-sans: 'Montserrat', sans-serif;   
}

<!-- 1. BARRE DE NAVIGATION FIXE -->
<!-- La balise <nav> indique aux moteurs de recherche qu'il s'agit des liens principaux -->
<nav class="navbar">
    
    <!-- Logo cliquable qui ramène à l'accueil -->
    <a href="portfolio.html" class="nav-brand">
        <img src="images/logosemih.png" alt="Logo Avci Semih">
    </a>
    
    <!-- Liens de navigation centraux -->
    <div class="nav-links">
        <a href="portfolio.html" class="active">Accueil</a>
        <a href="competences.html">Compétences</a>
        <a href="projets.html">Projets</a>
    </div>
    
    <!-- Bouton d'action (Call to Action) distinct -->
    <a href="CV-AVCI-Semih.pdf" target="_blank" class="btn-cv">
        Mon CV
    </a>

</nav>

<!-- 2. EN-TÊTE PRINCIPAL (HERO SECTION) -->
<!-- Cette section doit capter l'attention en moins de 3 secondes -->
<div class="hero-container">
    <div class="hero-content fade-in">
        <span class="greeting">Portfolio</span>
        <h1 class="main-title">Avci Semih<span class="dot">.</span></h1>
        
        <h2 class="subtitle">Étudiant en BUT Réseaux & Télécoms</h2>
        
        <!-- Description courte et impactante -->
        <div class="description">...</div>
    </div>
</div>

/* 1. DÉFINITION DE L'ANIMATION 'FADE UP' */
/* L'élément part de 30px plus bas et remonte en devenant opaque */
@keyframes fadeUp { 
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0);    
    } 
}

/* Application de l'animation sur les cartes projets */
.featured-card {
    opacity: 0; /* Invisible au départ */
    /* forwards : l'élément garde son état final (visible) à la fin de l'animation */
    animation: fadeUp 0.8s ease-out forwards;
}

/* 2. INTERACTIVITÉ BOUTONS (HOVER) */
.btn-cv:hover {
    /* Le bouton monte légèrement de 2px pour un effet 3D */
    transform: translateY(-2px); 
    
    /* Ajout d'une ombre portée dorée pour simuler la lumière */
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.4); 
    
    /* Changement de fond pour un or plus clair */
    background: linear-gradient(135deg, #fff7cc 0%, #d4af37 100%);
}