Portfolio-Codex/docs/stories/5.7.liens-contact-secondaires.md

# Story 5.7: Liens de Contact Secondaires

## Status

review

## Story

**As a** visiteur,
**I want** avoir des alternatives au formulaire pour contacter le développeur,
**so that** je choisis le canal qui me convient.

## Acceptance Criteria

1. Sous le formulaire, une section affiche les liens secondaires : LinkedIn, GitHub, email direct (mailto)
2. Les liens sont affichés avec leurs icônes respectives
3. Les liens s'ouvrent dans un nouvel onglet (sauf mailto)
4. La section est visuellement distincte mais cohérente avec le formulaire
5. L'adresse email est protégée contre le scraping (encodage ou JS)

## Tasks / Subtasks

- [x] **Task 1 : Ajouter la section dans contact.php** (AC: 1, 4)
  - [x] Titre "Retrouvez-moi aussi sur"
  - [x] Positionnement sous le formulaire (mt-16, pt-8, border-t)
  - [x] Style distinct mais cohérent (bg-surface-alt, border)

- [x] **Task 2 : Ajouter les liens avec icônes** (AC: 2)
  - [x] LinkedIn avec icône SVG (#0A66C2)
  - [x] GitHub avec icône SVG
  - [x] Email avec icône SVG (primary)

- [x] **Task 3 : Configurer les liens** (AC: 3)
  - [x] `target="_blank"` + `rel="noopener noreferrer"` pour LinkedIn/GitHub
  - [x] `mailto:` généré par JS pour l'email

- [x] **Task 4 : Protéger l'email** (AC: 5)
  - [x] data-user et data-domain dans le HTML
  - [x] initEmailProtection() dans main.js
  - [x] Reconstruction du mailto au chargement

## Dev Notes

### Section à ajouter dans contact.php

```php
<!-- Sous le formulaire et les messages de feedback -->

<!-- Liens secondaires -->
<section class="mt-16 pt-8 border-t border-border">
    <h2 class="text-lg font-semibold text-center mb-6">Retrouvez-moi aussi sur</h2>

    <div class="flex flex-wrap justify-center gap-6">
        <!-- LinkedIn -->
        <a
            href="https://linkedin.com/in/votre-profil"
            target="_blank"
            rel="noopener"
            class="flex items-center gap-3 px-6 py-3 bg-surface rounded-lg hover:bg-surface-light transition-colors group"
            aria-label="Profil LinkedIn"
        >
            <svg class="w-6 h-6 text-[#0A66C2]" fill="currentColor" viewBox="0 0 24 24">
                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
            </svg>
            <span class="font-medium text-text-primary group-hover:text-primary transition-colors">LinkedIn</span>
        </a>

        <!-- GitHub -->
        <a
            href="https://github.com/votre-username"
            target="_blank"
            rel="noopener"
            class="flex items-center gap-3 px-6 py-3 bg-surface rounded-lg hover:bg-surface-light transition-colors group"
            aria-label="Profil GitHub"
        >
            <svg class="w-6 h-6 text-text-primary" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
            </svg>
            <span class="font-medium text-text-primary group-hover:text-primary transition-colors">GitHub</span>
        </a>

        <!-- Email (protégé) -->
        <a
            href="#"
            id="email-link"
            class="flex items-center gap-3 px-6 py-3 bg-surface rounded-lg hover:bg-surface-light transition-colors group"
            aria-label="Envoyer un email"
            data-user="contact"
            data-domain="monportfolio.fr"
        >
            <svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
            </svg>
            <span class="font-medium text-text-primary group-hover:text-primary transition-colors">Email</span>
        </a>
    </div>
</section>
```

### Protection de l'Email (JavaScript)

```javascript
// assets/js/main.js (ajouter)

/**
 * Protection de l'email contre le scraping
 * Reconstruit l'adresse email à partir de data-attributes
 */
function initEmailProtection() {
    const emailLink = document.getElementById('email-link');
    if (!emailLink) return;

    const user = emailLink.dataset.user;
    const domain = emailLink.dataset.domain;

    if (user && domain) {
        const email = `${user}@${domain}`;
        emailLink.href = `mailto:${email}`;

        // Optionnel : afficher l'email au hover
        emailLink.title = email;
    }
}

document.addEventListener('DOMContentLoaded', () => {
    initEmailProtection();
});
```

### Alternative : Encodage HTML

```php
<?php
/**
 * Encode une adresse email en entités HTML
 */
function encodeEmail(string $email): string
{
    $encoded = '';
    for ($i = 0; $i < strlen($email); $i++) {
        $encoded .= '&#' . ord($email[$i]) . ';';
    }
    return $encoded;
}

$email = 'contact@monportfolio.fr';
$encodedEmail = encodeEmail($email);
?>

<a href="mailto:<?= $encodedEmail ?>">
    <?= $encodedEmail ?>
</a>
```

### Liens à Configurer

| Plateforme | URL | Notes |
|------------|-----|-------|
| LinkedIn | https://linkedin.com/in/votre-profil | Profil public |
| GitHub | https://github.com/votre-username | Profil public |
| Email | contact@monportfolio.fr | Via .env ou config |

### Couleurs des Icônes

| Plateforme | Couleur | Tailwind |
|------------|---------|----------|
| LinkedIn | #0A66C2 | `text-[#0A66C2]` |
| GitHub | Inherit (blanc) | `text-text-primary` |
| Email | Primary | `text-primary` |

## Testing

- [] Les 3 liens sont affichés avec leurs icônes
- [] LinkedIn et GitHub s'ouvrent dans un nouvel onglet
- [] Le lien mailto déclenche le client email
- [] L'email n'apparaît pas en clair dans le HTML source (data-attributes)
- [] Le JS reconstruit correctement le lien mailto
- [] Les hover states fonctionnent (border-primary/50)
- [] La section est visuellement distincte (border-t, mt-16)

## Dev Agent Record

### Agent Model Used
GPT-5 Codex

### Implementation Plan
- Implémenter les tâches 1 à 4 dans l’ordre avec tests à chaque étape.
- Ajouter section et protection email via main.js.

### File List
| File | Action | Description |
|------|--------|-------------|
| `pages/contact.php` | Modified | Section liens secondaires (LinkedIn, GitHub, Email) |
| `assets/js/main.js` | Modified | Ajout initEmailProtection() |
| `tests/contact-links.test.php` | Added | Tests liens secondaires |
| `tests/run.ps1` | Modified | Ajout du test contact-links |

### Completion Notes
- Section "Retrouvez-moi aussi sur" avec 3 liens
- LinkedIn : https://linkedin.com/in/celian-music
- GitHub : https://github.com/skycel
- Email protégé : data-user/data-domain + reconstruction JS
- Icônes SVG avec couleurs appropriées (LinkedIn bleu, GitHub inherit, Email primary)
- Hover state : border-primary/50
- Tests : `powershell -ExecutionPolicy Bypass -File tests/run.ps1`

### Debug Log References
Aucun problème rencontré.

## Change Log

| Date | Version | Description | Author |
|------|---------|-------------|--------|
| 2026-01-22 | 0.1 | Création initiale | Sarah (PO) |
| 2026-01-24 | 1.0 | Implémentation complète | James (Dev) |
| 2026-02-04 | 1.1 | Liens secondaires contact | Amelia (Dev) |