277 lines
9.0 KiB
Plaintext
277 lines
9.0 KiB
Plaintext
package pages
|
|
|
|
import (
|
|
"fmt"
|
|
"net/http"
|
|
"math/rand/v2"
|
|
"time"
|
|
|
|
"forge.capytal.company/capytalcode/project-comicverse/lib/router/rerrors"
|
|
|
|
"keikos.work/templates/layouts"
|
|
"keikos.work/assets"
|
|
)
|
|
|
|
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) head() {
|
|
<meta name="description" content={ "Social and contact information for Helena \"Keiko\" Ayrim" }/>
|
|
}
|
|
|
|
templ (p *Home) page() {
|
|
@layouts.Page(layouts.PageInfo{
|
|
Heading: p.head(),
|
|
BodyClasses: "scroll-smooth snap-normal snap-y snap-mandatory",
|
|
}) {
|
|
<header
|
|
class="fixed w-100% h-100vh md:flex justify-center items-center overflow-x-hidden"
|
|
id="header"
|
|
aria-labelledby="header-title"
|
|
>
|
|
<h1
|
|
id="header-title"
|
|
class={ "absolute z-3 top-0 left-0 text-stroke-1px text-stroke-white text-transparent text-9xl m-0 mt-4 vertical-lr",
|
|
"md:relative md:m-0 md:horizontal-tb md:w-fit" }
|
|
>
|
|
Keiko <span class="font-japanese text-8xl">稽古</span>
|
|
</h1>
|
|
<div class="absolute z-2 w-100% h-100% md:flex justify-center items-center top-0 left-0">
|
|
<div
|
|
class={ "absolute z-2 top-0 left-0 w-100% h-100% bg-gradient-to-r from-black opacity-50 to-transparent",
|
|
"md:bg-gradient-to-t md:from-20% md:to-50% md:opacity-100" }
|
|
aria-hidden="true"
|
|
></div>
|
|
<img
|
|
class="absolute z-1 top-0 left-0 -translate-x-15% h-100% md:relative md:h-70% md:translate-x-0 md:rounded-xl"
|
|
src={ fmt.Sprintf("/assets/img/%d.png", rand.IntN(4-1)+1) }
|
|
alt="a beatiful drawing"
|
|
/>
|
|
</div>
|
|
</header>
|
|
<div
|
|
class="relative w-100% h-100vh bg-gradient-to-t from-black to-transparent to-50% pointer-events-none snap-center"
|
|
aria-hidden="true"
|
|
></div>
|
|
<main
|
|
class="relative bg-black w-full h-100vh md:flex justify-center items-center overflow-x-hidden overflow-y-hidden snap-center"
|
|
id="socials"
|
|
aria-labelledby="socials-title"
|
|
>
|
|
<div class="relative w-full h-full flex flex-col justify-between md:w-fit md:h-fit">
|
|
<h2
|
|
class={ "relative z-4 m-0 pt-4 text-9xl vertical-lr text-stroke-1px text-stroke-white text-transparent",
|
|
"md:horizontal-tb md:text-center" }
|
|
id="socials-title"
|
|
>
|
|
Socials
|
|
</h2>
|
|
<ul class="relative z-3 list-none text-4xl p-0 pr-5 underline md:flex md:gap-10">
|
|
<li class="flex justify-end mb-4 md:m-0">
|
|
<a
|
|
class="relative flex items-center gap-2 text-current"
|
|
href="https://www.instagram.com/keiko_drawn/"
|
|
referrerpolicy="no-referrer"
|
|
rel="external nofollow noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
<img
|
|
class="hidden i-pixelarticons:camera h-3rem md:inline-block"
|
|
aria-hidden="true"
|
|
/>
|
|
Instagram
|
|
<img
|
|
class="inline-block i-pixelarticons:camera h-3rem md:hidden"
|
|
aria-hidden="true"
|
|
/>
|
|
<img
|
|
class={ "absolute inline-block i-pixelarticons:external-link w-1rem h-1rem top-0 right-0 translate-x-50% opacity-50",
|
|
"md:translate-x-100% md:opacity-100" }
|
|
alt="(Opens in new tab)"
|
|
/>
|
|
</a>
|
|
</li>
|
|
<li class="flex justify-end mb-4 md:m-0">
|
|
<a
|
|
class="relative flex items-center gap-2 text-current"
|
|
href="https://www.tumblr.com/keikod"
|
|
referrerpolicy="no-referrer"
|
|
rel="external nofollow noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
<img
|
|
class="hidden i-pixelarticons:file-alt h-3rem md:inline-block"
|
|
aria-hidden="true"
|
|
/>
|
|
Tumblr
|
|
<img
|
|
class="inline-block i-pixelarticons:file-alt h-3rem md:hidden"
|
|
aria-hidden="true"
|
|
/>
|
|
<img
|
|
class={ "absolute inline-block i-pixelarticons:external-link w-1rem h-1rem top-0 right-0 translate-x-50% opacity-50",
|
|
"md:translate-x-100% md:opacity-100" }
|
|
alt="(Opens in new tab)"
|
|
/>
|
|
</a>
|
|
</li>
|
|
<li
|
|
class="flex justify-end"
|
|
>
|
|
<a
|
|
class="relative flex items-center gap-2 text-current"
|
|
href="https://bsky.app/profile/keikos.work"
|
|
referrerpolicy="no-referrer"
|
|
rel="external nofollow noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
<img
|
|
class="hidden i-pixelarticons:bug h-3rem md:inline-block"
|
|
aria-hidden="true"
|
|
/>
|
|
BlueSky
|
|
<img
|
|
class="inline-block i-pixelarticons:bug h-3rem md:hidden"
|
|
aria-hidden="true"
|
|
/>
|
|
<img
|
|
class={ "absolute inline-block i-pixelarticons:external-link w-1rem h-1rem top-0 right-0 translate-x-50% opacity-50",
|
|
"md:translate-x-100% md:opacity-100" }
|
|
alt="(Opens in new tab)"
|
|
/>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<span
|
|
class="absolute z-2 top-0 left-0 w-full h-full bg-gradient-to-b from-black to-transparent"
|
|
></span>
|
|
<span
|
|
class="absolute z-1 top-0 left-0 w-full h-full bg-heropattern bg-bottom"
|
|
></span>
|
|
</main>
|
|
<section
|
|
class="relative py-20 bg-heropattern bg-black bg-top w-full h-100vh flex justify-center overflow-x-hidden overflow-y-hidden snap-center"
|
|
id="worldbuilding"
|
|
aria-labelledby="worldbuilding-title"
|
|
>
|
|
<div class="relative w-full h-full flex md:flex-col justify-between md:justify-center md:items-center md:w-fit md:h-fit">
|
|
<h2
|
|
class={ "relative z-4 m-0 pt-4 text-8xl vertical-lr text-stroke-1px text-stroke-white text-transparent max-h-80%",
|
|
"md:horizontal-tb md:text-center" }
|
|
id="worldbuilding-title"
|
|
>
|
|
Worldbuilding
|
|
</h2>
|
|
<div class="relative z-3 list-none p-0 pr-5 md:p-0 flex flex-col justify-between md:items-center max-w-60% max-h-80% md:w-fit">
|
|
<p class="text-2xl text-justify mt-3 md:text-center">
|
|
Heaven is a wasteland filled with the ones we once prayed for.
|
|
Now, the only place left for us is a broken underground hell, without
|
|
faith of ever looking at the real starts.
|
|
</p>
|
|
<h3 class="m-0 mb-3 text-4xl text-right md:w-fit">
|
|
<a
|
|
class="relative flex items-center gap-2 text-current"
|
|
href="https://tumblr.com/ak-worldbuilding"
|
|
referrerpolicy="no-referrer"
|
|
rel="external nofollow noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
Lost Under The Night Sky
|
|
<img
|
|
class={ "absolute inline-block i-pixelarticons:external-link w-1rem h-1rem top-0 right-0 translate-x-70% opacity-50",
|
|
"md:translate-x-100% md:opacity-100" }
|
|
alt="(Opens in new tab)"
|
|
/>
|
|
</a>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<footer
|
|
class={ "relative w-full h-100vh bg-heropattern bg-black bg-top overflow-x-hidden overflow-y-hidden nap-center",
|
|
"flex items-end md:justify-center md:items-center" }
|
|
id="footer"
|
|
aria-label="contact"
|
|
>
|
|
<div class={ "relative z-3 md:flex flex-col items-end" }>
|
|
<div class="hidden md:block" aria-label="Signature">
|
|
<div class="w-15rem h-15rem" aria-hidden="true">
|
|
@p.sign()
|
|
</div>
|
|
</div>
|
|
<div class="relative w-full h-full flex justify-between md:w-fit md:h-fit md:gap-7">
|
|
<h2
|
|
class={ "relative z-4 m-4 mb-8 text-5xl vertical-rl rotate-180 text-white",
|
|
"md:horizontal-tb md:text-center md:rotate-0 md:m-0 md:flex md:items-center" }
|
|
>
|
|
<a
|
|
class="relative z-1 text-current no-underline"
|
|
href="mailto:contact@keikos.work"
|
|
rel="author"
|
|
>
|
|
contact@keikos.work
|
|
</a>
|
|
</h2>
|
|
<div class="flex flex-col justify-end m-4 mb-4 text-right md:m-0 md:justify-center">
|
|
<div class="w-full flex justify-end md:hidden" aria-label="Signature">
|
|
<div class="w-15rem h-15rem" aria-hidden="true">
|
|
@p.sign()
|
|
</div>
|
|
</div>
|
|
<p class="mb-0">{ time.Now().Format("2006") } © Helena "Keiko" Ayrim</p>
|
|
<p class="text-xs opacity-50 md:mt-1">
|
|
Made & managed with
|
|
<span class="i-pixelarticons:heart h-0.75rem">love</span> by
|
|
<a
|
|
class="relative text-current underline-offset-3"
|
|
href="https://guz.one"
|
|
referrerpolicy="no-referrer-when-downgrade"
|
|
rel="external"
|
|
target="_blank"
|
|
>
|
|
Gustavo "Guz" L Mello
|
|
<img
|
|
class={ "absolute inline-block i-pixelarticons:external-link",
|
|
"w-0.5rem h-0.5rem top-0 right-0 translate-x-100% opacity-50",
|
|
"md:translate-x-100% md:opacity-100" }
|
|
alt="(Opens in new tab)"
|
|
/>
|
|
</a>
|
|
<span class="inline-block md:hidden pl-3">(Work In Progress)</span>
|
|
<span class="hidden md:inline-block pl-3">(WIP)</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span
|
|
class="absolute z-2 top-0 left-0 w-full h-full bg-gradient-to-t from-black to-transparent"
|
|
aria-hidden="true"
|
|
></span>
|
|
<div
|
|
class="absolute z-10 opacity-10 bottom-20 right-20"
|
|
>
|
|
<a href="/eye">
|
|
<img
|
|
class="w-20 saturate-0"
|
|
src="/assets/img/eye.png"
|
|
/>
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
}
|
|
}
|
|
|
|
func (p *Home) sign() templ.Component {
|
|
f, err := assets.ASSETS.ReadFile("img/sign.svg")
|
|
if err != nil {
|
|
return templ.Raw("<img src=\"/assets/img/sign.svg\"/>")
|
|
}
|
|
return templ.Raw(string(f))
|
|
}
|