design: 메인페이지 디자인 수정

kang-kibong · Aug 14, 2024 · 5d55234 · 5d55234
1 parent 8826f9e
commit 5d55234
Show file tree

Hide file tree

Showing 59 changed files with 238 additions and 175 deletions.
diff --git a/.sass-cache/ebfdce28b90f164040b60556a8d195c0fb42b4a0/no-style-please.scssc b/.sass-cache/ebfdce28b90f164040b60556a8d195c0fb42b4a0/no-style-please.scssc
diff --git a/_includes/head.html b/_includes/head.html
@@ -49,8 +49,9 @@
       const scrollY = window.scrollY;
       const positionY = 50 + scrollY * 0.03;
       background.style.backgroundPosition = `center ${positionY}%`;
-      profile1.style.backgroundPosition = `center ${positionY}%`;
-      profile2.style.backgroundPosition = `center ${positionY}%`;
+      const subPositionY = 0 + scrollY * 0.03;
+      profile1.style.backgroundPosition = `center ${subPositionY}%`;
+      profile2.style.backgroundPosition = `center ${subPositionY}%`;
     });
   </script>
 

diff --git a/_layouts/home.html b/_layouts/home.html
@@ -3,13 +3,10 @@
 ---
 
 <header class="header">
-  <h1 class="header-title">Hi, I’m <strong>Kang Byeong-hyeon</strong>.</h1>
+  <h1 class="header-title">
+    <span>Hi, I’m <strong>Kang Byeong-hyeon</strong>.</span>
+  </h1>
   <div class="background"></div>
-  <div class="profile-container">
-    <div class="profile1"></div>
-    <div class="profile2"></div>
-    <div></div>
-  </div>
   <div class="introduce">
     <p><strong>웹 프론트엔드</strong> 개발을 좋아해요.</p>
     <p><strong>기록</strong>하고 <strong>공유</strong>하는 걸 좋아해요.</p>
@@ -20,17 +17,21 @@ <h1 class="header-title">Hi, I’m <strong>Kang Byeong-hyeon</strong>.</h1>
   </div>
 </header>
 
-<div class="contact">
-  <span>
-    🐱
-    <a href="https://github.com/kang-kibong" target="_blank">Github</a>
-  </span>
-  <span>
-    📧
-    <a href="mailto:[email protected]">Email</a>
-  </span>
-</div>
-
 <section class="w">
+  <div class="contact">
+    <span>
+      🐱
+      <a href="https://github.com/kang-kibong" target="_blank">Github</a>
+    </span>
+    <span>
+      📧
+      <a href="mailto:[email protected]">Email</a>
+    </span>
+  </div>
   {%-include menu_item.html collection=site.data.menu.entries-%} {{ content }}
 </section>
+
+<div class="profile-container">
+  <div class="profile1"></div>
+  <div class="profile2"></div>
+</div>
diff --git a/_sass/no-style-please.scss b/_sass/no-style-please.scss
@@ -162,6 +162,7 @@ img {
 
   strong {
     color: rgb(255, 111, 15);
+    text-decoration: underline;
   }
 }
 
@@ -194,51 +195,29 @@ header h1 {
       color: rgb(255, 111, 15);
       text-decoration: underline;
     }
+
+    span {
+      color: #000;
+    }
   }
 
   .background {
     width: 100%;
-    height: 50vh;
+    height: 100vh;
     background-image: url("../images/background.jpg");
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     transition: background-position 0.1s ease-out;
   }
 
