responsive

js/index.js

@@ -106,9 +106,11 @@ function setupCarousel(global_project_list) {
   const letter = ['a', 'b', 'c', 'd', 'e', 'f','g','h','i','j','k','l','m','n','o','p','q','r','s','t'];
   const degGlobal = 360 / global_project_list.length;
 
-  var carousel_css = $(".carousel"),
+  let carousel_css = $(".carousel"),
     currdeg  = 0
 
+  let width = window.innerWidth;
+
   global_project_list.forEach((project, index) => {
       const projectDiv = document.createElement('div');
       projectDiv.classList.add('project');
@@ -124,7 +126,7 @@ function setupCarousel(global_project_list) {
       </div>
       `;
       carousel.appendChild(projectDiv);
-      document.querySelector('.'.concat(letter[index])).style=`transform: rotateY(${index * degGlobal}deg) translateZ(250px);`;
+      document.querySelector('.'.concat(letter[index])).style=`transform: rotateY(${index * degGlobal}deg) translateZ(${width/6}px);`;
 
       // Add event listener for project details button
       const detailButton = projectDiv.querySelector('.default-access-button');
@@ -204,3 +206,17 @@ function rotate(e){
 }
 
 }
+
+function handleResize() {
+  window.location.reload();
+}
+
+window.addEventListener('resize', handleResize);
+
+function isMobileDevice() {
+  return /Mobi|Android/i.test(navigator.userAgent);
+}
+
+if (isMobileDevice()) {
+  console.log("You are on a mobile device.");
+}