graph babay

app/components/GraphView.vue

@@ -1,76 +1,47 @@
 <script setup lang="ts">
-import {frame} from "motion-v";
-import GraphNode from "~/components/GraphNode.vue";
-
-
-const spring = {damping: 5, stiffness: 50, restDelta: 0.001}
-
-const elementRef = useTemplateRef('elementRef')
-const xPoint = useMotionValue(0)
-const yPoint = useMotionValue(0)
-const x = useSpring(xPoint, spring)
-const y = useSpring(yPoint, spring)
-
-const handlePointerMove = ({clientX, clientY}: { clientX: number; clientY: number }) => {
-    const element = elementRef.value?.$el
-    if (!element) return
-
-    frame.read(() => {
-        xPoint.set((clientX - element.offsetLeft - element.offsetWidth / 2) / 10)
-        yPoint.set((clientY - element.offsetTop - element.offsetHeight / 2) / 10)
-    })
-}
-
-onMounted(() => {
-    window.addEventListener("pointermove", handlePointerMove)
-})
-
-onUnmounted(() => {
-    window.removeEventListener("pointermove", handlePointerMove)
-})
-
 
 const nodes = [
     {
         name: "DevOps engineer",
         color: "bg-blue-100",
-        hOffset: 'left-20',
-        vOffset: 'top-20',
+        hOffset: 'left-30',
+        vOffset: 'top-30',
     },
     {
         name: "Game developer",
         color: "bg-blue-200",
-        hOffset: 'right-20',
-        vOffset: 'top-20',
+        hOffset: 'right-30',
+        vOffset: 'top-30',
     },
     {
         name: "Fullstack developer",
         color: "bg-blue-300",
-        hOffset: 'left-20',
-        vOffset: 'bottom-20',
+        hOffset: 'left-30',
+        vOffset: 'bottom-30',
+        textTop: true
     },
     {
         name: "Tools programmer",
         color: "bg-blue-400",
-        hOffset: 'right-20',
-        vOffset: 'bottom-20',
+        hOffset: 'right-30',
+        vOffset: 'bottom-30',
+        textTop: true
     },
 ]
 </script>
 
 <template>
     <div class="hero bg-base-200 min-h-screen">
-        <div class="hero-content overflow-hidden bg-">
-            <GraphNode ref="elementRef" :x="x" :y="y" img="/face.jpg" name="Hi, I'm Alex" />
+        <div class="overflow-hidden">
+            <GraphNode img="/face.jpg" name="Hi, I'm Alex" :text-top="true" :move-factor="6"/>
+
             <ul v-for="(node, index) in nodes" :key="index">
                 <li>
                     <GraphNode
-                        :x="x"
-                        :y="y"
                         :name="node.name"
                         :color="node.color"
-                        :hOffset="node.hOffset"
-                        :vOffset="node.vOffset"/>
+                        :class="`${node.hOffset} ${node.vOffset}`"
+                        :text-top="node.textTop"/>
                 </li>
             </ul>
         </div>