Add Vue.JS for Navbar; Transitions; Getting started on projects

author: Andrew Lee <alee14498@protonmail.com> 2024-01-22 19:56:50 -0500
committer: Andrew Lee <alee14498@protonmail.com> 2024-01-22 20:53:41 -0500
commit: 8fd6f1a2739b686092bbb5806666e63f283d6510 (patch)
tree: e378cd080f8f6882e0282e9db6a6b0c48030049b /src
parent: 7604592b7a68fee231b63ff5123837e3eb1beaf8 (diff)
download: personal-website-8fd6f1a2739b686092bbb5806666e63f283d6510.tar.gz
personal-website-8fd6f1a2739b686092bbb5806666e63f283d6510.tar.bz2
personal-website-8fd6f1a2739b686092bbb5806666e63f283d6510.zip
8 files changed, 70 insertions, 44 deletions
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;
 }
author	Andrew Lee <alee14498@protonmail.com>	2024-01-22 19:56:50 -0500
committer	Andrew Lee <alee14498@protonmail.com>	2024-01-22 20:53:41 -0500
commit	8fd6f1a2739b686092bbb5806666e63f283d6510 (patch)
tree	e378cd080f8f6882e0282e9db6a6b0c48030049b /src
parent	7604592b7a68fee231b63ff5123837e3eb1beaf8 (diff)
download	personal-website-8fd6f1a2739b686092bbb5806666e63f283d6510.tar.gz personal-website-8fd6f1a2739b686092bbb5806666e63f283d6510.tar.bz2 personal-website-8fd6f1a2739b686092bbb5806666e63f283d6510.zip