add mobile ver

Author: kimsehyun-34

index.html

@@ -56,15 +56,15 @@ <h2> Introduce Dev_Choco <br> DevChoco 팀원소개</h2>
       <div class="team">
         <div class="member" onclick="location.href='https://github.com/Sonny997'">
           <img src="public/img/team/김민수.jpg" alt="김민수">
-          <h3>김민수</h3>
+          <h3>Kim Minsoo | 김민수</h3>
           <ul>
               <li>Team Leader</li>
               <li>Project Manager</li>
           </ul>
         </div>
         <div class="member" onclick="location.href='https://github.com/kimsehyun-34'">
           <img src="public/img/team/김세현.png" alt="김세현">
-          <h3>Kimsehyun | 김세현</h3>
+          <h3>Kim Sehyun | 김세현</h3>
           <ul>
               <li>Chief Technical Officer</li>
               <li>CV Model Engineer</li>
@@ -73,7 +73,7 @@ <h3>Kimsehyun | 김세현</h3>
         </div>
         <div class="member" onclick="location.href='https://github.com/jiwo-lee'">
           <img src="public/img/team/이지우.jpg" alt="이지우">
-          <h3>이지우</h3>
+          <h3>Lee Jiwoo | 이지우</h3>
           <ul>
               <li>Data Scientist</li>
               <li>Front-end Developer</li>
@@ -82,7 +82,7 @@ <h3>이지우</h3>
         </div>
         <div class="member" onclick="location.href='https://github.com/lee123-jun'">
           <img src="public/img/team/이혜준.jpg" alt="이혜준">
-          <h3>이혜준</h3>
+          <h3>Lee Hyejun | 이혜준</h3>
           <ul>
               <li>DL Model Engineer</li>
               <li>Database Admin</li>
@@ -122,45 +122,67 @@ <h2>Our Vision & Technology | 비전과 기술</h2>
 
         // IntersectionObserver 설정
         const observer = new IntersectionObserver(
-            (entries) => {
-                entries.forEach((entry) => {
-                    if (entry.isIntersecting) {
-                        entry.target.classList.add("ani_text_bf"); // 애니메이션 클래스 추가
-                    } else {
-                        entry.target.classList.remove("ani_text_bf"); // 애니메이션 클래스 제거
-                    }
-                });
-              },
-              {
-                  threshold: 0.5, // 요소가 50% 보일 때 트리거
+          (entries) => {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                entry.target.classList.add("ani_text_bf"); // 애니메이션 클래스 추가
+              } else {
+                entry.target.classList.remove("ani_text_bf"); // 애니메이션 클래스 제거
               }
-          );
-      
-          abElements.forEach((el) => observer.observe(el));
+            });
+          },
+          {
+            threshold: 0.5, // 요소가 50% 보일 때 트리거
+          }
+        );
+    
+        abElements.forEach((el) => observer.observe(el));
       });
-
-      const body = document.getElementById('body');
-
+    
+      const body = document.getElementById("body");
+    
       window.scroll({
         top: 0,
         left: 100,
-        behavior: 'smooth',
-        wrapperSpeed: 0.065
+        behavior: "smooth",
+        wrapperSpeed: 0.065,
       });
-
-      const nameSection = document.getElementById('team_name');
-
+    
+      const nameSection = document.getElementById("team_name");
+    
       let zoom = 3;
       const ZOOM_SPEED = 2;
-
+    
+      // 휠 이벤트 처리
       document.addEventListener("wheel", function (e) {
+        if (zoom < 80) {
+          if (e.deltaY > 0) {
+            zoom += ZOOM_SPEED;
+            nameSection.style.transform = `scale(${zoom})`;
+          }
+        } else if (zoom >= 80) {
+          nameSection.classList.add("zoomed");
+        }
+      });
+    
+      // 모바일 터치 이벤트 처리
+      let touchStartY = 0;
+      let touchEndY = 0;
+    
+      document.addEventListener("touchstart", function (e) {
+        touchStartY = e.touches[0].clientY;
+      });
+    
+      document.addEventListener("touchmove", function (e) {
+        touchEndY = e.touches[0].clientY;
+    
         if (zoom < 40) {
-            if (e.deltaY > 0) {
-                zoom += ZOOM_SPEED;
-                nameSection.style.transform = `scale(${zoom})`;
-            }
+          if (touchStartY > touchEndY) {
+            zoom += ZOOM_SPEED;
+            nameSection.style.transform = `scale(${zoom})`;
+          }
         } else if (zoom >= 40) {
-            nameSection.classList.add("zoomed");
+          nameSection.classList.add("zoomed");
         }
       });
     </script>

