update

v3/src/App.vue

@@ -0,0 +1,24 @@
+<template>
+	<Header />
+	<router-view />
+</template>
+
+<script>
+	import Header from '@/components/Header.vue'
+	export default {
+		components: {
+			Header,
+		},
+	}
+</script>
+
+<style>
+	* {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+	}
+	body {
+		font-family: 'Open Sans', sans-serif;
+	}
+</style>

v3/src/assets/scss/variables.scss

@@ -0,0 +1,7 @@
+$shadow-1: 0 0 4px rgba(0, 0, 0, 0.2);
+$shadow-2: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+$shadow-3: 7px 5px 17px -5px rgba(0, 0, 0, 0.78);
+$shadow-4: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+$shadow-5: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
+
+$heading-1: 1.5rem;

v3/src/components/Header.vue

@@ -0,0 +1,44 @@
+<template>
+	<header>
+		<div class="left">
+			<a href="#">Home</a>
+			<a href="#">About</a>
+			<a href="#">Projects</a>
+		</div>
+		<div class="right">
+			<a href="#">Contact</a>
+		</div>
+	</header>
+</template>
+
+<script>
+	export default {}
+</script>
+
+<style lang="scss" scoped>
+	@import '@/assets/scss/variables.scss';
+	header {
+		display: flex;
+		justify-content: space-between;
+		box-shadow: $shadow-2;
+		// background: red;
+
+		a {
+			color: black;
+			text-decoration: none;
+			font-size: 1.5rem;
+			margin: 0.5rem;
+		}
+
+		a:hover {
+			text-decoration: underline;
+		}
+
+		.left {
+			margin: 0.5rem 0 0.5rem 1rem;
+		}
+		.right {
+			margin: 0.5rem 1rem 0.5rem 0;
+		}
+	}
+</style>

v3/src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+createApp(App).use(router).mount('#app')

v3/src/router/index.js

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '@/views/Home.vue'
+import About from '@/views/About.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'About',
+    component: About
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+})
+
+export default router

v3/src/views/About.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

v3/src/views/Home.vue

@@ -0,0 +1,8 @@
+<template> </template>
+
+<script>
+	export default {
+		name: 'Home',
+		components: {},
+	}
+</script>