keikos.work/handlers/pages/home.templ

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() {
		<header class="fixed w-100% h-screen md:flex justify-center items-center overflow-x-hidden">
			<h1
				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="/assets/img/2.png"
				/>
			</div>
		</header>
		<div
			class="relative w-100% h-screen bg-gradient-to-t from-black to-transparent to-50% pointer-events-none"
			aria-hidden="true"
		></div>
		<main class="relative bg-black w-full h-screen md:flex justify-center items-center overflow-x-hidden">
			<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" }
				>
					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 me nofollow noopener noreferrer"
							target="_blank"
						>
							<span
								class="hidden i-pixelarticons:camera h-3rem md:inline-block"
								aria-hidden="true"
							></span>
							Instagram
							<span
								class="inline-block i-pixelarticons:camera h-3rem md:hidden"
								aria-hidden="true"
							></span>
							<span
								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" }
								aria-label="(Opens in new tab)"
							></span>
						</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 me nofollow noopener noreferrer"
							target="_blank"
						>
							<span
								class="hidden i-pixelarticons:file-alt h-3rem md:inline-block"
								aria-hidden="true"
							></span>
							Tumblr
							<span
								class="inline-block i-pixelarticons:file-alt h-3rem md:hidden"
								aria-hidden="true"
							></span>
							<span
								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" }
								aria-label="(Opens in new tab)"
							></span>
						</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 me nofollow noopener noreferrer"
							target="_blank"
						>
							<span
								class="hidden i-pixelarticons:bug h-3rem md:inline-block"
								aria-hidden="true"
							></span>
							BlueSky
							<span
								class="inline-block i-pixelarticons:bug h-3rem md:hidden"
								aria-hidden="true"
							></span>
							<span
								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" }
								aria-label="(Opens in new tab)"
							></span>
						</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"
				aria-hidden="true"
			></span>
			<span
				class="absolute z-1 top-0 left-0 w-full h-full bg-heropattern"
				aria-hidden="hidden"
			></span>
		</main>
	}
}