Merge pull request #5 from jarvis09-yann/dev

beggining working on second page
jarvis09-yann · Jan 29, 2024 · d266f60 · d266f60
2 parents 23ff216 + 84e5b02
commit d266f60
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 34 deletions.
diff --git a/CNAME b/CNAME
diff --git a/app.js b/app.js
@@ -1,11 +1,10 @@
 var audio;
 const playPauseButton = document.getElementById("play-pause");
-
-const scrollNotice = document.getElementById("scroll-notice");
+const scrollNotice = document.getElementById("scroll-notice-container");
 
 const observer = new IntersectionObserver((entries) => {
     entries.forEach((entry) => {
-        console.log(entry);
+        // console.log(entry);
         if (entry.isIntersecting) {
             entry.target.classList.add("show");
         } else {
@@ -52,16 +51,17 @@ function toggleMusic() {
         audio.volume = 0.75;
     }
 }
+var scrollPosition = window.scrollY; // Using this i case a reload is done on the second
+scrollNotice.style.opacity = 1 - scrollPosition / 300;
 
-window.addEventListener('scroll', function() {
-    var scrollNotice = document.getElementById("scroll-notice-container");
-    var scrollPosition = window.scrollY; // Obtenir la position de défilement verticale
 
-    // Réglez l'opacité en fonction de la position de défilement
-    scrollNotice.style.opacity = 1 - scrollPosition / 300; // Réglage de la valeur 500 selon vos besoins
+window.addEventListener('scroll', function() {
+
+    var scrollPosition = window.scrollY; // Get scroll position
+    scrollNotice.style.opacity = 1 - scrollPosition / 300; // reduces opacity accordingly
 });
 
 function scrollToSecondPage() {
-    document.getElementById("second-page-body").scrollIntoView({ behavior: "smooth", block: "center" });
+    document.getElementById("second-page").scrollIntoView({ behavior: "smooth", block: "center" });
 }
 
diff --git a/assets/album-cover.jpg b/assets/album-cover.jpg
diff --git a/index.html b/index.html
@@ -44,20 +44,45 @@ <h3 style="color: rgba(200, 200, 200, .8);" id="song-artist">M83</h3>
     <button id="scroll-notice-button" onclick="scrollToSecondPage()">scroll this page!</button>
   </footer>
   <div id="second-page">
-    <h1 id="second-page-title" class="hidden">Work in progress.</h1>
-    <h2 id="second-page-body" class="hidden">This page is under construction, please enjoy some placeholder:    
-      Lorem ipsum dolor sit amet consectetur adipisicing elit.
-      Atque excepturi ad cupiditate corrupti pariatur repellendus
-      veritatis repellat aspernatur minima! Fuga explicabo molestiae
-      excepturi dolor iusto hic aut itaque quos fugiat error eius
-      tempora praesentium, maxime, atque soluta est placeat. Commodi recusandae perferendis
-      laborum. Labore doloribus similique, libero illum beatae suscipit!</h2>
-      <div id="footer">
-        <p class="hidden">Copyright (c) 2023 jarvis09</p>
-        <p class="hidden">This site is <b><i>heavily</i></b> inspired by <a href="https://qaezz.dev">qaezz.dev</a></p>
-      </div>
+    <div id="rows-container" class="hidden">
+      <h1 class="hidden" id="second-page-title">About <span id="name">me</span>.</h1>
+        <div class="row">
+          <h3 class="row-title">My projects</h3>
+          <p class="row-body">
+            <br>Lorem, ipsum dolor.
+            <br>Lorem, ipsum dolor.
+            <br>Lorem, ipsum dolor.
+            <br>Lorem, ipsum dolor.
+            <br>Lorem, ipsum dolor.
+          </p>
+        </div>
+        <div class="row">
+          <h3 class="row-title">My projects</h3>
+          <p class="row-body">
+            <br>Lorem, ipsum dolor.
+            <br>Lorem, ipsum dolor.
+            <br>Lorem, ipsum dolor.
+            <br>Lorem, ipsum dolor.
+            <br>Lorem, ipsum dolor.
+          </p>
+        </div><div class="row">
+          <h3 class="row-title">My projects</h3>
+          <p class="row-body">
+            <br>Lorem, ipsum dolor.
+            <br>Lorem, ipsum dolor.
+            <br>Lorem, ipsum dolor.
+            <br>Lorem, ipsum dolor.
+            <br>Lorem, ipsum dolor.
+          </p>
+        </div>        
+    </div>  
+    <div id="footer">
+      <p class="hidden">Copyright (c) 2023 jarvis09</p>
+      <p class="hidden">This site is <b><i>heavily</i></b> inspired by <a href="https://qaezz.dev">qaezz.dev</a></p>
+    </div>
   </div>
+
   <script src="https://unpkg.com/[email protected]"></script>
-</body>
 
+</body>
 </html>
diff --git a/style.css b/style.css
@@ -167,17 +167,6 @@ html {
   top: 100vh;
 }
 
-#second-page h1 {
-  font-weight: 500;
-  font-size: 400%;
-}
-
-#second-page h2 {
-  font-weight: 500;
-  margin-left: 2vw;
-  margin-right: 2vw;
-}
-
 .hidden {
  opacity: 0;
  -webkit-filter: blur(3px);
@@ -233,4 +222,39 @@ html {
 #footer a {
   color: #fafafa;
 
+}
+
+#rows-container {
+  display: flex;
+  justify-content: space-between;
+  margin: 10px 50px;
+}
+
+.column {
+  flex: 1;
+  padding: 20px 10px; /* Adjust spacing between columns and rows */
+  position: relative;
+  text-align: center;
+}
+
+#second-page-title {
+  color: white;
+  font-weight: 500;
+  font-size: 350%;
+  text-align: center;
+  margin: 0;
+  width: 100%;
+  position: absolute;
+  top: -90px;
+}
+
+.row {
+  line-height: 30px;
+  font-size: larger;
+}
+
+
+.row-title {
+  text-decoration: underline;
+  font-size: 150%;
 }