From 1802d049a93de8e7095328d16d775ee2aeaaa2cd Mon Sep 17 00:00:00 2001
From: JongMany <blackberry1114@naver.com>
Date: Tue, 9 Jul 2024 16:47:24 +0900
Subject: [PATCH] =?UTF-8?q?feature:=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe/src/pages/root/components/Contents.tsx     | 12 +++--
 .../root/components/content/MyProfile.tsx     | 23 ++++++++
 .../pages/root/components/content/Project.tsx | 53 ++++++++++++++-----
 fe/src/webGl/StarScene.ts                     |  4 +-
 4 files changed, 72 insertions(+), 20 deletions(-)
 create mode 100644 fe/src/pages/root/components/content/MyProfile.tsx

diff --git a/fe/src/pages/root/components/Contents.tsx b/fe/src/pages/root/components/Contents.tsx
index af86215..ff46272 100644
--- a/fe/src/pages/root/components/Contents.tsx
+++ b/fe/src/pages/root/components/Contents.tsx
@@ -7,6 +7,7 @@ import { useScrollAnimation } from "@/pages/root/hooks/useScrollAnimation";
 import { useMotionValueEvent, useScroll } from "framer-motion";
 import { useRef } from "react";
 import starPng from "@/assets/star.png";
+import MyProfile from "@/pages/root/components/content/MyProfile";
 
 export default function Contents() {
   const ref = useRef<HTMLDivElement>(null);
@@ -38,9 +39,14 @@ export default function Contents() {
           <div className="fixed top-0 left-0 w-full overflow-y-auto -z-10">
             <div className="h-[100vh]" ref={containerRef}></div>
           </div>
+          {/* 홈 */}
           <Content height="137.5vh">
             <Home />
           </Content>
+          {/* 프로필 */}
+          <Content>
+            <MyProfile />
+          </Content>
 
           <Content>
             <Project isAlignReverse={false}>
@@ -49,6 +55,7 @@ export default function Contents() {
                 projectName="Project 1"
                 projectDescription="This is project 1"
                 techSkills={["React", "TypeScript", "Tailwind CSS"]}
+                animeDirection="LToR"
               />
             </Project>
           </Content>
@@ -60,14 +67,11 @@ export default function Contents() {
                 projectName="Project 1"
                 projectDescription="This is project 1"
                 techSkills={["React", "TypeScript", "Tailwind CSS"]}
+                animeDirection="RToL"
               />
             </Project>
           </Content>
 
-          <Content>
-            <h1 className="text-4xl font-bold text-white">My 3</h1>
-            <p className="text-lg">Welcome to my website!</p>
-          </Content>
           <Content>
             <h1 className="text-4xl font-bold text-white">My 4</h1>
             <p className="text-lg">Welcome to my website!</p>
diff --git a/fe/src/pages/root/components/content/MyProfile.tsx b/fe/src/pages/root/components/content/MyProfile.tsx
new file mode 100644
index 0000000..9cdb346
--- /dev/null
+++ b/fe/src/pages/root/components/content/MyProfile.tsx
@@ -0,0 +1,23 @@
+import { useInView } from "framer-motion";
+import React, { useRef } from "react";
+
+export default function MyProfile() {
+  const ref = useRef<HTMLDivElement>(null);
+  const isInView = useInView(ref, { margin: "10px" });
+
+  return (
+    <article
+      ref={ref}
+      style={{
+        transform: isInView ? "none" : `translateY(${isInView ? 0 : 200}px)`,
+        opacity: isInView ? 1 : 0,
+        transition: `all 0.5s cubic-bezier(0.17, 0.55, 0.55, 1) 0.5s`,
+      }}
+    >
+      <div></div>
+      <div>
+        <h1>안녕하세요</h1>
+      </div>
+    </article>
+  );
+}
diff --git a/fe/src/pages/root/components/content/Project.tsx b/fe/src/pages/root/components/content/Project.tsx
index 959cd2c..444da64 100644
--- a/fe/src/pages/root/components/content/Project.tsx
+++ b/fe/src/pages/root/components/content/Project.tsx
@@ -13,8 +13,6 @@ export default function Project({
   const containerRef = useRef<HTMLElement>(null);
   const isInView = useInView(containerRef, {});
 
-  console.log(isInView);
-
   return (
     <motion.article
       className="flex h-[70vh] items-center justify-center"
@@ -22,7 +20,8 @@ export default function Project({
       style={{
         transform: isInView ? "none" : "translateX(-200px)",
         opacity: isInView ? 1 : 0,
-        transition: "all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) 0.5s",
+        transition: "all 0.5s cubic-bezier(0.17, 0.55, 0.55, 1) 1s",
+        // transitionDelay: "0.5s",
       }}
     >
       <div
@@ -36,7 +35,7 @@ export default function Project({
   );
 }
 
-Project.ImageContainer = ({
+const ImageContainer = ({
   image,
   alt = "project",
 }: {
@@ -50,28 +49,54 @@ Project.ImageContainer = ({
   );
 };
 
-Project.Description = ({
+const Description = ({
   projectName,
   projectDescription,
   techSkills,
+  animeDirection,
 }: {
   projectName: string;
   projectDescription: string;
   techSkills: string[];
+  animeDirection: "LToR" | "RToL";
 }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const isInView = useInView(containerRef, {});
+
   return (
-    <div className="flex flex-col items-start justify-center flex-1">
-      <h1 className="text-4xl font-semibold">{projectName}</h1>
-      <p>{projectDescription}</p>
-      <p>사용한 기술 스택</p>
-      <ul>
-        {techSkills.map((skill) => (
-          <li key={skill}>{skill}</li>
-        ))}
-      </ul>
+    <div
+      className="flex flex-col items-start justify-center basis-[60%] backdrop-blur-sm px-4 py-2"
+      ref={containerRef}
+    >
+      <h1 className="mb-4 text-4xl font-semibold">{projectName}</h1>
+      <p className="mb-4 text-xl">{projectDescription}</p>
+      <div className="mb-4">
+        <p className="mb-2">사용한 기술 스택</p>
+        <ul>
+          {techSkills.map((skill, idx) => (
+            <li
+              key={skill}
+              style={{
+                transform: isInView
+                  ? "none"
+                  : `translateX(${
+                      animeDirection === "LToR" ? "-300px" : "300px"
+                    })`,
+                opacity: isInView ? 1 : 0,
+                transition: `all 0.5s cubic-bezier(0.17, 0.55, 0.55, 1) `,
+                transitionDelay: `${idx * 0.4 + 1.2}s`,
+              }}
+            >
+              {skill}
+            </li>
+          ))}
+        </ul>
+      </div>
       <p>
         <Link to="/project">더 자세히 보기</Link>
       </p>
     </div>
   );
 };
+Project.ImageContainer = ImageContainer;
+Project.Description = Description;
diff --git a/fe/src/webGl/StarScene.ts b/fe/src/webGl/StarScene.ts
index 00951ab..3ae94de 100644
--- a/fe/src/webGl/StarScene.ts
+++ b/fe/src/webGl/StarScene.ts
@@ -146,13 +146,13 @@ export class StarScene {
     const vertices = new Float32Array(particlesCount);
 
     for (let i = 0; i < particlesCount; i++) {
-      vertices[i] = (Math.random() - 0.5) * 1000;
+      vertices[i] = (Math.random() - 0.5) * 2000;
     }
 
     const starField = new Star();
     this.scene.add(starField.star);
 
-    const stars = new Star(vertices, count, "blue");
+    const stars = new Star(vertices, count, "purple");
 
     this.backgroundStars.push(stars, starField);