Add VOJ logo

caca prout.txt

@@ -0,0 +1 @@
+AAAAAAAAAA

css/style.css

@@ -1,82 +1,206 @@
+:root {
+  --bg-color: #050b16;
+  --deep-blue: #0a192f;
+  --glass-light: rgba(255, 255, 255, 0.08);
+  --glass-border: rgba(255, 255, 255, 0.25);
+  --accent-yellow: #fcd53f;
+}
+
 body {
   font-family: 'Noto Sans', sans-serif;
-  background-color: #333;
-  color: #fff;
-}
-.container {
-  width: 80%;
-  margin: auto;
-  border: 2px solid #2ecccc;
-  border-radius: 25px;
+  background-color: var(--bg-color);
+  background-image: radial-gradient(at 10% 10%, rgba(10, 25, 47, 0.8) 0px, transparent 50%), radial-gradient(at 90% 90%, rgba(62, 202, 248, 0.15) 0px, transparent 50%), linear-gradient(135deg, #050b16 0%, #1a3c6f 100%);
+  color: #e6f1ff;
+  margin: 0;
   padding: 20px;
-  background-color: #444;
 }
-.nav a {
-  text-decoration: none;
-  color: #fff;
-  padding: 10px 20px;
-  border: 2px solid #2ecccc;
+
+.container {
+  background: rgba(10, 25, 47, 0.08);
+  backdrop-filter: blur(20px) saturate(180%);
+  border-radius: 30px;
+  border: 1px solid var(--glass-border);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
+  width: 80%;
+  margin: 40px auto;
+  padding: 40px;
+}
+
+hr {
+  border: none;
+  height: 2px;
+  width: 80%;
+  margin: 40px auto;
+  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
+  position: relative;
+  overflow: visible;
+}
+
+hr::after {
+  content: '';
+  position: absolute;
+  top: -5px;
+  left: 0;
+  width: 100%;
+  height: 12px;
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  border-radius: 10px;
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
+}
+
+.social-links, .projects {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.social-links a {
+  background: var(--glass-light);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+  padding: 15px;
+  border-radius: 20px;
+  transition: 0.3s;
+}
+
+.social-links a:hover {
+  background: rgba(255, 255, 255, 0.15);
+  transform: translateY(-5px);
+}
+
+.social-links img {
+  width: 40px;
+}
+
+/* --- Projects --- */
+.projects {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 25px;
+  margin-top: 20px;
+}
+
+.project {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(15px);
+  border: 1px solid var(--glass-border);
   border-radius: 25px;
-  background-color: #333;
-  transition: all 0.3s ease-in-out;
+  padding: 25px;
+  transition: 0.3s;
 }
-.nav a:hover {
-  background-color: #2ecccc;
-  color: #333;
-  cursor: pointer;
-  transition: all 0.3s ease-in-out;
+
+.project-header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 15px;
+}
+
+.project-header img {
+  width: 80px;
+  height: 80px;
+  border-radius: 15px;
+  object-fit: cover;
+  border: 1px solid var(--glass-border);
+}
+
+.project-info h2 {
+  margin: 0;
+  font-size: 1.5rem;
+  color: #fff;
+}
+
+/* --- Etiquettes (Tags) --- */
+.tag {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 50px;
+  font-size: 0.75rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  margin-top: 5px;
+}
+
+.purple-tag {
+  background: rgba(147, 51, 234, 0.2);
+  color: #d8b4fe;
+}
+
+.yellow-tag {
+  background: rgba(234, 179, 8, 0.2);
+  color:#fde047;
 }
 
 .video-container {
-  margin: 20px auto;
-  border: 2px solid #2ecccc;
-  border-radius: 25px;
-  overflow: hidden;
-  padding-bottom: 56.25%;
+  width: 100%;
+  aspect-ratio: 16 / 9;
   position: relative;
+  overflow: hidden;
+  border-radius: 25px;
+  border: 1px solid var(--glass-border);
+  background: rgba(0, 0, 0, 0.5);
 }
+
 .video-container iframe {
   position: absolute;
   top: 0;
   left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
 }
 
-header {
-  text-align: left;
-}
-.logo {
-  height: 60px;
-  width: 60px;
+.nav a {
+  text-decoration: none;
+  color: #fff;
+  padding: 15px 35px;
+  margin: 0 10px;
+  border-radius: 50px;
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+  transition: 0.3s;
   display: inline-block;
-  vertical-align: middle;
-  margin-right: 10px;
 }
+
+.nav a:hover {
+  background-color: var(--accent-yellow);
+  color: var(--deep-blue);
+  border-color: var(--accent-yellow);
+  box-shadow: 0 0 20px var(--accent-yellow);
+}
+
+.logo {
+  height: 128px;
+  width: 128px;
+  vertical-align: middle;
+  background: var(--glass-light);
+  backdrop-filter: blur(10px);
+  border-radius: 25px;
+  border: 1px solid var(--glass-border);
+  padding: 10px;
+}
+
 .title {
   display: inline-block;
-  font-size: 48px;
-  line-height: 60px;
+  font-size: 64px;
+  line-height: 128px;
   vertical-align: middle;
+  color: #fff;
 }
 
 div.footer {
+  background: rgba(10, 25, 47, 0.2);
+  backdrop-filter: blur(10px);
+  border-radius: 30px;
+  border: 1px solid var(--glass-border);
   width: 80%;
-  margin: auto;
-  border: 2px solid #2ecccc;
-  border-radius: 25px;
+  margin: 40px auto;
   padding: 20px;
-  background-color: #444;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  text-align: center;
 }
-
-img.flash {
-  display: inline-block;
-  width: 128px;
-  transition: 0.4s;
-};
-
-img.flash:hover {
-  transition: 0.4s;
-  width: 800px
-};

img/watchgether.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="100%" height="100%">
+  <!-- Fond Noir -->
+  
+  <!-- Style pour la police large et grasse -->
+  <style>
+    .logo-text {
+      font-family: 'Arial Black', 'Impact', sans-serif;
+      font-weight: 900;
+      letter-spacing: -2px;
+    }
+    .watch {
+      fill: #FFFFFF;
+    }
+    .gether {
+      fill: #60a5fa;
+    }
+  </style>
+  
+  <!-- 
+    x="50" et textLength="400" force les deux mots à faire 
+    exactement la même largeur (400px), alignés au millimètre.
+  -->
+  <text x="50" y="220" font-size="140" textLength="400" lengthAdjust="spacingAndGlyphs" class="logo-text watch">WATCH</text>
+  <text x="50" y="370" font-size="140" textLength="400" lengthAdjust="spacingAndGlyphs" class="logo-text gether">GETHER</text>
+</svg>

index.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
+  <link href="css/style.css?v=1.0.5" rel="stylesheet">
+  <link rel="icon" href="img/logo.png"> 
+  <title>Whykioh.fr - Mon Portefolio</title>
+</head>
+<body>
+<div class="container">
+  <header>
+    <a href="https://www.youtube.com/@whykioh" target="_blank">
+      <img class="logo" src="img/logo.png" alt="Logo">
+    </a>
+    <h1 class="title">Whykioh.fr</h1>
+  </header>
+  <div class="nav">
+		<a href="https://ko-fi.com/whykioh" target="_blank">Ko-Fi</a>
+    <a href="https://watchgether.whykioh.fr" target="_blank">WatchGether</a>
+    <a href="https://gamel0ver.whykioh.fr" target="_blank">GameL0ver</a>
+    <a href="https://vod.whykioh.fr" target="_blank">Jellyfin</a>
+    <a href="https://voj.whykioh.fr" target="_blank">Viens On Jette</a>
+    <a href="https://git.whykioh.fr/" target="_blank">Mes Repos</a>
+  </div>
+  <p><br></p>
+  <hr>
+  <h1>Bienvenue sur Whykioh.fr !</h1>
+  <p>Le centre de tous mes projets webs, applications, et autres.<br>N'hésitez pas à explorer ! Mais aussi à me soutenir via un avis, ou un don.</p>
+  <hr>
+  <h1>Mes Réseaux :</h1>
+  <p>Retrouvez-moi sur mes réseaux sociaux, et n'hésitez pas à me suivre !</p>
+  <div class="social-links">
+    <a href="https://www.youtube.com/@whykioh" target="_blank"><img src="img/youtube.png" alt="YouTube"></a>
+    <a href="https://www.instagram.com/whykioh/" target="_blank"><img src="img/instagram.webp" alt="Instagram"></a>
+    <a href="https://discord.gg/DaCAdCktCv" target="_blank"><img src="img/discord.webp" alt="Discord"></a>
+    <a href="https://ko-fi.com/whykioh" target="_blank"><img src="img/ko-fi.png" alt="Ko-fi"></a>
+  </div>
+  <hr>
+<h1>Mes Projets :</h1>
+<p>Voici quelques-uns de mes projets :</p>
+<div class="projects">
+  
+  <div class="project">
+    <a href="https://watchgether.whykioh.fr" target="_blank" style="text-decoration: none; color: inherit;">
+      <div class="project-header">
+        <img src="img/watchgether.svg" alt="WatchGether">
+        <div class="project-info">
+          <h2>WatchGether</h2>
+          <span class="tag purple-tag">In Progress</span>
+        </div>
+      </div>
+    </a>
+    <p>
+      WatchGether est une liste de film à regarder en duo, WatchGether analyse et compare les listes du duo pour trouver des films en commun et en rapport avec les thèmes et genre apprécié de chaque utilisateur. Pour l'instant WatchGether n'est utilisable que par moi, mais sera ouvert au public prochainement.
+    </p>
+  </div>
+
+  <div class="project">
+    <a href="https://gamel0ver.whykioh.fr" target="_blank" style="text-decoration: none; color: inherit;">
+      <div class="project-header">
+        <img src="img/gamel0ver.png" alt="GameL0ver">
+        <div class="project-info">
+          <h2>GameL0ver</h2>
+          <span class="tag yellow-tag">Coming Soon</span>
+        </div>
+      </div>
+    </a>
+    <p>
+      GameL0ver est un site de rencontre pour les joueurs, il permet de trouver des personnes avec qui jouer, voire même peut être l'amour, à des jeux vidéo en fonction de leurs préférences et de leurs jeux favoris. GameL0ver permet de discuter publiquement et même en privé et intègre un système de match avec des Likes et des Pass. GameL0ver est actuellement en développement et sera bientôt disponible.
+    </p>
+  </div>
+
+  <div class="project">
+    <a href="https://whykioh.fr/blindtube" target="_blank" style="text-decoration: none; color: inherit;">
+      <div class="project-header">
+        <img src="img/BlindTube.png" alt="BlindTube">
+        <div class="project-info">
+          <h2>BlindTube</h2>
+          <span class="tag purple-tag">In Progress</span>
+        </div>
+      </div>
+    </a>
+    <p>
+      BlindTube est une application de Blind Test pour YouTube Music, elle permet d'effectuer un blind test seul ou à plusieurs en partant de vos playlists YouTube Music. BlindTube est actuellement en développement et sera disponible.
+    </p>
+  </div>
+
+  <div class="project">
+    <a href="https://voj.whykioh.fr" target="_blank" style="text-decoration: none; color: inherit;">
+      <div class="project-header">
+        <img src="img/viensonjette.png" alt="Viens On Jette">
+        <div class="project-info">
+          <h2>Viens On Jette</h2>
+          <span class="tag green-tag">Disponible</span>
+        </div>
+      </div>
+    </a>
+    <p>
+      Viens On Jette est un duo avec mon ami <a href="https://www.youtube.com/@naxo175_" target="_blank">Naxo</a> sur YouTube, nous faisons des vidéos de jeux vidéo, des courts-métrages et d'autres contenus. Regardez dès maintenant !
+    </p>
+  </div>
+</div>
+  <hr>
+  <h1>Voici la dernière vidéo de <a href="https://www.youtube.com/@whykioh">Whykioh</a> :</h1>
+  <div class="video-container">
+    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/q1rJG0Ue3d0?si=maK0gmAaMX2IDL67" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+  </div>
+</div>
+<div class="footer">
+  Copyright | Whykioh® 2021-2026 | CIBOT NOËL Noah | <a href="https://ko-fi.com/whykioh" target="_blank">Ko-fi</a>
+</div>
+</body>
+</html>

index.php

@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet">
-  <link href="css/style.css" rel="stylesheet">
-  <link rel="icon" href="img/logo.png"> 
-  <title>love</title>
-</head>
-<body>
-<div class="container">
-  <header>
-    <a href="https://www.youtube.com/@whykioh" target="_blank">
-      <img class="logo" src="img/logo.png" alt="Logo">
-    </a>
-    <h1 class="title">WhyKorp</h1>
-  </header>
-  <div class="nav">
-    <a href="#">Accueil</a>
-    <a href="infos/index.php">Infos</a>
-		<a href="https://artists.magroove.com/en/lt/whykioh/" target="_blank">Link Tree</a>
-		<a href="tools/index.html">Outils</a>
-		<a href="ruty/index.php">Ruty</a>
-		<a href="lolivator/index.php">LoLivator</a>
-    <a href="jpc/index.html">JPC</a>
-		<a href="archives/index.php">Archives</a>
-  </div>
-  <p><br></p>
-  <hr>
-  <h1>Bienvenue sur le site officiel de la WhyKorp !</h1>
-  <p>Vous y trouverez tout sur Whykioh aka Noah, et la WhyKorp.<br>Attention ! Site en cours de développement !<br>Si un disfonctionnement est trouvé veuillez le signaler.</p>
-  <hr>
-  <h1>Flash Info !</h1>
-  <div class="flash">
-    <p class="flash">Noah a enfin terminé l'EP 4 Elements, <br>il sera disponible sur toutes les plateformes <br>le 25 Décembre 2023</p>
-    <img class="flash" src="img/last cover.png">
-  </div>
-  <hr>
-  <h1>Voici la dernière vidéo de <a href="https://www.youtube.com/@whykioh">Whykioh</a> :</h1>
-  <div class="video-container">
-    <iframe width="557,55" height="315" src="https://www.youtube.com/embed/-ZPjXjvdZFc?si=ldsNogAHy636GnzU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
-  </div>
-</div>
-<div class="footer">
-  Copyright | Whykorp® 2021-2024 | ajoute le nom du site après l'url et un /
-</div>
-</body>
-</html>