diff --git a/src/components/sections/PictureGrid.astro b/src/components/sections/PictureGrid.astro
new file mode 100644
index 0000000..5e44ca1
--- /dev/null
+++ b/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);
+---
+
+
+ {images.map((image) => )}
+
diff --git a/src/components/utils/PictureGridItem.astro b/src/components/utils/PictureGridItem.astro
new file mode 100644
index 0000000..4a6bcb5
--- /dev/null
+++ b/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];
+---
+
+
+
+
+ {imageData[name].location}
+
+
Pictures
+ I take a lot of pictures. Here are some of them.
+
+
+
+
+