feat: add portfolio, blog, and contact features

src/components/sections/BlogPreview.astro

@@ -0,0 +1,86 @@
+---
+import FadeIn from '../ui/FadeIn.astro';
+
+const blogPosts = [
+  {
+    title: "Best Practices for Modern PHP Development",
+    excerpt: "Explore how to leverage PHP 8.x features and modern tools to create maintainable and performant PHP applications.",
+    date: "May 15, 2023",
+    slug: "best-practices-modern-php-development",
+    tags: ["PHP", "Development", "Best Practices"]
+  },
+  {
+    title: "Building Type-Safe APIs with TypeScript",
+    excerpt: "How to use TypeScript's powerful type system to create robust and maintainable API integrations in your frontend applications.",
+    date: "April 3, 2023",
+    slug: "building-type-safe-apis-typescript",
+    tags: ["TypeScript", "API", "Frontend"]
+  },
+  {
+    title: "Performance Optimization Techniques for Web Applications",
+    excerpt: "A comprehensive guide to identifying and solving performance bottlenecks in modern web applications.",
+    date: "March 12, 2023",
+    slug: "performance-optimization-web-applications",
+    tags: ["Performance", "Web", "Optimization"]
+  }
+];
+---
+
+<section id="blog" class="py-20 sm:py-32 px-4 sm:px-8 relative">
+  <div class="absolute inset-0 theme-bg-gradient opacity-30"></div>
+  
+  <div class="max-w-7xl mx-auto relative">
+    <FadeIn className="space-y-16">
+      <div class="space-y-6">
+        <div class="flex items-center justify-between">
+          <div>
+            <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold font-['DM_Sans'] tracking-tight theme-primary">
+              Blog
+            </h2>
+            <p class="font-['Instrument_Sans'] theme-secondary text-lg sm:text-xl max-w-3xl mt-4">
+              Thoughts, insights, and tutorials on software development and tech.
+            </p>
+          </div>
+        </div>
+      </div>
+      
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
+        {blogPosts.map((post) => (
+          <a 
+            href={`/blog/${post.slug}`} 
+            class="flex flex-col h-full theme-accent border theme-border rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 group"
+          >
+            <div class="p-6 sm:p-8 flex flex-col h-full">
+              <div class="flex-grow space-y-4">
+                <div class="space-y-1.5">
+                  <div class="flex gap-2 flex-wrap">
+                    {post.tags.map((tag) => (
+                      <span class="inline-flex px-2.5 py-1 rounded-lg text-xs font-medium theme-text-70 bg-black/10 font-['Instrument_Sans']">{tag}</span>
+                    ))}
+                  </div>
+                  <h3 class="text-xl font-bold theme-primary group-hover:underline decoration-1 underline-offset-2 font-['DM_Sans']">{post.title}</h3>
+                </div>
+                <p class="theme-secondary font-['Instrument_Sans'] text-sm sm:text-base leading-relaxed">{post.excerpt}</p>
+              </div>
+              
+              <div class="mt-6 pt-6 border-t theme-border flex items-center justify-between">
+                <span class="text-sm theme-text-70 font-['Instrument_Sans']">{post.date}</span>
+                <div class="p-2 rounded-full theme-accent group-hover:bg-opacity-100 transition-all">
+                  <svg 
+                    class="w-4 h-4 theme-primary transform group-hover:translate-x-1 transition-transform" 
+                    viewBox="0 0 24 24" 
+                    fill="none" 
+                    stroke="currentColor" 
+                    stroke-width="2"
+                  >
+                    <path d="M5 12h14M12 5l7 7-7 7"/>
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </a>
+        ))}
+      </div>
+    </FadeIn>
+  </div>
+</section>