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>