Update readme

add site stucture

Author: Martzcode

README.md

@@ -1,2 +1,40 @@
-# martzcode.github.io
-Portfolio de Développeur Full Stack, spécialisé dans le développement web moderne. Je conçois des applications performantes et maintenables avec Java / Spring Boot, Node.js, TypeScript, NestJS, React et Angular. Découvrez ici mes projets, mes compétences et mes réalisations orientées qualité logicielle.
+# 🚀 Portfolio de Marcello Samiandrisoa
+
+Ce dépôt contient le code source de mon portfolio professionnel. C'est un site web moderne, performant et entièrement responsive conçu pour présenter mes compétences et mes expériences en tant que Développeur Fullstack.
+
+## 🛠️ Stack Technique
+
+- **HTML5** : Structure sémantique et optimisée SEO.
+- **Tailwind CSS (CDN)** : Framework CSS utilitaire pour un design premium et rapide.
+- **JavaScript (Vanilla)** : Logique personnalisée pour la navigation, le mode sombre et les animations.
+- **Google Fonts** : Utilisation de *Montserrat* (titres) et *Lato* (corps).
+- **FontAwesome & Devicons** : Iconographie moderne.
+
+## 📁 Architecture du Projet
+
+Le projet est organisé de manière modulaire pour faciliter l'ajout de futurs contenus :
+
+- `index.html` : La page d'accueil principale optimisée pour le SEO.
+- `style.css` : Styles globaux, variables de thème et système de défilement One-Page.
+- `script.js` : Gestion des interactions (thème, navigation mobile, carrousel).
+- `/assets` : Ressources statiques du site.
+  - `/icons` : Icônes SVG personnalisées (dont le terminal moderne).
+  - `/images` : Captures d'écran et médias.
+  - `/logos` : Logos des entreprises et universités.
+  - `/cursors` : Curseurs personnalisés inspirés de macOS.
+  - `/docs` : Documents téléchargeables (CV, etc.).
+- `/site` : Contenus additionnels et futures pages.
+  - `/projects` : Pages de détails des projets.
+  - `/pages` : Pages annexes.
+  - `/components` : Éléments HTML réutilisables.
+
+## 🌟 Fonctionnalités Clés
+
+- **Mode Sombre** : Détection automatique et bascule manuelle avec transition douce.
+- **One Page Scroll** : Système de défilement vertical par section avec "snap".
+- **Carrousel d'Expériences** : Navigation horizontale avec indicateurs interactifs.
+- **Optimisation SEO** : Meta-tags complets et données structurées JSON-LD.
+- **Adaptivité** : Optimisé pour tous les écrans (mobile, tablette, desktop).
+
+---
+© 2026 Marcello Samiandrisoa

index.html

@@ -145,11 +145,21 @@
 
     <!-- Mobile Menu -->
     <div id="mobile-nav"
-        class="fixed inset-0 bg-bg-main/95 z-[1100] opacity-0 pointer-events-none transition-all duration-300 flex flex-col items-center justify-center gap-8 md:hidden">
-        <a href="#skills" class="text-2xl font-semibold hover:text-primary transition-colors">Compétences</a>
-        <a href="#experience" class="text-2xl font-semibold hover:text-primary transition-colors">Expériences</a>
-        <a href="#education" class="text-2xl font-semibold hover:text-primary transition-colors">Formation</a>
-        <a href="#contact" class="text-2xl font-semibold hover:text-primary transition-colors">Contact</a>
+        class="fixed inset-0 bg-bg-main z-[1100] opacity-0 pointer-events-none transition-all duration-500 flex flex-col items-center justify-center gap-6 md:hidden">
+
+        <!-- Subtle background blur for the overlay -->
+        <div class="absolute inset-0 backdrop-blur-xl"></div>
+
+        <div class="relative z-10 flex flex-col items-center gap-6 w-full px-8">
+            <a href="#skills"
+                class="w-full max-w-xs py-4 text-center text-2xl font-bold border border-border-color rounded-2xl bg-bg-card/50 hover:bg-primary hover:text-white transition-all">Compétences</a>
+            <a href="#experience"
+                class="w-full max-w-xs py-4 text-center text-2xl font-bold border border-border-color rounded-2xl bg-bg-card/50 hover:bg-primary hover:text-white transition-all">Expériences</a>
+            <a href="#education"
+                class="w-full max-w-xs py-4 text-center text-2xl font-bold border border-border-color rounded-2xl bg-bg-card/50 hover:bg-primary hover:text-white transition-all">Formation</a>
+            <a href="#contact"
+                class="w-full max-w-xs py-4 text-center text-2xl font-bold border border-border-color rounded-2xl bg-bg-card/50 hover:bg-primary hover:text-white transition-all">Contact</a>
+        </div>
     </div>
 
     <main id="scroll-container">

site/README.md

@@ -0,0 +1,16 @@
+# 📁 Structure des Pages Additionnelles
+
+Ce dossier centralise les contenus futurs et les éléments structurels du site web.
+
+## 🗂️ Sous-répertoires
+
+- **`/projects`** : Destiné à accueillir les pages HTML détaillées pour chaque projet mis en avant sur le portfolio.
+- **`/pages`** : Réservé aux pages statiques indépendantes (ex: page de remerciement, version longue du CV, mentions légales).
+- **`/components`** : Destiné au stockage de fragments de code réutilisables ou de futurs templates partagés entre les différentes pages du site.
+
+## 💡 Conseils pour l'évolutivité
+
+Lors de la création de nouvelles pages dans ces dossiers, veillez à :
+1. référencer correctement les styles globaux (`../style.css`) et les scripts (`../script.js`).
+2. Utiliser les classes Tailwind pour maintenir la cohérence visuelle avec la page d'accueil.
+3. Utiliser les icônes stockées dans `/assets/icons` pour la cohérence de la marque.