Files
portfolio/app/components/resume/ResumePreview.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

86 lines
1.8 KiB
Vue

<script setup lang="ts">
const { resume } = useResumeData()
</script>
<template>
<div class="resume-wrapper">
<!-- A4 Container -->
<div class="resume-container">
<!-- Single-column vertical stack -->
<div class="resume-content">
<!-- Header with Photo + Name + Contact -->
<ResumeHeader :basics="resume.basics" />
<!-- Summary -->
<ResumeSummary :summary="resume.basics.summary" />
<!-- Skills & Qualifications -->
<ResumeAdditionalInfo :skills="resume.skills" />
<!-- Experience -->
<ResumeExperience :work="resume.work" />
<!-- Education -->
<ResumeEducation :education="resume.education" />
<!-- Languages & Certifications -->
<ResumeLanguages :languages="resume.languages" :certifications="resume.certificates" />
</div>
</div>
</div>
</template>
<style scoped>
.resume-wrapper {
background: #f3f4f6;
display: flex;
justify-content: center;
padding: 1rem;
}
.resume-container {
background: white;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
max-width: 210mm;
width: 100%;
}
.resume-content {
display: flex;
flex-direction: column;
padding: 2rem !important;
}
@media print {
.resume-wrapper {
background: white !important;
padding: 0 !important;
display: block !important;
}
.resume-container {
width: 210mm !important;
max-width: none !important;
box-shadow: none !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
.resume-content {
padding: 1rem !important;
}
* {
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
hyphens: none !important;
-webkit-hyphens: none !important;
}
section {
break-inside: avoid;
}
}
</style>