46 lines
1.4 KiB
Text
46 lines
1.4 KiB
Text
---
|
|
// @ts-ignore
|
|
import { Picture } from 'astro-imagetools/components'
|
|
|
|
const viewHeight = 'h-[30rem]'
|
|
const padding = 'p-[2rem]'
|
|
|
|
const textMainSize = 'text-[2rem]'
|
|
const textEmphasisSize = 'text-[4rem]'
|
|
const textEmphasisLineHeight = 'leading-[3.5rem]'
|
|
|
|
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={`w-full ${viewHeight} ${padding}`}>
|
|
<header class="mx-auto flex h-full max-w-page-w items-center">
|
|
<h1 class={`font-medium ${textMainSize}`}>
|
|
<i
|
|
><b><u>{text[0]}</u></b><span class="text-font-light"
|
|
>{text[1]}</span
|
|
></i
|
|
>
|
|
<br />
|
|
<b
|
|
class={`font-extrabold ${textEmphasisSize} ${textEmphasisLineHeight}`}
|
|
>{text[2]}</b
|
|
>
|
|
<br />
|
|
<i
|
|
><span class="text-font-light">{text[3]}</span>
|
|
<b class="font-extrabold"><u>{text[4]}</u></b></i
|
|
><span class="text-font-light">{text[5]}</span>
|
|
</h1>
|
|
<div class="ml-auto h-full">
|
|
<Picture
|
|
src={image}
|
|
alt={imageAlt}
|
|
fit="cover"
|
|
layout="fill"
|
|
placeholder="none"
|
|
/>
|
|
</div>
|
|
</header>
|
|
</section>
|