EFUB · seooyuun · Mar 20, 2025 · Mar 21, 2025 · Mar 28, 2025 · Apr 2, 2025
diff --git a/onboarding/Seoyun.jpg b/onboarding/Seoyun.jpg
diff --git a/onboarding/first-favorite.jpg b/onboarding/first-favorite.jpg
diff --git a/onboarding/portfolio.html b/onboarding/portfolio.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Seoyun's Portfolio</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1 id="site-title">Hello! Seoyun WORLD</h1>
+    <header>
+      <nav>
+        <ul id="navigation">
+          <li><a class="nav-item" href="#stacks">STACKS</a></li>
+          <li><a class="nav-item" href="#favorite">FAVORITE</a></li>
+          <li><a class="nav-item" href="#about">ABOUT</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <!--about section-->
+      <section id="about">
+        <h2 class="title">ABOUT</h2>
+        <div class="about-content">
+          <div class="left">
+            <img src="Seoyun.jpg" />
+          </div>
+          <div class="right">
+            <h1>Hi!</h1>
+            <p class="introduce">
+              My name is <span class="name-highlight">SEOYUN</span>
+            </p>
+            <h2 id="univ">Ewha Womans University</h2>
+            <h2 id="major">Major in</h2>
+            <h3 id="major-details">
+              Computer Sience and Engineering / Statistics
+            </h3>
+            <h3 id="birthday">birthday: 2002-05-12</h3>
+            <div class="site">
+              <p class="blog">
+                blog: <a href="https://blog.naver.com/may_12kr">CLICK</a>
+              </p>
+              <p class="github">
+                github: <a href="https://github.com/seooyuun">CLICK</a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!--favorite section-->
+      <section id="favorite">
+        <h2 class="title">FAVORITE</h2>
+        <div class="favorite-content">
+          <div class="first-favorite">
+            <div class="favorite-images">
+              <img src="first-favorite.jpg" />
+            </div>
+            <div class="first-favorite-details">
+              <h2>MUSIC</h2>
+              <p>
+                밴드&#127928; 음악을 좋아합니다! 페스티벌을 가는 것도 즐겨요.
+              </p>
+              <p>작년에는 펜타포트와 부산국제락페스티벌을 다녀왔어요.</p>
+            </div>
+          </div>
+          <div class="second-favorite">
+            <div class="favorite-images">
+              <img src="second-favorite.jpg" />
+            </div>
+            <div class="second-favorite-details">
+              <h2>TRAVEL</h2>
+              <p>친구들, 가족들과 여행가는 것을 좋아합니다!</p>
+              <p>
+                가장 최근에는 가족과 홋카이도를, 친구와 상하이를
+                다녀왔어요&#127900;
+              </p>
+            </div>
+          </div>
+          <div class="third-favorite">
+            <div class="favorite-images">
+              <img src="third-favorite.jpg" />
+            </div>
+            <div class="third-favorite-details">
+              <h2>ANIMATION</h2>
+              <p>
+                시간이 날 때마다 애니메이션을 보거나 만화를 읽는 것을 좋아해요!
+              </p>
+              <p>가장 최근에 본 만화책은 헌터X헌터!</p>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!--stack section-->
+      <section id="stacks">
+        <h2 class="title">STACKS</h2>
+        <div class="stacks-content">
+          <div class="left">
+            <div class="stack-details">
+              <p>
+                컴퓨터공학과 통계학을 전공하면서 웹과 데이터를 공부하고
+                있습니다. C와 Java를 학습하면서 기본적인 프로그래밍 언어 공부를
+                하였고, 현재는 Python을 이용한 머신 러닝과 데이터 분석을 배우는
+                중입니다. HTML, CSS, JavaScript를 학습하며 프론트엔드 웹 개발에
+                대해서도 공부 중입니다.
+              </p>
+              <p>
+                &#128187;웹과 데이터를 동시에 다룰 수 있는 개발자가 되는 것이
+                목표입니다!&#128187;
+              </p>
+            </div>
+          </div>
+          <div class="right">
+            <div class="progress-container">
+              <div class="progressbar">
+                <p>C</p>
+                <div class="progress-bar-C">60%</div>
+              </div>
+              <div class="progressbar">
+                <p>Python</p>
+                <div class="progress-bar-Python">60%</div>
+              </div>
+              <div class="progressbar">
+                <p>HTML</p>
+                <div class="progress-bar-HTML">50%</div>
+              </div>
+              <div class="progressbar">
+                <p>CSS</p>
+                <div class="progress-bar-CSS">40%</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <p>
+        contact:
+        <a href="mailto:[email protected]"
+          ><span class="email-highlight">[email protected]</span></a
+        >
+      </p>
+    </footer>
+  </body>
+</html>
diff --git a/onboarding/sample.md b/onboarding/sample.md
diff --git a/onboarding/second-favorite.jpg b/onboarding/second-favorite.jpg
diff --git a/onboarding/styles.css b/onboarding/styles.css
@@ -0,0 +1,250 @@
+html,
+body {
+  scroll-behavior: smooth;
+  overflow-anchor: none; /*스크롤 앵커링 방지*/
+}
+#site-title {
+  font-size: 40px;
+}
+nav {
+  background-color: #9fc5e8;
+  padding: 10px;
+}
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0px;
+  display: flex;
+  flex-direction: row-reverse;
+}
+nav ul li {
+  margin: 0 10px;
+}
+nav ul li a {
+  color: white;
+  text-decoration: none;
+  font-size: 18px;
+}
+.nav-item:hover {
+  color: #2a4d69;
+  font-weight: 300;
+}
+.title {
+  font-size: 50px;
+  text-align: center;
+}
+
+.about-content {
+  display: flex;
+}
+.about-content .left {
+  width: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+}
+.about-content .right {
+  width: 50%;
+  display: flex;
+  flex-direction: column; /*위->아래*/
+  justify-content: center;
+}
+.about-content .right h1 {
+  font-size: 40px;
+  margin: 0;
+}
+.about-content .right .introduce {
+  font-size: 50px;
+  font-weight: bold;
+  margin: 0;
+}
+#univ {
+  font-size: 30px;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+#major {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+#major-details {
+  font-size: 20px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+#birthday {
+  font-size: 20px;
+}
+.site {
+  display: flex;
+}
+.blog,
+.github {
+  font-size: 15px;
+  font-weight: bold;
+  margin-right: 20px;
+  margin-top: 0;
+}
+.about-content img {
+  width: 80%;
+  padding: 10px;
+}
+.name-highlight:hover {
+  color: #4b86b4;
+  text-decoration: underline;
+}
+.blog a,
+.github a {
+  text-decoration: none; /* 밑줄 제거 */
+  font-weight: 100;
+  color: white; /* 글씨 색 흰색 */
+  background-color: #adcbe3; /* 배경색 파란색 */
+  padding: 5px 30px; /* 내부 여백 */
+  border-radius: 5px; /* 모서리를 둥글게 */
+  display: inline-block; /* 크기 조절 가능하게 설정 */
+}
+.blog a:hover,
+.github a:hover {
+  background-color: #4b86b4;
+  text-decoration: underline; /* 밑줄 추가 */
+}
+.favorite-content {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+.favorite-content p {
+  margin: 5px;
+}
+
+.favorite-content .first-favorite,
+.favorite-content .second-favorite,
+.favorite-content .third-favorite {
+  flex: 1;
+  flex-direction: column;
+  padding: 20px;
+  margin: 15px;
+  background-color: #e7eff6;
+  border-radius: 20px;
+}
+.favorite-content .first-favorite:hover,
+.favorite-content .second-favorite:hover,
+.favorite-content .third-favorite:hover {
+  background-color: #adcbe3;
+}
+.favorite-images {
+  display: flex;
+  justify-content: center;
+}
+.first-favorite img,
+.second-favorite img,
+.third-favorite img {
+  width: 90%;
+  gap: 10px;
+}
+.first-favorite-details,
+.second-favorite-details,
+.third-favorite-details {
+  text-align: center;
+}
+.stacks-content {
+  display: flex;
+}
+.stacks-content .left {
+  width: 50%;
+  padding: 15px;
+  margin-left: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.stacks-content .left p {
+  line-height: 1.8;
+  font-size: 15px;
+}
+.stacks-content .right {
+  width: 50%;
+  padding: 15px;
+  overflow: hidden;
+}
+
+.progress-container {
+  width: 90%;
+  height: 80%;
+  background-color: #eaeaea;
+  border-radius: 10px;
+  padding: 10px;
+  margin: 20px;
+  margin-right: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.progress-container > div {
+  display: flex;
+  align-items: center;
+}
+.progress-container p {
+  margin-right: 10px;
+  font-size: 15px;
+  font-weight: bold;
+  width: 50px;
+}
+.progressbar {
+  width: 80%;
+  display: flex;
+  align-items: center;
+}
+
+.progress-bar-C,
+.progress-bar-CSS,
+.progress-bar-HTML,
+.progress-bar-Python {
+  height: 20px;
+  background-color: #adcbe3;
+  border: none;
+  border-radius: 10px;
+  text-align: center;
+  color: white;
+  font-weight: bold;
+  line-height: 20px;
+}
+.progress-bar-C {
+  width: 60%;
+}
+.progress-bar-Python {
+  width: 60%;
+}
+.progress-bar-HTML {
+  width: 50%;
+}
+.progress-bar-CSS {
+  width: 40%;
+}
+.progress-bar-C:hover,
+.progress-bar-CSS:hover,
+.progress-bar-HTML:hover,
+.progress-bar-Python:hover {
+  background-color: #2a4d69;
+}
+
+footer {
+  background-color: #2a4d69;
+  height: 50px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+footer p {
+  color: #e7eff6;
+  font-size: 20px;
+  margin: 10px;
+}
+footer a {
+  text-decoration: none;
+  color: #e7eff6;
+}
+.email-highlight:hover {
+  color: #adcbe3;
+  font-weight: 500;
+}
diff --git a/onboarding/third-favorite.jpg b/onboarding/third-favorite.jpg
diff --git a/week03/images/clear.png b/week03/images/clear.png
diff --git a/week03/images/paper.png b/week03/images/paper.png
diff --git a/week03/images/rock.png b/week03/images/rock.png
diff --git a/week03/images/scissors.png b/week03/images/scissors.png