118 lines
3.5 KiB
Plaintext
118 lines
3.5 KiB
Plaintext
package pages
|
|
|
|
import (
|
|
"net/http"
|
|
|
|
"forge.capytal.company/capytalcode/project-comicverse/lib/router/rerrors"
|
|
"keikos.work/templates/layouts"
|
|
)
|
|
|
|
type Home struct{}
|
|
|
|
func (p *Home) ServeHTTP(w http.ResponseWriter, r *http.Request) {
|
|
if err := p.page().Render(r.Context(), w); err != nil {
|
|
rerrors.InternalError(err).ServeHTTP(w, r)
|
|
}
|
|
}
|
|
|
|
templ (p *Home) page() {
|
|
@layouts.Page() {
|
|
<section
|
|
class="fixed z-1 w-screen h-100lvh top-0 left-0 flex justify-center items-center"
|
|
>
|
|
<div
|
|
class="overflow-x-hidden relative"
|
|
>
|
|
<span
|
|
class="-translate-x-20% block"
|
|
>
|
|
<img
|
|
src="/assets/img/2024-09-03.jpg"
|
|
class="h-100vh animate-fade-in-right animate-ease-out"
|
|
/>
|
|
</span>
|
|
<span
|
|
class={ "absolute top-0 left-0 w-100% h-100%",
|
|
"bg-gradient-to-r from-black to-transparent block" }
|
|
></span>
|
|
<div
|
|
class={ "absolute top-0 left-0 h-100% w-100%",
|
|
"font-serif animate-slide-in-left animate-ease-out" }
|
|
>
|
|
<h1
|
|
class="m-0 flex rows-1 col-2 gap-2 rotate-90 origin-tl text-transparent"
|
|
style="-webkit-text-stroke:0.1rem white;text-stroke:0.1 white;"
|
|
>
|
|
<span
|
|
class="block origin-bl -translate-y-100% flex items-center h-8rem text-10rem"
|
|
>
|
|
<span>Keiko</span>
|
|
</span>
|
|
<span
|
|
class="font-japanese origin-tl -rotate-90 flex items-center w-9rem text-7rem"
|
|
style="writing-mode: vertical-lr;"
|
|
>
|
|
<span class="w-fit">稽古</span>
|
|
</span>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<a
|
|
href="#contact"
|
|
class="absolute block w-2.5rem h-2.5rem bottom-10rem animate-fade-in-up animate-ease-out i-pixelarticons:arrow-down"
|
|
>
|
|
See more
|
|
</a>
|
|
</section>
|
|
<section class="absolute z-2 w-screen h-250lvh gap-0">
|
|
<span class="block w-screen h-45%"></span>
|
|
<span class="block w-screen h-20% bg-gradient-to-t from-black to-transparent"></span>
|
|
<div class="block w-screen h-35% bg-black pt-5rem flex cols-2 rows-1 font-serif">
|
|
<div class="w-30% h-full">
|
|
<h2
|
|
class="text-10rem text-transparent rotate-90 m-0"
|
|
style="-webkit-text-stroke:0.1rem white;text-stroke:0.1 white;"
|
|
>
|
|
Socials
|
|
</h2>
|
|
</div>
|
|
<div class="w-70% h-80% text-right pr-2rem flex flex-col justify-between">
|
|
<ul class="list-none p-0 text-3xl flex flex-col items-end gap-1rem">
|
|
<li class="border-solid border-0 border-b-1 border-white w-fit">
|
|
<a
|
|
href="https://instagram.com"
|
|
class="flex justify-end rows-1 cols-2 gap-0.5rem text-white no-underline"
|
|
>
|
|
Instagram <span class="i-pixelarticons:camera block w-1.875rem h-1.875rem">I</span>
|
|
</a>
|
|
</li>
|
|
<li class="border-solid border-0 border-b-1 border-white w-fit">
|
|
<a
|
|
href="https://tumblr.com/keikod"
|
|
class="flex justify-end rows-1 cols-2 gap-0.5rem text-white no-underline"
|
|
>
|
|
Tumblr <span class="i-pixelarticons:file-alt block w-1.875rem h-1.875rem">I</span>
|
|
</a>
|
|
</li>
|
|
<li class="border-solid border-0 border-b-1 border-white w-fit">
|
|
<a
|
|
href="https://bsky.app/profile/keikos.work"
|
|
class="flex justify-end rows-1 cols-2 gap-0.5rem text-white no-underline"
|
|
>
|
|
Bluesky<span class="i-pixelarticons:bug block w-1.875rem h-1.875rem">I</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="text-xl flex flex-col items-end">
|
|
<a
|
|
class="border-solid border-0 border-b-1 border-white w-fit m-0"
|
|
>
|
|
contact@keikos.work
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
}
|
|
}
|