Merge pull request #25 from JongMany/feature/main

[Feat] 이미지 추가, 포트폴리오 소개 페이지 추가
JongMany · Jul 26, 2024 · c462caa · c462caa
2 parents f07cfb3 + 784a424
commit c462caa
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 20 deletions.
diff --git a/fe/src/assets/eyeve.png b/fe/src/assets/eyeve.png
diff --git a/fe/src/assets/portfolio.png b/fe/src/assets/portfolio.png
diff --git a/fe/src/assets/ready_to_work.png b/fe/src/assets/ready_to_work.png
diff --git a/fe/src/assets/study-log.png b/fe/src/assets/study-log.png
diff --git a/fe/src/assets/vscode-extension.png b/fe/src/assets/vscode-extension.png
diff --git a/fe/src/pages/root/components/Contents.tsx b/fe/src/pages/root/components/Contents.tsx
@@ -1,15 +1,18 @@
+import { useScrollAnimation } from "@/pages/root/hooks/useScrollAnimation";
+import { useMotionValueEvent, useScroll } from "framer-motion";
+import { useRef } from "react";
+import FileDownload from "@/pages/root/components/content/FileDownload";
+import MyProfile from "@/pages/root/components/content/MyProfile";
 import Content from "@/pages/root/components/Content";
 import Contact from "@/pages/root/components/content/Contact";
 import Home from "@/pages/root/components/content/Home";
 import Project from "@/pages/root/components/content/Project";
-import { useScrollAnimation } from "@/pages/root/hooks/useScrollAnimation";
-// import { useCustomScroll } from "@/pages/root/hooks/useCustomScroll";
-import { useMotionValueEvent, useScroll } from "framer-motion";
-import { useRef } from "react";
-import starPng from "@/assets/star.png";
+// IMG
+import studyLogProjectImg from "@/assets/study-log.png";
+import readyToWorkProjectImg from "@/assets/ready_to_work.png";
 import cryptoProjectImg from "@/assets/crypto.png";
