🎉 initial commit

Author: LoupesDEV

LICENSE

@@ -1,105 +1,37 @@
-# Portfolio - Mathéo PICHOT-MOÏSE
+# 🚀 ORATIS
 
-Bienvenue sur mon portfolio ! Ce projet met en avant mes compétences, mes réalisations et mes services en tant que développeur passionné par les expériences interactives et le design innovant.
+## 📜 Description
 
-## 🎯 Objectif
+**ORATIS** est un groupe de développement créatif et innovant, dédié à la création de solutions technologiques avancées. Ce projet constitue le site web officiel du groupe, présentant son équipe, ses valeurs, et des informations clés.
 
-Ce site a pour but de :
-
-- Présenter mon parcours et mes compétences techniques.
-- Mettre en avant mes projets en développement web, logiciels et intelligence artificielle.
-- Offrir un accès simple à mes services et à mon expertise.
-- Faciliter la prise de contact avec moi.
-
-## 🌐 Démo
-
-Vous pouvez consulter une démo en ligne de mon portfolio [ici](https://www.matheo-pichotmoise.fr)
-
-## 🛠 Technologies Utilisées
-
-Ce projet a été développé avec les technologies suivantes :
-
-- **React.js** - Bibliothèque JavaScript pour la construction d'interfaces utilisateur dynamiques
-- **Material UI** - Composants React pour une interface utilisateur moderne
-- **CSS3 & Tailwind CSS** - Style et mise en page
-- **JavaScript (ES6+)** - Fonctionnalités interactives et animations avancées
-- **Framer Motion & GSAP** - Animations fluides et effets interactifs
-- **EmailJS** - Gestion de l'envoi des emails depuis le formulaire de contact
-
-## 📌 Fonctionnalités
-
-- **Interface immersive** avec animations modernes et interactions avancées.
-- **Sections dynamiques** : Accueil, À propos, Projets, Parcours, et Contact.
-- **Affichage interactif des projets** avec détails et animations.
-- **Formulaire de contact fonctionnel** avec envoi d'email via EmailJS.
-- **Optimisation mobile** pour une expérience fluide sur tous les supports.
-- **Navigation interactive** avec un menu fixe en version desktop et un menu bottom pour mobile.
-
-## 📂 Structure du projet
+## 📂 Structure du Projet
 
 ```
-portfolio/
-├── public/
-│   ├── index.html       # Fichier HTML principal
-├── src/
-│   ├── Components/      # Composants
-│   ├── Images/          # Ressources
-│   ├── Styles/          # Feuilles de style CSS
-│   ├── App.js           # Composant principal
-│   ├── index.js         # Point d'entrée de l'application React
-│   ├── data.js          # Données des projets et informations personnelles
-│   ├── ScrollToTop.jsx  # Gestion du scrolling dynamique
-├── .gitignore           # Fichiers à ignorer par Git
-├── CNAME                # Configuration du domaine personnalisé
-├── CODE_OF_CONDUCT.md   # Code de conduite du projet
-├── CONTRIBUTING.md      # Guide de contribution
-├── LICENSE              # Licence du projet
-├── package-lock.json    # Dépendances verrouillées
-├── package.json         # Dépendances et scripts
-└── README.md            # Documentation du projet
+ORATIS/
+├── assets/           # Contient les ressources multimédia (images, vidéos, icônes)
+├── bot/              # Contient les pages liées au bot (privacy, terms, etc.)
+│   ├── privacy.html  # Politique de confidentialité
+│   ├── styles.css    # Feuille de style pour la mise en page
+│   └── terms.html    # Conditions d'utilisation
+├── CNAME             # Nom de domaine personnalisé pour GitHub Pages
+├── docs.html         # Documentation technique et utilisateur
+├── index.html        # Page d'accueil du site ORATIS
+├── kuco.html         # Page dédiée à Kuco (fondateur du projet)
+└── sadnesse.html     # Page dédiée à SadNesse (collaborateur)
 ```
 
-## 🚀 Installation et Exécution
-
-1. Cloner ce dépôt :
-   ```bash
-   git clone https://github.com/KucoDEV/portfolio.git
-   ```
-2. Installer les dépendances :
-   ```bash
-   cd portfolio
-   npm install
-   ```
-3. Lancer l'application en local :
-   ```bash
-   npm start
-   ```
-4. Accéder à (`http://localhost:3000`)[http://localhost:3000] dans votre navigateur.
+## 🌐 Site Web
 
-## 🚢 Déploiement sur GitHub Pages
+📍 [**Lien**](https://www.oratis.fr)<br>📍 [**Documentation**](https://www.oratis.fr/docs)
 
-1. Assurez-vous que `gh-pages` est bien installé et que les scripts suivants sont déjà ajoutés dans `package.json` :
-   ```json
-   "scripts": {
-      "predeploy": "npm run build",
-      "deploy": "gh-pages -d build"
-   }
-   ```
+## 🚀 Installation et Utilisation
 
-2. Déployer le projet avec la commande :
-   ```bash
-   npm run deploy
+1. Clonez ce repository :
+   ```sh
+   git clone https://github.com/KucoDEV/ORATIS.git
    ```
-
-3. Configurer GitHub Pages :
-   - Aller dans les paramètres du dépôt GitHub.
-   - Accéder à la section **Pages**.
-   - Vérifier que la branche `gh-pages` est bien sélectionnée comme source de déploiement.
+2. Ouvrez `index.html` dans votre navigateur pour accéder au site web localement.
 
 ## 📜 Licence
 
-Ce projet est sous licence **GNU General Public License v3.0 (GPL-3.0)**.  
-Vous êtes libre d'utiliser, modifier et distribuer ce projet tant que vous respectez les termes de la licence.  
-Cela inclut notamment l'obligation de **rendre publiques les modifications** si vous redistribuez le projet.  
-
-Pour plus d’informations, consultez la licence complète ici : [GPL-3.0 License](https://www.gnu.org/licenses/gpl-3.0.html).
+Ce projet est sous licence MIT. Vous êtes libre de le modifier et de le redistribuer.

README.md

@@ -0,0 +1,96 @@
+/* =========================
+   MEDIA
+========================= */
+const overlay = document.getElementById("overlay");
+const audio   = document.getElementById("background-audio");
+const volumeIcon = document.getElementById("volume-icon");
+const volumeSlider = document.getElementById("volume");
+
+function startMedia(){ overlay.classList.add("hidden"); audio?.play?.(); }
+function setVolume(v){
+  v = Math.max(0, Math.min(1, Number(v)));
+  if (audio) audio.volume = v;
+  if (volumeIcon) volumeIcon.src = v > 0 ? "assets/vol_on.png" : "assets/vol_off.png";
+}
+function toggleMute(){ setVolume(((audio?.volume||0)>0)?0:1); if (volumeSlider) volumeSlider.value = (audio?.volume||0); }
+window.addEventListener("load", ()=>{ const v = Number(localStorage.getItem("vol")||0.5); setVolume(v); if (volumeSlider) volumeSlider.value = v; });
+if (volumeSlider) volumeSlider.addEventListener("input", e=>{ setVolume(e.target.value); localStorage.setItem("vol", e.target.value); });
+
+/* =========================
+   MAP / ZOOM
+========================= */
+const svg     = document.getElementById("got-map");
+const panzoom = document.getElementById("panzoom");
+const backBtn = document.getElementById("back-btn");
+
+let activeRegion = null;
+
+function computeZoomToBBox(bbox, factor=0.82){
+  const viewW = svg.clientWidth;
+  const viewH = svg.clientHeight;
+  const scale = Math.min((viewW*factor)/bbox.width, (viewH*factor)/bbox.height);
+  const cx = bbox.x + bbox.width/2;
+  const cy = bbox.y + bbox.height/2;
+  const tx = (viewW/2) - (cx*scale);
+  const ty = (viewH/2) - (cy*scale);
+  return { scale, tx, ty };
+}
+
+function zoomToRegion(regionEl){
+  const bbox  = regionEl.getBBox();
+  const {scale, tx, ty} = computeZoomToBBox(bbox);
+  panzoom.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
+  // Reveal island info AFTER the zoom finishes
+  setTimeout(()=>{
+    regionEl.classList.add("active");
+    activeRegion = regionEl;
+    backBtn.classList.add("show");
+  }, 650);
+}
+
+function resetZoom(){
+  panzoom.style.transform = `translate(0px, 0px) scale(1)`;
+  if (activeRegion) activeRegion.classList.remove("active");
+  activeRegion = null;
+  backBtn.classList.remove("show");
+}
+
+/* Enable: clicking island zooms + reveals in-island info (About/Contact); 
+   Projects also zooms, and only then cities become clickable */
+document.querySelectorAll(".region").forEach(region=>{
+  region.addEventListener("click", ()=>{
+    // If already active -> do nothing (let Back handle zoom out)
+    if (activeRegion === region) return;
+    // Reset current active region first
+    if (activeRegion) { activeRegion.classList.remove("active"); }
+    zoomToRegion(region);
+  });
+});
+
+/* Cities: only clickable when Projects island is the active region */
+const modal       = document.getElementById("modal");
+const modalTitle  = document.getElementById("modal-title");
+const modalBody   = document.getElementById("modal-body");
+const modalClose  = document.getElementById("modal-close");
+
+function openModal(title, content){
+  modalTitle.textContent = title;
+  modalBody.innerHTML = content;
+  modal.classList.add("open");
+}
+function closeModal(){ modal.classList.remove("open"); }
+
+document.querySelectorAll(".city").forEach(city=>{
+  city.addEventListener("click", (e)=>{
+    e.stopPropagation();
+    if (!activeRegion || activeRegion.dataset.key !== "projects") return;
+    openModal(city.dataset.title, city.dataset.content);
+  });
+});
+
+modalClose.addEventListener("click", closeModal);
+
+/* Global handlers */
+backBtn.addEventListener("click", ()=>{ closeModal(); resetZoom(); });
+window.addEventListener("keydown", (e)=>{ if (e.key === "Escape") { closeModal(); resetZoom(); }});
+window.addEventListener("resize", ()=>{ if (activeRegion){ const b = activeRegion.getBBox(); const {scale, tx, ty} = computeZoomToBBox(b); panzoom.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`; }});

