Custom Styles

This chapter will guide you through customizing resume styles, including colors, fonts, layout, and more.

Color Scheme

Default Colors

The project uses a clean color scheme:

Custom Colors

You can modify colors in the <style> section of App.vue:

.card h2 {
  color: #1e40af;
}

.timeline::before {
  background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
}

.badge {
  background: #dbeafe;
  color: #1e40af;
}

Font Settings

Using System Fonts

Default uses system font stack:

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

Using Custom Fonts

If you want to use custom fonts, import in index.html:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">

Then use in CSS:

body {
  font-family: 'Inter', -apple-system, sans-serif;
}

Layout Adjustments

Adjust Content Width

A4 paper content area width is 170mm (210mm - 40mm margins). To adjust:

@page {
  size: A4;
  margin: 15mm;
}

body {
  width: 180mm;
}

Adjust Card Spacing

.card {
  margin-bottom: 16px;
}

Adjust Padding

.card {
  padding: 20px 24px;
}

Adding New Modules

Skills Tags Module

<Card>
  <h3>Skills</h3>
  <div class="skill-tags">
    <span class="skill-tag">Vue.js</span>
    <span class="skill-tag">TypeScript</span>
    <span class="skill-tag">Node.js</span>
    <span class="skill-tag">Python</span>
  </div>
</Card>

Add styles:

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-tag {
  padding: 4px 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 20px;
  font-size: 12px;
}

Project Experience Module

<Card>
  <h3>Projects</h3>
  <ul class="list">
    <li>
      <div class="project-row">
        <h3>Project Name</h3>
        <a href="https://github.com/..." target="_blank" class="project-link">
          GitHub
        </a>
      </div>
      <p>Project description...</p>
    </li>
  </ul>
</Card>

Add styles:

.project-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.project-link {
  font-size: 12px;
  color: #2563eb;
}

Print Optimization

Ensure Background Colors Print

@media print {
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .card {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

Avoid Content Breaks

.card {
  break-inside: avoid;
}

.timeline-item {
  break-inside: avoid;
}

Complete Example

Here’s a complete custom style example:

@page {
  size: A4;
  margin: 20mm;
}

body {
  font-family: 'Inter', -apple-system, sans-serif;
  margin: 0;
  padding: 0;
  width: 170mm;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: #fafafa;
}

.page {
  width: 100%;
  max-width: 170mm;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.card {
  background: #fff;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  break-inside: avoid;
}

.card h2 {
  margin: 0 0 4px;
  font-size: 20px;
  color: #1e293b;
  font-weight: 700;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 15px;
  color: #334155;
  font-weight: 600;
}

.badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 8px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 12px;
}

.timeline::before {
  background: linear-gradient(to bottom, #06b6d4, #8b5cf6);
}

.timeline-year {
  color: #0284c7;
}

@media print {
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background: white;
  }
}

Summary

Through this tutorial, you have learned:

1. Vue 3 component-based resume page development
2. A4 print layout configuration
3. Puppeteer automatic PDF generation
4. Custom resume styles

Now you can create your own unique resume based on your needs!

Advanced Suggestions

• Use CSS variables to manage colors uniformly
• Create multiple resume templates for different positions
• Add QR code component linking to online portfolio
• Use dark theme for different resume styles