-import MyProfile from "@/pages/root/components/content/MyProfile";
-import FileDownload from "@/pages/root/components/content/FileDownload";
+import eyeveProjectImg from "@/assets/eyeve.png";
+import vscodeExtensionProjectImg from "@/assets/vscode-extension.png";
 
 export default function Contents() {
   const ref = useRef<HTMLDivElement>(null);
@@ -49,13 +52,13 @@ export default function Contents() {
           <Content>
             <MyProfile />
           </Content>
-
+          {/* Ready To Work Project */}
           <Content>
             <Project isAlignReverse={false}>
-              <Project.ImageContainer image={starPng} />
+              <Project.ImageContainer image={readyToWorkProjectImg} />
               <Project.Description
                 projectName="Ready To Work"
-                projectDescription="엔카의 김상범 대표님과 광운대학교의 IDEA Lab에서 진행한 프로젝트입니다. 인사관리 도메인의 B2B 서비스이며, 문제 해결 방식을 통해 인재 채용을 쉽게 할 수 있도록 도움을 주고자 서비스를 기획하였습니다."
+                projectDescription="엔카의 김상범 대표님과 광운대학교의 IDEA Lab에서 진행한 프로젝트입니다. HR 도메인의 B2B 서비스이며, 문제 해결 방식을 통해 인재 채용을 쉽게 할 수 있도록 도움을 주고자 서비스를 기획하였습니다."
                 techSkills={[
                   "React",
                   "TypeScript",
@@ -73,7 +76,7 @@ export default function Contents() {
 
           <Content>
             <Project isAlignReverse={true}>
-              <Project.ImageContainer image={starPng} />
+              <Project.ImageContainer image={eyeveProjectImg} />
               <Project.Description
                 projectName="Eyeve"
                 projectDescription="광운대학교 IDEA Lab에서 카메라를 통한 시선 추적을 통해 학생들의 집중도를 분석하는 연구용 서비스를 개발하였습니다. 2024년 춘계 산업공학회의 포스터 세션에 등록되기도 하였습니다."
@@ -94,7 +97,7 @@ export default function Contents() {
               </Project.Description>
             </Project>
           </Content>
-
+          {/* 암호화폐 차트 */}
           <Content>
             <Project isAlignReverse={false}>
               <Project.ImageContainer image={cryptoProjectImg} />
@@ -116,9 +119,10 @@ export default function Contents() {
               ></Project.Description>
             </Project>
           </Content>
+          {/* 웹 기반 스터디 인증 SNS */}
           <Content>
             <Project isAlignReverse={true}>
-              <Project.ImageContainer image={cryptoProjectImg} />
+              <Project.ImageContainer image={studyLogProjectImg} />
               <Project.Description
                 projectName="웹 기반 스터디 인증 SNS"
                 projectDescription="웹 서비스 설계 및 실습 수업에서 진행한 SNS 플랫폼 서비스입니다. 스터디 인증을 통해 사용자들이 서로 인증을 공유하고 소통할 수 있는 서비스를 개발하였습니다."
@@ -134,9 +138,10 @@ export default function Contents() {
               ></Project.Description>
             </Project>
           </Content>
+          {/* VSCode Extension */}
           <Content>
             <Project isAlignReverse={false}>
-              <Project.ImageContainer image={cryptoProjectImg} />
+              <Project.ImageContainer image={vscodeExtensionProjectImg} />
               <Project.Description
                 projectName="StudyLog VSCode Extension"
                 projectDescription="개발자의 개발 시간을 측정해주는 VSCode Extension을 개발하였습니다."
@@ -157,24 +162,38 @@ export default function Contents() {
             </Project>
           </Content>
           <Content>
-            <h1 className="text-4xl font-bold text-white">My 7</h1>
-            <p className="text-lg">Welcome to my website!</p>
+            <Project isAlignReverse={false}>
+              <Project.ImageContainer image={vscodeExtensionProjectImg} />
+              <Project.Description
+                projectName="포트폴리오 사이트"
+                projectDescription="제가 개발한 프로젝트들을 소개하는 포트폴리오 사이트입니다. SEO 최적화를 위해 많은 노력을 기울였습니다."
+                techSkills={[
+                  "React",
+                  "Node.js",
+                  "TailwindCSS",
+                  "three.js",
+                  "WebGL",
+                  "MongoDB",
+                ]}
+                animeDirection="RToL"
+              ></Project.Description>
+            </Project>
           </Content>
           <Content>
             <h1 className="text-4xl font-bold text-white">My 8</h1>
-            <p className="text-lg">Welcome to my website!</p>
+            <p className="text-lg">What's next?</p>
           </Content>
           <Content>
             <h1 className="text-4xl font-bold text-white">My 9</h1>
-            <p className="text-lg">Welcome to my website!</p>
+            <p className="text-lg">What's next?</p>
           </Content>
           <Content>
             <h1 className="text-4xl font-bold text-white">My 10</h1>
-            <p className="text-lg">Welcome to my website!</p>
+            <p className="text-lg">What's next?</p>
           </Content>
           <Content>
             <h1 className="text-4xl font-bold text-white">My 11</h1>
-            <p className="text-lg">Welcome to my website!</p>
+            <p className="text-lg">What's next?</p>
           </Content>
           {/* 137.5vh */}
           <Content height="137.5vh" scrollSnapAlign="end">

diff --git a/fe/src/pages/root/components/content/MyProfile.tsx b/fe/src/pages/root/components/content/MyProfile.tsx
@@ -69,6 +69,8 @@ export default function MyProfile() {
             <p className="grid grid-cols-2 ml-4">
               <span>Docker</span>
               <span>AWS</span>
+              <span>Flutter</span>
+              <span>함수형 프로그래밍</span>
             </p>
           </div>
         </div>