# Portfolio — Johan Leroy

Site vitrine personnel en **Astro 6 hybrid** (SSG public + SSR admin), déployé sur Plesk Node.js.

🎧 Dev le jour, DJ la nuit — stack cyberpunk dark, contenu éditable sans recompilation.

---

## Stack

- **Astro 6** (`output: 'static'` + adapter Node standalone — hybrid via `prerender: false` sur `/admin/*` et `/api/*`)
- **React 19** (îlots interactifs)
- **Tailwind CSS 4** + custom design system cyberpunk
- **Framer Motion** + **GSAP** + **Lenis** (animations)
- **@react-three/fiber** (hero 3D disco ball)
- **Zod** (validation schémas de contenu)
- **jose** + **bcryptjs** (auth admin JWT cookie)

---

## Développement

```bash
npm install
npm run dev
```

→ http://localhost:3100

## Édition du contenu

Tout le contenu éditable est dans `public/content/*.json` :

| Fichier | Rôle |
|---|---|
| `profile.json` | Profil, photo, CTA hero, réseaux sociaux |
| `skills.json` | Compétences techniques (primary + secondary) |
| `experiences.json` | Parcours pro + compétences techniques & transverses |
| `formations.json` | Diplômes et formations |
| `projects.json` | Portfolio de projets |
| `interests.json` | Centres d'intérêt |
| `site.json` | Meta SEO + flags features |

Tu peux éditer :
- **Via `/admin`** (interface web protégée par mot de passe) — recommandé en prod
- **Manuellement** en éditant les JSON et en rechargeant la page

**Aucune recompilation n'est nécessaire** : les fichiers sont servis statiquement côté site public, et relus au runtime côté admin.

---

## Admin

### Configuration initiale

1. Générer un hash de mot de passe :
   ```bash
   npm run hash:password -- monMotDePasse
   ```
2. Copier les deux lignes générées (`ADMIN_PASSWORD_HASH` et `ADMIN_JWT_SECRET`) dans un fichier `.env` (local) ou dans les variables d'environnement Plesk (prod).

### Accès

→ http://localhost:3100/admin (ou https://johanleroy.fr/admin en prod)

Login via mot de passe, cookie httpOnly 7 jours.

---

## Déploiement Plesk Node.js

### Variables d'environnement à définir sur Plesk

| Variable | Valeur |
|---|---|
| `ADMIN_PASSWORD_HASH` | hash bcrypt généré |
| `ADMIN_JWT_SECRET` | secret JWT aléatoire |
| `PORT` | `3100` (ou ce que Plesk impose) |
| `HOST` | `0.0.0.0` |
| `NODE_ENV` | `production` |

### Paramètres Plesk Node.js

- **Node.js version** : 22
- **Application root** : racine du repo
- **Application startup file** : `dist/server/entry.mjs`
- **Application URL** : https://johanleroy.fr

### CI/CD Gitea (branch `main`)

Le workflow `.gitea/workflows/deploy.yml` déclenche un build + upload FTP sur chaque push `main`.

**Secrets Gitea à configurer :**
- `FTP_HOST`
- `FTP_USER`
- `FTP_PASSWORD`
- `FTP_TARGET_DIR` (ex : `/httpdocs/johanleroy`)

Après chaque déploiement : redémarrer l'application Node.js depuis Plesk pour prendre en compte les nouveaux fichiers.

---

## Structure

```
src/
├── components/
│   ├── Header.astro, Footer.astro, SEO.astro
│   ├── ProjectCard.astro
│   └── islands/         # composants React hydratés
│       ├── Hero3D.tsx
│       ├── RolesMorph.tsx
│       ├── Reveal.tsx
│       ├── SkillCard.tsx
│       ├── SmoothScroll.tsx
│       └── CustomCursor.tsx
├── content/schemas/     # schémas Zod (typages + validation)
├── lib/
│   ├── auth.ts          # JWT cookie admin
│   └── content.ts       # lecture/écriture JSON
├── layouts/BaseLayout.astro
├── middleware.ts        # protection routes /admin et /api
├── pages/
│   ├── index.astro
│   ├── formations.astro
│   ├── experience.astro
│   ├── projets.astro
│   ├── 404.astro
│   ├── admin/
│   │   ├── login.astro
│   │   ├── index.astro
│   │   └── edit/[section].astro
│   └── api/
│       ├── auth/login.ts, logout.ts
│       ├── content/[section].ts
│       └── upload.ts
└── styles/global.css

public/
├── content/*.json       # données éditables
├── img/                 # images (icônes, entreprises, projets, photos)
└── assets/cv.pdf
```

---

## Direction artistique

**Cyberpunk Dark** — noir profond + cyan/magenta néon.

- Palette : `#0A0A0F / #00F0FF / #FF2A6D / #D1F7FF`
- Typographies : Space Grotesk (display), Inter (body), JetBrains Mono (mono)
- Effets : disco ball 3D, smooth scroll Lenis, curseur custom, glow néon, scanlines, glitch

---

## Licence

© 2026 Johan Leroy.