transitions and buttons

app/components/ButtonLink.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const { to, text, icon = undefined, color = undefined } = defineProps<{
+    to: string,
+    text: string,
+    icon?: string
+    color?: string
+}>()
+
+const buttonClass = ref(`btn btn-outline ${color ? color : "btn-primary"}`)
+</script>
+
+<template>
+    <button :class="buttonClass">
+        <NuxtLink :to="to" class=" flex flex-row items-center justify-center gap-2">
+            <Icon v-if="icon" :name="icon" class="w-6 h-6" />
+            {{ text }}
+        </NuxtLink>
+    </button>
+</template>
+
+<style scoped>
+
+</style>

app/components/GraphNode.vue

@@ -4,6 +4,7 @@ import {motion, frame} from "motion-v";
 const {
     name,
     img = undefined,
+    link = '/',
     color = 'bg-white',
     textTop = false,
     moveFactor = undefined,
@@ -12,8 +13,10 @@ const {
     initialHeight = undefined,
     topTextOffset = undefined,
     bottomTextOffset = undefined,
+    textSize = undefined,
 } = defineProps<{
     name: string,
+    link?: string,
     img?: string,
     color?: string,
     textTop?: boolean,
@@ -23,6 +26,7 @@ const {
     initialHeight?: string,
     topTextOffset?: string,
     bottomTextOffset?: string,
+    textSize?: string,
 }>()
 
 const emit = defineEmits(['positionChanged'])
@@ -31,8 +35,8 @@ const isHoveringParent = ref(false)
 
 const imageMaskClass = `avatar mask mask-squircle ${initialWidth ? initialWidth : 'w-30'} ${initialHeight ? initialHeight : 'h-30'}`
 const roundedDivClass = `rounded-full absolute ${color} ${initialWidth ? initialWidth : 'w-30'} ${initialHeight ? initialHeight : 'h-30'}`
-const topTextClass = `absolute w-full text-center ${topTextOffset ? topTextOffset : '-top-30'}`
-const bottomTextClass = `absolute w-full text-center ${bottomTextOffset ? bottomTextOffset : '-bottom-30'}`
+const topTextClass = `absolute w-full text-center ${textSize ? textSize : 'text-2xl'} ${topTextOffset ? topTextOffset : '-top-30'}`
+const bottomTextClass = `absolute w-full text-center ${textSize ? textSize : 'text-2xl'} ${bottomTextOffset ? bottomTextOffset : '-bottom-30'}`
 
 function getRandomArbitrary(min: number, max: number): number {
     return Math.random() * (max - min) + min;
@@ -88,14 +92,18 @@ onUnmounted(() => {
             :while-hover="{ scale: scaleFactor }"
             @hover-start="event => {isHoveringParent=true}"
             @hover-end="event => {isHoveringParent=false}">
-            <NuxtImg :src="img"/>
+            <NuxtLink :to="link">
+                <NuxtImg :src="img"/>
+            </NuxtLink>
         </motion.div>
         <motion.div
             v-else
             :class="roundedDivClass"
             :while-hover="{ scale: scaleFactor }"
             @hover-start="event => {isHoveringParent=true}"
-            @hover-end="event => {isHoveringParent=false}"/>
+            @hover-end="event => {isHoveringParent=false}">
+            <NuxtLink :to="link"/>
+        </motion.div>
 
         <AnimatePresence>
             <motion.p

app/components/GraphView.vue

@@ -2,16 +2,18 @@
 
 const nodes = [
     {
-        name: "Hi, I'm Alex",
+        name: "👋 Hi, I'm Alex",
         img: "/face.jpg",
+        link: "/who-am-i",
         textTop: true,
         moveFactor: 6,
         initialWidth: 'w-50',
         initialHeight: 'h-50',
         scaleFactor: 2,
         hOffset: 'left-1/3',
-        vOffset: 'top-1/3',
+        vOffset: 'top-1/4',
         topTextOffset: '-top-50',
+        textSize: 'text-3xl'
     },
     {
         name: "DevOps engineer",
@@ -77,7 +79,7 @@ useRafFn(() => {
 </script>
 
 <template>
-    <div class="hero bg-base-200 min-h-screen">
+    <div class="hero min-h-screen">
         <div class="overflow-hidden">
             <ul v-for="(line, index) in linesLocations" :key="index">
                 <li>
@@ -86,7 +88,7 @@ useRafFn(() => {
                             :x1="line.x1"
                             :y1="line.y1"
                             :x2="line.x2"
-                            :y2="line.y2" stroke="white"/>
+                            :y2="line.y2" stroke=" color-mix(in oklab, var(--color-primary-content)50%, transparent)"/>
                     </svg>
                 </li>
             </ul>
@@ -95,6 +97,7 @@ useRafFn(() => {
                 <li>
                     <GraphNode
                         :name="node.name"
+                        :link="node.link"
                         :img="node.img"
                         :color="node.color"
                         :class="`${node.hOffset ? node.hOffset : ''} ${node.vOffset ? node.vOffset : ''}`"
@@ -105,6 +108,7 @@ useRafFn(() => {
                         :initial-height="node.initialHeight"
                         :top-text-offset="node.topTextOffset"
                         :bottom-text-offset="node.bottomTextOffset"
+                        :text-size="node.textSize"
                         @position-changed="(x, y) => { nodeMoved(index, x, y) }"/>
                 </li>
             </ul>