feat(blog): enhance content styling and add new blog post with sharing capabilities

- Refine blog typography with optimized font sizes and line heights for better readability
- Adjust heading margins and sizes (h1-h4) for improved visual hierarchy
- Implement custom bullet styling with primary color indicators for lists
- Add highlighted key phrases styling with left border accent for emphasized content
- Create new BlogShare component for social sharing functionality
- Add Callout and PullQuote content components for enhanced blog formatting
- Introduce resume-button.css for improved button styling
- Update blog post template with slug-based routing support
- Add new blog post "Career Change: From Huawei to Frontend" in English and Persian
- Enhance portfolio components (Hero, Skills, AIStack, etc.) with refined styling
- Improve RTL language support with better spacing and alignment for Persian content
- Add blog hero image asset (big-career-change.webp)
- Update i18n translations for new blog content and UI improvements
- Optimize code block and inline code styling with CSS variables for consistency
- Refine blockquote styling with better contrast and spacing

app/components/blog/BlogShare.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+  url: string
+}>()
+
+const { t } = useI18n()
+
+const shareLinks = computed(() => ({
+  twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(props.title)}&url=${encodeURIComponent(props.url)}`,
+  linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(props.url)}`,
+  facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(props.url)}`,
+  telegram: `https://t.me/share/url?url=${encodeURIComponent(props.url)}&text=${encodeURIComponent(props.title)}`
+}))
+
+const toast = useToast()
+
+const copyToClipboard = async () => {
+  try {
+    if (navigator?.clipboard?.writeText) {
+      await navigator.clipboard.writeText(props.url)
+      toast.add({
+        title: t('blog.linkCopied') || 'Link copied!',
+        icon: 'i-heroicons-check-circle',
+        color: 'green'
+      })
+    } else {
+      // Fallback for older browsers
+      const textArea = document.createElement('textarea')
+      textArea.value = props.url
+      textArea.style.position = 'fixed'
+      textArea.style.left = '-999999px'
+      document.body.appendChild(textArea)
+      textArea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textArea)
+      toast.add({
+        title: t('blog.linkCopied') || 'Link copied!',
+        icon: 'i-heroicons-check-circle',
+        color: 'green'
+      })
+    }
+  } catch (err) {
+    console.error('Failed to copy:', err)
+    toast.add({
+      title: t('blog.copyFailed') || 'Failed to copy link',
+      icon: 'i-heroicons-x-circle',
+      color: 'red'
+    })
+  }
+}
+</script>
+
+<template>
+  <div
+    class="blog-share my-8 p-6 bg-gray-50 dark:bg-gray-900/50 rounded-lg border border-gray-200 dark:border-gray-800">
+    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+      <!-- Title -->
+      <div class="flex items-center gap-3">
+        <UIcon name="i-heroicons-share" class="w-5 h-5 text-primary-600 dark:text-primary-400" />
+        <span class="font-semibold text-gray-900 dark:text-gray-100">
+          {{ t('blog.sharePost') || 'Share this post' }}
+        </span>
+      </div>
+
+      <!-- Share Buttons -->
+      <div class="flex flex-wrap items-center gap-2">
+        <!-- Twitter -->
+        <UButton :to="shareLinks.twitter" target="_blank" rel="noopener noreferrer" color="gray" variant="ghost"
+          size="sm" icon="i-simple-icons-x" aria-label="Share on Twitter" />
+
+        <!-- LinkedIn -->
+        <UButton :to="shareLinks.linkedin" target="_blank" rel="noopener noreferrer" color="gray" variant="ghost"
+          size="sm" icon="i-simple-icons-linkedin" aria-label="Share on LinkedIn" />
+
+        <!-- Facebook -->
+        <UButton :to="shareLinks.facebook" target="_blank" rel="noopener noreferrer" color="gray" variant="ghost"
+          size="sm" icon="i-simple-icons-facebook" aria-label="Share on Facebook" />
+
+        <!-- Telegram -->
+        <UButton :to="shareLinks.telegram" target="_blank" rel="noopener noreferrer" color="gray" variant="ghost"
+          size="sm" icon="i-simple-icons-telegram" aria-label="Share on Telegram" />
+
+        <!-- Copy Link -->
+        <UButton @click="copyToClipboard" color="gray" variant="ghost" size="sm" icon="i-heroicons-link"
+          aria-label="Copy link" />
+      </div>
+    </div>
+  </div>
+</template>