Added titles and some descriptions

src/data/photos.ts

@@ -0,0 +1,164 @@
+import type {PortfolioPhoto} from "src/types";
+
+export const photoPortfolio: PortfolioPhoto[] = [
+  {
+    title: "Hackberry Canyon",
+    description: "A resonant slot canyon in Capitol Reef.",
+  },
+  {
+    title: "Willow",
+    description: "Our sweet and wonderful Willow.",
+  },
+  {
+    title: "Optics",
+    description: "",
+  },
+  {
+    title: "Miwok Homes",
+    description: "",
+  },
+  {
+    title: "Radio Nowhere",
+    description: "",
+  },
+  {
+    title: "Ascent",
+    description: "",
+  },
+  {
+    title: "Mosquito Lake",
+    description: "Composed similarly to a photo by my late uncle Bob Hovey.",
+  },
+  {
+    title: "Trix Yogurt Sunset",
+    description: "",
+  },
+  {
+    title: "Crimson Butte",
+    description: "",
+  },
+  {
+    title: "Secluded Cove",
+    description: "",
+  },
+  {
+    title: "Three Phase",
+    description: "",
+  },
+  {
+    title: "Rayleigh's Gleaming",
+    description: "Taken after an early Winter storm.",
+  },
+  {
+    title: "Continuum",
+    description: "",
+  },
+  {
+    title: "Badlands",
+    description: "",
+  },
+  {
+    title: "Rhyolite",
+    description: "",
+  },
+  {
+    title: "Solar Quills",
+    description: "",
+  },
+  {
+    title: "Living in the Moment",
+    description: "",
+  },
+  {
+    title: "Lil Fren",
+    description: "",
+  },
+  {
+    title: "The Sisters",
+    description: "",
+  },
+  {
+    title: "Strata",
+    description: "",
+  },
+  {
+    title: "Shoreline",
+    description: "",
+  },
+  {
+    title: "Amador Iris",
+    description: "",
+  },
+  {
+    title: "Vein",
+    description: "",
+  },
+  {
+    title: "Lunar Eclipse",
+    description: "",
+  },
+  {
+    title: "Darmera Peltata",
+    description: "",
+  },
+  {
+    title: "Granite Spring",
+    description: "Taken using lens-whacking on a 50mm.",
+  },
+  {
+    title: "Hammock Horizon",
+    description: "",
+  },
+  {
+    title: "Caldor Burn Scar",
+    description: "",
+  },
+  {
+    title: "Tiger Pool",
+    description: "",
+  },
+  {
+    title: "Laminar",
+    description: "",
+  },
+  {
+    title: "Evening Lichen",
+    description: "",
+  },
+  {
+    title: "Electra Bloom",
+    description: "",
+  },
+  {
+    title: "Forgotten Garden",
+    description: "",
+  },
+  {
+    title: "All of Us, Stars",
+    description: "",
+  },
+  {
+    title: "Grand Teton",
+    description: "",
+  },
+  {
+    title: "Freel from Winemucca Lake",
+    description: "",
+  },
+  {
+    title: "Transmissions",
+    description: "",
+  },
+  {
+    title: "Batholiths",
+    description: "",
+  },
+  {
+    title: "Jade",
+    description: "",
+  },
+  {
+    title: "Orion Nebula",
+    description: "",
+  },
+].map((partial, i) => ({...partial, index: i + 1}));

src/lib/PhotographyPortfolio.svelte

@@ -4,15 +4,7 @@
   import PortfolioPhotoDisplay from "./PortfolioPhotoDisplay.svelte";
   import { currentView } from "../state/views";
   import { selectedPhoto } from "../state/photography";
-
-  const photoCount = 40;
-  const portfolio: PortfolioPhoto[] = Array(40)
-    .fill(null)
-    .map((_, i) => ({
-      index: i + 1,
-      title: `Photo ${i}`,
-      description: "TBD",
-    }));
+  import { photoPortfolio } from "../data/photos";
 
   const goBack = () => {
     currentView.setView(View.Main);
@@ -26,7 +18,7 @@
   <div class="photo-portfolio-container">
     {#if $selectedPhoto === null}
       <ul class="photo-list">
-        {#each portfolio as photo}
+        {#each photoPortfolio as photo}
           <PhotoThumbnail {photo} />
         {/each}
       </ul>

src/state/views.ts

@@ -2,7 +2,7 @@ import {View} from "../types";
 import {writable} from "svelte/store";
 
 function createState() {
-  const {subscribe, set} = writable<View>(View.Photos);
+  const {subscribe, set} = writable<View>(View.Main);
 
   return {
     subscribe,

src/styles/index.scss

@@ -438,6 +438,7 @@ button.back-button {
     span.photo-title {
       font-weight: bold;
       font-size: 1.5rem;
+      margin-bottom: 10px;
     }
   }