transitions and buttons

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>