jarvis09-yann · jarvis09-yann · Aug 20, 2024 · Jul 21, 2024 · Jul 21, 2024 · Jul 23, 2024
diff --git a/about.html b/about.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>About - jarvis09.com</title>
+    <meta name="description" content="jarvis09's very fancy portfolio" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="./style.css" />
+    <script
+      defer
+      src="https://umami.jarvis09.com/script.js"
+      data-website-id="e3d4baa8-64d2-44a4-ae27-fff037bd7776"
+    ></script>
+  </head>
+  <body>
+    <!--[if lt IE 7]>
+      <p class="browsehappy">
+        You are using an <strong>outdated</strong> browser. Please
+        <a href="#">upgrade your browser</a> to improve your experience.
+      </p>
+    <![endif]-->
+    <section>
+      <div class="secondary-title">
+        <h1 class="gradient-text">About</h1>
+        <h2 class="subtitle">About This website</h2>
+      </div>
+      <div class="qna-container">
+        <ul>
+          <li>Q: What tech stack does this website use ?</li>
+          <li>A: HTML, CSS, and vanilla JS <br /><br /></li>
+          <li>Q: What is the video on the first page ?</li>
+          <li>
+            A: The
+            <a
+              class="bold link"
+              href="https://www.youtube.com/watch?v=P_nj6wW6Gsc"
+              >KSP2 Trailer</a
+            ><br /><br />
+          </li>
+          <li>Q: I want to give you all my life savings!!!</li>
+          <li>A: Sure, send me an email :x<br /><br /></li>
+          <li>Q: Why this video?</li>
+          <li>
+            A: It's just beautiful with a song i love and i gotta make up for
+            the 50€ i got scammed by this game <br />(FUCK YOU TAKE TWO!!!)<br /><br />
+          </li>
+          <li>Q: I want to steal this website from you!</li>
+          <li>A: Sure, as long as you credit me.<br /><br /></li>
+          <p>
+            If you have any more question or anything to say feel free to send
+            me an email or DM on discord
+          </p>
+        </ul>
+      </div>
+      <div class="subtext-container">
+        <p class="subtext">
+          NOTE: This website uses a tiny bit of tracking provided by
+          <a href="https://umami.is" class="link bold">umami</a>. No data goes
+          to any third party (everything is selfhosted). The data is collected
+          anonymously and includes: The country you access this website from,
+          device, browser, pages you visit and operating system. This data is
+          just for analytics purposes (im curious about who is visiting my
+          website :x). Thanks for your understanding :-)
+        </p>
+      </div>
+      <footer>
+        <p>
+          Made with ❤️ by <span class="bold">jarvis09</span> -
+          <a class="bold link" href="./">Go Back</a>
+          -
+          <a class="bold link" href="https://github.com/jarvis09-yann/portfolio"
+            >Github</a
+          >
+          (repo of this website)
+        </p>
+      </footer>
+    </section>
+    <script src="" async defer></script>
+  </body>
+</html>
diff --git a/app.js b/app.js
@@ -1,101 +1,19 @@
-var audio;
-const playPauseButton = document.getElementById("play-pause");
-const scrollNotice = document.getElementById("scroll-notice-container");
+const video = document.getElementById("bg-video");
+const firstPage = document.querySelector(".first-page");
 
-const observer = new IntersectionObserver((entries) => {
-  entries.forEach((entry) => {
-    // console.log(entry);
-    if (entry.isIntersecting) {
-      entry.target.classList.add("show");
-    } else {
-      entry.target.classList.remove("show");
-    }
-  });
-});
-const hiddenElements = document.querySelectorAll(".hidden");
-hiddenElements.forEach((el) => observer.observe(el));
-
-// Setting up particles.js
-particlesJS.load("particles-js", "./assets/particles.json");
-
-// Setting up ityped (typing animation)
-ityped.init(document.querySelector("#ityped"), {
-  showCursor: true,
-  strings: [
-    "plane enjoyer",
-    "tech enthusiast",
-    "bad programmer",
-    "gamer",
-    "frenchman",
-  ],
-  backDelay: 800,
-  typeSpeed: 70,
-  backSpeed: 50,
-});
-
-console.log(
-  "Hello fellow dev! check out the website of the gigachad who fixed my code (and let me steal a good chunck of it) - QAEZZ :) (https://qaezz.dev)"
-);
-function toggleMusic() {
-  if (playPauseButton.classList.contains("fa-play")) {
-    playPauseButton.classList.remove("fa-play");
-    playPauseButton.classList.add("fa-pause");
-
-    if (playPauseButton.classList.contains("first-run")) {
-      playPauseButton.classList.remove("first-run");
-
-      audio = new Audio("./assets/M83-Outro-edited.mp3");
-      console.log("The cake is a lie.");
-    }
-    audio.volume = 0.5;
-    audio.play();
+firstPage.addEventListener("click", function () {
+  if (video.muted) {
+    video.muted = false;
+    video.volume = 0.5;
   } else {
-    playPauseButton.classList.remove("fa-pause");
-    playPauseButton.classList.add("fa-play");
-
-    audio.pause();
+    video.muted = true;
   }
-}
-var scrollPosition = window.scrollY; // Using this i case a reload is done on the second page
-scrollNotice.style.opacity = 1 - scrollPosition / 300;
-
-window.addEventListener("scroll", function () {
-  var scrollPosition = window.scrollY; // Get scroll position
-  scrollNotice.style.opacity = 1 - scrollPosition / 300; // reduces opacity accordingly
 });
 
-//TODO: add splash screen
-// var splashScreen = document.querySelector("#splash-screen");
-// var websiteContent = document.querySelector("#website-content");
-// splashScreen.addEventListener("click", () => {
-//   splashScreen.style.opacity = 0;
-//   setTimeout(() => {
-//     splashScreen.classList.add("hidden");
-//     document.getElementById("website-content").style.display = "block";
-//     toggleMusic();
-//     // document.getElementById("website-content").style.display = "block"; // Show website content
-//   }, 0.3);
+// document.addEventListener("scroll", function () { // TODO: Choose whether to use this or not
+//   if (window.scrollY > 0) {
+//     video.pause();
+//   } else {
+//     video.play();
+//   }
 // });
-
-function handleTooltip(noteId, tooltipId) {
-  let note = document.getElementById(noteId);
-  let tooltip = document.getElementById(tooltipId);
-
-  note.addEventListener("mouseover", function () {
-    tooltip.style.opacity = 1;
-  });
-  note.addEventListener("mouseout", function () {
-    tooltip.style.opacity = 0;
-  });
-  note.addEventListener("mousemove", function (e) {
-    tooltip.style.left = e.pageX + 10 + "px";
-    tooltip.style.top = e.pageY + 10 + "px";
-  });
-}
-
-handleTooltip("ksp-note", "ksp-tooltip");
-handleTooltip("msfs-note", "msfs-tooltip");
-handleTooltip("code-note", "code-tooltip");
-handleTooltip("cpp-note", "cpp-tooltip");
-handleTooltip("debian-note", "debian-tooltip");
-handleTooltip("chocobot-note", "chocobot-tooltip");
diff --git a/assets/M83-Outro-edited.mp3 b/assets/M83-Outro-edited.mp3
diff --git a/assets/M83-Outro.mp3 b/assets/M83-Outro.mp3
diff --git a/assets/particles.json b/assets/particles.json
diff --git a/favicon.ico b/favicon.ico