Initial commit

This commit is contained in:
V
2026-05-16 20:30:20 +01:00
commit b0b5c3bd08
34 changed files with 2356 additions and 0 deletions
+34
View File
@@ -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>
+52
View File
@@ -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}}
+42
View File
@@ -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}}
+18
View File
@@ -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>
+35
View File
@@ -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}}
+73
View File
@@ -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}}
+35
View File
@@ -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>&copy; 2026 Archi Folio</p>
<p>{{.Content.Email}} · {{.Content.Location}}</p>
</div>
</footer>
{{end}}
+2
View File
@@ -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}}
+44
View File
@@ -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>
+7
View File
@@ -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>
+31
View File
@@ -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>
+28
View File
@@ -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>