diff options
| 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 | |
| parent | 7604592b7a68fee231b63ff5123837e3eb1beaf8 (diff) | |
| download | personal-website-8fd6f1a2739b686092bbb5806666e63f283d6510.tar.gz personal-website-8fd6f1a2739b686092bbb5806666e63f283d6510.tar.bz2 personal-website-8fd6f1a2739b686092bbb5806666e63f283d6510.zip | |
Add Vue.JS for Navbar; Transitions; Getting started on projects
| -rw-r--r-- | astro.config.mjs | 3 | ||||
| -rwxr-xr-x | bun.lockb | bin | 245041 -> 281545 bytes | |||
| -rw-r--r-- | package.json | 5 | ||||
| -rw-r--r-- | src/components/Navbar.astro | 23 | ||||
| -rw-r--r-- | src/components/Navbar.vue | 30 | ||||
| -rw-r--r-- | src/layouts/Default.astro | 22 | ||||
| -rw-r--r-- | src/layouts/Page.astro | 22 | ||||
| -rw-r--r-- | src/pages/index.astro | 8 | ||||
| -rw-r--r-- | src/pages/projects.astro | 2 | ||||
| -rw-r--r-- | src/styles/Navbar.css | 2 | ||||
| -rw-r--r-- | src/styles/index.css | 5 | ||||
| -rw-r--r-- | tsconfig.json | 7 |
12 files changed, 81 insertions, 48 deletions
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() }); Binary files differdiff --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 © 2024 Andrew Lee</p> - </footer> + <footer> + <p>Copyright © 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 |