Pictures page

src/components/sections/PictureGrid.astro

@@ -0,0 +1,20 @@
+---
+import ImageGridItem from "../utils/PictureGridItem.astro";
+
+const images = await Astro.glob("/src/images/sunset/*").then((files) => {
+    return files
+        .map((file) => file.default)
+        .sort((a, b) =>
+            Number(a.src.split("/").pop().split(".")[0]) >
+            Number(b.src.split("/").pop().split(".")[0])
+                ? 1
+                : -1
+        );
+});
+
+console.log(images);
+---
+
+<div class="ui stackable two column grid">
+    {images.map((image) => <ImageGridItem image={image} />)}
+</div>

src/components/utils/PictureGridItem.astro

@@ -0,0 +1,34 @@
+---
+import { Image } from "astro:assets";
+import data from "../../data/pictures.json";
+
+interface ImageData {
+    [key: string]: {
+        location: string;
+    };
+}
+const imageData: ImageData = data;
+
+interface Props {
+    image: any;
+}
+
+const { image }: Props = Astro.props;
+const name = image.src.split("/").pop().split(".")[0];
+---
+
+<div class="column">
+    <div class="picture-grid-item">
+        <Image src={image} width={400} alt="" />
+        <em>{imageData[name].location}</em>
+    </div>
+</div>
+
+<style>
+    .picture-grid-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+    }
+</style>

src/data/pictures.json

@@ -0,0 +1,53 @@
+{
+    "1": {
+        "location": "Michigan"
+    },
+    "2": {
+        "location": "Ann Arbor, MI"
+    },
+    "3": {
+        "location": "San Mateo, CA"
+    },
+    "4": {
+        "location": "Ann Arbor, MI"
+    },
+    "5": {
+        "location": "Millbrae, CA"
+    },
+    "6": {
+        "location": "Ann Arbor, MI"
+    },
+    "7": {
+        "location": "Ann Arbor, MI"
+    },
+    "8": {
+        "location": "Yosemite, CA"
+    },
+    "9": {
+        "location": "Ann Arbor, MI"
+    },
+    "10": {
+        "location": "Millbrae, CA"
+    },
+    "11": {
+        "location": "Lands End, CA"
+    },
+    "12": {
+        "location": "San Mateo, CA"
+    },
+    "13": {
+        "location": "Lands End, CA"
+    },
+    "14": {
+        "location": "San Mateo, CA"
+    },
+    "15": {
+        "location": "Ann Arbor, MI"
+    },
+    "16": {
+        "location": "Half Moon Bay, CA"
+    },
+    "17": {
+        "location": "Michigan"
+    }
+}

src/pages/pictures.astro

@@ -0,0 +1,26 @@
+---
+import PictureGrid from "../components/sections/PictureGrid.astro";
+import PageWrapper from "../layouts/PageWrapper.astro";
+---
+
+<PageWrapper
+    title="Melina O'Dell"
+    description="Melina O'Dell"
+    keywords={["melodell, Melina O'Dell"]}
+    author="Melina O'Dell"
+    useFomantic={true}
+>
+    <main class="ui center aligned container">
+        <h1>Pictures</h1>
+        <p>I take a lot of pictures. Here are some of them.</p>
+        <PictureGrid />
+    </main>
+</PageWrapper>
+
+<style>
+    /* Fomantic overrides */
+    .ui.container {
+        max-width: 933px;
+        margin-top: 25px;
+    }
+</style>