responsive

css/style_menu.css

@@ -1,14 +1,14 @@
 .project {
-  width: 90%;
   height: 40vh;
+  width: 80%;
   box-sizing: border-box;
-  padding: 20px;
   background-color: #f8f9fa;
   text-align: center;
   border: 1px solid #ddd;
   border-radius: 10px;
-  margin: 0 10px;
+  margin: 0 1vw;
   backface-visibility: hidden;
+  display: flex;
 }
 
 #global_title {
@@ -29,9 +29,9 @@
 
 .dot {
   z-index: 30;
-  width: 12px;
-  height: 12px;
-  margin: 0 5px;
+  width: 0.8vw;
+  height: 1.8vh;
+  margin: 0 0.3vw;
   background-color: #bbb;
   border-radius: 50%;
   cursor: pointer;
@@ -44,10 +44,10 @@
 
 .container {
   margin: 0 auto;
-  width: 250px;
+  width: 25vw;
   height: 47vh;
   position: relative;
-  perspective: 1000px;
+  perspective: 100vw;
 }
 
 .carousel {
@@ -63,19 +63,39 @@
   text-align: center;
 }
 
+.item h2 {
+  font-size: 4vh;
+  color: #151515;
+}
+
+.item p {
+  font-size: 2.4vh;
+  color: #151515;
+}
+
+.item button {
+  font-size: 2.8vh;
+}
+
 .next, .prev {
   position: absolute;
   cursor: pointer;
   background-color: transparent;
-  font-size: 90px;
+  font-size: 20vh;
   color: white;
   border: none;
-  bottom: 2.5em;
+  bottom: 25vh;
   transition: transform 0.3s, box-shadow 0.3s;
 }
 .next:hover, .prev:hover {
   box-shadow: 0 0 15px 0 rgba(253, 252, 252, 0.2);
   transform: translateY(-4px);
 }
-.next { right: 2em; }
-.prev { left: 2em; }
+.next { right: 10vw; }
+.prev { left: 10vw; }
+
+.project_buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

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.");
+}