Add components for home page
parent
c0a371b510
commit
7b406fb8a1
|
@ -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="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>
|
|
@ -0,0 +1,11 @@
|
||||||
|
---
|
||||||
|
export interface Props {
|
||||||
|
background: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const { background } = Astro.props
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class={background ? 'bg-background-dark' : ''}>
|
||||||
|
<slot />
|
||||||
|
</div>
|
|
@ -1,18 +0,0 @@
|
||||||
---
|
|
||||||
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>
|
|
|
@ -2,7 +2,7 @@
|
||||||
import Background from './properties/Background.astro'
|
import Background from './properties/Background.astro'
|
||||||
import Font from './properties/Font.astro'
|
import Font from './properties/Font.astro'
|
||||||
import Head from './properties/Head.astro'
|
import Head from './properties/Head.astro'
|
||||||
import Navbar from '../content/global/Navbar.astro'
|
import Navbar from '../components/content/global/Navbar.astro'
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
title: string
|
title: string
|
|
@ -1,38 +1,7 @@
|
||||||
---
|
---
|
||||||
import Layout from '../layouts/Basic.astro'
|
import Base from '../layouts/Base.astro'
|
||||||
import Card from '../components/Card.astro'
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Ethan Reece" description="">
|
<Base title="Ethan Reece" description="">
|
||||||
<main>
|
<p>hello world</p>
|
||||||
<h1>Welcome to <span>Astro</span></h1>
|
</Base>
|
||||||
<p>
|
|
||||||
To get started, open the directory <code>src/pages</code> in your project.<br
|
|
||||||
/>
|
|
||||||
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message
|
|
||||||
above.
|
|
||||||
</p>
|
|
||||||
<ul role="list">
|
|
||||||
<Card
|
|
||||||
href="https://docs.astro.build/"
|
|
||||||
title="Documentation"
|
|
||||||
body="Learn how Astro works and explore the official API docs."
|
|
||||||
/>
|
|
||||||
<Card
|
|
||||||
href="https://astro.build/integrations/"
|
|
||||||
title="Integrations"
|
|
||||||
body="Supercharge your project with new frameworks and libraries."
|
|
||||||
/>
|
|
||||||
<Card
|
|
||||||
href="https://astro.build/themes/"
|
|
||||||
title="Themes"
|
|
||||||
body="Explore a galaxy of community-built starter themes."
|
|
||||||
/>
|
|
||||||
<Card
|
|
||||||
href="https://astro.build/chat/"
|
|
||||||
title="Community"
|
|
||||||
body="Come say hi to our amazing Discord community. ❤️"
|
|
||||||
/>
|
|
||||||
</ul>
|
|
||||||
</main>
|
|
||||||
</Layout>
|
|
||||||
|
|
Reference in New Issue