Developer Spotlight: Hampton (#28)

* Developer Spotlight: Hampton

* Add OG image for Hampton dev spotlight blog post

* Use ogImage in blog listing when available

Prefer ogImage over image in BlogSection component, matching the
behavior of the blog post detail page. This allows blog posts with
custom OG images (1200x630) to display them in the listing page
instead of the square images (1200x1200).

Follows the same pattern established in PR #25 for the detail page.

* Typo and grammar fixes

* Update publish date

* Minor changes towards end.

* Add date prefixes to blog post filenames for better organization

- Renamed all blog posts to include YYYY-MM-DD prefix
- Improves chronological sorting in file explorer
- URLs remain unchanged (controlled by slug field)
- Makes it easier for writers to see post dates at a glance

---------

Co-authored-by: Tania Chakraborty <tchakraborty@block.xyz>
Co-authored-by: Tania <126204004+taniacryptid@users.noreply.github.com>

Author: 3 people

src/assets/blog/hampton-og.png

@@ -18,6 +18,7 @@ interface BlogPost {
     date: string;
     excerpt: string;
     image?: string;
+    ogImage?: string;
     tags?: string[];
     readTime?: string;
   }
@@ -99,15 +100,15 @@ const getAuthorName = (authorId: string) => {
             layout === 'list' ? 'flex-row items-center md:flex-col' :
             layout === 'featured' && index === 0 ? 'col-span-full flex-row items-center p-8 md:flex-col md:p-6' : ''
           }`}>
-            {post.data.image && (
+            {(post.data.ogImage || post.data.image) && (
               <div class={`relative overflow-hidden ${
                 layout === 'grid' || (layout === 'featured' && index !== 0) ? 'aspect-video' :
                 layout === 'list' || (layout === 'featured' && index === 0) ? 'w-80 h-48 flex-shrink-0 md:w-full md:h-48' :
                 layout === 'modern' ? 'aspect-video' : ''
               }`}>
                 <a href={getPostURL(post)}>
                   <Image 
-                    src={images[imagePath + post.data.image]()}
+                    src={images[imagePath + (post.data.ogImage || post.data.image)]()}
                     alt={post.data.title}
                     width={800}
                     height={600}