Added previous photo layout, will definitely change. Also going back and forth on font choice still

web/src/pages/photos/index.astro

@@ -1,17 +1,50 @@
 ---
 import Base from "src/layout/Base.astro"
 import Sidebar from "src/components/sidebar.astro"
+import { authPB } from 'src/utils/pocketbase'
+import type { RecordModel } from 'pocketbase'
+
+export const prerender = false
+
+const pb = await authPB()
+const photos = await pb.collection('photos').getFullList({
+    sort: '-created'
+})
+
+const getImageLink = async (record: RecordModel) => {
+    const link = await pb.files.getURL(record, record.image)
+    return link.substring(21)
+}
 ---
 
 <Base>
-	<div class="flex flex-row">
-		<Sidebar>
+    <div class="flex flex-row">
+        <Sidebar>
             <p class="text-2xl">Photography :)</p>
             Chuck me an email if you'd like a print of these, I'll see what I can do
         </Sidebar>
-
-		<div class="content-panel">
-			PHOTOSSSSSSSSS
-		</div>
-	</div>
+        
+        <div class="content-panel">
+            {
+                photos.map(photo => (
+                <div class="max-w-md  overflow-hidden md:max-w-2xl md:my-2">
+                    <div class="md:flex">
+                        <div class="md:shrink-0">
+                            <img class="h-full w-full object-cover md:h-full md:w-96" src={ pb.files.getURL(photo, photo.image, {'thumb': '1080x0'}) } alt={photo.alt}>
+                        </div>
+                        <div class="md:pl-4 md:mt-2 mb-8 mt-3">
+                            <div class="bold text-xl">{photo.title === "" ? "Untitled" : photo.title}</div>
+                            
+                            <div class="pt-2">
+                                <p>📌 {photo.location}</p>
+                                <p>📷 {photo.camera}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                ))
+            }
+            
+        </div>
+    </div>
 </Base>

web/src/styles/global.css

@@ -8,6 +8,14 @@
     font-display: swap;
     src: url("/fonts/barnum-roman.ttf");
   }
+
+  @font-face {
+    font-family: Warbler;
+    font-style: normal;
+    font-weight: 200 700;
+    font-display: swap;
+    src: url("/fonts/warbler-var.woff2");
+  }
   
   :root {
     --bg-light: #f4f4f9;
@@ -15,7 +23,7 @@
   }
   
   html body {
-    @apply font-[Barnum];
+    @apply font-[Georgia];
     @apply w-[68%] mx-auto h-full;
     @apply bg-(--bg-light);
   }
@@ -27,7 +35,7 @@
 }
 
 .content-panel {
-  @apply w-[68%] my-25;
+  @apply w-[68%] my-25 pl-10;
 }
 
 @tailwind utilities;

web/src/utils/pocketbase.ts

@@ -1,6 +1,7 @@
 import PocketBase from "pocketbase";
 
-const pb = new PocketBase("/");
+const pb = new PocketBase("http://localhost:4321");
+pb.autoCancellation(false)
 
 export const authPB = async () => {
   if (!pb.authStore.isValid) {