readme

README.md

@@ -1,36 +1,107 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Mon site protfolio
+![illustration site](./picture.png)
+J'ai réalisé ce projet afin d'étendre mes compétences en développement Web. 
 
-## Getting Started
+Ce projet est un site web basé sur Next.js pour le frontend et Strapi pour le backend, hébergé sur un serveur Windows Server 2025 avec IIS comme serveur web. Il repose sur une architecture Headless CMS, où le contenu est géré via une API REST et affiché dynamiquement sur le frontend.
 
-First, run the development server:
+🔹 Technologies utilisées
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+Frontend (Client) :
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Framework : Next.js (React, TypeScript, Server-Side Rendering & Static Generation)
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+Styling : Tailwind CSS
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+Gestion des requêtes API : Fetch API (avec qs pour structurer les requêtes)
 
-## Learn More
+SEO & Performance : Optimisation des images, pré-rendu des pages
 
-To learn more about Next.js, take a look at the following resources:
+Backend (Serveur) :
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+CMS : Strapi (Node.js, API REST)
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+Base de données : PostgreSQL ou MySQL
 
-## Deploy on Vercel
+Hébergement : IIS sur Windows Server 2025
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+Sécurité : HTTPS activé via Win-ACME (Let’s Encrypt)
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+Déploiement & Infrastructure :
+
+Système d’exploitation : Windows Server 2025
+
+Serveur Web : IIS 10 (gestion des proxys et reverse proxy pour Next.js & Strapi)
+
+Gestion des certificats SSL : Win-ACME pour le renouvellement automatique des certificats HTTPS
+
+Monitoring : Logs IIS + Console Next.js & Strapi
+
+🔹 Fonctionnalités du site
+
+✅ Affichage dynamique des compétences (compétences récupérées via API Strapi)
+
+✅ Glossaire interactif avec mots-clés détectés dynamiquement
+
+✅ Carousel d'images pour présenter les compétences
+
+✅ Navigation rapide et fluide grâce à Next.js
+
+✅ SEO optimisé via les pages statiques et le rendu dynamique
+
+Ce projet est toujours en développement, je l'agrémenterai de contenu au fil du temps.
+
+Il m'a permis brièvement de me familiariser a plusieurs domaines.
+
+1️⃣ Développement Web 🌐
+
+Ce projet est principalement un site web dynamique reposant sur Next.js et Strapi, ce qui le place dans la catégorie du développement web moderne.
+
+Frontend (Next.js, React, TypeScript) → Développement web côté client
+
+Backend (Strapi, Node.js, API REST) → Développement web côté serveur
+
+API et Headless CMS → Gestion de contenu via une API
+
+2️⃣ Hébergement et Administration Systèmes 🖥️
+
+Étant donné que le site est auto-hébergé sur un serveur Windows Server 2025 avec IIS, il appartient aussi à la catégorie administration système et hébergement web.
+
+Configuration d’un serveur web (IIS, Windows Server 2025)
+
+Gestion des certificats SSL avec Win-ACME (HTTPS, sécurité)
+
+Base de données (PostgreSQL ou MySQL)
+
+Surveillance et gestion des performances (logs IIS, monitoring)
+
+3️⃣ Cloud & DevOps (partiellement) ☁️
+
+Même si ce projet n’utilise pas un service cloud public (Azure, AWS, GCP), il comporte des éléments liés à l’automatisation et à la gestion des déploiements.
+
+Déploiement d’une application Next.js & Strapi sur un serveur dédié
+
+Gestion des certificats SSL automatisée (Win-ACME, Let's Encrypt)
+
+Possibilité d’extensions avec CI/CD pour automatiser les mises à jour
+
+4️⃣ Sécurité Informatique 🔒
+
+Avec l’implémentation du HTTPS, de l’authentification API et de la gestion des accès via Strapi et IIS, ce projet a aussi un aspect cybersécurité.
+
+Chiffrement des connexions avec SSL/TLS (HTTPS activé)
+
+Protection des API (Cors, Access-Control-Allow-Origin, JWT si activé dans Strapi)
+
+Gestion des permissions et authentification des utilisateurs (Strapi)
+
+5️⃣ Expérience Utilisateur & SEO 📈
+
+Le projet est conçu pour être rapide, interactif et optimisé pour le référencement.
+
+SEO optimisé avec Next.js (Static Generation, Server-Side Rendering)
+
+Performance améliorée grâce au préchargement et à la mise en cache
+
+Expérience utilisateur fluide avec des animations et une navigation rapide
+
+[lien du site] [https://fernandgrascalvet.com]

app/components/ModalGlossaire.tsx

@@ -51,7 +51,7 @@ export default function ModalGlossaire({ mot, onClose }: ModalGlossaireProps) {
         <button className="absolute top-3 right-3 text-gray-700 text-2xl" onClick={onClose}>
           ✖
         </button>
-
+      
         {/* Titre */}
         <h2 className="text-3xl font-bold mb-4">{mot.mot_clef}</h2>
 

app/utils/sendMessage.ts

@@ -1,16 +1,22 @@
+// 🔥 Importation de l'URL dynamique
+import { getApiUrl } from "./getApiUrl";
+
 // Fonction pour envoyer un message à l'API Strapi
 export async function sendMessage(name: string, email: string, message: string) {
   // Formatage de la date et de l'heure en français
-  const dateTime = new Date().toLocaleString("fr-FR", { timeZone: "Europe/Paris" }); // ✅ Date formatée en français
+  const dateTime = new Date().toLocaleString("fr-FR", { timeZone: "Europe/Paris" });
 
   // Ajout de la date à la fin du message
-  const messageWithDate = `${message}\n\n📅 Envoyé le : ${dateTime}`; // ✅ Ajout de la date à la fin du message
+  const messageWithDate = `${message}\n\n📅 Envoyé le : ${dateTime}`;
 
   // Log des informations du message avant l'envoi
   console.log("📨 Envoi du message...", { name, email, messageWithDate });
 
+  // Récupération de l'URL API dynamique
+  const apiUrl = getApiUrl();
+
   // Envoi du message à l'API Strapi
-  const res = await fetch("http://localhost:1337/api/messages", {
+  const res = await fetch(`${apiUrl}/api/messages`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -19,7 +25,7 @@ export async function sendMessage(name: string, email: string, message: string)
       data: {  
         name: name,
         email: email,
-        message: messageWithDate,  // ✅ Message modifié avec la date
+        message: messageWithDate,
       },
     }),
   });
@@ -36,4 +42,4 @@ export async function sendMessage(name: string, email: string, message: string)
   // Log de la réussite de l'envoi du message
   console.log("✅ Message envoyé avec succès !", responseData);
   return responseData;
-}
+}