86 lines
2.1 KiB
Vue
86 lines
2.1 KiB
Vue
<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',
|
|
},
|
|
{
|
|
name: "Game developer",
|
|
color: "bg-blue-200",
|
|
hOffset: 'right-20',
|
|
vOffset: 'top-20',
|
|
},
|
|
{
|
|
name: "Fullstack developer",
|
|
color: "bg-blue-300",
|
|
hOffset: 'left-20',
|
|
vOffset: 'bottom-20',
|
|
},
|
|
{
|
|
name: "Tools programmer",
|
|
color: "bg-blue-400",
|
|
hOffset: 'right-20',
|
|
vOffset: 'bottom-20',
|
|
},
|
|
]
|
|
</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" />
|
|
<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"/>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
* {
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
|