diff --git a/css/workout_fredit.css b/css/workout_fredit.css
new file mode 100644
index 0000000..4471956
--- /dev/null
+++ b/css/workout_fredit.css
@@ -0,0 +1,382 @@
+@charset "utf-8";
+@import url("common.css");
+@import url("cursor.css");
+
+
+/*헤더영역*/
+
+.header_top{
+  position: fixed;
+  left: 0;
+  top: 1em;
+  width: 100%;
+  z-index: 1000;
+}
+.header_inner{
+  margin: 0 auto;
+  padding: 0 24px;
+}
+.header_line_top, .header_line_bottom{
+  height: 1px;
+  display: block;
+  background-color: #fff;
+  transform-origin: 0 0;
+  width: 100%;
+}
+.header_line_top{
+  height: 2px;
+}
+.header_content{
+  display: flex;
+  justify-content: space-between;
+  padding: 12px;
+  pointer-events: auto;
+  align-items: center;
+}
+.header_content > h1, .header_content > a, .header_content > span, .header_bottom_out > a > p{
+  color: #fff;
+  font-size: 1em;
+  text-decoration: none;
+}
+.header_content > span{
+  display: flex;
+  align-items: center;
+}
+.square{
+  width: 20px;
+  height: 20px;
+  margin: 8px;
+  background: radial-gradient(circle,white,grey);
+  text-align: center;
+  color: white;
+  animation-name : lotate;   
+  animation-duration : 3s;        
+  animation-iteration-count : infinite; 
+  animation-timing-function : linear;   
+  border-radius: 6px; 
+}
+@keyframes lotate {
+  0% {
+    transform : rotate(0deg)
+  }
+
+  50% {
+    transform : rotate(180deg)
+  }
+
+  100% {
+    transform : rotate(360deg)
+  }
+}
+.header_bottom_out{
+  padding: 12px
+}
+
+.content_inner, .work_detail{
+  margin: 0 auto;
+  margin-top: 15vh;
+  overflow: hidden;
+  padding: 0 clamp(24px,4vw,60px);
+  display: flex;
+  justify-content: center;
+}
+
+.line{
+  width: 100%;
+  position: relative;
+}
+.line:after{
+  content:"";
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 0;
+  height: 1px;
+  background: linear-gradient(to right,white,grey);
+  transition: all .5s;
+}
+.line:before{
+  content:"";
+  position: absolute;
+  right: 50%;
+  bottom: 0;
+  width: 0;
+  height: 1px;
+  background: linear-gradient(to left,white,grey);
+  transition: all .5s;
+}
+.lineafter:after{
+  width: 50%;
+}
+.linebefore:before{
+  width: 50%;
+}
+.mockup{
+  width: 50%;
+  background: url(../img/uiux/Fredit_thum2.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position-y: center;
+  background-position-x: center;
+  height: 70vh;
+}
+.discription{
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2vh;
+}
+.work_info > ul{
+  display: flex;
+  gap: 0.5vw;
+}
+.work_info > ul > li, .work_title > span{
+  color: darkgray;
+}
+.work_title > h3{
+  margin: 1.5vh 0;
+}
+.work_info > ul, .work_info > div > p:first-child{
+  margin-bottom: 1.5vh;
+}
+.detail_page{
+  width: 60%;
+  background-size: cover;
+  margin: 0 auto;
+  border-radius: 1rem;
+  position: sticky;
+  overflow: scroll;
+  height: 80vh;
+}
+.detail_page > img{
+  width: 100%;
+}
+.detail_discription{
+  display: flex;
+  padding: 0 24px;
+}
+.detail_discription > p{
+  width: 50%;
+}
+.line2{
+  margin: calc(2vh + 3vw + 2rem) 0;
+}
+.other_project{
+  padding: calc(1vh + 2vw + 1rem) clamp(24px,4vw,60px);
+}
+.other_project > h4{
+  padding: 1rem;
+}
+.other_project > ul{
+  display: flex;
+  flex-direction: column;
+}
+.other_project > ul > li{
+  overflow: hidden;
+  position: relative;
+  border-bottom: 1px solid rgba(255,255,255);
+}
+
+.other_project > ul > li > a{
+  display: block;
+  overflow: hidden;
+  padding: 1rem;
+  width: 100%;
+  height: 100%;
+}
+.other_project > ul > li > a > div{
+  color: #fff;
+  font-size: 20px;
+}
+.other_project > ul > li > a > div::after{
+  background-color: var(--color-beige);
+  content: "";
+  display: block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  transform: translateY(100%);
+  transition: transform .3s;
+  width: 100%;
+}
+
+/* bottom section */
+
+.contact{
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 auto;
+  overflow-x: hidden;
+  max-width: 2561px;
+  z-index: 1;
+}
+.contact_inner{
+  position: relative;
+}
+.contact_inner > div:nth-child(1) > p{
+  font-size: 20px;
+  color: darkgray;
+  margin-bottom: 2vh;
+}
+.contact_inner > div:nth-child(2) > p{
+  font-size: 30px;
+  color: #fff;
+}
+.contact_inner > div:nth-child(3) > p{
+  font-size: 80px;
+  color: #fff;
+}
+.contact_inner_2{
+  display: flex;
+  align-items: flex-start;
+  gap: 30px;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 58rem;
+  margin-top: 50px;
+}
+.contact_inner_2 > div{
+  width: 50%;
+}
+.contact_inner_2 div > p{
+  color: #fff;
+  font-weight: 400;
+  line-height: 150%;
+}
+.footer_inner_center > p, .footer_inner_copyright > p{
+  color: rgb(192, 192, 192);
+  font-size: 0.7rem;
+}
+
+
+/* pc */
+
+@media screen and ( min-width: 1026px ){
+
+  .content_inner{
+    width: 100%;
+    max-width: 2560px
+  }
+  .item_inner > h4, .total_career > h4, .other_project > h4{
+    font-size: 30px;
+  }
+  .work_title > h3{
+    font-size: 68px;
+  }
+  .contact{
+    height: 30vh;
+    padding: 0 clamp(24px,4vw,60px);
+  }
+
+}
+
+
+
+/* 태블릿 */
+@media screen and ( max-width: 1025px ) and ( min-width: 768px ){
+  
+  .content_inner, .work_detail{
+    flex-direction: column;
+  }
+  .mockup{
+    width: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    height: 50vh;
+  }
+  .discription{
+    width: 100%;
+    margin: 4vh 0;
+  }
+  .detail_page > img{
+    content: url(../img/metapos_main_tb.png);
+  }
+  .work_info > ul > li, .work_title > span{
+    font-size: 28px;
+  }
+  .work_info > div > p, .detail_discription > p{
+    font-size: 24px;
+  }
+  .detail_discription{
+    flex-direction: column;
+    gap: 1.5vh;
+  }
+  .detail_discription > p{
+    width: 100%;
+  }
+  .item_inner > h4, .total_career > h4, .other_project > h4{
+    font-size: 40px;
+  }
+  .work_title > h3{
+    font-size: 50px;
+  }
+  .contact{
+    padding: 2vh clamp(24px,4vw,60px);
+  }
+}
+
+
+
+/* 모바일 */
+@media screen and ( max-width: 767px ){
+  
+  .content_inner, .work_detail{
+    flex-direction: column;
+  }
+  .mockup{
+    width: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    height: 30vh;
+  }
+  .discription{
+    width: 100%;
+    margin: 4vh 0;
+  }
+  .detail_page > img{
+    content: url(../img/metapos_main_mb.png);
+  }
+  .work_info > div > p, .detail_discription > p, .work_info > ul > li, .work_title > span{
+    font-size: 14px;
+  }
+  .detail_discription{
+    flex-direction: column;
+    gap: 1.5vh;
+  }
+  .detail_discription > p{
+    width: 100%;
+  }
+  .item_inner > h4, .total_career > h4, .other_project > h4{
+    font-size: 20px;
+  }
+  .work_title > h3{
+    font-size: 30px;
+  }
+  .contact{
+    flex-direction: column;
+    padding: 15vh calc(1vh + 1vw + 2rem);
+    align-items: flex-start;
+  }
+  .contact_inner > div:nth-child(1) > p{
+    font-size: 20px;
+    margin-bottom: 50px;
+  }
+  .contact_inner > div:nth-child(2) > p{
+    font-size: 24px;
+  }
+  .contact_inner > div:nth-child(3) > p{
+    font-size: 30px;
+  }
+  .contact_footer{
+    position: absolute;
+    bottom: 1rem;
+    left: 50%;
+    transform: translate(-50%,0);
+  }
+}
\ No newline at end of file
diff --git a/css/workout_nail.css b/css/workout_nail.css
new file mode 100644
index 0000000..859522c
--- /dev/null
+++ b/css/workout_nail.css
@@ -0,0 +1,382 @@
+@charset "utf-8";
+@import url("common.css");
+@import url("cursor.css");
+
+
+/*헤더영역*/
+
+.header_top{
+  position: fixed;
+  left: 0;
+  top: 1em;
+  width: 100%;
+  z-index: 1000;
+}
+.header_inner{
+  margin: 0 auto;
+  padding: 0 24px;
+}
+.header_line_top, .header_line_bottom{
+  height: 1px;
+  display: block;
+  background-color: #fff;
+  transform-origin: 0 0;
+  width: 100%;
+}
+.header_line_top{
+  height: 2px;
+}
+.header_content{
+  display: flex;
+  justify-content: space-between;
+  padding: 12px;
+  pointer-events: auto;
+  align-items: center;
+}
+.header_content > h1, .header_content > a, .header_content > span, .header_bottom_out > a > p{
+  color: #fff;
+  font-size: 1em;
+  text-decoration: none;
+}
+.header_content > span{
+  display: flex;
+  align-items: center;
+}
+.square{
+  width: 20px;
+  height: 20px;
+  margin: 8px;
+  background: radial-gradient(circle,white,grey);
+  text-align: center;
+  color: white;
+  animation-name : lotate;   
+  animation-duration : 3s;        
+  animation-iteration-count : infinite; 
+  animation-timing-function : linear;   
+  border-radius: 6px; 
+}
+@keyframes lotate {
+  0% {
+    transform : rotate(0deg)
+  }
+
+  50% {
+    transform : rotate(180deg)
+  }
+
+  100% {
+    transform : rotate(360deg)
+  }
+}
+.header_bottom_out{
+  padding: 12px
+}
+
+.content_inner, .work_detail{
+  margin: 0 auto;
+  margin-top: 15vh;
+  overflow: hidden;
+  padding: 0 clamp(24px,4vw,60px);
+  display: flex;
+  justify-content: center;
+}
+
+.line{
+  width: 100%;
+  position: relative;
+}
+.line:after{
+  content:"";
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 0;
+  height: 1px;
+  background: linear-gradient(to right,white,grey);
+  transition: all .5s;
+}
+.line:before{
+  content:"";
+  position: absolute;
+  right: 50%;
+  bottom: 0;
+  width: 0;
+  height: 1px;
+  background: linear-gradient(to left,white,grey);
+  transition: all .5s;
+}
+.lineafter:after{
+  width: 50%;
+}
+.linebefore:before{
+  width: 50%;
+}
+.mockup{
+  width: 50%;
+  background: url(../img/uiux/nail-thum2.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position-y: center;
+  background-position-x: center;
+  height: 70vh;
+}
+.discription{
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2vh;
+}
+.work_info > ul{
+  display: flex;
+  gap: 0.5vw;
+}
+.work_info > ul > li, .work_title > span{
+  color: darkgray;
+}
+.work_title > h3{
+  margin: 1.5vh 0;
+}
+.work_info > ul, .work_info > div > p:first-child{
+  margin-bottom: 1.5vh;
+}
+.detail_page{
+  width: 60%;
+  background-size: cover;
+  margin: 0 auto;
+  border-radius: 1rem;
+  position: sticky;
+  overflow: scroll;
+  height: 80vh;
+}
+.detail_page > img{
+  width: 100%;
+}
+.detail_discription{
+  display: flex;
+  padding: 0 24px;
+}
+.detail_discription > p{
+  width: 50%;
+}
+.line2{
+  margin: calc(2vh + 3vw + 2rem) 0;
+}
+.other_project{
+  padding: calc(1vh + 2vw + 1rem) clamp(24px,4vw,60px);
+}
+.other_project > h4{
+  padding: 1rem;
+}
+.other_project > ul{
+  display: flex;
+  flex-direction: column;
+}
+.other_project > ul > li{
+  overflow: hidden;
+  position: relative;
+  border-bottom: 1px solid rgba(255,255,255);
+}
+
+.other_project > ul > li > a{
+  display: block;
+  overflow: hidden;
+  padding: 1rem;
+  width: 100%;
+  height: 100%;
+}
+.other_project > ul > li > a > div{
+  color: #fff;
+  font-size: 20px;
+}
+.other_project > ul > li > a > div::after{
+  background-color: var(--color-beige);
+  content: "";
+  display: block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  transform: translateY(100%);
+  transition: transform .3s;
+  width: 100%;
+}
+
+/* bottom section */
+
+.contact{
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 auto;
+  overflow-x: hidden;
+  max-width: 2561px;
+  z-index: 1;
+}
+.contact_inner{
+  position: relative;
+}
+.contact_inner > div:nth-child(1) > p{
+  font-size: 20px;
+  color: darkgray;
+  margin-bottom: 2vh;
+}
+.contact_inner > div:nth-child(2) > p{
+  font-size: 30px;
+  color: #fff;
+}
+.contact_inner > div:nth-child(3) > p{
+  font-size: 80px;
+  color: #fff;
+}
+.contact_inner_2{
+  display: flex;
+  align-items: flex-start;
+  gap: 30px;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 58rem;
+  margin-top: 50px;
+}
+.contact_inner_2 > div{
+  width: 50%;
+}
+.contact_inner_2 div > p{
+  color: #fff;
+  font-weight: 400;
+  line-height: 150%;
+}
+.footer_inner_center > p, .footer_inner_copyright > p{
+  color: rgb(192, 192, 192);
+  font-size: 0.7rem;
+}
+
+
+/* pc */
+
+@media screen and ( min-width: 1026px ){
+
+  .content_inner{
+    width: 100%;
+    max-width: 2560px
+  }
+  .item_inner > h4, .total_career > h4, .other_project > h4{
+    font-size: 30px;
+  }
+  .work_title > h3{
+    font-size: 68px;
+  }
+  .contact{
+    height: 30vh;
+    padding: 0 clamp(24px,4vw,60px);
+  }
+
+}
+
+
+
+/* 태블릿 */
+@media screen and ( max-width: 1025px ) and ( min-width: 768px ){
+  
+  .content_inner, .work_detail{
+    flex-direction: column;
+  }
+  .mockup{
+    width: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    height: 50vh;
+  }
+  .discription{
+    width: 100%;
+    margin: 4vh 0;
+  }
+  .detail_page > img{
+    content: url(../img/metapos_main_tb.png);
+  }
+  .work_info > ul > li, .work_title > span{
+    font-size: 28px;
+  }
+  .work_info > div > p, .detail_discription > p{
+    font-size: 24px;
+  }
+  .detail_discription{
+    flex-direction: column;
+    gap: 1.5vh;
+  }
+  .detail_discription > p{
+    width: 100%;
+  }
+  .item_inner > h4, .total_career > h4, .other_project > h4{
+    font-size: 40px;
+  }
+  .work_title > h3{
+    font-size: 50px;
+  }
+  .contact{
+    padding: 2vh clamp(24px,4vw,60px);
+  }
+}
+
+
+
+/* 모바일 */
+@media screen and ( max-width: 767px ){
+  
+  .content_inner, .work_detail{
+    flex-direction: column;
+  }
+  .mockup{
+    width: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    height: 30vh;
+  }
+  .discription{
+    width: 100%;
+    margin: 4vh 0;
+  }
+  .detail_page > img{
+    content: url(../img/metapos_main_mb.png);
+  }
+  .work_info > div > p, .detail_discription > p, .work_info > ul > li, .work_title > span{
+    font-size: 14px;
+  }
+  .detail_discription{
+    flex-direction: column;
+    gap: 1.5vh;
+  }
+  .detail_discription > p{
+    width: 100%;
+  }
+  .item_inner > h4, .total_career > h4, .other_project > h4{
+    font-size: 20px;
+  }
+  .work_title > h3{
+    font-size: 30px;
+  }
+  .contact{
+    flex-direction: column;
+    padding: 15vh calc(1vh + 1vw + 2rem);
+    align-items: flex-start;
+  }
+  .contact_inner > div:nth-child(1) > p{
+    font-size: 20px;
+    margin-bottom: 50px;
+  }
+  .contact_inner > div:nth-child(2) > p{
+    font-size: 24px;
+  }
+  .contact_inner > div:nth-child(3) > p{
+    font-size: 30px;
+  }
+  .contact_footer{
+    position: absolute;
+    bottom: 1rem;
+    left: 50%;
+    transform: translate(-50%,0);
+  }
+}
\ No newline at end of file
diff --git a/img/uiux/Fredit_thum2.png b/img/uiux/Fredit_thum2.png
new file mode 100644
index 0000000..0b1d99d
Binary files /dev/null and b/img/uiux/Fredit_thum2.png differ
diff --git a/img/uiux/nail-thum2.png b/img/uiux/nail-thum2.png
new file mode 100644
index 0000000..7fa3fdb
Binary files /dev/null and b/img/uiux/nail-thum2.png differ
diff --git a/work/fredit.html b/work/fredit.html
new file mode 100644
index 0000000..f1cc5ff
--- /dev/null
+++ b/work/fredit.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> 
+  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+  <link rel="stylesheet" href="../css/workout_fredit.css">
+  <script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
+  <title>Nail Shop</title>
+</head>
+<body>
+   <!--마우스커서 영역 시작-->
+   <section id="mouse">
+    <div class="mouse_cursor"></div>
+    <div class="mouse_cursor2"></div>
+  </section>
+  <!--마우스커서 영역 끝-->
+
+  <!--헤더 영역 시작-->
+  <header class="header_top animate__animated">
+    <div class="header_inner">
+      <div class="header_line_top"></div>
+      <div class="header_content">
+        <h1>Yoom's Web Portfolio</h1>
+        <a class="my_mail" href="mailto:fdgh134@naver.com">fdgh134@naver.com</a>
+        <span> <div class="square"></div> Contect Me!</span>
+      </div>
+      <div class="header_line_bottom"></div>
+      <div class="header_bottom_out">
+        <a href="../index.html">
+          <p>◀ 뒤로 가기</p>
+        </a>
+      </div>
+    </div>
+  </header>
+  <!--헤더 영역 끝-->
+
+  <!--본문영역 시작-->
+  <div class="content">
+    <div class="content_inner">
+      <div class="mockup animate__animated animate__fadeInUp"></div>
+      <div class="discription animate__animated animate__fadeInUp animate__delay-1s">
+        <div class="work_title">
+          <span>PROJECT</span>
+          <h3>프레딧 웹페이지 리뉴얼</h3>
+        </div>
+        <div class="work_info">
+          <ul>
+            <li>Use Application</li>
+            <li>/</li>
+            <li>Figma</li>
+            <li>illustrator</li>
+            <li>Photoshop</li>
+          </ul>
+          <div>
+            <p>개인 프로젝트 프레딧 웹페이지 리뉴얼 디자인</p>
+            <p>기존 모바일 버전 레이아웃을 PC환경에서도 사용고있어 가독성이 떨어져 PC전용 페이지를 제작</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="line"></div>
+    <div class="work_detail none">
+      <div class="detail_inner animate__animated none">
+        <div class="detail_page">
+          <img src="../img/uiux/Fredit.png" alt="">
+        </div>
+      </div>
+    </div>
+    <div class="line line2 none"></div>
+    <div class="other_project none">
+      <h4>Other Project</h4>
+      <ul>
+        <li><a href="joid.html"><div>조이디 어플리케이션</div></a></li>
+        <li><a href="aim.html"><div>에임위드 웹페이지</div></a></li>
+        <li><a href="nail.html"><div>네일샵 어플리케이션</div></a></li>
+      </ul>
+    </div>
+    <div class="line none"></div>
+    <div class="contact animate__animated animate__slow none">
+      <div class="contact_inner">
+        <div><p>CONTACT</p></div>
+        <div><p>같이 일할 파트너를 찾고 계신가요?</p></div>
+        <div><p>fdgh134@naver.com</p></div>
+      </div>
+      <footer class="contact_footer">
+        <div class="footer_inner">
+          <div class="footer_inner_center">
+            <p>Made by <span>Yoom</span></p>
+            <div class="footer_inner_copyright">
+              <p>ⓒ2024 Yoomin Son</p>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <!--본문영역 끝-->
+  <script src="../js/imagesloaded.pkgd.min.js"></script>
+  <script src="../js/workout2.js"></script>
+  <script src="../js/introduce.js"></script>
+  <script src="../js/common.js"></script>
+  <script src="../js/splitting.min.js"></script>
+  <script type="module" src="../js/index.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/work/nail.html b/work/nail.html
new file mode 100644
index 0000000..79c68a5
--- /dev/null
+++ b/work/nail.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> 
+  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+  <link rel="stylesheet" href="../css/workout_nail.css">
+  <script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
+  <title>Nail Shop</title>
+</head>
+<body>
+   <!--마우스커서 영역 시작-->
+   <section id="mouse">
+    <div class="mouse_cursor"></div>
+    <div class="mouse_cursor2"></div>
+  </section>
+  <!--마우스커서 영역 끝-->
+
+  <!--헤더 영역 시작-->
+  <header class="header_top animate__animated">
+    <div class="header_inner">
+      <div class="header_line_top"></div>
+      <div class="header_content">
+        <h1>Yoom's Web Portfolio</h1>
+        <a class="my_mail" href="mailto:fdgh134@naver.com">fdgh134@naver.com</a>
+        <span> <div class="square"></div> Contect Me!</span>
+      </div>
+      <div class="header_line_bottom"></div>
+      <div class="header_bottom_out">
+        <a href="../index.html">
+          <p>◀ 뒤로 가기</p>
+        </a>
+      </div>
+    </div>
+  </header>
+  <!--헤더 영역 끝-->
+
+  <!--본문영역 시작-->
+  <div class="content">
+    <div class="content_inner">
+      <div class="mockup animate__animated animate__fadeInUp"></div>
+      <div class="discription animate__animated animate__fadeInUp animate__delay-1s">
+        <div class="work_title">
+          <span>PROJECT</span>
+          <h3>네일샵 어플리케이션 UIUX</h3>
+        </div>
+        <div class="work_info">
+          <ul>
+            <li>Use Application</li>
+            <li>/</li>
+            <li>Figma</li>
+            <li>illustrator</li>
+            <li>Photoshop</li>
+          </ul>
+          <div>
+            <p>개인 프로젝트 네일샵 어플리케이션 디자인입니다.</p>
+            <p>여성 타겟 어플리케이션으로 그에 맞는 컬러톤과 레이아웃, 이미지를 사용해 작업했습니다.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="line"></div>
+    <div class="work_detail none">
+      <div class="detail_inner animate__animated none">
+        <div class="detail_page">
+          <img src="../img/uiux/nail-1.jpg" alt="">
+          <img src="../img/uiux/nail-2.jpg" alt="">
+          <img src="../img/uiux/nail-3.jpg" alt="">
+          <img src="../img/uiux/nail-4.jpg" alt="">
+          <img src="../img/uiux/nail-5.png" alt="">
+          <img src="../img/uiux/nail-6.png" alt="">
+          <img src="../img/uiux/nail-7.png" alt="">
+          <img src="../img/uiux/nail-8.png" alt="">
+          <img src="../img/uiux/nail-9.png" alt="">
+          <img src="../img/uiux/nail-10.png" alt="">
+          <img src="../img/uiux/nail-11.png" alt="">
+          <img src="../img/uiux/nail-12.png" alt="">
+        </div>
+      </div>
+    </div>
+    <div class="line line2 none"></div>
+    <div class="other_project none">
+      <h4>Other Project</h4>
+      <ul>
+        <li><a href="joid.html"><div>조이디 어플리케이션</div></a></li>
+        <li><a href="aim.html"><div>에임위드 웹페이지</div></a></li>
+        <li><a href="fredit.html"><div>프레딧 웹페이지 리뉴얼</div></a></li>
+      </ul>
+    </div>
+    <div class="line none"></div>
+    <div class="contact animate__animated animate__slow none">
+      <div class="contact_inner">
+        <div><p>CONTACT</p></div>
+        <div><p>같이 일할 파트너를 찾고 계신가요?</p></div>
+        <div><p>fdgh134@naver.com</p></div>
+      </div>
+      <footer class="contact_footer">
+        <div class="footer_inner">
+          <div class="footer_inner_center">
+            <p>Made by <span>Yoom</span></p>
+            <div class="footer_inner_copyright">
+              <p>ⓒ2024 Yoomin Son</p>
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </div>
+  <!--본문영역 끝-->
+  <script src="../js/imagesloaded.pkgd.min.js"></script>
+  <script src="../js/workout2.js"></script>
+  <script src="../js/introduce.js"></script>
+  <script src="../js/common.js"></script>
+  <script src="../js/splitting.min.js"></script>
+  <script type="module" src="../js/index.js"></script>
+</body>
+</html>
\ No newline at end of file