Adds photography page

dankraus · Nov 4, 2023 · cd8e326 · cd8e326
1 parent 7007be7
commit cd8e326
Show file tree

Hide file tree

Showing 28 changed files with 265 additions and 3 deletions.
diff --git a/public/imagesloaded.pkgd.min.js b/public/imagesloaded.pkgd.min.js
diff --git a/public/masonry.pkgd.min.js b/public/masonry.pkgd.min.js
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -3,7 +3,7 @@
   <nav>
     <div class="nav-links">
       <a href="/">Home</a>
-      <!-- <a href="/about/">About</a> -->
+      <a href="/photographs/">Photographs</a>
       <!-- <a href="/projects/">Projects</a> -->
       <!-- <a href="/blog/">Blog</a> -->
     </div>

diff --git a/src/images/photos/alley.jpg b/src/images/photos/alley.jpg
diff --git a/src/images/photos/art-gallery.jpg b/src/images/photos/art-gallery.jpg
diff --git a/src/images/photos/castle.jpg b/src/images/photos/castle.jpg
diff --git a/src/images/photos/chinatown-cards.jpg b/src/images/photos/chinatown-cards.jpg
diff --git a/src/images/photos/dublin-street.jpg b/src/images/photos/dublin-street.jpg
diff --git a/src/images/photos/ferry-binos.jpg b/src/images/photos/ferry-binos.jpg
diff --git a/src/images/photos/ft-lauderdale-balcony.jpg b/src/images/photos/ft-lauderdale-balcony.jpg
diff --git a/src/images/photos/ft-lauderdale-lamppost.jpg b/src/images/photos/ft-lauderdale-lamppost.jpg
diff --git a/src/images/photos/ft-lauderdale-rooftops.jpg b/src/images/photos/ft-lauderdale-rooftops.jpg
diff --git a/src/images/photos/globe-bar-graffiti.jpg b/src/images/photos/globe-bar-graffiti.jpg
diff --git a/src/images/photos/hancock.jpg b/src/images/photos/hancock.jpg
diff --git a/src/images/photos/innis-doolin.jpg b/src/images/photos/innis-doolin.jpg
diff --git a/src/images/photos/lloyd-bw.jpg b/src/images/photos/lloyd-bw.jpg
diff --git a/src/images/photos/moher-obrien.jpg b/src/images/photos/moher-obrien.jpg
diff --git a/src/images/photos/red-room.jpg b/src/images/photos/red-room.jpg
diff --git a/src/images/photos/sleahead.jpg b/src/images/photos/sleahead.jpg
diff --git a/src/images/photos/the-sleeping-doug.jpg b/src/images/photos/the-sleeping-doug.jpg
diff --git a/src/images/photos/the-sleeping-scream.jpg b/src/images/photos/the-sleeping-scream.jpg
diff --git a/src/images/photos/the-sleeping-shared-mic.jpg b/src/images/photos/the-sleeping-shared-mic.jpg
diff --git a/src/images/photos/torc-waterfall.jpg b/src/images/photos/torc-waterfall.jpg
diff --git a/src/images/photos/trinity-library.jpg b/src/images/photos/trinity-library.jpg
diff --git a/src/images/photos/vw-reflection.jpg b/src/images/photos/vw-reflection.jpg
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -36,6 +36,8 @@ const { pageTitle } = Astro.props;
 
   gtag("config", "G-47XQNS47FG");
 </script>
+<script src="/masonry.pkgd.min.js" is:inline></script>
+<script src="/imagesloaded.pkgd.min.js" is:inline></script>
 
 <body>
   <div class="page-wrapper">

