me
/
ethanreece.com
Archived
1
0
Fork 0
Code Pull Requests Actions Activity

Add navbar

main
Ethan Reece 2023-05-30 17:37:11 -05:00
parent 5b62942f44
commit c0a371b510
Signed by: me
GPG Key ID: D3993665FF92E1C3
6 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/content/global/Navbar.astro 100644
View File

@ -0,0 +1,18 @@
---
const homeText = 'Ethan Reece'
const links = [
{ text: 'About Me', link: '#about' },
{ text: 'Projects', link: '#projects' },
{ text: 'Experience', link: '#experience' },
{ text: 'Hobbies', link: '#hobbies' },
{ text: 'Contact Me', link: '#contact' },
]
---
<div class="w-full bg-background-light px-screen-x py-screen-y">
<ul role="list" class="text flex w-full space-x-screen-x whitespace-nowrap">
<a href="/">{homeText}</a>
<li class="w-full"></li>
{links.map((link) => <a href={link.link}>{link.text}</a>)}
</ul>
</div>

10
src/layouts/Basic.astro
View File

@ -1,7 +1,8 @@
--- ---
import Background from '../content/global/Background.astro' import Background from './properties/Background.astro'
import Font from '../content/global/Background.astro' import Font from './properties/Font.astro'
import Head from '../content/global/Head.astro' import Head from './properties/Head.astro'
import Navbar from '../content/global/Navbar.astro'
export interface Props { export interface Props {
title: string title: string
@ -14,9 +15,10 @@ const { title, description } = Astro.props
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<Head title={title} description={description} /> <Head title={title} description={description} />
<body class="relative flex min-h-screen w-screen flex-col"> <body class="min-h-screen w-screen">
<Font> <Font>
<Background> <Background>
<Navbar />
<slot /> <slot />
</Background> </Background>
</Font> </Font>

0
src/content/global/Background.astro → src/layouts/properties/Background.astro
View File

0
src/content/global/Font.astro → src/layouts/properties/Font.astro
View File

0
src/content/global/Head.astro → src/layouts/properties/Head.astro
View File

5
tailwind.config.cjs
View File

@ -13,6 +13,7 @@ module.exports = {
colors: { colors: {
background: '#dbf6db', background: '#dbf6db',
'background-dark': '#bbd8bb', 'background-dark': '#bbd8bb',
'background-light': '#ffffff',
font: '#000000', font: '#000000',
pattern: 'rgba(0,0,0,.02)', pattern: 'rgba(0,0,0,.02)',
}, },
@ -22,6 +23,10 @@ module.exports = {
backgroundSize: { backgroundSize: {
contain: 'contain', contain: 'contain',
}, },
spacing: {
'screen-x': '2rem',
'screen-y': '1rem',
},
}, },
plugins: [require('tailwindcss-hero-patterns')], plugins: [require('tailwindcss-hero-patterns')],
} }