From 8fd6f1a2739b686092bbb5806666e63f283d6510 Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Mon, 22 Jan 2024 19:56:50 -0500
Subject: Add Vue.JS for Navbar; Transitions; Getting started on projects

---
 astro.config.mjs            |   3 ++-
 bun.lockb                   | Bin 245041 -> 281545 bytes
 package.json                |   5 ++++-
 src/components/Navbar.astro |  23 -----------------------
 src/components/Navbar.vue   |  30 ++++++++++++++++++++++++++++++
 src/layouts/Default.astro   |  22 +++++++++++++++-------
 src/layouts/Page.astro      |  22 +++++++++++++++++++---
 src/pages/index.astro       |   8 ++++----
 src/pages/projects.astro    |   2 +-
 src/styles/Navbar.css       |   2 +-
 src/styles/index.css        |   5 -----
 tsconfig.json               |   7 +++++--
 12 files changed, 81 insertions(+), 48 deletions(-)
 delete mode 100644 src/components/Navbar.astro
 create mode 100644 src/components/Navbar.vue

diff --git a/astro.config.mjs b/astro.config.mjs
index 86e6192..410bc3e 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,11 +1,12 @@
 import { defineConfig } from 'astro/config';
 import icon from "astro-icon";
 
+import vue from '@astrojs/vue';
 import vercel from "@astrojs/vercel/serverless";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [icon()],
+  integrations: [icon(), vue()],
   output: "server",
   adapter: vercel()
 });
diff --git a/bun.lockb b/bun.lockb
index f9056c6..1c06951 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 93879d9..efa5ac4 100644
--- a/package.json
+++ b/package.json
@@ -11,8 +11,11 @@
   },
   "dependencies": {
     "@astrojs/vercel": "^6.1.3",
+    "@astrojs/vue": "^4.0.8",
     "@iconify-json/fa6-brands": "^1.1.18",
+    "@vitejs/plugin-vue": "^5.0.3",
     "astro": "^4.1.1",
-    "astro-icon": "^1.0.2"
+    "astro-icon": "^1.0.2",
+    "vue": "^3.4.15"
   }
 }
\ No newline at end of file
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
deleted file mode 100644
index bd372e5..0000000
--- a/src/components/Navbar.astro
+++ /dev/null
@@ -1,23 +0,0 @@
----
-import "../styles/Navbar.css"
----
-<nav>
-    <button class="nav-toggle" aria-label="toggle navigation">
-        <span class='hamburger'></span>
-    </button>
-    <ul class="nav-list">
-        <li><a href="/" class="nav-link">Home</a></li>
-        <li><a href="/projects" class="nav-link">Projects</a></li>
-        <li><a href="/downloads" class="nav-link">Downloads</a></li>
-        <li><a href="/blog" class="nav-link">Blog</a></li>
-        <li><a href="/guestbook" class="nav-link">Guestbook</a></li>
-        <li><a href="/contacts" class="nav-link">Contacts</a></li>
-    </ul>
-</nav>
-
-<script>
-    document.querySelector('.nav-toggle').addEventListener('click', function() {
-        this.classList.toggle('active');
-        document.querySelector('.nav-list').classList.toggle('show');
-    });
-</script>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
new file mode 100644
index 0000000..9767cfb
--- /dev/null
+++ b/src/components/Navbar.vue
@@ -0,0 +1,30 @@
+<template>
+  <nav>
+    <button class="nav-toggle" aria-label="toggle navigation" @click="toggleNav">
+      <span class='hamburger'></span>
+    </button>
+    <ul class="nav-list">
+      <li><a href="/" class="nav-link" @click="toggleNav">Home</a></li>
+      <li><a href="/projects" class="nav-link" @click="toggleNav">Projects</a></li>
+      <li><a href="/downloads" class="nav-link" @click="toggleNav">Downloads</a></li>
+      <li><a href="/blog" class="nav-link" @click="toggleNav">Blog</a></li>
+      <li><a href="/guestbook" class="nav-link" @click="toggleNav">Guestbook</a></li>
+      <li><a href="/contacts" class="nav-link" @click="toggleNav">Contacts</a></li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+export default {
+  methods: {
+    toggleNav() {
+      document.querySelector('.nav-toggle').classList.toggle('active');
+      document.querySelector('.nav-list').classList.toggle('show');
+    }
+  }
+}
+</script>
+
+<style scoped>
+@import "../styles/Navbar.css";
+</style>
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
index ecc4e2e..29662c6 100644
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -1,18 +1,19 @@
 ---
 interface Props {
 	title: string;
-	description: string; 
+	description: string;
 }
 
 const { title, description } = Astro.props;