-  .profile-container {
-    display: flex;
-
-    .profile1 {
-      width: 50%;
-      height: 50vh;
-      background-image: url("../images/profile1.jpg");
-      background-repeat: no-repeat;
-      background-position: center;
-      background-size: cover;
-      transition: background-position 0.1s ease-out;
-      filter: brightness(80%);
-    }
-
-    .profile2 {
-      width: 50%;
-      height: 50vh;
-      background-image: url("../images/profile2.jpg");
-      background-repeat: no-repeat;
-      background-position: center;
-      background-size: cover;
-      transition: background-position 0.1s ease-out;
-      filter: brightness(90%);
-    }
-  }
-
   .introduce {
     width: 100%;
     position: absolute;
-    top: 55%;
+    top: 60%;
     left: 50%;
     text-align: center;
-    font-size: 24px;
+    font-size: 32px;
     transform: translate(-50%, -50%);
     color: #fff;
     font-weight: 700;
@@ -250,13 +229,41 @@ header h1 {
 }
 
 .contact {
+  border: 1px solid #fff;
   text-align: center;
   font-size: 18px;
   color: #000;
   margin-bottom: 40px;
+  padding: 22px 0;
 
   & span:first-of-type {
-    margin-right: 18px;
+    margin-right: 36px;
+  }
+}
+
+.profile-container {
+  display: flex;
+
+  .profile1 {
+    width: 50%;
+    height: 50vh;
+    background-image: url("../images/profile1.jpg");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    transition: background-position 0.1s ease-out;
+    filter: brightness(80%);
+  }
+
+  .profile2 {
+    width: 50%;
+    height: 50vh;
+    background-image: url("../images/profile2.jpg");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    transition: background-position 0.1s ease-out;
+    filter: brightness(90%);
   }
 }
 

diff --git a/_site/about.html b/_site/about.html
@@ -58,8 +58,9 @@
       const scrollY = window.scrollY;
       const positionY = 50 + scrollY * 0.03;
       background.style.backgroundPosition = `center ${positionY}%`;
-      profile1.style.backgroundPosition = `center ${positionY}%`;
-      profile2.style.backgroundPosition = `center ${positionY}%`;
+      const subPositionY = 0 + scrollY * 0.03;
+      profile1.style.backgroundPosition = `center ${subPositionY}%`;
+      profile2.style.backgroundPosition = `center ${subPositionY}%`;
     });
   </script>
 

diff --git a/_site/api-통신부터-에러-핸들링까지-feat-axios.html b/_site/api-통신부터-에러-핸들링까지-feat-axios.html
@@ -60,8 +60,9 @@
       const scrollY = window.scrollY;
       const positionY = 50 + scrollY * 0.03;
       background.style.backgroundPosition = `center ${positionY}%`;
-      profile1.style.backgroundPosition = `center ${positionY}%`;
-      profile2.style.backgroundPosition = `center ${positionY}%`;
+      const subPositionY = 0 + scrollY * 0.03;
+      profile1.style.backgroundPosition = `center ${subPositionY}%`;
+      profile2.style.backgroundPosition = `center ${subPositionY}%`;
     });
   </script>
 

diff --git a/_site/archive.html b/_site/archive.html
@@ -58,8 +58,9 @@
       const scrollY = window.scrollY;
       const positionY = 50 + scrollY * 0.03;
       background.style.backgroundPosition = `center ${positionY}%`;
-      profile1.style.backgroundPosition = `center ${positionY}%`;
-      profile2.style.backgroundPosition = `center ${positionY}%`;
+      const subPositionY = 0 + scrollY * 0.03;
+      profile1.style.backgroundPosition = `center ${subPositionY}%`;
+      profile2.style.backgroundPosition = `center ${subPositionY}%`;
     });
   </script>
 

diff --git a/_site/assets/css/main.css b/_site/assets/css/main.css
diff --git a/_site/cra-typescript-프로젝트-환경에서의-절대-경로-설정하기.html b/_site/cra-typescript-프로젝트-환경에서의-절대-경로-설정하기.html
@@ -60,8 +60,9 @@
       const scrollY = window.scrollY;
       const positionY = 50 + scrollY * 0.03;
       background.style.backgroundPosition = `center ${positionY}%`;
-      profile1.style.backgroundPosition = `center ${positionY}%`;
-      profile2.style.backgroundPosition = `center ${positionY}%`;
+      const subPositionY = 0 + scrollY * 0.03;
+      profile1.style.backgroundPosition = `center ${subPositionY}%`;
+      profile2.style.backgroundPosition = `center ${subPositionY}%`;
     });
   </script>
 

diff --git a/_site/createbrowserrouter를-활용한-효율적인-react-라우팅-설정하기-v6-4.html b/_site/createbrowserrouter를-활용한-효율적인-react-라우팅-설정하기-v6-4.html
@@ -60,8 +60,9 @@
       const scrollY = window.scrollY;
       const positionY = 50 + scrollY * 0.03;
       background.style.backgroundPosition = `center ${positionY}%`;
