78 lines
3.0 KiB
Plaintext
78 lines
3.0 KiB
Plaintext
package pages
|
|
|
|
import (
|
|
"www/layouts"
|
|
"www/components"
|
|
)
|
|
|
|
templ Homepage() {
|
|
@layouts.Page("013") {
|
|
@components.Nav([]components.Link{
|
|
{Text: "about", Link: templ.SafeURL("#about")},
|
|
{Text: "projects", Link: templ.SafeURL("#projects")},
|
|
{Text: "gallery", Link: templ.SafeURL("#gallery")},
|
|
{Text: "blog", Link: templ.SafeURL("#blog")},
|
|
{Text: "contact", Link: templ.SafeURL("#contact")},
|
|
})
|
|
<header
|
|
class="h-screen w-screen flex justify-center items-center"
|
|
>
|
|
<div class="flex flex-col lg:flex-row lg:justify-between lg:gap-5rem w-90% lg:w-80% xl:w-60%">
|
|
<div class="w-50% xl:w-25%">
|
|
<img
|
|
src="/logo-013.svg"
|
|
class="animate slide-from-b fade-in"
|
|
style="--anim-stagger: 1; opacity: 0;"
|
|
/>
|
|
</div>
|
|
<h1
|
|
class={ "w-full lg:max-w-45rem mb-0 lg:mt-0 prose text-2.9rem lg:text-6xl xl:text-7xl " +
|
|
"animate slide-from-b fade-in" }
|
|
style="--anim-stagger: 2; opacity: 0;"
|
|
>
|
|
Someone who's trying to improve
|
|
</h1>
|
|
</div>
|
|
</header>
|
|
<main
|
|
aria-labelledby="about"
|
|
class="w-90vw xl:w-50vw lg:text-xl h-70vh text-justify -translate-y-20vh"
|
|
>
|
|
<h2 id="about" class="opacity-0">About</h2>
|
|
<p class="animate slide-from-b fade-in" style="--anim-stagger: 4; opacity: 0;">
|
|
Lorem ipsum dolor sit amet, officia excepteur ex fugiat
|
|
reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex
|
|
esse exercitation amet. Nisi anim cupidatat excepteur officia.
|
|
Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate
|
|
voluptate dolor minim nulla est proident. Nostrud officia pariatur ut
|
|
officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit
|
|
commodo officia dolor Lorem duis laboris cupidatat officia voluptate.
|
|
Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis
|
|
officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis
|
|
sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea
|
|
consectetur et est culpa et culpa duis.
|
|
</p>
|
|
<p class="animate slide-from-b fade-in" style="--anim-stagger: 5; opacity: 0;">
|
|
Lorem ipsum dolor sit amet, officia excepteur ex fugiat
|
|
reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex
|
|
esse exercitation amet. Nisi anim cupidatat excepteur officia.
|
|
Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate
|
|
voluptate dolor minim nulla est proident. Nostrud officia pariatur ut
|
|
officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit
|
|
commodo officia dolor Lorem duis laboris cupidatat officia voluptate.
|
|
Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis
|
|
officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis
|
|
sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea
|
|
consectetur et est culpa et culpa duis.
|
|
</p>
|
|
</main>
|
|
<footer>
|
|
<div
|
|
aria-hidden="true"
|
|
class={ "fixed bottom-0 left-0 w-screen h-50vh " +
|
|
"bg-transparent bg-gradient-to-t from-black from-10%" }
|
|
></div>
|
|
</footer>
|
|
}
|
|
}
|