mirror of
https://github.com/mmahdium/portfolio.git
synced 2026-08-17 05:24:30 +03:30
mahdiarghyani
13031465e3
- 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
55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
author?: string
|
|
highlight?: boolean
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="pull-quote my-8 relative">
|
|
<div :class="[
|
|
'relative p-6 rounded-lg',
|
|
highlight
|
|
? 'bg-gradient-to-br from-primary-50 to-primary-100 dark:from-primary-950/40 dark:to-primary-900/40 border-2 border-primary-200 dark:border-primary-800'
|
|
: 'bg-gray-50 dark:bg-gray-900/50 border-l-4 border-primary-500 dark:border-primary-400'
|
|
]">
|
|
<!-- Quote Icon -->
|
|
<div class="absolute top-4 left-4 opacity-10 dark:opacity-5">
|
|
<UIcon name="i-heroicons-chat-bubble-left-right" class="w-16 h-16 text-primary-600" />
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="relative z-10">
|
|
<blockquote class="text-lg md:text-xl font-medium leading-relaxed text-gray-900 dark:text-gray-100 italic">
|
|
<slot />
|
|
</blockquote>
|
|
|
|
<!-- Author -->
|
|
<div v-if="author" class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
|
|
<cite class="text-sm font-semibold text-primary-600 dark:text-primary-400 not-italic">
|
|
— {{ author }}
|
|
</cite>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.pull-quote {
|
|
animation: fadeInUp 0.6s ease-out;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|