-      profile1.style.backgroundPosition = `center ${positionY}%`;
-      profile2.style.backgroundPosition = `center ${positionY}%`;
+      const subPositionY = 0 + scrollY * 0.03;
+      profile1.style.backgroundPosition = `center ${subPositionY}%`;
+      profile2.style.backgroundPosition = `center ${subPositionY}%`;
     });
   </script>
 

diff --git a/_site/eslint-prettier-설치-및-룰-설정을-통한-프로젝트-초기-세팅하기.html b/_site/eslint-prettier-설치-및-룰-설정을-통한-프로젝트-초기-세팅하기.html
@@ -60,8 +60,9 @@
       const scrollY = window.scrollY;
       const positionY = 50 + scrollY * 0.03;
       background.style.backgroundPosition = `center ${positionY}%`;
-      profile1.style.backgroundPosition = `center ${positionY}%`;
-      profile2.style.backgroundPosition = `center ${positionY}%`;
+      const subPositionY = 0 + scrollY * 0.03;
+      profile1.style.backgroundPosition = `center ${subPositionY}%`;
+      profile2.style.backgroundPosition = `center ${subPositionY}%`;
     });
   </script>
 

diff --git a/_site/example2-archive.html b/_site/example2-archive.html
@@ -58,8 +58,9 @@
       const scrollY = window.scrollY;
       const positionY = 50 + scrollY * 0.03;
       background.style.backgroundPosition = `center ${positionY}%`;
-      profile1.style.backgroundPosition = `center ${positionY}%`;
-      profile2.style.backgroundPosition = `center ${positionY}%`;
+      const subPositionY = 0 + scrollY * 0.03;
+      profile1.style.backgroundPosition = `center ${subPositionY}%`;
+      profile2.style.backgroundPosition = `center ${subPositionY}%`;
     });
   </script>
 

diff --git a/_site/feed.xml b/_site/feed.xml
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.5">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-08-11T22:41:47+09:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Kang Byeong-hyeon 👨🏻‍💻</title><subtitle>Kang Byeonghyeon&apos;s dev blog
+<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.5">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2024-08-14T18:41:56+09:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Kang Byeong-hyeon 👨🏻‍💻</title><subtitle>Kang Byeonghyeon&apos;s dev blog
 </subtitle><author><name>Kang Byeonghyeon</name></author><entry><title type="html">[우선] 우선을 중단하며</title><link href="http://localhost:4000/%EC%9A%B0%EC%84%A0-%EC%9A%B0%EC%84%A0%EC%9D%84-%EC%A4%91%EB%8B%A8%ED%95%98%EB%A9%B0.html" rel="alternate" type="text/html" title="[우선] 우선을 중단하며" /><published>2024-07-28T00:00:00+09:00</published><updated>2024-07-28T00:00:00+09:00</updated><id>http://localhost:4000/%5B%EC%9A%B0%EC%84%A0%5D%20%EC%9A%B0%EC%84%A0%EC%9D%84%20%EC%A4%91%EB%8B%A8%ED%95%98%EB%A9%B0</id><content type="html" xml:base="http://localhost:4000/%EC%9A%B0%EC%84%A0-%EC%9A%B0%EC%84%A0%EC%9D%84-%EC%A4%91%EB%8B%A8%ED%95%98%EB%A9%B0.html">&lt;p&gt;&lt;br /&gt;
 &lt;br /&gt;
 &lt;br /&gt;&lt;/p&gt;

diff --git a/_site/frontend.html b/_site/frontend.html
@@ -58,8 +58,9 @@
       const scrollY = window.scrollY;
       const positionY = 50 + scrollY * 0.03;
       background.style.backgroundPosition = `center ${positionY}%`;
-      profile1.style.backgroundPosition = `center ${positionY}%`;
-      profile2.style.backgroundPosition = `center ${positionY}%`;
+      const subPositionY = 0 + scrollY * 0.03;
+      profile1.style.backgroundPosition = `center ${subPositionY}%`;
+      profile2.style.backgroundPosition = `center ${subPositionY}%`;
     });
   </script>
 

diff --git a/_site/husky와-lint-staged로-git-hooks-자동화하기.html b/_site/husky와-lint-staged로-git-hooks-자동화하기.html
@@ -60,8 +60,9 @@
       const scrollY = window.scrollY;
       const positionY = 50 + scrollY * 0.03;
       background.style.backgroundPosition = `center ${positionY}%`;
