<script setup lang="ts">

const nodes = [
    {
        name: "DevOps engineer",
        color: "bg-blue-100",
        hOffset: 'left-30',
        vOffset: 'top-30',
    },
    {
        name: "Game developer",
        color: "bg-blue-200",
        hOffset: 'right-30',
        vOffset: 'top-30',
    },
    {
        name: "Fullstack developer",
        color: "bg-blue-300",
        hOffset: 'left-30',
        vOffset: 'bottom-30',
        textTop: true
    },
    {
        name: "Tools programmer",
        color: "bg-blue-400",
        hOffset: 'right-30',
        vOffset: 'bottom-30',
        textTop: true
    },
]
</script>

<template>
    <div class="hero bg-base-200 min-h-screen">
        <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
                        :name="node.name"
                        :color="node.color"
                        :class="`${node.hOffset} ${node.vOffset}`"
                        :text-top="node.textTop"/>
                </li>
            </ul>
        </div>
    </div>
</template>

<style>
* {
    overflow: hidden;
}
</style>

