fix: about

src/images/icon-scroll-down.svg

@@ -1,5 +1,4 @@
-<svg viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="36" cy="36" r="35.5" stroke="white"/>
+<circle cx="36" cy="36" r="35.5" stroke="white"/>
-  <path d="M28 31L36 40L44 31" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M36 24V48M28.5 40.7273L36 48L43.5 40.7273" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M36 25L36 40" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
 </svg>

src/index.html

@@ -44,18 +44,22 @@
     <main>
       <!-- 01. INTRO -->
       <section id="intro" class="intro">
+        
         <div class="intro__blobs" aria-hidden="true">
-          <span class="blob blobCyan"></span>
+          <div class="blob blobCyan"></div>
-          <span class="blob blobPurple"></span>
+          <div class="blob blobPurple"></div>
-          <span class="blob blobBlue"></span>
+          <div class="blob blobBlue"></div>
         </div>
+
         <div class="intro__content">
           <p class="intro__sub">Creative Development Company</p>
           <h1 class="intro__title">THE BODA LAB</h1>
         </div>
+        
         <a href="#about" class="scrollDown" aria-label="아래로 스크롤">
           <img src="images/icon-scroll-down.svg" alt="" />
         </a>
+
       </section>
 
       <!-- 02. ABOUT -->
@@ -88,9 +92,9 @@
         <div class="history__top">
           <h2 class="sectionTitle sectionTitleDark">HISTORY</h2>
           <div class="history__timeline">
+            
             <div class="history__yearGroup">
               <span class="history__year">2024</span>
-              <div class="history__divider"></div>
               <ul class="history__list">
                 <li class="history__listItem">
                   <strong class="history__listDate">12.01</strong>
@@ -110,9 +114,9 @@
                 </li>
               </ul>
             </div>
+
             <div class="history__yearGroup">
               <span class="history__year">2023</span>
-              <div class="history__divider"></div>
               <ul class="history__list">
                 <li class="history__listItem">
                   <strong class="history__listDate">12.01</strong>
@@ -140,9 +144,9 @@
                 </li>
               </ul>
             </div>
+            
             <div class="history__yearGroup">
               <span class="history__year">2022</span>
-              <div class="history__divider"></div>
               <ul class="history__list">
                 <li class="history__listItem">
                   <strong class="history__listDate">11.01</strong>
@@ -166,9 +170,65 @@
                 </li>
               </ul>
             </div>
+
+            <div class="history__yearGroup">
+              <span class="history__year">2023</span>
+              <ul class="history__list">
+                <li class="history__listItem">
+                  <strong class="history__listDate">12.01</strong>
+                  <span class="history__listText">신한은행 슈퍼소울 운영 계약</span>
+                </li>
+                <li class="history__listItem">
+                  <strong class="history__listDate">11.01</strong>
+                  <span class="history__listText">한화금융 라이프 플러스 아카데미 구축 계약</span>
+                </li>
+                <li class="history__listItem">
+                  <strong class="history__listDate">10.01</strong>
+                  <span class="history__listText">대교 차세대 구축 계약</span>
+                </li>
+                <li class="history__listItem">
+                  <strong class="history__listDate">09.01</strong>
+                  <span class="history__listText">한화금융통합 서비스 구축 계약</span>
+                </li>
+                <li class="history__listItem">
+                  <strong class="history__listDate">05.30</strong>
+                  <span class="history__listText">신한은행 슈퍼소울 구축 계약</span>
+                </li>
+                <li class="history__listItem">
+                  <strong class="history__listDate">05.01</strong>
+                  <span class="history__listText">롯데 렌터카 오토리스 구축 계약</span>
+                </li>
+              </ul>
+            </div>
+
+            <div class="history__yearGroup">
+              <span class="history__year">2022</span>
+              <ul class="history__list">
+                <li class="history__listItem">
+                  <strong class="history__listDate">11.01</strong>
+                  <span class="history__listText">한화금융 서비스앱 플러스 리뉴얼 2차 계약</span>
+                </li>
+                <li class="history__listItem">
+                  <strong class="history__listDate">09.01</strong>
+                  <span class="history__listText">한화금융 서비스앱 플러스 리뉴얼 1차 계약</span>
+                </li>
+                <li class="history__listItem">
+                  <strong class="history__listDate">08.01</strong>
+                  <span class="history__listText">밀레 쇼핑몰 리뉴얼 구축 계약</span>
+                </li>
+                <li class="history__listItem">
+                  <strong class="history__listDate">07.01</strong>
+                  <span class="history__listText">오뚜기 쇼핑몰 리뉴얼 구축 계약</span>
+                </li>
+                <li class="history__listItem">
+                  <strong class="history__listDate">05.01</strong>
+                  <span class="history__listText">케나다구스 코리아 쇼핑몰 구축 계약</span>
+                </li>
+              </ul>
+            </div>
+            
             <div class="history__yearGroup">
               <span class="history__year">2021</span>
