Initial commit

Copy of another TODO website

src/components/Header.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+    defineProps({
+        links: {
+            type: Array<[string, string]>,
+            required: true
+        }
+    })
+</script>
+
+<template>
+    <nav class="head_div">
+        <ul>
+            <a v-for="link in links" :href="link[1]"><li ><p>{{ link[0] }}</p></li></a>
+        </ul>
+    </nav>
+</template>
+
+<style scoped>
+
+    .head_div{
+        min-height: 5vh;
+        max-height: 20vh;
+        margin: 0;
+        width: 100vw;
+        /*background-color: #022B3A;*/
+    }
+
+    ul{
+        display: flex;
+        flex-flow: row;
+        flex-direction: row;
+        justify-content: flex-start;
+    }
+
+    a{
+        list-style: none;
+        padding: 10px;
+        margin: 15px;
+        border-radius: 8px;
+        width: fit-content;
+        font-size: 1.4em;
+        text-decoration: none;
+    }
+
+    a:visited {
+        color: inherit;
+    }
+
+    a:hover{
+        background-color: rgb(53, 53, 53);
+    }
+
+</style>

src/components/Home/TypewriterWelcome.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <div class="typewriter_welcome">
+
+        <div class="typewriter">
+            <h1>Were projects are built</h1>
+        </div>
+
+        <div class="picture">
+            <img src="https://picsum.photos/900/600"/>
+        </div>
+
+    </div>
+</template>
+
+<style scoped>
+    .typewriter_welcome{
+        width: 100%;
+        border: 2px green dotted;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .typewriter{
+        border: 2px yellow dotted;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .typewriter h1{
+    }
+
+    .picture{
+        border: 2px greenyellow dotted;
+    }
+</style>