Initial commit
This commit is contained in:
@@ -0,0 +1,34 @@
|
||||
{{template "head" .}}
|
||||
{{template "site_header" .}}
|
||||
<main class="mx-auto max-w-7xl px-5 pb-24 pt-32 md:px-8 md:pt-40">
|
||||
<section class="grid gap-10 md:grid-cols-[0.9fr_1.1fr] md:items-start">
|
||||
<div class="aspect-[4/5] overflow-hidden bg-neutral-200">
|
||||
<img src="{{.Content.AboutImage}}" alt="{{.Content.AboutName}}" class="h-full w-full object-cover">
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-4 text-sm uppercase tracking-[0.2em] text-neutral-500">{{.Content.AboutRole}}</p>
|
||||
<h1 class="text-5xl font-semibold md:text-7xl">{{.Content.AboutName}}</h1>
|
||||
<p class="mt-8 max-w-2xl text-xl leading-relaxed text-neutral-600">{{.Content.AboutBio}}</p>
|
||||
<div class="mt-8 grid gap-2 text-sm text-neutral-600">
|
||||
<p>{{.Content.Email}}</p>
|
||||
<p>{{.Content.Phone}}</p>
|
||||
<p>{{.Content.Location}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-20 max-w-2xl">
|
||||
<h2 class="mb-6 text-3xl font-semibold">Contact</h2>
|
||||
<form hx-post="/contact" hx-target="#contact-result" hx-swap="innerHTML" class="grid gap-4">
|
||||
<input name="name" required placeholder="Name" class="border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950">
|
||||
<input name="email" type="email" required placeholder="Email" class="border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950">
|
||||
<textarea name="message" required rows="6" placeholder="Project request" class="border border-neutral-300 bg-white px-4 py-3 outline-none focus:border-neutral-950"></textarea>
|
||||
<button class="bg-neutral-950 px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-white hover:bg-neutral-700">Submit request</button>
|
||||
</form>
|
||||
<div id="contact-result" class="mt-4"></div>
|
||||
</section>
|
||||
</main>
|
||||
{{template "footer" .}}
|
||||
<div id="overlay-root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
{{define "admin_shell_start"}}
|
||||
{{template "head" .}}
|
||||
<header class="sticky top-0 z-30 border-b border-neutral-200 bg-white/95 backdrop-blur">
|
||||
<div class="mx-auto flex max-w-7xl items-center justify-between px-5 py-4 md:px-8">
|
||||
<a href="/admin/main" class="text-xl font-semibold">Archi Folio Admin</a>
|
||||
<div class="flex items-center gap-4 text-sm">
|
||||
<a href="/" class="text-neutral-500 hover:text-neutral-950">View site</a>
|
||||
<form method="post" action="/admin/logout"><button class="text-neutral-500 hover:text-neutral-950">Log out</button></form>
|
||||
</div>
|
||||
</div>
|
||||
<div id="admin-tabs" class="border-t border-neutral-200">
|
||||
{{template "admin_tabs_inner" .}}
|
||||
</div>
|
||||
</header>
|
||||
<main class="mx-auto grid max-w-7xl gap-6 px-5 py-8 md:px-8">
|
||||
<div id="admin-flash">
|
||||
{{template "admin_flash_inner" .}}
|
||||
</div>
|
||||
<section id="admin-panel">
|
||||
{{end}}
|
||||
|
||||
{{define "admin_shell_end"}}
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
|
||||
{{define "admin_tabs_inner"}}
|
||||
<nav class="mx-auto flex max-w-7xl gap-2 overflow-x-auto px-5 py-3 text-sm md:px-8" aria-label="Admin sections">
|
||||
<a href="/admin/main" hx-get="/admin/main" hx-target="#admin-panel" hx-push-url="true" hx-swap="innerHTML transition:true" class="whitespace-nowrap px-3 py-2 {{if eq .AdminTab "main"}}bg-neutral-950 text-white{{else}}text-neutral-500 hover:bg-neutral-100 hover:text-neutral-950{{end}}">Main</a>
|
||||
<a href="/admin/projects" hx-get="/admin/projects" hx-target="#admin-panel" hx-push-url="true" hx-swap="innerHTML transition:true" class="whitespace-nowrap px-3 py-2 {{if eq .AdminTab "projects"}}bg-neutral-950 text-white{{else}}text-neutral-500 hover:bg-neutral-100 hover:text-neutral-950{{end}}">Projects</a>
|
||||
<a href="/admin/contact-details" hx-get="/admin/contact-details" hx-target="#admin-panel" hx-push-url="true" hx-swap="innerHTML transition:true" class="whitespace-nowrap px-3 py-2 {{if eq .AdminTab "contact-details"}}bg-neutral-950 text-white{{else}}text-neutral-500 hover:bg-neutral-100 hover:text-neutral-950{{end}}">Contact Details</a>
|
||||
</nav>
|
||||
{{end}}
|
||||
|
||||
{{define "admin_tabs_oob"}}
|
||||
<div id="admin-tabs" class="border-t border-neutral-200" hx-swap-oob="true">
|
||||
{{template "admin_tabs_inner" .}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{define "admin_flash_inner"}}
|
||||
{{if .Success}}<p class="border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{.Success}}</p>{{end}}
|
||||
{{if .Error}}<p class="border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-900">{{.Error}}</p>{{end}}
|
||||
{{end}}
|
||||
|
||||
{{define "admin_flash_oob"}}
|
||||
<div id="admin-flash" hx-swap-oob="true">
|
||||
{{template "admin_flash_inner" .}}
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -0,0 +1,42 @@
|
||||
{{define "admin_contact_details.html"}}
|
||||
{{template "admin_shell_start" .}}
|
||||
{{template "admin_contact_details_panel" .}}
|
||||
{{template "admin_shell_end" .}}
|
||||
{{end}}
|
||||
|
||||
{{define "admin_contact_details_partial.html"}}
|
||||
{{template "admin_tabs_oob" .}}
|
||||
{{template "admin_flash_oob" .}}
|
||||
{{template "admin_contact_details_panel" .}}
|
||||
{{end}}
|
||||
|
||||
{{define "admin_contact_details_panel"}}
|
||||
<section class="grid gap-6">
|
||||
<section class="bg-white p-6 shadow-sm">
|
||||
<h1 class="mb-6 text-2xl font-semibold">Contact Details</h1>
|
||||
<form method="post" action="/admin/contact-details" class="grid gap-4 md:grid-cols-3">
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Email</span><input name="email" value="{{.Content.Email}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Phone</span><input name="phone" value="{{.Content.Phone}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Location</span><input name="location" value="{{.Content.Location}}" class="w-full border px-3 py-2"></label>
|
||||
<button class="w-fit bg-neutral-950 px-5 py-3 text-sm uppercase tracking-[0.18em] text-white md:col-span-3">Save contact details</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="bg-white p-6 shadow-sm">
|
||||
<h2 class="mb-6 text-2xl font-semibold">Contact Requests</h2>
|
||||
<div class="grid gap-4">
|
||||
{{range .Contacts}}
|
||||
<article class="border border-neutral-200 p-4">
|
||||
<div class="mb-2 flex flex-col gap-1 text-sm md:flex-row md:items-center md:justify-between">
|
||||
<p class="font-medium">{{.Name}} · {{.Email}}</p>
|
||||
<p class="text-neutral-500">{{.CreatedAt.Format "2006-01-02 15:04"}}</p>
|
||||
</div>
|
||||
<p class="text-neutral-700">{{.Message}}</p>
|
||||
</article>
|
||||
{{else}}
|
||||
<p class="text-neutral-500">No contact requests yet.</p>
|
||||
{{end}}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
{{end}}
|
||||
@@ -0,0 +1,18 @@
|
||||
{{template "head" .}}
|
||||
<main class="flex min-h-screen items-center justify-center bg-neutral-950 px-5 text-neutral-950">
|
||||
<form method="post" action="/admin/login" class="w-full max-w-sm bg-white p-8 shadow-2xl">
|
||||
<h1 class="mb-6 text-3xl font-semibold">Admin</h1>
|
||||
{{if .Error}}<p class="mb-4 border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-900">{{.Error}}</p>{{end}}
|
||||
<label class="mb-4 block text-sm">
|
||||
<span class="mb-2 block text-neutral-500">Username</span>
|
||||
<input name="username" required autofocus class="w-full border border-neutral-300 px-4 py-3 outline-none focus:border-neutral-950">
|
||||
</label>
|
||||
<label class="mb-6 block text-sm">
|
||||
<span class="mb-2 block text-neutral-500">Password</span>
|
||||
<input name="password" type="password" required class="w-full border border-neutral-300 px-4 py-3 outline-none focus:border-neutral-950">
|
||||
</label>
|
||||
<button class="w-full bg-neutral-950 px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-white hover:bg-neutral-700">Log in</button>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
{{define "admin_main.html"}}
|
||||
{{template "admin_shell_start" .}}
|
||||
{{template "admin_main_panel" .}}
|
||||
{{template "admin_shell_end" .}}
|
||||
{{end}}
|
||||
|
||||
{{define "admin_main_partial.html"}}
|
||||
{{template "admin_tabs_oob" .}}
|
||||
{{template "admin_flash_oob" .}}
|
||||
{{template "admin_main_panel" .}}
|
||||
{{end}}
|
||||
|
||||
{{define "admin_main_panel"}}
|
||||
<section class="bg-white p-6 shadow-sm">
|
||||
<h1 class="mb-6 text-2xl font-semibold">Main Content</h1>
|
||||
<form method="post" action="/admin/content" enctype="multipart/form-data" class="grid gap-5">
|
||||
<input type="hidden" name="hero_image_current" value="{{.Content.HeroImage}}">
|
||||
<input type="hidden" name="about_image_current" value="{{.Content.AboutImage}}">
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Hero title</span><input name="hero_title" value="{{.Content.HeroTitle}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Hero subtitle</span><input name="hero_subtitle" value="{{.Content.HeroSubtitle}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Intro title</span><input name="intro_title" value="{{.Content.IntroTitle}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">About name</span><input name="about_name" value="{{.Content.AboutName}}" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">About role</span><input name="about_role" value="{{.Content.AboutRole}}" class="w-full border px-3 py-2"></label>
|
||||
</div>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Intro text</span><textarea name="intro_text" rows="3" class="w-full border px-3 py-2">{{.Content.IntroText}}</textarea></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">About bio</span><textarea name="about_bio" rows="4" class="w-full border px-3 py-2">{{.Content.AboutBio}}</textarea></label>
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">Hero image</span><input name="hero_image" type="file" accept="image/png,image/jpeg,image/webp,image/gif" class="w-full border px-3 py-2"></label>
|
||||
<label class="block text-sm"><span class="mb-2 block text-neutral-500">About image</span><input name="about_image" type="file" accept="image/png,image/jpeg,image/webp,image/gif" class="w-full border px-3 py-2"></label>
|
||||
</div>
|
||||
<button class="w-fit bg-neutral-950 px-5 py-3 text-sm uppercase tracking-[0.18em] text-white">Save content</button>
|
||||
</form>
|
||||
</section>
|
||||
{{end}}
|
||||
@@ -0,0 +1,73 @@
|
||||
{{define "admin_projects.html"}}
|
||||
{{template "admin_shell_start" .}}
|
||||
{{template "admin_projects_panel" .}}
|
||||
{{template "admin_shell_end" .}}
|
||||
{{end}}
|
||||
|
||||
{{define "admin_projects_partial.html"}}
|
||||
{{template "admin_tabs_oob" .}}
|
||||
{{template "admin_flash_oob" .}}
|
||||
{{template "admin_projects_panel" .}}
|
||||
{{end}}
|
||||
|
||||
{{define "admin_projects_panel"}}
|
||||
<section class="grid gap-6">
|
||||
<section class="bg-white p-6 shadow-sm">
|
||||
<h1 class="mb-6 text-2xl font-semibold">Add Project</h1>
|
||||
<form method="post" action="/admin/projects" enctype="multipart/form-data" class="grid gap-4 md:grid-cols-2">
|
||||
<input name="title" required placeholder="Title" class="border px-3 py-2">
|
||||
<input name="slug" placeholder="Slug, optional" class="border px-3 py-2">
|
||||
<input name="location" required placeholder="Location" class="border px-3 py-2">
|
||||
<input name="year" required placeholder="Year" class="border px-3 py-2">
|
||||
<input name="category" required placeholder="Category" class="border px-3 py-2">
|
||||
<label class="flex items-center gap-2 border px-3 py-2 text-sm"><input name="featured" type="checkbox"> Featured</label>
|
||||
<textarea name="description" required rows="4" placeholder="Description" class="border px-3 py-2 md:col-span-2"></textarea>
|
||||
<input name="cover_image" type="file" accept="image/png,image/jpeg,image/webp,image/gif" class="border px-3 py-2 md:col-span-2">
|
||||
<button class="w-fit bg-neutral-950 px-5 py-3 text-sm uppercase tracking-[0.18em] text-white md:col-span-2">Create project</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="grid gap-6">
|
||||
<h2 class="text-2xl font-semibold">Projects</h2>
|
||||
{{range .Projects}}
|
||||
<article class="bg-white p-6 shadow-sm">
|
||||
<form method="post" action="/admin/projects/{{.ID}}" enctype="multipart/form-data" class="grid gap-4 md:grid-cols-2">
|
||||
<input type="hidden" name="cover_image_current" value="{{.CoverImage}}">
|
||||
<input name="title" value="{{.Title}}" class="border px-3 py-2">
|
||||
<input name="slug" value="{{.Slug}}" class="border px-3 py-2">
|
||||
<input name="location" value="{{.Location}}" class="border px-3 py-2">
|
||||
<input name="year" value="{{.Year}}" class="border px-3 py-2">
|
||||
<input name="category" value="{{.Category}}" class="border px-3 py-2">
|
||||
<label class="flex items-center gap-2 border px-3 py-2 text-sm"><input name="featured" type="checkbox" {{if .Featured}}checked{{end}}> Featured</label>
|
||||
<textarea name="description" rows="4" class="border px-3 py-2 md:col-span-2">{{.Description}}</textarea>
|
||||
<div class="grid gap-3 md:col-span-2 md:grid-cols-[120px_1fr] md:items-center">
|
||||
<img src="{{.CoverImage}}" alt="" class="h-24 w-24 object-cover">
|
||||
<input name="cover_image" type="file" accept="image/png,image/jpeg,image/webp,image/gif" class="border px-3 py-2">
|
||||
</div>
|
||||
<button class="w-fit bg-neutral-950 px-5 py-3 text-sm uppercase tracking-[0.18em] text-white">Save</button>
|
||||
</form>
|
||||
<form method="post" action="/admin/projects/{{.ID}}/delete" class="mt-3">
|
||||
<button class="text-sm text-red-700">Delete project</button>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 border-t pt-5">
|
||||
<h3 class="mb-3 font-semibold">Gallery</h3>
|
||||
<div class="mb-4 grid gap-3 sm:grid-cols-3 md:grid-cols-5">
|
||||
{{range .Images}}
|
||||
<div>
|
||||
<img src="{{.Path}}" alt="{{.Caption}}" class="aspect-square w-full object-cover">
|
||||
<form method="post" action="/admin/project-images/{{.ID}}/delete" class="mt-1"><button class="text-xs text-red-700">Remove</button></form>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
<form method="post" action="/admin/projects/{{.ID}}/images" enctype="multipart/form-data" class="grid gap-3 md:grid-cols-[1fr_1fr_auto]">
|
||||
<input name="caption" placeholder="Caption" class="border px-3 py-2">
|
||||
<input name="image" type="file" accept="image/png,image/jpeg,image/webp,image/gif" required class="border px-3 py-2">
|
||||
<button class="bg-neutral-950 px-5 py-2 text-sm uppercase tracking-[0.18em] text-white">Add image</button>
|
||||
</form>
|
||||
</div>
|
||||
</article>
|
||||
{{end}}
|
||||
</section>
|
||||
</section>
|
||||
{{end}}
|
||||
@@ -0,0 +1,35 @@
|
||||
{{define "head"}}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{if .Title}}{{.Title}} | {{end}}Archi Folio</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
||||
<link rel="stylesheet" href="/static/styles.css">
|
||||
<script defer src="/static/app.js"></script>
|
||||
</head>
|
||||
<body class="bg-neutral-50 text-neutral-950 antialiased">
|
||||
{{end}}
|
||||
|
||||
{{define "site_header"}}
|
||||
<header data-site-header class="fixed inset-x-0 top-0 z-40 transition-all duration-300 {{if eq .Active "home"}}py-7 text-white{{else}}bg-neutral-50/95 py-4 shadow-sm backdrop-blur text-neutral-950{{end}}">
|
||||
<div class="mx-auto flex max-w-7xl items-center justify-between px-5 md:px-8">
|
||||
<a href="/" class="text-xl font-semibold tracking-normal md:text-3xl" data-header-brand hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">Archi Folio</a>
|
||||
<nav class="flex items-center gap-4 text-sm uppercase tracking-[0.18em] md:gap-8" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
|
||||
<a class="hover:opacity-60 {{if eq .Active "projects"}}font-semibold{{end}}" href="/projects">Projects</a>
|
||||
<a class="hover:opacity-60 {{if eq .Active "about"}}font-semibold{{end}}" href="/about">About</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
{{end}}
|
||||
|
||||
{{define "footer"}}
|
||||
<footer class="border-t border-neutral-200 px-5 py-10 text-sm text-neutral-500 md:px-8">
|
||||
<div class="mx-auto flex max-w-7xl flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<p>© 2026 Archi Folio</p>
|
||||
<p>{{.Content.Email}} · {{.Content.Location}}</p>
|
||||
</div>
|
||||
</footer>
|
||||
{{end}}
|
||||
@@ -0,0 +1,2 @@
|
||||
{{if .Success}}<p class="border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{.Success}}</p>{{end}}
|
||||
{{if .Error}}<p class="border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-900">{{.Error}}</p>{{end}}
|
||||
@@ -0,0 +1,44 @@
|
||||
{{template "head" .}}
|
||||
{{template "site_header" .}}
|
||||
<main>
|
||||
<section class="relative min-h-[92vh] overflow-hidden bg-neutral-950">
|
||||
<img src="{{.Content.HeroImage}}" alt="" class="absolute inset-0 h-full w-full object-cover opacity-90">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-black/35 via-black/5 to-black/55"></div>
|
||||
<div class="relative mx-auto flex min-h-[92vh] max-w-7xl flex-col justify-end px-5 pb-16 text-white md:px-8 md:pb-20">
|
||||
<p class="mb-4 max-w-xl text-sm uppercase tracking-[0.22em] text-white/75">{{.Content.HeroSubtitle}}</p>
|
||||
<h1 class="max-w-5xl text-5xl font-semibold leading-[0.95] md:text-8xl">{{.Content.HeroTitle}}</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mx-auto grid max-w-7xl gap-8 px-5 py-20 md:grid-cols-[0.8fr_1.2fr] md:px-8 md:py-28">
|
||||
<h2 class="text-3xl font-semibold md:text-5xl">{{.Content.IntroTitle}}</h2>
|
||||
<p class="max-w-2xl text-xl leading-relaxed text-neutral-600">{{.Content.IntroText}}</p>
|
||||
</section>
|
||||
|
||||
<section class="px-5 pb-24 md:px-8" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
|
||||
<div class="mx-auto mb-8 flex max-w-7xl items-end justify-between">
|
||||
<h2 class="text-2xl font-semibold md:text-4xl">Featured Projects</h2>
|
||||
<a href="/projects" class="text-sm uppercase tracking-[0.18em] text-neutral-500 hover:text-neutral-950">All work</a>
|
||||
</div>
|
||||
<div class="mx-auto grid max-w-7xl gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{{range .Projects}}
|
||||
<a href="/projects/{{.Slug}}" class="group block">
|
||||
<div class="aspect-square overflow-hidden bg-neutral-200">
|
||||
<img src="{{.CoverImage}}" alt="{{.Title}}" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
|
||||
</div>
|
||||
<div class="mt-3 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-medium">{{.Title}}</h3>
|
||||
<p class="text-sm text-neutral-500">{{.Location}}</p>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-500">{{.Year}}</p>
|
||||
</div>
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{template "footer" .}}
|
||||
<div id="overlay-root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
<div data-overlay class="fixed inset-0 z-50 flex items-center justify-center bg-black/95 p-4 text-white md:p-8" role="dialog" aria-modal="true" aria-label="{{.Project.Title}} image viewer">
|
||||
<button type="button" data-overlay-close class="absolute right-4 top-4 z-10 rounded-full border border-white/30 px-4 py-2 text-sm uppercase tracking-[0.16em] text-white hover:bg-white hover:text-black">Close</button>
|
||||
<img src="{{.Image.Path}}" alt="{{.Image.Caption}}" class="max-h-full max-w-full object-contain">
|
||||
{{if .Image.Caption}}
|
||||
<p class="absolute bottom-4 left-4 right-4 text-center text-sm text-white/70">{{.Image.Caption}}</p>
|
||||
{{end}}
|
||||
</div>
|
||||
@@ -0,0 +1,31 @@
|
||||
{{template "head" .}}
|
||||
{{template "site_header" .}}
|
||||
<main class="pt-28 md:pt-36">
|
||||
<section class="mx-auto max-w-7xl px-5 md:px-8">
|
||||
<p class="mb-4 text-sm uppercase tracking-[0.2em] text-neutral-500">{{.Project.Category}}</p>
|
||||
<div class="grid gap-8 md:grid-cols-[1.2fr_0.8fr] md:items-end">
|
||||
<h1 class="text-5xl font-semibold leading-none md:text-8xl">{{.Project.Title}}</h1>
|
||||
<div class="grid grid-cols-3 gap-4 border-t border-neutral-200 pt-4 text-sm">
|
||||
<div><p class="text-neutral-500">Location</p><p>{{.Project.Location}}</p></div>
|
||||
<div><p class="text-neutral-500">Year</p><p>{{.Project.Year}}</p></div>
|
||||
<div><p class="text-neutral-500">Type</p><p>{{.Project.Category}}</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-10 max-w-3xl text-xl leading-relaxed text-neutral-600">{{.Project.Description}}</p>
|
||||
</section>
|
||||
|
||||
<section class="mx-auto mt-14 max-w-7xl px-5 pb-24 md:px-8">
|
||||
<div class="grid gap-5">
|
||||
{{range .Project.Images}}
|
||||
<button type="button" class="group block w-full text-left" hx-get="/projects/{{$.Project.Slug}}/images/{{.ID}}/overlay" hx-target="#overlay-root" hx-swap="innerHTML transition:true">
|
||||
<img src="{{.Path}}" alt="{{.Caption}}" class="max-h-[86vh] w-full bg-neutral-200 object-cover transition duration-500 group-hover:brightness-90">
|
||||
{{if .Caption}}<span class="mt-2 block text-sm text-neutral-500">{{.Caption}}</span>{{end}}
|
||||
</button>
|
||||
{{end}}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{template "footer" .}}
|
||||
<div id="overlay-root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,28 @@
|
||||
{{template "head" .}}
|
||||
{{template "site_header" .}}
|
||||
<main class="mx-auto max-w-7xl px-5 pb-24 pt-32 md:px-8 md:pt-40">
|
||||
<div class="mb-10 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
|
||||
<div>
|
||||
<p class="mb-3 text-sm uppercase tracking-[0.2em] text-neutral-500">Selected work</p>
|
||||
<h1 class="text-5xl font-semibold md:text-7xl">Projects</h1>
|
||||
</div>
|
||||
<p class="max-w-md text-neutral-600">A visual index of architectural and interior design work.</p>
|
||||
</div>
|
||||
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4" hx-boost="true" hx-target="body" hx-swap="outerHTML transition:true">
|
||||
{{range .Projects}}
|
||||
<a href="/projects/{{.Slug}}" class="group block">
|
||||
<div class="aspect-square overflow-hidden bg-neutral-200">
|
||||
<img src="{{.CoverImage}}" alt="{{.Title}}" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<h2 class="text-lg font-medium">{{.Title}}</h2>
|
||||
<p class="text-sm text-neutral-500">{{.Location}} · {{.Year}}</p>
|
||||
</div>
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
</main>
|
||||
{{template "footer" .}}
|
||||
<div id="overlay-root"></div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user