Update index hyperlinks, text decorations, menu button animation

TODO.md

@@ -1,5 +1,5 @@
 - Created hyperlinks in the dates.json and implement them in the dates.js
-- Inser 3D hero above the about section (Three.js?)
+- Inser 3D hero in the art page (Three.js?)
 - Images on the web?
 - Hyperlinks for "Value" in the bio + also link somewhere at the bottom?
 - bio read more button expand+collapse animation for the text?

assets/css/style.css

@@ -20,6 +20,8 @@ header {
     color: #000000;
     padding: 4em 0;
     text-align: center;
+    border-top: 30px solid #000000;
+    border-bottom: 6px solid #000000;
 }
 
 h1, h2 {
@@ -61,14 +63,31 @@ footer {
     padding: 20px;
     background-color: #D67DB3; /* primary color */
     color: #000000;
+    border-top: 2px solid #000000;
 }
 
 .bio p {
     margin-bottom: 1em;
 }
 
-/* bio "read more" button */
+/* socials and text decorations */
+/* underlines all anchor tags within the #socials section */
+#socials a {
+    text-decoration: underline;
+}
+
+/* underlines the email link */
+#contact a {
+    text-decoration: underline;
+}
 
+/* custom class for bolding and underlining text */
+.bold-underline {
+    font-weight: bold;
+    text-decoration: underline;
+}
+
+/* bio "read more" button */
 #moreText {
     max-height: 0;
     visibility: hidden;
@@ -80,11 +99,10 @@ footer {
 #moreText.show {
     visibility: visible;
     opacity: 1;
-    max-height: 600px; /* Adjust based on the actual content height */
+    max-height: 600px; /* adjust based on text */
     transition: max-height 0.5s ease, opacity 0.5s ease, visibility 0s linear 0s;
 }
 
-
 #readMore {
     background-color: #000000;
     color: #D67DB3;
@@ -99,15 +117,14 @@ footer {
 }
 
 /* scrolling text banner */
