add react project

Author: erpicoding

data/languageData.json

@@ -9,12 +9,13 @@
     "Info2": "Wenn du Interesse an einer Zusammenarbeit hast, kontaktiere mich gerne!",
     "6": "Seit",
     "7": "Bald",
-    "8": "Hausaufgaben-Manager",
-    "9": "Verschlüsselungs-Programm",
-    "10": "Öffnen",
-    "11": "Neuer Rekord!",
-    "12": "Fehlgeschlagene Versuche: ",
-    "13": "Schließen"
+    "OpenProject": "Öffnen",
+    "Project1": "Hausaufgaben-Manager",
+    "Project2": "Verschlüsselungs-Programm",
+    "Project3": "Neverseen_TV Linktree",
+    "Game1": "Neuer Rekord!",
+    "Game2": "Fehlgeschlagene Versuche: ",
+    "Game3": "Schließen"
   },
   "english": {
     "Header1": "About me",
@@ -26,11 +27,12 @@
     "Info2": "If you’re interested in working together, feel free to get in touch!",
     "6": "since",
     "7": "soon",
-    "8": "homework manager",
-    "9": "encrypting tool",
-    "10": "Open",
-    "11": "New highscore!",
-    "12": "failed trys: ",
-    "13": "close"
+    "OpenProject": "Open",
+    "Project1": "homework manager",
+    "Project2": "encrypting tool",
+    "Project3": "Neverseen_TV linktree",
+    "Game1": "New highscore!",
+    "Game2": "failed trys: ",
+    "Game3": "close"
   }
 }

img/hausaufgaben-manager.png

@@ -119,7 +119,9 @@ <h2 class="translateHeader2"></h2>
           <div class="technology">
             <img class="logo react" src="./img/logos/react.png" />
             <div class="line"></div>
-            <p>React<br /><span class="translate7"></span></p>
+            <p>
+              React<br /><span><span class="translate6"></span> 2025</span>
+            </p>
           </div>
           <div class="technology">
             <img class="logo" src="./img/logos/nextjs.png" />
@@ -132,13 +134,13 @@ <h2 class="translateHeader2"></h2>
         <h2 class="sectionHeading translateHeader3"></h2>
         <div class="projektContainer">
           <div class="projekt">
-            <h3 class="translate8"></h3>
-            <img width="100%" src="./img/hausaufgaben-manager.png" />
+            <h3 class="translateProject1"></h3>
+            <img width="100%" src="./img/hausaufgaben-manager.webp" />
             <p><span>HTML</span><span>CSS</span><span>JavaScript</span></p>
             <div class="links">
               <a
                 href="https://erpicoding.github.io/Hausaufgaben-Manager"
-                class="translate10"
+                class="translateOpenProject"
               ></a>
               <a
                 class="github"
@@ -149,13 +151,13 @@ <h3 class="translate8"></h3>
           </div>
 
           <div class="projekt">
-            <h3 class="translate9"></h3>
+            <h3 class="translateProject2"></h3>
             <img width="100%" src="./img/smg.png" />
             <p><span>HTML</span><span>CSS</span><span>JavaScript</span></p>
             <div class="links">
               <a
                 href="https://erpicoding.github.io/secret-message-generator/"
-                class="translate10"
+                class="translateOpenProject"
               ></a>
               <a
                 class="github"
@@ -164,15 +166,24 @@ <h3 class="translate9"></h3>
               >
             </div>
           </div>
+
+          <div class="projekt">
+            <h3 class="translateProject3"></h3>
+            <img width="100%" src="./img/nvs.webp" />
+            <p><span>React</span><span>TailwindCSS</span></p>
+            <div class="links">
+              <a href="https://neverseentv.de" class="translateOpenProject"></a>
+            </div>
+          </div>
         </div>
       </section>
     </main>
 
     <dialog id="newRecord" class="newRecord">
-      <h1 class="translate11"></h1>
+      <h1 class="translateGame1"></h1>
       <div><h1 id="recordField"></h1></div>
-      <p><span class="translate12"></span><span id="trysField"></span></p>
-      <button class="translate13" onclick="newRecord.close()">Fertig</button>
+      <p><span class="translateGame2"></span><span id="trysField"></span></p>
+      <button class="translateGame3" onclick="newRecord.close()">Fertig</button>
     </dialog>
     <script src="./script.js" defer></script>
   </body>

img/hausaufgaben-manager.webp

@@ -26,6 +26,7 @@ async function setLanguage(language) {
   let languageData = {};
 
   fetch("https://erpicoding.github.io/data/languageData.json")
+    // fetch("/erpicoding.github.io/data/languageData.json") //local
     .then((res) => res.json())
     .then((data) => {
       languageData = data;

img/headerBackground.png

@@ -57,7 +57,7 @@ dialog#ha a {
 /*header bild*/
 header {
   min-height: 100vh;
-  background: linear-gradient(hsla(180, 80%, 50%, 0.5), rgba(0, 0, 0, 0.7)), url(./img/headerBackground.png) center/cover no-repeat;
+  background: linear-gradient(hsla(180, 80%, 50%, 0.5), rgba(0, 0, 0, 0.7)), url(./img/headerBackground.webp) center/cover no-repeat;
 }
 
 /*header link liste*/

img/nvs.webp

@@ -87,7 +87,7 @@ dialog#ha {
 header {
   min-height: 100vh;
   background: linear-gradient($petrol-transparent, rgba(0, 0, 0, 0.7)),
-    url(./img/headerBackground.png) center/cover no-repeat;
+    url(./img/headerBackground.webp) center/cover no-repeat;
 }
 
 /*header link liste*/