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

Complete basic hero

main
Ethan Reece 2023-05-31 19:17:53 -05:00
parent 8f1b069cfa
commit ce57be6f01
Signed by: me
GPG Key ID: D3993665FF92E1C3
5 changed files with 41 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/content/index/Hero.astro
View File

@ -1,27 +1,38 @@
---
// @ts-ignore
import { Picture } from 'astro-imagetools/components'
const viewHeight = 'h-[25rem]'
const centerGap = 'gap-[7rem]'
const padding = 'p-[3rem]'
const textMainSize = 'text-[1.75rem]'
const textEmphasisSize = 'text-[3rem]'
const text = ['Hello', ', I am', 'Ethan Reece', 'and I do ', 'web stuff', '.']
const image = '../public/images/index/myself.png'
const imageAlt = 'black and white portrait of myself'
---
<section class="flex h-[25rem] items-center p-[3rem]">
<div class="ml-auto text-[1.75rem]">
<i><b><u>Hello</u></b><span class="text-font-light">, I am</span></i>
<section class={`flex items-center ${viewHeight} ${centerGap} ${padding}`}>
<div class={`ml-auto ${textMainSize}`}>
<i
><b><u>{text[0]}</u></b><span class="text-font-light"
>{text[1]}</span
></i
>
<br />
<b class="text-[3rem]">Ethan Reece</b>
<b class={textEmphasisSize}>{text[2]}</b>
<br />
<i
><span class="text-font-light">and I do</span>
<b><u>web stuff</u></b></i
><span class="text-font-light">.</span>
><span class="text-font-light">{text[3]}</span>
<b><u>{text[4]}</u></b></i
><span class="text-font-light">{text[5]}</span>
</div>
<div class="mr-auto h-full">
<Picture
src="../public/images/index/myself.png"
alt="black and white portrait of myself"
sizes={(breakpoints: any) => {
const maxWidth = breakpoints[breakpoints.length - 1]
return `(min-width: ${maxWidth}px) ${maxWidth}px, 100vw`
}}
src={image}
alt={imageAlt}
fit="cover"
layout="fill"
placeholder="none"

5
src/layouts/Base.astro
View File

@ -1,6 +1,5 @@
---
import Background from './properties/Background.astro'
import Font from './properties/Font.astro'
import Head from './properties/Head.astro'
import Navbar from '../components/content/global/Navbar.astro'
import { SEO } from 'astro-seo'
@ -19,8 +18,7 @@ const { title, description } = Astro.props
<Head title={title} description={description}>
<SEO title={title} description={description} />
</Head>
<body class="min-h-screen w-screen">
<Font>
<body class="min-h-screen w-screen font-main text-font">
<Background>
<Navbar />
<main>
@ -28,6 +26,5 @@ const { title, description } = Astro.props
</main>
</Background>
<Footer />
</Font>
</body>
</html>

8
src/layouts/properties/Background.astro
View File

@ -1,7 +1,9 @@
---
const pattern = 'heropattern-circuitboard-pattern'
---
<div class="bg-background">
<div
class="h-full min-h-screen w-full bg-contain bg-repeat heropattern-circuitboard-pattern"
>
<div class={`h-full min-h-screen w-full bg-contain bg-repeat ${pattern}`}>
<slot />
</div>
</div>

3
src/layouts/properties/Font.astro
View File

@ -1,3 +0,0 @@
<div class="font-main text-font">
<slot />
</div>

5
src/pages/index.astro
View File

@ -6,9 +6,12 @@ import Experience from '../components/content/index/Experience.astro'
import Hobbies from '../components/content/index/Hobbies.astro'
import Base from '../layouts/Base.astro'
const title = 'Ethan Reece'
const description = ''
---
<Base title="Ethan Reece" description="">
<Base title={title} description={description}>
<Hero />
<About />
<Projects />