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

5
src/layouts/Base.astro
View File

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

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

@ -1,7 +1,9 @@
---
const pattern = 'heropattern-circuitboard-pattern'
---
<div class="bg-background"> <div class="bg-background">
<div <div class={`h-full min-h-screen w-full bg-contain bg-repeat ${pattern}`}>
class="h-full min-h-screen w-full bg-contain bg-repeat heropattern-circuitboard-pattern"
>
<slot /> <slot />
</div> </div>
</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 Hobbies from '../components/content/index/Hobbies.astro'
import Base from '../layouts/Base.astro' import Base from '../layouts/Base.astro'
const title = 'Ethan Reece'
const description = ''
--- ---
<Base title="Ethan Reece" description=""> <Base title={title} description={description}>
<Hero /> <Hero />
<About /> <About />
<Projects /> <Projects />