2024.03.11-1

src/App.js

@@ -2,18 +2,11 @@ import {GlobalStyle} from "./style/GlobalStyle";
 import styled, {ThemeProvider} from "styled-components";
 import {Resize} from "./component/Resize";
 import {Theme} from "./style/theme";
-import Header from "./component/Header";
 import Footer from "./component/Footer";
 import UiSection from "./section/UiSection";
 import React, {useEffect} from "react";
 import {UiContextProvider} from "./context/UiReducer";
 import Page from "./page/Page";
-import {PortfolioPage} from "./page/PortfolioPage";
-
-const Test = styled.div`
-  height: var(--footer-height);
-  background-color: #f00;
-`
 
 function App() {
   useEffect(() => {

src/component/ProfileList.js

@@ -21,7 +21,7 @@ const ProfileListStyle = styled.li`
   h3 {
     color: ${p => p.theme.color.Gray9};
     font-weight: 600;
-    font-size: 1.3em;
+    font-size: 1.4em;
 
     display: inline-block;
   }

src/component/Resize.js

@@ -8,12 +8,13 @@ export const Resize = () => {
     document.documentElement.style.setProperty("--vh", `${vh}px`)
     document.documentElement.style.setProperty("--vw", `${vw}px`)
   }
+
   useEffect(() => {
     handleResize()
     window.addEventListener("resize", handleResize)
     return () => {
       window.removeEventListener("resize", handleResize)
     }
-  })
+  }, [])
   return <div></div>
 }

src/page/Page.js

@@ -3,19 +3,21 @@ import {PageBasicStyle} from "../style/BasicStyle";
 import {FirstSection} from "../section/FirstSection";
 import {BusinessCardSection} from "../section/BusinessCardSection";
 import {ProfileSection} from "../section/ProfileSection";
-import Header from "../component/Header";
+import {ProjectSection} from "../section/ProjectSection";
 
 const PageStyle = styled.div`
    ${PageBasicStyle};
 `
 
+
 const Page = () => {
   return (
     <PageStyle>
       <FirstSection/>
       {/*<Header/>*/}
       <BusinessCardSection/>
       <ProfileSection/>
+      <ProjectSection/>
     </PageStyle>
   )
 }

src/section/FirstSection.js

@@ -13,7 +13,7 @@ const FirstSectionStyle = styled.section`
 
   .title-wrap {
     color: ${p => p.theme.color.Gray0};
-    font-size: 35px;
+    font-size: 1.9rem;
     text-align: center;
 
     position: absolute;
@@ -60,6 +60,8 @@ const FirstSectionStyle = styled.section`
     animation-duration: 1200ms;
     animation-delay: 2700ms;
     animation-fill-mode: backwards;
+
+    word-break: keep-all;
   }
 
   .link {
@@ -103,6 +105,9 @@ const FirstSectionStyle = styled.section`
 
     animation: ${animation} 1200ms 2700ms 1 normal ease-in-out backwards, ${downUp} 2000ms 3500ms ease-in-out infinite;
   }
+
+  @media (max-width: 400px) {
+  }
 `
 
 export const FirstSection = () => {

src/section/ProjectSection.js

@@ -0,0 +1,78 @@
+import styled from "styled-components";
+
+import Membeder from "./../assets/Membeder 목업.png"
+
+const ProjectSectionStyle = styled.section`
+  padding: 40px 24px;
+  background-color: ${p => p.theme.color.Gray0};
+
+  .content {
+    max-width: ${p => p.theme.size.mobileMaxWidth}px;
+    margin: 0 auto;
+  }
+
+  h2 {
+    color: ${p => p.theme.color.Gray9};
+    font-size: 2em;
+  }
+
+  ul {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+  }
+
+  .project-item {
+    aspect-ratio: 4 / 3;
+    border-radius: 24px;
+    overflow: hidden;
+
+    display: flex;
+    flex-direction: column;
+
+    .thumbnail {
+      flex: 1;
+
+      overflow: hidden;
+
+      img {
+        width: 100%;
+        object-fit: cover;
+
+        transition: 100ms;
+      }
+    }
+
+    .description {
+      background-color: ${p => p.theme.color.Gray4};
+      padding: 16px 12px;
+    }
+
+    &:hover img {
+      transform: scale(1.2);
+    }
+  }
+`
+
+export const ProjectSection = () => {
+  return (
+    <ProjectSectionStyle m={Membeder}>
+      <div className="content">
+        <h2>제가 만든 프로젝트들이에요</h2>
+
+        <ul>
+          <li className={"project-item"}>
+            <div className="thumbnail">
+              <img src={Membeder} alt=""/>
+            </div>
+            <div className={"description"}>
+              <h4>Membeder</h4>
+              <p>IT 직군 사람들을 위한 팀빌딩 어플리케이션<br/>프로젝트 팀장과 Android개발을 담당했습니다.</p>
+            </div>
+          </li>
+        </ul>
+
+      </div>
+    </ProjectSectionStyle>
+  )
+}