-      profile1.style.backgroundPosition = `center ${positionY}%`;
-      profile2.style.backgroundPosition = `center ${positionY}%`;
+      const subPositionY = 0 + scrollY * 0.03;
+      profile1.style.backgroundPosition = `center ${subPositionY}%`;
+      profile2.style.backgroundPosition = `center ${subPositionY}%`;
     });
   </script>
 

diff --git a/_site/index.html b/_site/index.html
@@ -58,8 +58,9 @@
       const scrollY = window.scrollY;
       const positionY = 50 + scrollY * 0.03;
       background.style.backgroundPosition = `center ${positionY}%`;
-      profile1.style.backgroundPosition = `center ${positionY}%`;
-      profile2.style.backgroundPosition = `center ${positionY}%`;
+      const subPositionY = 0 + scrollY * 0.03;
+      profile1.style.backgroundPosition = `center ${subPositionY}%`;
+      profile2.style.backgroundPosition = `center ${subPositionY}%`;
     });
   </script>
 
@@ -73,13 +74,10 @@
 <body a="auto">
     <main class="page-content" aria-label="Content">
       <header class="header">
-  <h1 class="header-title">Hi, I’m <strong>Kang Byeong-hyeon</strong>.</h1>
+  <h1 class="header-title">
+    <span>Hi, I’m <strong>Kang Byeong-hyeon</strong>.</span>
+  </h1>
   <div class="background"></div>
-  <div class="profile-container">
-    <div class="profile1"></div>
-    <div class="profile2"></div>
-    <div></div>
-  </div>
   <div class="introduce">
     <p><strong>웹 프론트엔드</strong> 개발을 좋아해요.</p>
     <p><strong>기록</strong>하고 <strong>공유</strong>하는 걸 좋아해요.</p>
@@ -90,18 +88,17 @@ <h1 class="header-title">Hi, I’m <strong>Kang Byeong-hyeon</strong>.</h1>
   </div>
 </header>
 
-<div class="contact">
-  <span>
-    🐱
-    <a href="https://github.com/kang-kibong" target="_blank">Github</a>
-  </span>
-  <span>
-    📧
-    <a href="mailto:[email protected]">Email</a>
-  </span>
-</div>
-
-<section class="w"><ul><li class="list">
+<section class="w">
+  <div class="contact">
+    <span>
+      🐱
+      <a href="https://github.com/kang-kibong" target="_blank">Github</a>
+    </span>
+    <span>
+      📧
+      <a href="mailto:[email protected]">Email</a>
+    </span>
+  </div><ul><li class="list">
     <strong>👨🏻‍💻 kakao tech campus 2th ~</strong>
   </li><ul><li>
     <span>2024-05-14</span>
@@ -306,6 +303,11 @@ <h1 class="header-title">Hi, I’m <strong>Kang Byeong-hyeon</strong>.</h1>
 
 </section>
 
+<div class="profile-container">
+  <div class="profile1"></div>
+  <div class="profile2"></div>
+</div>
+
     </main>
   </body>
 </html>
diff --git a/_site/kakao.html b/_site/kakao.html
@@ -58,8 +58,9 @@
       const scrollY = window.scrollY;
       const positionY = 50 + scrollY * 0.03;
       background.style.backgroundPosition = `center ${positionY}%`;
-      profile1.style.backgroundPosition = `center ${positionY}%`;
-      profile2.style.backgroundPosition = `center ${positionY}%`;
+      const subPositionY = 0 + scrollY * 0.03;
+      profile1.style.backgroundPosition = `center ${subPositionY}%`;
+      profile2.style.backgroundPosition = `center ${subPositionY}%`;
     });
   </script>
 

diff --git a/_site/kakao1.html b/_site/kakao1.html
@@ -58,8 +58,9 @@
       const scrollY = window.scrollY;
       const positionY = 50 + scrollY * 0.03;
       background.style.backgroundPosition = `center ${positionY}%`;
-      profile1.style.backgroundPosition = `center ${positionY}%`;
-      profile2.style.backgroundPosition = `center ${positionY}%`;
+      const subPositionY = 0 + scrollY * 0.03;
+      profile1.style.backgroundPosition = `center ${subPositionY}%`;
+      profile2.style.backgroundPosition = `center ${subPositionY}%`;
     });
   </script>