diff --git a/src/pages/photographs.astro b/src/pages/photographs.astro
@@ -0,0 +1,196 @@
+---
+import { Image } from "astro:assets";
+import BaseLayout from "@layouts/BaseLayout.astro";
+
+import alley from "@images/photos/alley.jpg";
+import artGallery from "@images/photos/art-gallery.jpg";
+import castle from "@images/photos/castle.jpg";
+import chinatownCards from "@images/photos/chinatown-cards.jpg";
+import dublinStreet from "@images/photos/dublin-street.jpg";
+import ferryBinos from "@images/photos/ferry-binos.jpg";
+import ftLauderdaleBalcony from "@images/photos/ft-lauderdale-balcony.jpg";
+import ftLauderdaleLamppost from "@images/photos/ft-lauderdale-lamppost.jpg";
+import globeBarGraffiti from "@images/photos/globe-bar-graffiti.jpg";
+import vwReflection from "@images/photos/vw-reflection.jpg";
+import trinityLibrary from "@images/photos/trinity-library.jpg";
+import hancock from "@images/photos/hancock.jpg";
+import innisDoolin from "@images/photos/innis-doolin.jpg";
+import lloydBw from "@images/photos/lloyd-bw.jpg";
+import moherObrien from "@images/photos/moher-obrien.jpg";
+import redRoom from "@images/photos/red-room.jpg";
+import sleahead from "@images/photos/sleahead.jpg";
+import theSleepingDoug from "@images/photos/the-sleeping-doug.jpg";
+import theSleepingScream from "@images/photos/the-sleeping-scream.jpg";
+import theSleepingSharedMic from "@images/photos/the-sleeping-shared-mic.jpg";
+import torcWaterfall from "@images/photos/torc-waterfall.jpg";
+
+import stairs from "@images/about/stairs.jpg";
+
+const pageTitle = "Photos";
+---
+
+<BaseLayout pageTitle={pageTitle}>
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      // Initialize Masonry after the DOM has loaded
+      var gallery = document.querySelector(".gallery");
+      var masonry = new Masonry(gallery, {
+        itemSelector: ".gallery-item",
+        columnWidth: ".gallery-sizer",
+        gutter: 10, // Adjust the horizontal spacing between columns
+      });
+    });
+  </script>
+
+  <p>A collection of photos on film and digital.</p>
+
+  <div class="gallery">
+    <div class="gallery-sizer"></div>
+    <div class="gallery-item">
+      <Image src={alley} width="485" title="alley" alt="alley" />
+    </div>
+    <div class="gallery-item">
+      <Image
+        src={vwReflection}
+        width="485"
+        title="Street Reflection"
+        alt="Street Reflection"
+      />
+    </div>
+    <div class="gallery-item">
+      <Image
+        src={artGallery}
+        width="485"
+        title="Art Gallery in Dublin"
+        alt="Art Gallery in Dublin"
+      />
+    </div>
+    <div class="gallery-item">
+      <Image
+        src={chinatownCards}
+        width="485"
+        title="Cards in Chinatown"
+        alt="Group of men playing cards in Chinatown Boston"
+      />
+    </div>
+    <div class="gallery-item">
+      <Image
+        src={castle}
+        width="485"
+        title="Dunguaire Castle"
+        alt="Dunguaire Castle in Ireland"
+      />
+    </div>
+    <div class="gallery-item">
+      <Image
+        src={hancock}
+        width="485"
+        title="Hancock Tower"
+        alt="Reflection in Hancock Tower"
+      />
+    </div>
+    <div class="gallery-item">
+      <Image
+        src={ferryBinos}
+        width="485"
+        title="Binocoulars on the Ferry"
+        alt="Binocoulars on the Ferry"
+      />
+    </div>
+    <div class="gallery-item">
+      <Image
+        src={ftLauderdaleBalcony}
+        width="485"
+        title="Balcony View in Ft. Lauderdale"
+        alt="Balcony View in Ft. Lauderdale"
+      />
+    </div>
+    <div class="gallery-item">
+      <Image
+        src={ftLauderdaleLamppost}
+        width="485"
+        title="Lampost in Ft. Lauderdale"
+        alt="Lampost in Ft. Lauderdale"
+      />
+    </div>
+    <div class="gallery-item">
+      <Image
+        src={globeBarGraffiti}
+        width="485"
+        title="The Old Globe Bar"
+        alt="The Old Globe Bar"
+      />
+    </div>
+
+    <div class="gallery-item">
+      <Image
+        src={innisDoolin}
+        width="485"
+        title="Doolin to Arran Islands"
+        alt="Doolin to Arran Islands"
+      />
+    </div>
+    <div class="gallery-item">
+      <Image src={lloydBw} width="485" title="lloydBw" alt="lloydBw" />
+    </div>
+    <div class="gallery-item">
+      <Image
+        src={moherObrien}
+        width="485"
+        title="Cliffs of Moher"
+        alt="Cliffs of Moher"
+      />
+    </div>
+    <div class="gallery-item">
+      <Image src={redRoom} width="485" title="Red Library" alt="Red Library" />
+    </div>
+    <div class="gallery-item">
+      <Image
+        src={sleahead}
+        width="485"
+        title="Sleahead Drive"
+        alt="Sleahead Drive"
+      />
+    </div>
+    <div class="gallery-item">
+      <Image
+        src={trinityLibrary}
+        width="485"
+        title="Trinity College Library"
+        alt="Trinity College Library"
+      />
+    </div>
+    <div class="gallery-item">
+      <Image
+        src={theSleepingDoug}
+        width="485"
+        title="The Sleeping"
+        alt="The Sleeping"
+      />
+    </div>
+    <div class="gallery-item">
+      <Image
+        src={theSleepingScream}
+        width="485"
+        title="The Sleeping"
+        alt="The Sleeping"
+      />
+    </div>
+    <div class="gallery-item">
+      <Image
+        src={theSleepingSharedMic}
+        width="485"
+        title="The Sleeping"
+        alt="The Sleeping"
+      />
+    </div>
+    <div class="gallery-item">
+      <Image
+        src={torcWaterfall}
+        width="485"
+        title="Torc Waterfall"
+        alt="Torc Waterfall"
+      />
+    </div>
+  </div>
+</BaseLayout>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -17,6 +17,11 @@ h3 {
     text-transform: uppercase;
 }
 
+p {
+    font-size: 1rem;
+    line-height: 1.5rem;
+}
+
 /* @media screen and (min-width: 990px) { */
 .page-wrapper {
     width: 100%;
@@ -89,9 +94,10 @@ footer a:hover {
     color: gray;
 }
 
+/* ABOUT PAGE */
+
 .about-images {
     margin: 40px 0px;
-    ;
 }
 
 .item {
@@ -134,4 +140,41 @@ footer a:hover {
 
 .item:nth-of-type(6) {
     transform: rotate(-4deg);
-}
+}
+
+/* PHOTOGRAPHS PAGE */
+
+.gallery {
+    /* Set the number of columns */
+    column-count: 2;
+    /* Adjust the horizontal spacing between columns */
+    column-gap: 10px;
+}
+
+.gallery-item {
+    /* Prevent items from breaking across columns */
+    break-inside: avoid-column;
+    /* Adjust the vertical spacing between items */
+    margin-bottom: 10px;
+}
+
+.gallery-item img {
+    max-width: 100%;
+    /* max-width: 485px; */
+    height: auto;
+    display: block;
+}
+
+/* Media query for small screens (e.g., screens narrower than 768px) */
+@media (max-width: 768px) {
+    .gallery {
+        /* Display one column for small screens */
+        column-count: 1;
+    }
+}
+
+/* @media (max-width: 1000px) {
+    .gallery-item img {
+        max-width: 200px;
+    }
+} */