57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
<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>
|
|
|