-import { ViewTransitions } from 'astro:transitions';
-import Navbar from '../components/Navbar.astro';
+import { ViewTransitions, slide } from 'astro:transitions';
+import Navbar from '../components/Navbar.vue';
 ---
 
 <!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
+		<meta name="title" content={title} />
 		<meta name="description" content={description} />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -24,11 +25,13 @@ import Navbar from '../components/Navbar.astro';
 		<title>{title}</title>
 	</head>
 	<body>
-	<Navbar />
+	<Navbar client:load />
+	<div transition:animate={slide({ duration: '0.2s' })}>
 		<slot />
-	<footer>
-		<p>Copyright &copy; 2024 Andrew Lee</p>
-	</footer>
+		<footer>
+			<p>Copyright &copy; 2024 Andrew Lee</p>
+		</footer>
+	</div>
 	</body>
 </html>
 <style is:global>
@@ -40,6 +43,11 @@ import Navbar from '../components/Navbar.astro';
 		color: #FFFFFF;
 	}
 
+	ul {
+		padding-left: 20px;
+		font-size: 1.1em;
+	}
+
 	footer {
 		text-align: center;
 		font-size: 1.3em;
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
index b0f202a..9b8dd8f 100644
--- a/src/layouts/Page.astro
+++ b/src/layouts/Page.astro
@@ -3,15 +3,31 @@ import Layout from './Default.astro';
 const { title, description } = Astro.props;
 ---
 
-<Layout title=`${title} | Andrew Lee` description={description}>
+<Layout title=`${title} - Andrew Lee` description={description}>
     <header>
-        <h1>{title}</h1>
-        <h2>{description}</h2>
+        <h1 class="header-text">{title}</h1>
+        <h2 class="header-text">{description}</h2>
     </header>
 </Layout>
 
 <style>
     header {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5em;
+        margin: 0;
+        padding: 0;
         text-align: center;
     }
+
+    .header-text {
+        font-size: 2em;
+        margin: 0;
+    }
+
+    h2.header-text {
+        font-size: 1.5em;
+        font-weight: 300;
+    }
+
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ab4f39b..0918a74 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -12,16 +12,16 @@ import '../styles/index.css';
 			<Image src={Profile} class="avatar" alt="Andrew Lee" height={200} width={200} />
 			<h1 id="title">Hey, I'm Andrew Lee!</h1>
 			<div class="social">
-				<a href="https://linkedin.alee14.me" target="_blank">
+				<a href="https://linkedin.alee14.me" target="_blank" aria-label="LinkedIn">
 					<Icon name="fa6-brands:linkedin" />
 				</a>
-				<a href="https://github.alee14.me" target="_blank">
+				<a href="https://github.alee14.me" target="_blank" aria-label="GitHub">
 					<Icon name="fa6-brands:github" />
 				</a>
-				<a href="https://youtube.alee14.me" target="_blank">
+				<a href="https://youtube.alee14.me" target="_blank" aria-label="YouTube">
 					<Icon name="fa6-brands:youtube" />
 				</a>
-				<a href="https://instagram.alee14.me" target="_blank">
+				<a href="https://instagram.alee14.me" target="_blank" aria-label="Instagram">
 					<Icon name="fa6-brands:instagram" />
 				</a>
 			</div>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index fb61caf..0a12522 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -1,5 +1,5 @@
 ---
 import Page from "../layouts/Page.astro";
 ---
-<Page title="Projects" description="Hello world">
+<Page title="Projects" description="Things that I have been working on in the past, and present">
 </Page>
diff --git a/src/styles/Navbar.css b/src/styles/Navbar.css
index ee4801f..78711d2 100644
--- a/src/styles/Navbar.css
+++ b/src/styles/Navbar.css
@@ -87,4 +87,4 @@ a.nav-link:active {
     .nav-list.show a.nav-link {
         animation: fadeIn 0.5s ease-in-out forwards;
     }
-}
\ No newline at end of file
+}
diff --git a/src/styles/index.css b/src/styles/index.css
index 57dc562..476d461 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -12,11 +12,6 @@
     font-size: 2.3em;
 }
 
-ul {
-    padding-left: 20px;
-    font-size: 1.1em;
-}
-
 p {
     font-size: 1.1em;
 }
diff --git a/tsconfig.json b/tsconfig.json
index d78f81e..5d5dcd6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,6 @@
 {
-  "extends": "astro/tsconfigs/base"
-}
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "jsx": "preserve"
+  }
+}
\ No newline at end of file
-- 
cgit v1.2.3