Showcase: add kashinobu + gradient_projects videos, support vertical reels

website/app/globals.css

@@ -255,6 +255,21 @@ kbd {
   display: block;
 }
 
+/* Vertical (9:16) videos in the 16:9 frame: blurred fill behind, the full
+   still centered on top. */
+.showcase-card-video-vertical {
+  overflow: hidden;
+}
+
+.showcase-card-video img.showcase-thumb-backdrop {
+  filter: blur(18px) brightness(0.55);
+  transform: scale(1.15);
+}
+
+.showcase-card-video img.showcase-thumb-vertical {
+  object-fit: contain;
+}
+
 .showcase-play-icon {
   align-items: center;
   background: rgba(0, 0, 0, 0.72);

website/components/Videos.jsx

@@ -16,17 +16,38 @@ function extractYouTubeId(url) {
   return null;
 }
 
+// YouTube entries derive their thumbnail from the video id; other platforms
+// (e.g. Instagram reels) have no public thumbnail URL, so the entry carries a
+// `thumbnail` path to a still committed under public/videos/.
+function thumbnailFor(video) {
+  return video.thumbnail ?? `https://img.youtube.com/vi/${video.id}/mqdefault.jpg`;
+}
+
 const videoGrid = videos.map((video) => (
   <div key={video.id} className="showcase-card">
-    <div className="showcase-card-video">
+    <div
+      className={`showcase-card-video${video.vertical ? " showcase-card-video-vertical" : ""}`}
+    >
       <a
         href={video.url}
         target="_blank"
         rel="noopener noreferrer"
         aria-label={`Watch ${video.title} by ${video.author}`}
       >
+        {/* Vertical videos keep the grid's 16:9 frame: the still is shown
+            whole in the middle over a blurred copy of itself. */}
+        {video.vertical && (
+          <img
+            className="showcase-thumb-backdrop"
+            src={thumbnailFor(video)}
+            alt=""
+            aria-hidden="true"
+            loading="lazy"
+          />
+        )}
         <img
-          src={`https://img.youtube.com/vi/${video.id}/mqdefault.jpg`}
+          className={video.vertical ? "showcase-thumb-vertical" : undefined}
+          src={thumbnailFor(video)}
           alt={`${video.title} by ${video.author}`}
           loading="lazy"
         />

website/content/videos/videos.json

@@ -1,4 +1,24 @@
 [
+  {
+    "id": "rsW7TsaGWhs",
+    "title": "紀見峠ヒルクライム｜登りながら、ちょっと雑談。🚴⛰️",
+    "author": "kashinobu",
+    "url": "https://www.youtube.com/watch?v=rsW7TsaGWhs"
+  },
+  {
+    "id": "DazZu_GCFzW",
+    "title": "Death Ride — Monitor Pass descent to Topaz Lake",
+    "author": "gradient_projects",
+    "url": "https://www.instagram.com/reel/DazZu_GCFzW/",
+    "thumbnail": "/videos/DazZu_GCFzW.jpg",
+    "vertical": true
+  },
+  {
+    "id": "TBrBElTWGKk",
+    "title": "Cycling POV | Veleia Romana Climb. Power, Gradient & 2,000 Years of History",
+    "author": "Paolo Tagliaferri",
+    "url": "https://www.youtube.com/watch?v=TBrBElTWGKk"
+  },
   {
     "id": "JmavtEU6Vvo",
     "title": "Testing Cyclemetry",
@@ -22,11 +42,5 @@
     "title": "Seward Park Crit",
     "author": "Walker Sutton",
     "url": "https://www.youtube.com/watch?v=gKugPA0xGhw"
-  },
-  {
-    "id": "TBrBElTWGKk",
-    "title": "Cycling POV | Veleia Romana Climb. Power, Gradient & 2,000 Years of History",
-    "author": "Paolo Tagliaferri",
-    "url": "https://www.youtube.com/watch?v=TBrBElTWGKk"
   }
 ]