Merge pull request #20 from JongMany/feature/main

feature: 스크롤 애니메이션 구현

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>

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>
+  );
+}

fe/src/pages/root/components/content/Project.tsx

@@ -13,16 +13,15 @@ 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"
       ref={containerRef}
       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;

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);