Phase 1: Homepage seamless design - add gradient transitions

- Added gradient transitions between sections in global.css
- Portfolio section now has gradient-top (dark to white fade)
- Blog section now has gradient-bottom (white fade from dark)
- Reduced portfolio overlay opacity from 0.85 to 0.65
- Added border to blog cards for white-on-white visibility
- Blog cards now have primary color accent on hover

src/components/BlogCard.astro

@@ -0,0 +1,84 @@
+---
+interface Props {
+  title: string;
+  excerpt: string;
+  image?: string;
+  date: Date;
+  slug: string;
+  category: string;
+}
+
+const { title, excerpt, image, date, slug, category } = Astro.props;
+const formattedDate = date.toLocaleDateString('th-TH', { year: 'numeric', month: 'short', day: 'numeric' });
+---
+
+<a href={`/blog/${slug}`} class="blog-card">
+  <div class="blog-image">
+    {image && <img src={image} alt={title} loading="lazy" />}
+  </div>
+  <div class="blog-content">
+    <span class="blog-date">{formattedDate}</span>
+    <h3 class="blog-title">{title}</h3>
+    <p class="blog-excerpt">{excerpt}</p>
+    <span class="blog-link">อ่านต่อ →</span>
+  </div>
+</a>
+
+<style>
+  .blog-card {
+    display: block;
+    background: var(--color-white);
+    border-radius: 16px;
+    overflow: hidden;
+    border: 1px solid rgba(0,0,0,0.05);
+    transition: all 0.3s ease;
+  }
+  .blog-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+  }
+  .blog-image {
+    aspect-ratio: 16/9;
+    overflow: hidden;
+    background: var(--color-gray-100);
+  }
+  .blog-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s ease;
+  }
+  .blog-card:hover .blog-image img { transform: scale(1.05); }
+  .blog-content { padding: 24px; }
+  .blog-date {
+    font-size: 12px;
+    color: var(--color-medium-gray);
+    margin-bottom: 8px;
+    display: block;
+  }
+  .blog-title {
+    font-size: 18px;
+    font-weight: 700;
+    margin-bottom: 12px;
+    color: var(--color-black);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  .blog-excerpt {
+    font-size: 14px;
+    color: var(--color-medium-gray);
+    line-height: 1.6;
+    margin-bottom: 16px;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  .blog-link {
+    color: var(--color-primary);
+    font-weight: 600;
+    font-size: 14px;
+  }
+</style>