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 Font from '../content/global/Background.astro'
import Head from '../content/global/Head.astro'
import Background from './properties/Background.astro'
import Font from './properties/Font.astro'
import Head from './properties/Head.astro'
import Navbar from '../content/global/Navbar.astro'
export interface Props {
title: string
@ -14,9 +15,10 @@ const { title, description } = Astro.props
<!DOCTYPE html>
<html lang="en">
<Head title={title} description={description} />
<body class="relative flex min-h-screen w-screen flex-col">
<body class="min-h-screen w-screen">
<Font>
<Background>
<Navbar />
<slot />
</Background>
</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: {
background: '#dbf6db',
'background-dark': '#bbd8bb',
'background-light': '#ffffff',
font: '#000000',
pattern: 'rgba(0,0,0,.02)',
},
@ -22,6 +23,10 @@ module.exports = {
backgroundSize: {
contain: 'contain',
},
spacing: {
'screen-x': '2rem',
'screen-y': '1rem',
},
},
plugins: [require('tailwindcss-hero-patterns')],
}