Files
portfolio/app/components/resume/ResumeAdditionalInfo.vue
T
mahdiarghyani 73afa9f5a6 feat(resume): enhance styling and improve visual hierarchy across components
- Update section spacing from mb-6 to mb-8 for better visual separation
- Enhance heading styles with text-blue-700, increased padding (pb-1.5), and letter-spacing
- Improve typography hierarchy by changing font-semibold to font-bold for titles
- Increase spacing between list items and skill categories for better readability
- Add font-medium styling to dates and institution names for improved emphasis
- Enhance bullet point styling with explicit color and font-weight in experience highlights
- Reorganize ResumeHeader contact section with improved link styling and layout
- Promote Portfolio website link with bold styling and blue color for better visibility
- Adjust print-specific spacing to maintain consistency across screen and print layouts
- Update resume data with refined content structure
- Archive outdated resume content technical specification document
2025-12-06 11:28:45 +03:30

29 lines
775 B
Vue

<script setup lang="ts">
import type { Skill } from '~/types/resume'
interface Props {
skills: Skill[]
}
const props = defineProps<Props>()
</script>
<template>
<section class="mb-8 print:mb-5">
<h2
class="text-base font-bold text-blue-700 uppercase border-b-2 border-blue-600 pb-1.5 mb-4 print:mb-2.5 tracking-wide">
Skills & Qualifications
</h2>
<!-- Technical Skills (categorized) -->
<div v-if="skills?.length">
<div class="space-y-2">
<div v-for="skill in skills" :key="skill.name" class="text-sm">
<span class="font-bold text-gray-900">{{ skill.name }}:&nbsp;</span><span class="text-gray-700">{{
skill.keywords.join(', ') }}</span>
</div>
</div>
</div>
</section>
</template>