---
// @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>