public/ac_aboutdev_style.css

@@ -69,11 +69,11 @@ body {
 
 /* 메인 화면에 있는 FITVERSE 디자인 */ 
 .logo-container h1 {
-  font-size: 15vw;
+  font-size: 18vw;
   color: white; /* 텍스트 색상 변경 */
   text-align: center;
   font-family: 'Montserrat', sans-serif;
-  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8); /* 빛나는 효과 추가 */
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* 빛나는 효과 추가 */
 }
 
 .content {
@@ -332,17 +332,19 @@ main{
   width: 100%;
   float: left;
   overflow: hidden;
-  position: -webkit-sticky;
   position: sticky;
-  height: 85.2vh;
+  height: 100vh; /* 화면 전체 높이 */
   top: 0;
-  padding: 70px 0 0 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   text-align: center;
   font-size: 120px;
   transition: all 0.5s ease;
   color: #ffffff;
   z-index: 10;
 }
+
 .logo-container.zoomed {
   font-size: 300px; /* 최종 확대 크기 */
   color: #fff; /* 텍스트 색상 변경 */
@@ -370,14 +372,117 @@ main{
   box-shadow: 0 0 15px 3px rgba(255, 255, 255, 0.8); /* 호버 시 빛샘 효과 강조 */
 }
 
-/* 반응형 디자인 */
+/* 반응형 디자인 추가 */
 @media (max-width: 768px) {
+  .section-text {
+    font-size: 1rem;
+    padding: 10px;
+  }
+
+  .section-text h2 {
+    font-size: 2rem;
+  }
+
   .team {
-      flex-direction: column;
-      align-items: center;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .member img {
+    width: 95%;
+    height: auto;
+  }
+
+  .section-banner-img1{
+    width: 80%;
+    height: auto;
+    max-width: 300px;
+    border-radius: 15vw;
+    box-shadow: 0 0 40px 10px rgb(247, 247, 247);
+  }
+  
+  .section-banner-img2{
+    width: 80%;
+    height: auto;
+    max-width: 300px;
+    border-radius: 15vw;
+    box-shadow: 0 0 40px 10px rgba(16, 127, 255, 0.623);
+  }
+
+  .ani_text em{
+    display: block;
+    margin-top: 20px;
+    color: #ff7833;
+    font-style: italic;
+    opacity: 0;
+    transition: all 1s ;
+    font-family: "Noto Sans KR", sans-serif;
+  }
+  
+  .ani_text{
+    font-size: 2.8vw;
+    display: block;
+    margin-top: 20px;
+    color: #ccc;
+    font-style: italic;
+    opacity: 0;
+    transition: all 1s ;
+    font-family: "Noto Sans KR", sans-serif;
+  }
+  
+  .ani_text_bf {
+    opacity: 1;
+  }
+  
+  .ani_text_bf em {
+    opacity: 1;
   }
 
   .member {
-      width: 90%;
+    background-color: #ffffff;
+    border-radius: 55px;
+    box-shadow: 0px 0px 0px rgb(255, 255, 255);
+    width: 250px;
+    text-align: center;
+    padding: 25px 20px;
+    transition: transform 0.3s ease;
+  }
+
+  .logo-container {
+    font-size: 10vw;
+    padding: 20px 0;
+  }
+
+  .start_btn {
+    font-size: 4vw;
+    padding: 10vw 8vw;
   }
 }
+
+/* 추가적인 모바일 스타일 */
+@media (max-width: 480px) {
+  .section-text {
+    font-size: 0.9rem;
+  }
+
+  .section-text h2 {
+    font-size: 1.8rem;
+  }
+
+  .member h3 {
+    font-size: 1.3rem;
+  }
+
+  .member ul li {
+    font-size: 0.85rem;
+  }
+
+  .logo-container {
+    font-size: 8vw;
+  }
+
+  .start_btn {
+    font-size: 3.5vw;
+    padding: 8vw 6vw;
+  }
+}