Picture Replaced

src/App.tsx

@@ -1,63 +1,43 @@
-import { useEffect } from 'react';
+import { useEffect } from "react";
 import Top from "@/components/Home/Top";
 import About from "@/components/Home/About";
 import Timeline from "@/components/Home/Timeline";
-import Contact from '@/components/Home/Contact';
-import Project from '@/components/Home/Project';
+import Contact from "@/components/Home/Contact";
+import Project from "@/components/Home/Project";
 
-import './index.css';
+import "./index.css";
 
 export function App() {
     useEffect(() => {
-        // 초기 로드 시 hash에 맞게 스크롤
-        const scrollToHash = () => {
-            const hash = window.location.hash.substring(1);
-            if (hash) {
-                const element = document.getElementById(hash);
-                if (element) {
-                    setTimeout(() => {
-                        element.scrollIntoView({ behavior: "smooth" });
-                    }, 100); // 브라우저가 레이아웃을 그릴 시간을 줌
-                }
+        // img 위에서 스크롤 방지
+        const handleWheel = (event) => {
+            if (event.target.tagName.toLowerCase() === "img") {
+                event.preventDefault();
             }
         };
-        scrollToHash();
 
-        // 스크롤 시 hash 업데이트 로직
-        const sections = document.querySelectorAll(".section");
-        const observer = new IntersectionObserver(
-            (entries) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        window.history.replaceState(null, "", `#${entry.target.id}`);
-                    }
-                });
-            },
-            { threshold: 0.6 } // 60% 보이면 활성화
-        );
-
-        sections.forEach(section => observer.observe(section));
+        document.addEventListener("wheel", handleWheel, { passive: false });
 
         return () => {
-            sections.forEach(section => observer.unobserve(section));
+            document.removeEventListener("wheel", handleWheel);
         };
     }, []);
 
     return (
         <div id="fullpage" className="bg-background text-foreground w-full">
-            <div id="top" className="bg-background text-foreground w-full h-screen flex items-center justify-center section">
+            <div id="top" className="section">
                 <Top />
             </div>
-            <div id="about" className="bg-background text-foreground w-full h-screen flex items-center justify-center section">
+            <div id="about" className="section">
                 <About />
             </div>
-            <div id="project" className="bg-background text-foreground w-full h-screen flex items-center justify-center section">
+            <div id="project" className="section">
                 <Project />
             </div>
-            <div id="timeline" className="bg-background text-foreground w-full h-screen flex items-center justify-center section">
+            <div id="timeline" className="section">
                 <Timeline />
             </div>
-            <div id="contact" className="bg-background text-foreground w-full h-screen flex items-center justify-center section">
+            <div id="contact" className="section">
                 <Contact />
             </div>
         </div>

src/components/Home/Top.tsx

@@ -1,13 +1,30 @@
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-  } from "@/components/ui/tooltip";
+import { useState } from "react";
 import "../../index.css";
-import Image from "../../profile.avif";
-  
+
 export default function Top() {
+  const [mousePos, setMousePos] = useState({ x: 50, y: 50 });
+  const [scale, setScale] = useState(1.15);
+  const [isHovering, setIsHovering] = useState(false);
+
+  const handleMouseMove = (e) => {
+    const { left, top, width, height } = e.currentTarget.getBoundingClientRect();
+    const x = ((e.clientX - left) / width) * 100;
+    const y = ((e.clientY - top) / height) * 100;
+    
+    setMousePos((prev) => ({
+      x: prev.x + (x - prev.x) * 0.1,
+      y: prev.y + (y - prev.y) * 0.1,
+    }));
+  };
+
+  const handleWheel = (e) => {
+    e.preventDefault();
+    setScale((prev) => {
+      const newScale = prev + e.deltaY * -0.0025;
+      return Math.min(Math.max(newScale, 1), 3);
+    });
+  };
+
   return (
     <div className="bg-background text-foreground w-full h-screen flex items-center justify-center">
       <div className="flex flex-col md:flex-row w-full md:w-[50%] h-full py-16 md:py-32">
@@ -24,28 +41,23 @@ export default function Top() {
             </p>
           </div>
         </div>
-        <TooltipProvider delayDuration={0}>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div className="md:w-[55%] select-none avatar-background w-full h-full flex justify-center md:justify-end items-end rounded-3xl mb-8 md:mb-0">
-                <div className="w-full h-full flex justify-center md:justify-end items-end avatar-background-blur">
-                  <img
-                    src={Image}
-                    className="w-[60%] max-w-[360px] select-none"
-                    title="Special Thanks to @dob2_"
-                  />
-                </div>
-              </div>
-            </TooltipTrigger>
-            <TooltipContent
-              align="end"
-              side="bottom"
-              className="px-2 py-1 text-xs"
-            >
-              Special Thanks to @dob2_
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        <div 
+          className="md:w-[55%] select-none p-5 md:p-0 w-full h-full flex justify-center md:justify-end items-end rounded-3xl mb-8 md:mb-0 overflow-hidden"
+          onMouseMove={handleMouseMove}
+          onMouseEnter={() => setIsHovering(true)}
+          onMouseLeave={() => setIsHovering(false)}
+          onWheel={handleWheel}
+        >
+          <img
+            src="https://f.imnya.ng/profile/b.avif"
+            alt="Me"
+            className="w-full h-full object-cover rounded-3xl transition-transform duration-500 ease-out"
+            style={{
+              transform: `scale(${isHovering ? scale : 1})`,
+              transformOrigin: `${mousePos.x}% ${mousePos.y}%`,
+            }}
+          />
+        </div>
       </div>
     </div>
   );

src/index.css

@@ -13,22 +13,3 @@
   justify-content: center;
   align-items: center;
 }
-
-.avatar-background {
-  background: none;
-}
-
-@media (min-width: 768px) {
-  .avatar-background {
-      position: relative;
-      overflow: hidden;
-      background-image: url("https://f.imnya.ng/profile/banner.CjixG8N2_15mivN.webp");
-      background-size: cover;
-      background-position: 400px center;
-      background-repeat: no-repeat;
-      background-attachment: fixed;
-  }
-  .avatar-background-blur {
-      backdrop-filter: blur(5px);
-  }
-}