tmakin/wedding-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update img loading and mobile

Browse Source
This commit is contained in:
Thomas Makin
2026-05-23 15:22:54 -05:00
parent 4d9ca845b3
commit eced810dcd
6 changed files with 67 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Layout.tsx
+10 -16
View File
@@ -58,11 +58,13 @@ function Shell({ children }: { children: React.ReactNode }) {
<div className="text-bg bg-white dark:text-white dark:bg-bg font-fancy w-screen h-screen overflow-y-scroll scrollbar-thumb-pink-400 scrollbar-thin">
<div className="w-full h-full relative z-10 flex flex-col">
{/* mobile */}
<header className="flex md:hidden h-20 bg-light dark:bg-dark drop-shadow-md">
<div className="max-w-7xl mx-auto h-full flex flex-row p-4 gap-4 items-center">
<h1 className="text-xl cursor-pointer md:text-2xl hover:text-gray-500 transition duration-150 ease-in-out">
<NavLink to={{ pathname: "/" }}><strong>Katelynn & Thomas</strong></NavLink>
</h1>
<header className="flex shrink-0 md:hidden h-16 mb-2 bg-light dark:bg-dark drop-shadow-md">
<div className="max-w-7xl w-full h-full flex flex-row justify-center items-center p-4 gap-4">
<NavLink to={{ pathname: "/" }}>
<h1 className="text-2xl font-script font-bold cursor-pointer md:text-2xl hover:text-gray-500 transition duration-150 ease-in-out">
Katelynn & Thomas
</h1>
</NavLink>
<div className="justify-end ml-auto" />
<div className="justify-end h-full">
<BurgerIcon
@@ -70,21 +72,13 @@ function Shell({ children }: { children: React.ReactNode }) {
onClick={() => setMenu(!menu)}
/>
</div>
<div className="flex justify-end h-full">
<button onClick={toggleTheme}>
<MoonIcon
className="h-2/3 cursor-pointer hover:fill-gray-500 transition duration-150 ease-in-out"
fill={dark ? "white" : "black"}
/>
</button>
</div>
</div>
</header>
{/* desktop */}
<div className="flex flex-col justify-center">
<NavLink to={{ pathname: "/" }}>
<img src="/public/flowers-from-site.webp" className="w-full" />
<NavLink to={{ pathname: "/" }} className="flex flex-col items-center">
<img src="/public/flowers-from-site.webp?quality=60?size=1920" className="w-full object-scale-down" width={1920} height={1080} fetchPriority="high" />
<h1 className="text-6xl text-center font-bold font-script my-4">Katelynn & Thomas</h1>
</NavLink>
<h4 className="text-2xl text-center">March 6, 2027 · Anchorage, AK</h4>
@@ -112,7 +106,7 @@ function Shell({ children }: { children: React.ReactNode }) {
{/* mobile menu */}
<div
className={`fixed w-full top-20 left-0 right-0 bottom-0 z-50 bg-light dark:bg-dark transition-all duration-300 ease-in-out ${
className={`fixed w-full top-16 left-0 right-0 bottom-0 z-50 bg-light dark:bg-dark transition-all duration-300 ease-in-out ${
menu ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4 pointer-events-none"
}`}
>
src/Photos/Photos.tsx
+5 -2
View File
@@ -20,7 +20,7 @@ export function Photos() {
const { count } = useLoaderData();
let imgs = [];
for (let i = 1; i < count + 1; i++) {
const name = "/public/us/img_" + i.toString().padStart(3, '0') + ".jpg";
const name = "/public/us/img_" + i.toString().padStart(3, '0') + ".jpg?quality=60?size=1024";
const className = Math.floor(Math.random() * 3) ? "md:col-span-1" : "md:col-span-2";
imgs.push((
<div key={name} className={`${className} col-span-3 relative group h-100`}>
@@ -30,7 +30,10 @@ export function Photos() {
transition-all duration-150 ease-in-out
md:group-hover:scale-120 md:group-hover:z-50 md:group-hover:drop-shadow-2xl
relative md:group-hover:absolute md:group-hover:inset-0"
src={name} />
src={name}
height={1024}
width={1024}
/>
</div>
))
}
src/ThingsToDo/ThingsToDo.tsx
+36 -36
View File
@@ -30,13 +30,13 @@ export function ThingsToDo() {
<p className="text-lg italic">~5 mins from downtown Anchorage</p>
<div className="flex flex-row gap-4">
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/kincaid1.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/kincaid1.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/kincaid2.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/kincaid2.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/kincaid3.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/kincaid3.jpg?size=1024?quality=60" />
</div>
</div>
<p className="text-lg">
@@ -50,7 +50,7 @@ export function ThingsToDo() {
<p className="text-lg italic">~10 mins from downtown Anchorage</p>
<div className="flex flex-row gap-4">
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/marsh1.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/marsh1.jpg?size=1024?quality=60" />
</div>
</div>
<p className="text-lg">
@@ -63,10 +63,10 @@ export function ThingsToDo() {
<p className="text-lg italic">~15 mins from downtown Anchorage</p>
<div className="flex flex-row gap-4">
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/glenalps1.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/glenalps1.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/glenalps2.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/glenalps2.jpg?size=1024?quality=60" />
</div>
</div>
<p className="text-lg">
@@ -81,13 +81,13 @@ export function ThingsToDo() {
<p className="text-lg italic">~20 mins from downtown Anchorage</p>
<div className="flex flex-row gap-4">
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/belugapoint1.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/belugapoint1.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/belugapoint2.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/belugapoint2.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/belugapoint3.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/belugapoint3.jpg?size=1024?quality=60" />
</div>
</div>
<p className="text-lg">
@@ -109,13 +109,13 @@ export function ThingsToDo() {
<p className="text-lg italic">~45 mins from downtown Anchorage</p>
<div className="flex flex-row gap-4">
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/girdwood1.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/girdwood1.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/girdwood2.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/girdwood2.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/girdwood3.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/girdwood3.jpg?size=1024?quality=60" />
</div>
</div>
<p className="text-lg">
@@ -129,13 +129,13 @@ export function ThingsToDo() {
<p className="text-lg italic">~1 hour from downtown Anchorage</p>
<div className="flex flex-row gap-4">
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/awcc1.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/awcc1.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/awcc2.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/awcc2.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/awcc3.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/awcc3.jpg?size=1024?quality=60" />
</div>
</div>
<p className="text-lg">
@@ -149,13 +149,13 @@ export function ThingsToDo() {
<p className="text-lg italic">~1 hour from downtown Anchorage</p>
<div className="flex flex-row gap-4">
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/eklutna1.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/eklutna1.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/eklutna2.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/eklutna2.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/eklutna3.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/eklutna3.jpg?size=1024?quality=60" />
</div>
</div>
<p className="text-lg">
@@ -180,13 +180,13 @@ export function ThingsToDo() {
<p className="text-lg italic">~1.25 hours from Anchorage</p>
<div className="flex flex-row gap-4">
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/whittier1.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/whittier1.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/whittier2.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/whittier2.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/whittier3.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/whittier3.jpg?size=1024?quality=60" />
</div>
</div>
<p className="text-lg">
@@ -205,13 +205,13 @@ export function ThingsToDo() {
<p className="text-lg italic">~1.25 hours from Anchorage</p>
<div className="flex flex-row gap-4">
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/hatcher1.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/hatcher1.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/hatcher2.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/hatcher2.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/hatcher3.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/hatcher3.jpg?size=1024?quality=60" />
</div>
</div>
<p className="text-lg">
@@ -231,13 +231,13 @@ export function ThingsToDo() {
<p className="text-lg italic">~1.5 hours from Anchorage</p>
<div className="flex flex-row gap-4">
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/glenalps1.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/glenalps1.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/glenalps2.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/glenalps2.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/glenalps3.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/glenalps3.jpg?size=1024?quality=60" />
</div>
</div>
<p className="text-lg">
@@ -255,13 +255,13 @@ export function ThingsToDo() {
<p className="text-lg italic">~2 hours from Anchorage</p>
<div className="flex flex-row gap-4">
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/talkeetna1.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/talkeetna1.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/talkeetna2.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/talkeetna2.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/talkeetna3.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/talkeetna3.jpg?size=1024?quality=60" />
</div>
</div>
<p className="text-lg">
@@ -282,13 +282,13 @@ export function ThingsToDo() {
<p className="text-lg italic">~2.5 hours from Anchorage</p>
<div className="flex flex-row gap-4">
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/seward1.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/seward1.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/seward2.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/seward2.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/seward3.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/seward3.jpg?size=1024?quality=60" />
</div>
</div>
<p className="text-lg">
@@ -310,13 +310,13 @@ export function ThingsToDo() {
<p className="text-lg italic">~4 hours from Anchorage</p>
<div className="flex flex-row gap-4">
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/denali1.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/denali1.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/denali2.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/denali2.jpg?size=1024?quality=60" />
</div>
<div className="h-50">
<img className="w-full h-full object-cover" src="/public/denali3.jpg" />
<img className="w-full h-full object-cover" width={1024} height={1024} src="/public/denali3.jpg?size=1024?quality=60" />
</div>
</div>
<p className="text-lg">
src/Travel/Travel.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ export function Travel() {
Servicing Anchorage is <strong>Ted Stevens International Airport</strong>,
which has frequent flights from major US-based airlines.
</p>
<img src="/public/travel.svg"/>
<img src="/public/travel.svg?raw=1"/>
</div>
<div className="flex flex-col gap-2">
src/components/Sidebar.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
export function Sidebar() {
return (
<div className="hidden md:flex flex-col bg-light dark:bg-dark rounded-2xl drop-shadow-2xl col-span-1 p-6 gap-4 overflow-y-auto overflow-x-hidden">
<img src="/public/cherry-blossom.png" />
<img src="/public/cherry-blossom.png?size=180" />
<div className="flex flex-col">
<h4 className="text-3xl lg:text-4xl font-fancy text-center">MARCH</h4>
<h4 className="text-5xl lg:text-6xl font-fancy text-center"><strong>6</strong><sup className="text-sm italic align-[2em]">th</sup></h4>
src/index.ts
+14 -8
View File
@@ -8,18 +8,24 @@ const server = serve({
const url = new URL(req.url);
const filePath = `./${url.pathname}`;
const raw = parseInt(url.searchParams.get("raw") ?? "0", 10);
const size = parseInt(url.searchParams.get("size") ?? "0", 10);
const quality = parseInt(url.searchParams.get("quality") ?? "0", 10);
const file = Bun.file(filePath);
const exists = await file.exists();
if (exists) {
return new Response(
await file.image()
.resize(1024)
.webp({ quality: 80 })
.blob());
}
if (raw > 0)
return new Response(file);
return Response.json({ error: 'File not found' }, { status: 404 });
const img = file.image();
if (size > 0)
img.resize(size)
if (quality > 0)
img.webp({ quality })
return new Response(await img.blob());
}
return Response.json({ error: "File not found" }, { status: 404 });
},
"/api/getpics": async (req) => {