feat: complete rewrite of the homepage

handlers/pages/home.templ

@@ -2,13 +2,10 @@ package pages
 
 import (
 	"net/http"
-	"fmt"
-	"time"
 
 	"forge.capytal.company/capytalcode/project-comicverse/lib/router/rerrors"
 
 	"keikos.work/templates/layouts"
-	"math/rand/v2"
 )
 
 type Home struct{}
@@ -21,110 +18,25 @@ func (p *Home) ServeHTTP(w http.ResponseWriter, r *http.Request) {
 
 templ (p *Home) page() {
 	@layouts.Page() {
-		<section
-			class="fixed z-1 w-screen h-100lvh top-0 left-0 flex justify-center items-center"
-		>
+		<main class="fixed w-100% h-screen">
+			<h1 class="absolute z-3 top-0 left-0 text-stroke-1px text-stroke-white text-transparent text-9xl m-4 vertical-lr">
+				Keiko <span class="font-japanese text-8xl">稽古</span>
+			</h1>
 			<div
-				class="overflow-x-hidden relative md:w-screen"
-			>
-				<span
-					class="-translate-x-20% sm:translate-x-0 md:translate-x-0 block md:flex md:justify-center"
-				>
-					<img
-						src={ fmt.Sprintf("/assets/img/%d.png", rand.IntN(4-1)+1) }
-						class="h-100vh md:h-50vh animate-fade-in-right md:animate-fade-in-up animate-ease-out md:animate-ease-out md:rounded-2xl"
-					/>
-				</span>
-				<span
-					class={ "absolute top-0 left-0 w-100% h-100%",
-							"bg-gradient-to-r md:bg-gradient-to-t from-black to-transparent block" }
-				></span>
-				<div
-					class={ "absolute top-0 left-0 h-100% w-100% md:flex md:justify-center md:items-center",
-							"font-serif animate-slide-in-left md:animate-none animate-ease-out" }
-				>
-					<h1
-						class="m-0 flex rows-1 col-2 gap-2 rotate-90 md:rotate-0 origin-tl text-transparent md:animate-fade-in-up md:animate-ease-out"
-						style="-webkit-text-stroke:0.1rem white;text-stroke:0.1 white;"
-					>
-						<span
-							class="block origin-bl -translate-y-100% md:translate-y-0 md:h-full flex items-center h-8rem text-10rem"
-						>
-							<span>Keiko</span>
-						</span>
-						<span
-							class="font-japanese origin-tl -rotate-90 md:rotate-0 flex items-center w-9rem md:w-fit text-7rem vertical-lr md:horizontal-tb"
-						>
-							<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>
+				class="absolute z-2 top-0 left-0 w-100% h-100% bg-gradient-to-r from-black opacity-50 to-transparent"
+				aria-hidden="true"
+			></div>
+			<img
+				class="absolute z-1 top-0 left-0 -translate-x-15% h-100%"
+				src="/assets/img/2.png"
+			/>
+		</main>
+		<div
+			class="relative w-100% h-screen bg-gradient-to-t from-black to-transparent to-50% pointer-events-none"
+			aria-hidden="true"
+		></div>
+		<section class="relative bg-green w-100% h-screen">
+			<h2 class="m-0">Socials</h2>
 		</section>
-		<section class="relative z-2 w-screen min-h-200lvh md:min-h-150lvh gap-0">
-			<span class="block w-screen h-40% md:hidden"></span>
-			<span class="block w-screen h-20% md:h-100vh bg-gradient-to-t from-black to-transparent md:to-40%"></span>
-			<div class="block w-screen h-40% md:h-100vh bg-black pt-5rem md:pt-4rem flex cols-2 rows-1 md:justify-center md:items-center font-serif">
-				<div class="w-30% h-full md:h-50% md:flex md:flex-col md:justify-between">
-					<h2
-						class="text-10rem text-transparent rotate-90 md:rotate-0 m-0"
-						style="-webkit-text-stroke:0.1rem white;text-stroke:0.1 white;"
-					>
-						Socials
-					</h2>
-					<h3
-						class="hidden text-transparent text-5rem m-0 md:inline"
-						style="-webkit-text-stroke:0.1rem white;text-stroke:0.1 white;"
-					>
-						Contact
-					</h3>
-				</div>
-				<div class="w-70% h-80% md:w-50% md:h-50% 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 md:text-3xl 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>
-		<footer class="relative z-3 w-screen h-15vh font-serif text-center bg-black">
-			<p class="opacity-50">{ time.Now().Format("2006") } &copy; Helena "Keiko" Ayrim</p>
-			<p class="text-sm opacity-50">WIP. Created with &lt;3 by <a href="https://guz.one" class="text-white">Gustavo "Guz" L de Mello</a></p>
-		</footer>
 	}
 }

templates/layouts/page.templ

@@ -84,10 +84,8 @@ templ Page(i ...PageInfo) {
 				@pageInfo(i).Heading
 			}
 		</head>
-		<body class="bg-black">
-			<main class="absolute w-screen min-h-screen top-0 left-0 bg-black">
-				{ children... }
-			</main>
+		<body class="bg-black font-serif w-screen min-h-screen m-0 absolute top-0 left-0">
+			{ children... }
 		</body>
 	</html>
 }