-
 .scrolling_text {
     width: 100%;
     overflow: hidden;
     display: flex;
     white-space: nowrap;
     margin-bottom: -4em;
     z-index: 10;
-    /* padding-right: 80px; */
+    /* padding-right: 80px; commented out */ 
 }
 
 .text {
@@ -134,7 +151,6 @@ footer {
   }
 
   /* link custom font */
-
   @font-face {
     font-family: 'Terminal Grotesque';
     src: url('../fonts/terminal-grotesque/terminal-grotesque-webfont.woff2') format('woff2'),
@@ -163,13 +179,15 @@ footer {
 .menu-icon img {
     width: 40px;
     height: auto;
+    transition: opacity 0.15s ease;
 }
 
-/* Separate close button inside the menu, if used */
+/* separate close button inside the menu */
 .close-menu {
     display: none;
     cursor: crosshair;
     position: absolute;
+    color: #D67DB3;
     top: 1.5em;
     right: 1.2em;
     font-size: 1.5em;
@@ -181,39 +199,40 @@ footer {
     right: 0;
     width: 250px;
     height: 100vh;
-    background-color: #ffffff;
+    background-color: #000000;
     box-shadow: -8px 0 16px rgba(0,0,0,0.2);
     z-index: 99;
     overflow-y: auto;
     padding: 20px;
     transform: translateX(100%); /* Initially off-screen */
     transition: transform 0.5s ease; /* Smooth transition for the transform */
+
 }
 .menu-content.active {
     transform: translateX(0); /* Move into view */
 }
 
-
 .menu-content ul {
     list-style-type: none;
     padding: 0;
+    padding-top: 20px;
 }
 
 .menu-content ul li a {
     display: block;
     padding: 5px 0; 
     margin-top: 60px;
-    color: #000000; 
+    color: #D67DB3; 
     text-decoration: none;
     font-size: 1.2em;
+    cursor: crosshair;
 }
 
 .menu-content ul li a:hover {
-    background-color: #eee;
+    background-color: #0000FF;
 }
 
 /* menu overlay */
-
 .overlay {
     display: none;
     position: fixed; /* cover the entire screen */
@@ -224,3 +243,10 @@ footer {
     background: rgba(0, 0, 0, 0.5); /* dim effect */
     z-index: 50;
 }
+
+/* threeJS css - commented out
+#threejs-container {
+    width: 100%; 
+    height: 500px;
+    background-color: #1a0c0c;
+  }  */

assets/data/dates.json

@@ -3,24 +3,28 @@
       "date": "2024-04-26",
       "clubnight": "TBA",
       "venue": "AKC Attack",
-      "city": "Zagreb, Croatia 🇭🇷"
+      "city": "Zagreb, Croatia 🇭🇷",
+      "url": ""
     },
     {
       "date": "2024-05-03",
       "clubnight": "TBA",
       "venue": "KC Grad",
-      "city": "Belgrade, Serbia 🇷🇸"
+      "city": "Belgrade, Serbia 🇷🇸",
+      "url": ""
     },
     {
         "date": "2024-06-08",
         "clubnight": "TBA",
         "venue": "",
-        "city": "Varaždin, Croatia 🇭🇷"
+        "city": "Varaždin, Croatia 🇭🇷",
+        "url": ""
       },
       {
         "date": "2024-06-28",
         "clubnight": "Velvet Festival",
         "venue": "",
-        "city": "Punat, Croatia 🇭🇷"
+        "city": "Punat, Croatia 🇭🇷",
+        "url": "https://www.velvetfestival.hr/"
       }
 ]

assets/js/dates-script.js

@@ -4,12 +4,17 @@ fetch('assets/data/dates.json')
     const datesList = document.getElementById('club-dates-list');
     dates.forEach(date => {
       const listItem = document.createElement('li');
-      let venueInfo = date.venue ? ` at ${date.venue}` : ""; // Check if venue exists
-      listItem.textContent = `${date.date} - ${date.clubnight}${venueInfo} - ${date.city}`;
+
+      // If there's a URL, make the entire line a hyperlink
+      if (date.url) {
+        listItem.innerHTML = `<a href="${date.url}" target="_blank" style="text-decoration: underline;">${date.date} - ${date.clubnight} at ${date.venue ? date.venue : ""} - ${date.city}</a>`;
+      } else {
+        listItem.textContent = `${date.date} - ${date.clubnight}${date.venue ? ` at ${date.venue}` : ""} - ${date.city}`;
+      }
+
       datesList.appendChild(listItem);
     });
   })
   .catch(error => {
     console.error('Error fetching club dates:', error);
-    // Optionally handle the error, e.g., display a message to the user
   });

assets/js/menu-toggle.js

@@ -1,14 +1,23 @@
 function toggleMenu() {
     var menuContent = document.getElementById("menuContent");
     var overlay = document.getElementById("pageOverlay");
+    var menuIcon = document.getElementById("menuIcon"); // Ensure this matches your icon's ID
 
-    if (menuContent.classList.contains('active')) {
-        menuContent.classList.remove('active');
-        overlay.style.display = "none";
-        menuIcon.src = "assets/images/hamburger-menu-open.png";
-    } else {
-        menuContent.classList.add('active');
-        overlay.style.display = "block";
-        menuIcon.src = "assets/images/hamburger-menu-close.png";
-    }
+    // Reduce opacity to start fade out
+    menuIcon.style.opacity = 0;
+
+    // Wait for fade out, then switch icon and fade in
+    setTimeout(() => {
+        if (menuContent.classList.contains('active')) {
+            menuContent.classList.remove('active');
+            overlay.style.display = "none";
+            menuIcon.src = "assets/images/hamburger-menu-open.png";
+        } else {
+            menuContent.classList.add('active');
+            overlay.style.display = "block";
+            menuIcon.src = "assets/images/hamburger-menu-close-D67DB3.png";
+        }
+        // Fade icon back in
+        menuIcon.style.opacity = 1;
+    }, 150); // duration matches the CSS transition duration
 }

assets/js/three-setup.js

@@ -1,8 +1,5 @@
-// Assuming Three.js and GLTFLoader are included in your HTML via <script> tags
-// and you're using modules
-
-import * as THREE from 'assets/js/three.module.js';
-import { GLTFLoader } from 'assets/js/GLTFLoader.js';
+import * as THREE from './three.module.js';
+import { GLTFLoader } from './GLTFLoader.js';
 
 // Setup scene, camera, and renderer
 const scene = new THREE.Scene();
@@ -11,36 +8,42 @@ const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.getElementById('threejs-container').appendChild(renderer.domElement);
 
-camera.position.set(0, 0, 2);
+camera.position.z = 5;
 
-// Lighting
-const ambientLight = new THREE.AmbientLight(0x404040);
-scene.add(ambientLight);
-const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
-directionalLight.position.set(0, 1, 0);
-scene.add(directionalLight);
+// GLTF Model Loading
+const gltfLoader = new GLTFLoader();
+gltfLoader.load('assets/models/szch-3d-a-w-compressed.glb', function(gltf) {
+    scene.add(gltf.scene);
 
-const loader = new GLTFLoader();
+    gltf.scene.traverse(function(node) {
+        if (node.isMesh) {
+            node.castShadow = true;
+            node.receiveShadow = true;
+        }
+    });
 
-loader.load(
-  'assets/models/szch-3d-a-w.gltf',
-  function (gltf) {
-    scene.add(gltf.scene);
+    // Call animate here to ensure it starts after the model is loaded
     animate();
-  },
-  undefined,
-  function (error) {
-    console.error('An error happened during loading the model:', error);
-  }
-);
 
+}, undefined, function(error) {
+    console.error('An error happened while loading the model:', error);
+});
+
+// Animation loop
 function animate() {
-  requestAnimationFrame(animate);
-  renderer.render(scene, camera);
+    requestAnimationFrame(animate);
+
+    // Example: Rotate the model (optional, remove if not needed)
+    // if (gltf && gltf.scene) {
+    //     gltf.scene.rotation.y += 0.005;
+    // }
+
+    renderer.render(scene, camera);
 }
 
+// Responsive adjustments
 window.addEventListener('resize', () => {
-  camera.aspect = window.innerWidth / window.innerHeight;
-  camera.updateProjectionMatrix();
-  renderer.setSize(window.innerWidth, window.innerHeight);
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
 });