-              <div class="history__divider"></div>
               <ul class="history__list">
                 <li class="history__listItem">
                   <strong class="history__listDate">11.22</strong>
@@ -196,14 +256,13 @@
                 </li>
               </ul>
             </div>
+
           </div>
         </div>
         <div class="history__bottom">
-          <div class="history__images">
+          <img class="history__img history__img--1" src="images/history-1.jpg" alt="" />
-            <img class="history__img history__img1" src="images/history-1.jpg" alt="" />
+          <img class="history__img history__img--2" src="images/history-2.jpg" alt="" />
-            <img class="history__img history__img2" src="images/history-2.jpg" alt="" />
+          <img class="history__img history__img--3" src="images/history-3.jpg" alt="" />
-            <img class="history__img history__img3" src="images/history-3.jpg" alt="" />
-          </div>
         </div>
       </section>
 

src/scss/base/_reset.scss

@@ -25,7 +25,6 @@ body {
 img {
   display: block;
   width: 100%;
-  height: 100%;
   object-fit: cover;
 }
 

src/scss/page/_about.scss

@@ -79,22 +79,24 @@
 
 // History
 .history {
-  background: $color-bg;
+  background: $color-bg-light;
+  padding: 0 0 0;
 }
 
 .history__top {
-  background: $color-bg-light;
+  max-width: 1280px;
-  padding: 80px 48px 60px;
+  padding: 120px 40px 120px;
+  margin: 0 auto;
 }
 
 .history__top .sectionTitleDark {
-  margin-bottom: 48px;
+  margin-bottom: 88px;
 }
 
 .history__timeline {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(3, 1fr);
-  gap: 0 24px;
+  gap: 60px 24px;
 }
 
 .history__yearGroup {
@@ -106,23 +108,16 @@
   font-size: clamp(24px, 2.5vw, 32px);
   font-weight: 100;
   color: $color-dark;
-  margin-bottom: 16px;
+  margin-bottom: 32px;
   line-height: 1;
 }
 
-.history__divider {
-  width: 0.5px;
-  background: $color-dark;
-  align-self: flex-start;
-  height: 0;
-  margin-bottom: 16px;
-  opacity: 0.4;
-}
-
 .history__list {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 12px;
+  border-left: 1px solid #0d0d0d;
+  padding: 0 0 0 23px;
 }
 
 .history__listItem {
@@ -139,49 +134,40 @@
 }
 
 .history__listText {
-  font-size: clamp(12px, 1vw, 14px);
+  font-size: clamp(12px, 1vw, 16px);
   font-weight: 300;
   color: $color-dark;
   line-height: 1.6;
 }
 
 .history__bottom {
-  background: $color-bg;
-  padding: 0 48px 80px;
-  overflow: hidden;
-}
-
-.history__images {
   position: relative;
-  height: 400px;
+  background: $color-bg;
-  margin-top: -80px;
+  height: 480px;
 }
 
 .history__img {
   position: absolute;
   object-fit: cover;
-}
 
-.history__img1 {
+  &.history__img--1 {
-  width: 260px;
+    width: 16.67%;
-  height: 170px;
+    top: 0px;
     left: 0;
-  bottom: 0;
+  }
-}
 
-.history__img2 {
+  &.history__img--2 {
-  width: 370px;
+    width: 27.1%;
-  height: 400px;
     left: 50%;
     transform: translateX(-50%);
-  top: 0;
+    top: -60px;
-}
+  }
 
-.history__img3 {
+  &.history__img--3 {
-  width: 300px;
+    width: 18.23%;
-  height: 190px;
+    top: 0px;
-  right: 0;
+    left: 0;
-  bottom: 40px;
+  }
 }
 
 // Boda Intro

src/scss/page/_intro.scss

@@ -16,37 +16,38 @@
   inset: 0;
   pointer-events: none;
   overflow: hidden;
-}
 
-.blob {
+  .blob {
     position: absolute;
     border-radius: 50%;
-  filter: blur(120px);
+    filter: blur(60px);
-  opacity: 0.55;
+    opacity: 0.5;
-}
+  }
 
-.blobCyan {
+  .blobCyan {
-  width: 56vw;
+    width: 20vw;
-  height: 56vw;
+    height: 20vw;
     background: $color-cyan;
-  top: -10%;
+    top: 50%;
-  right: -10%;
+    right: 20%;
-}
+    transform: translateY(-50%);
+  }
 
-.blobPurple {
+  .blobPurple {
-  width: 32vw;
+    width: 10vw;
-  height: 32vw;
+    height: 10vw;
     background: $color-purple;
-  top: 15%;
+    top: 40%;
-  left: 5%;
+    left: 50%;
-}
+  }
 
-.blobBlue {
+  .blobBlue {
-  width: 24vw;
+    width: 10vw;
-  height: 24vw;
+    height: 10vw;
     background: $color-blue;
-  bottom: 10%;
+    top: 42%;
-  left: -5%;
+    left: 30%;
+  }
 }
 
 .intro__content {