Remake

package.json

@@ -23,6 +23,7 @@
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-use": "^17.4.0",
     "tailwindcss": "3.3.1",
     "typescript": "5.0.4"
   },

src/components/@common/MoveText.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useRef } from "react";
+
+export default function MoveText({
+  text,
+  move,
+}: {
+  text: string;
+  move: number;
+}) {
+  const textRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const textElement = textRef.current;
+    let containerTop = 0;
+
+    const handleScroll = () => {
+      if (!textElement) return;
+      const scrollPos = window.pageYOffset;
+      const windowHeight = window.innerHeight;
+      const textOffset = textElement.offsetTop - containerTop;
+
+      // 위아래 움직임
+      const distance = scrollPos - textOffset + windowHeight / 2;
+
+      // 크기 조정
+      const scale = 0.9 + Math.abs(distance) / (windowHeight * 0.5);
+
+      if (textElement) {
+        if (move === 0) {
+          textElement.style.transform = `translateY(${distance}px)`;
+        } else if (scale < 2.6) {
+          textElement.style.transform = ` translateY(${distance}px) scale(${scale})`;
+        }
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [move]);
+
+  return (
+    <div
+      ref={textRef}
+      className="absolute  transition-transform duration-[150ms] mt-20 text-9xl text-black/10 md:text-9xl xl:text-9xl font-black tracking-tight "
+    >
+      {text}
+    </div>
+  );
+}

src/components/@common/header/Header.tsx

@@ -7,7 +7,7 @@ export default function Header() {
   return (
     <>
       <header className="text-gray-600 body-font">
-        <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
+        <div className="container mx-auto flex flex-wrap p-2 flex-col md:flex-row items-center">
           <Link href="/" legacyBehavior>
             <div className="flex items-center mb-4 md:mb-0 cursor-pointer">
               <Image

src/components/@common/header/NavBar.tsx

@@ -5,8 +5,8 @@ export default function NavBar() {
   const router = useRouter();
   return (
     <nav className="my-5">
-      <Link href="/about" legacyBehavior>
-        <div className={router.pathname === "/about" ? "active" : ""}>
+      <Link href="/" legacyBehavior>
+        <div className={router.pathname === "/" ? "active" : ""}>
           ABOUT
         </div>
       </Link>

src/components/index/Career.tsx

@@ -0,0 +1,57 @@
+export default function Career() {
+  return (
+    <>
+      <div className="py-6 sm:py-0 bg-black  bg-opacity-100 -mt-20 relative z-50">
+        <div className="mx-auto max-w-screen-xl px-4 md:px-44">
+          <div className="grid gap-8 sm:grid-cols-2 sm:gap-12">
+            <div className="flex flex-col items-center justify-center sm:items-start md:py-6 lg:py-12 xl:py-24">
+              <p className="mb-4 text-sm font-semibold uppercase text-indigo-500 md:text-base">
+                🖥 Career
+              </p>
+              <h1 className="mb-2 text-center text-2xl font-bold text-white sm:text-left md:text-3xl">
+                (주)케이브레인컴퍼니
+              </h1>
+
+              <p className="mb-4 text-center text-white sm:text-left md:text-lg">
+                2022.09.01 ~ 2022.12.31 / 인턴
+                <ul>
+                  <li className="mt-5 mb-1">1. 웹 퍼블리싱 업무</li>
+                  <ul>
+                    <li>- 고객사 요청 팝업 퍼블리싱</li>
+                    <li>- 벤치마킹 자료 탐색 및 분류</li>
+                  </ul>
+                  <li className="mt-5 mb-1">
+                    2. 자사 에디터 웹 사이트 오류 수정 ( JavaScript )
+                    <ul>
+                      <li>- 오류 확인 및 오류 시트 정리</li>
+                      <li>
+                        - 이미지 에디터, 모션, 표, 라인, 폰트 등 오류 수정
+                      </li>
+                    </ul>
+                  </li>
+                  <li className="mt-5 mb-1">
+                    3. 자사 에디터 웹 사이트 기능 추가 ( JavaScript, PHP )
+                    <ul>
+                      <li>- 드래그 앤 드랍 기능 추가</li>
+                      <li>- 사용자 폰트 추가</li>
+                      <li>- 나의 컬러 radio 버튼 추가</li>
+                      <li>- gif 업로드 기능 추가</li>
+                    </ul>
+                  </li>
+                </ul>
+              </p>
+            </div>
+            <div className="flex flex-col items-center justify-center sm:items-start md:py-6 lg:py-12 xl:py-24">
+              <div className=" relative  xl:ml-40 md:ml-15 sm:ml-4 w-80 h-80 bg-[#9e76ca] overflow-hidden rounded-lg  ">
+                <img
+                  src="/study.png"
+                  className="w-[13rem] absolute bottom-4 left-14"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/about/DevelopmentExperiences.tsx → src/components/index/DevelopmentExperiences.tsx

@@ -1,9 +1,14 @@
+import MoveText from "../@common/MoveText";
+
 export default function DevelopmentExperiences() {
   return (
     <>
       <section className="text-gray-600 body-font">
+        <div className="flex justify-center items-center text-white">
+          {/* <MoveText text="Excellent" move={0} /> */}
+        </div>
         <div className="container px-5 py-24 mx-auto">
-        <h1 className="text-3xl font-medium title-font text-gray-900 mb-12 text-center border-b-2 border-gray-100 pb-5">
+          <h1 className="text-3xl font-medium title-font text-gray-900 mb-12 text-center border-b-2 border-gray-100 pb-5">
             👩‍💻 Development Experiences
           </h1>
           <div className="flex flex-wrap -m-4">

src/components/index/Education.tsx

@@ -0,0 +1,85 @@
+import MoveText from "../@common/MoveText";
+import { useEffect, useState } from "react";
+
+const images = ["/computer.png", "/brain3.png", "/book.png"];
+
+const colors = ["#0EE896", "#DE4578", "#f49c0d", "#9AEB3D"];
+
+export default function Education() {
+  const [currentImage, setCurrentImage] = useState(images[0]);
+  const [circleColor, setCircleColor] = useState(colors[0]);
+
+  console.log(currentImage);
+  console.log(circleColor);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      // 현재 이미지 인덱스 계산
+      const currentIndex = images.indexOf(currentImage);
+      const nextIndex = (currentIndex + 1) % images.length;
+
+      // 다음 이미지로 변경
+      setCurrentImage(images[nextIndex]);
+      setCircleColor(colors[nextIndex]);
+    }, 3000);
+    return () => clearInterval(interval); // 컴포넌트 언마운트 시 인터벌 제거
+  }, [currentImage]);
+
+  return (
+    <>
+      <div className="flex justify-center items-center text-white">
+        <MoveText text="Excellent" move={1} />
+      </div>
+      <div className="bg-white py-6 sm:py-0 bg-[url('/universityImg.jpg')] bg-no-repeat bg-cover bg-opacity-100 -mt-20 ">
+        <div className="mx-auto max-w-screen-xl px-4 md:px-8">
+          <div className="grid gap-8 sm:grid-cols-2 sm:gap-12 pt-20 pb-20">
+            <div className="flex flex-col items-center justify-center sm:items-start md:py-6 lg:py-12 xl:py-24">
+              <div
+                className={`relative  xl:ml-40 md:ml-15 sm:ml-4 w-80 h-80 rounded-full bg-[${circleColor}]`}
+              >
+                <img
+                  src={currentImage}
+                  alt="education"
+                  className="w-[20rem] absolute -bottom-5 left-0 "
+                />
+              </div>
+            </div>
+
+            <div className="flex flex-col items-center justify-center sm:items-start md:py-6 lg:py-12 xl:py-24">
+              <p className="mb-3 text-sm uppercase text-indigo-500 md:text-base font-black">
+                👩‍🎓 Education
+              </p>
+              <h1 className="mb-2 text-center text-2xl font-black text-gray-800 sm:text-left md:text-3xl">
+                성신여자대학교
+              </h1>
+
+              <p className="mb-4 text-center text-gray-500 sm:text-left md:text-lg">
+                2019.03 ~ 2023.08.(졸업예정)
+                <ul>
+                  <li>- 심리학 전공</li>
+                  <li>- 컴퓨터공학 복수전공</li>
+                </ul>
+              </p>
+              <p className="mt-4 mb-1 text-sm font-semibold uppercase text-pink-400 md:text-base">
+                Scholarship
+              </p>
+
+              <p className="mb-4 text-center text-gray-500 sm:text-left md:text-lg">
+                <ul>
+                  <li>2019~2023 입학성적우수자 전액장학금</li>
+                  <li>2021-2 성신장학금(학업성적우수)</li>
+                </ul>
+              </p>
+              <p className="mt-4 mb-1 text-sm font-semibold uppercase text-pink-400 md:text-base">
+                CREDIT
+              </p>
+
+              <p className="mb-4 text-center text-gray-500 sm:text-left md:text-lg">
+                4.16 / 4.5
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}