assets/background.mp3

@@ -0,0 +1,49 @@
+*{margin:0;padding:0;box-sizing:border-box}
+html,body{height:100%;width:100%;overflow:hidden;background:#0b1220;color:#fff;font-family:sans-serif}
+
+/* Overlay */
+#overlay{position:fixed;inset:0;z-index:1000;background:#000;display:flex;align-items:center;justify-content:center;cursor:pointer}
+#overlay.hidden{display:none}
+#overlay span{font:800 2.5rem sans-serif;color:#fff}
+
+/* Controls */
+.controls{position:fixed;top:20px;left:20px;z-index:1001;display:flex;flex-direction:column;gap:14px}
+.volume-control,.github-link{display:flex;align-items:center;gap:10px;background:#0009;padding:8px;border-radius:12px}
+.volume-control img,.github-link img{width:28px;cursor:pointer}
+.volume-bar{max-width:0;overflow:hidden;opacity:0;transition:.3s}
+.volume-control:hover .volume-bar{max-width:150px;opacity:1}
+.volume-bar input{width:150px}
+
+/* Back button */
+.back-btn{position:fixed;top:20px;right:20px;z-index:1001;background:#0009;color:#fff;border:none;padding:8px 14px;border-radius:8px;font-weight:700;cursor:pointer;display:none}
+.back-btn.show{display:block}
+
+/* Map */
+.map-container{position:fixed;inset:0}
+#got-map{width:100%;height:100%}
+.panzoom{transform-origin:0 0;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
+
+.land{fill:#d1c7a3;stroke:#2f2a1f;stroke-width:3;cursor:pointer}
+.region:hover .land{filter:drop-shadow(0 0 10px #a78bfa)}
+
+.region-label{font:800 46px sans-serif;fill:#fff;stroke:#000;stroke-width:3;text-anchor:middle;pointer-events:none}
+.poi-label{font:700 14px sans-serif;fill:#fff;text-shadow:0 1px 3px #000}
+
+/* Modal (Projects cities) */
+.modal{position:fixed;inset:0;background:#000c;display:none;align-items:center;justify-content:center;z-index:1002}
+.modal.open{display:flex}
+.modal-content{background:#1e293b;padding:20px;border-radius:12px;max-width:500px;width:90%;color:#fff;position:relative}
+.modal-close{position:absolute;top:10px;right:10px;background:#000;color:#fff;border:none;border-radius:50%;width:28px;height:28px;cursor:pointer}
+#modal-title{font:700 24px sans-serif;margin-bottom:10px}
+#modal-body{font:500 16px sans-serif}
+#modal-body img{margin-top:10px;max-width:100%;border-radius:6px}
+
+/* Info Panel (About/Contact) */
+.info-panel{position:fixed;top:0;right:0;height:100%;width:400px;background:#111827;transform:translateX(100%);transition:.4s ease;z-index:1003;padding:20px;overflow-y:auto}
+.info-panel.open{transform:translateX(0)}
+.panel-close{position:absolute;top:10px;left:10px;background:#000;color:#fff;border:none;border-radius:50%;width:28px;height:28px;cursor:pointer}
+#panel-title{font:700 28px sans-serif;margin-bottom:10px}
+#panel-body section{margin-bottom:20px}
+#panel-body h3{margin-bottom:6px;font-size:18px;font-weight:700}
+#panel-body ul{list-style:none;padding-left:0}
+#panel-body li{margin-bottom:4px}

assets/fonts/ROF.ttf

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Cyrex Realm — Mathéo</title>
+  <link rel="stylesheet" href="assets/styles.css"/>
+</head>
+<body>
+  <!-- Overlay -->
+  <div id="overlay" onclick="startMedia()">
+    <span>CLICK TO ENTER…</span>
+  </div>
+
+  <!-- Controls -->
+  <div class="controls">
+    <div class="volume-control">
+      <img id="volume-icon" src="assets/vol_on.png" alt="Volume" onclick="toggleMute()"/>
+      <div class="volume-bar">
+        <input id="volume" type="range" min="0" max="1" step="0.01" value="0.5" oninput="setVolume(this.value)"/>
+      </div>
+    </div>
+    <div class="github-link">
+      <a href="https://github.com/KucoDEV" target="_blank">
+        <img src="assets/github.png" alt="GitHub"/>
+      </a>
+    </div>
+  </div>
+
+  <!-- Back button -->
+  <button id="back-btn" class="back-btn">⟵ Back</button>
+
+  <!-- Info Panel -->
+  <aside id="info-panel" class="info-panel">
+    <button id="panel-close" class="panel-close">✕</button>
+    <h2 id="panel-title"></h2>
+    <div id="panel-body"></div>
+  </aside>
+
+  <!-- Modal (Projects cities) -->
+  <div id="modal" class="modal">
+    <div class="modal-content">
+      <button id="modal-close" class="modal-close">✕</button>
+      <h2 id="modal-title"></h2>
+      <div id="modal-body"></div>
+    </div>
+  </div>
+
+  <!-- Map -->
+  <div class="map-container">
+    <svg id="got-map" viewBox="0 0 1600 900" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <radialGradient id="sea" cx="50%" cy="50%" r="70%">
+          <stop offset="0%" stop-color="#182a5a"/>
+          <stop offset="100%" stop-color="#0b1220"/>
+        </radialGradient>
+        <g id="icon-city"><circle r="7" fill="#f8fafc" stroke="#111827" stroke-width="2"/></g>
+      </defs>
+
+      <rect x="0" y="0" width="1600" height="900" fill="url(#sea)"/>
+
+      <g id="panzoom" class="panzoom">
+        <!-- ABOUT ISLAND -->
+        <g class="region panel-region" data-key="about" data-title="ABOUT">
+          <path class="land" d="M250,500 C250,330 470,260 650,300 C800,330 880,460 850,600 C820,740 640,800 470,760 C300,720 250,640 250,500 Z"/>
+          <text class="region-label" x="520" y="480">ABOUT</text>
+        </g>
+
+        <!-- PROJECTS ISLAND -->
+        <g class="region" data-key="projects">
+          <path class="land" d="M900,250 C900,170 1080,120 1240,180 C1360,230 1380,350 1260,400 C1140,440 980,400 920,320 C900,300 900,280 900,250 Z"/>
+          <text class="region-label" x="1100" y="280">PROJECTS</text>
+
+          <g class="city" data-title="Project 1" data-content="<p>Placeholder Project 1</p><img src='https://via.placeholder.com/300x150?text=Project+1'/>" transform="translate(1020,330)">
+            <use href="#icon-city"/><text class="poi-label" x="12" y="-10">Project 1</text>
+          </g>
+          <g class="city" data-title="Project 2" data-content="<p>Placeholder Project 2</p><img src='https://via.placeholder.com/300x150?text=Project+2'/>" transform="translate(1150,340)">
+            <use href="#icon-city"/><text class="poi-label" x="12" y="-10">Project 2</text>
+          </g>
+          <g class="city" data-title="Project 3" data-content="<p>Placeholder Project 3</p><img src='https://via.placeholder.com/300x150?text=Project+3'/>" transform="translate(1060,380)">
+            <use href="#icon-city"/><text class="poi-label" x="12" y="-10">Project 3</text>
+          </g>
+          <g class="city" data-title="Project 4" data-content="<p>Placeholder Project 4</p><img src='https://via.placeholder.com/300x150?text=Project+4'/>" transform="translate(1200,310)">
+            <use href="#icon-city"/><text class="poi-label" x="12" y="-10">Project 4</text>
+          </g>
+        </g>
+
+        <!-- CONTACT ISLAND -->
+        <g class="region panel-region" data-key="contact" data-title="CONTACT">
+          <path class="land" d="M1100,600 C1100,500 1240,480 1360,520 C1450,560 1480,660 1400,720 C1320,780 1180,780 1120,720 C1100,700 1100,650 1100,600 Z"/>
+          <text class="region-label" x="1260" y="600">CONTACT</text>
+        </g>
+      </g>
+    </svg>
+  </div>
+
+  <!-- Media -->
+  <audio id="background-audio" loop>
+    <source src="assets/background.mp3" type="audio/mpeg"/>
+  </audio>
+
+  <script src="assets/scripts.js"></script>
+</body>
+</html>