mahdium/portfolio
1
0
Fork 0
mirror of https://github.com/mmahdium/portfolio.git synced 2026-08-17 05:24:30 +03:30
Code Issues Packages Projects Releases Wiki Activity

feat(resume): enhance styling and improve visual hierarchy across components

Browse Source 
- 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
This commit is contained in:
mahdiarghyani
2025-12-06 11:28:45 +03:30
parent 193e2b6e6d
commit 73afa9f5a6
9 changed files with 51 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/resume/ResumeExperience.vue
+9 -8
View File
@@ -24,24 +24,25 @@ function formatDateRange(start: string, end?: string): string {
</script>
<template>
<section class="mb-6 print:mb-3">
<h2 class="text-base font-bold text-blue-600 uppercase border-b-2 border-blue-600 pb-1 mb-2 print:mb-1.5">
<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-4 last:mb-0 print:mb-3">
<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-semibold text-gray-800 break-words hyphens-none">{{ job.position }}</h3>
<p class="text-sm text-gray-600">{{ job.company }}</p>
<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">
<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 space-y-1 print:mt-1 print:space-y-0.5">
<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 break-words hyphens-none">
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>