mirror of
https://github.com/mmahdium/portfolio.git
synced 2026-08-17 05:24:30 +03:30
mahdiarghyani
73afa9f5a6
- 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
65 lines
2.0 KiB
Vue
65 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import type { WorkExperience } from '~/types/resume'
|
|
|
|
interface Props {
|
|
work: WorkExperience[]
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
const { formatDate } = useResumeData()
|
|
|
|
const sortedWork = computed(() => {
|
|
return [...props.work].sort((a, b) => {
|
|
const dateA = a.startDate || ''
|
|
const dateB = b.startDate || ''
|
|
return dateB.localeCompare(dateA)
|
|
})
|
|
})
|
|
|
|
function formatDateRange(start: string, end?: string): string {
|
|
const startFormatted = formatDate(start)
|
|
const endFormatted = end ? formatDate(end) : 'Present'
|
|
return `${startFormatted} - ${endFormatted}`
|
|
}
|
|
</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">
|
|
Work Experience
|
|
</h2>
|
|
|
|
<div v-for="job in sortedWork" :key="job.company + job.startDate" class="mb-5 last:mb-0 print:mb-4">
|
|
<div class="flex justify-between items-start gap-4">
|
|
<div class="flex-1 min-w-0">
|
|
<h3 class="text-sm font-bold text-gray-900 break-words hyphens-none">{{ job.position }}</h3>
|
|
<p class="text-sm font-medium text-gray-600">{{ job.company }}</p>
|
|
</div>
|
|
<span class="text-sm text-gray-500 whitespace-nowrap flex-shrink-0 font-medium">
|
|
{{ formatDateRange(job.startDate, job.endDate) }}
|
|
</span>
|
|
</div>
|
|
<ul class="mt-2.5 space-y-1.5 print:mt-1.5 print:space-y-1">
|
|
<li v-for="(highlight, idx) in job.highlights" :key="idx"
|
|
class="text-sm text-gray-700 pl-4 relative before:content-['•'] before:absolute before:left-0 before:text-gray-500 before:font-bold print:before:text-gray-500 break-words hyphens-none">
|
|
{{ highlight }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.hyphens-none {
|
|
hyphens: none;
|
|
-webkit-hyphens: none;
|
|
-ms-hyphens: none;
|
|
}
|
|
|
|
.break-words {
|
|
word-break: normal;
|
|
overflow-wrap: break-word;
|
|
}
|
|
</style>
|