zhongwei/gh-robin-collins-claude-code-skills-jobseeker-skills
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8a385c425dce2b06cdb49974c718d0e5b5d1a86d
gh-robin-collins-claude-cod…/skills/employment-application/references/CV_Styling_Guide.md
Zhongwei Li 8a385c425d Initial commit
2025-11-30 08:52:43 +08:00

26 KiB
Raw Blame History

CV Styling Guide - Robin Collins

Professional Document Formatting Standards

Table of Contents

  1. Design Philosophy
  2. Color Palette
  3. Typography Standards
  4. Required Imports
  5. Document Structure
  6. Style Definitions
  7. Content Formatting Patterns
  8. Complete Code Examples

Design Philosophy

Professional, Modern, Technology-Focused

This CV styling emphasizes:

  • Calibri font for modern, professional appearance with excellent screen and print readability
  • Professional blue accent color (#11217B) for brand consistency and visual interest
  • Left-aligned headers for contemporary, clean layout
  • Clear visual hierarchy through typography, color, and spacing
  • Clickable contact links for digital accessibility
  • Structured job/project titles with consistent formatting for scannability

Color Palette

Primary Brand Color

const BRAND_BLUE = "11217B";  // Professional navy blue

Hex: #11217B
RGB: 17, 33, 123
Usage: Name, section headings, section borders, job titles, project names

Neutral Colors

const BLACK = "000000";       // Body text, standard information

Usage: Body text, company names, separators, dates, locations

Standard Link Color

Use the built-in "Hyperlink" style for email and web links (typically blue with underline).

Typography Standards

Font Specifications

Primary Font: Calibri (throughout entire document)

font: "Calibri"

Why Calibri?

  • Modern, professional sans-serif font
  • Excellent readability on screen and print
  • Default Microsoft Office font (ensures consistency across systems)
  • Clean, contemporary appearance suitable for technology professionals

Font Sizing Hierarchy

Element Size (half-points) Size (points) Purpose
Name 66 33pt Maximum visual impact for primary identifier
Section Headings 28 14pt Clear section delineation
Body Text (Default) 22 11pt Standard readable text
Job Titles 22 11pt Consistent with body but styled differently
Body Paragraphs 21 10.5pt Slightly smaller for better text density
Contact Info 22 11pt Readable, professional

Note: docx library uses half-points (multiply point size × 2)

Required Imports

Always include these imports at the start of your CV generation file:

const { 
  Document, 
  Packer, 
  Paragraph, 
  TextRun, 
  AlignmentType, 
  LevelFormat, 
  BorderStyle, 
  ExternalHyperlink 
} = require('docx');
const fs = require('fs');

Key imports for CV styling:

  • BorderStyle - Required for section heading underlines
  • ExternalHyperlink - Required for clickable email and GitHub links
  • LevelFormat - Required for bullet list formatting

Document Structure

Default Document Settings

const doc = new Document({
  styles: {
    default: {
      document: {
        run: { font: "Calibri", size: 22 }
      }
    },
    paragraphStyles: [
      // Style definitions go here
    ]
  },
  numbering: {
    config: [
      // Bullet list configuration
    ]
  },
  sections: [{
    properties: {
      page: {
        margin: { top: 1440, right: 1440, bottom: 1440, left: 1440 }
      }
    },
    children: [
      // Content goes here
    ]
  }]
});

Key settings:

  • Default font: Calibri, 11pt (22 half-points)
  • Margins: 1 inch (1440 DXA) on all sides
  • Standard letter page size (default)

Style Definitions

1. Name Style

Purpose: Primary identifier at the top of CV

{
  id: "Name",
  name: "Name",
  basedOn: "Normal",
  run: { 
    font: "Calibri", 
    size: 66,           // 33pt - Large, impactful
    bold: true, 
    color: "11217B"     // Brand blue
  },
  paragraph: { 
    spacing: { after: 60 }, 
    alignment: AlignmentType.LEFT 
  }
}

Key characteristics:

  • Left-aligned (modern, professional layout)
  • Large size (33pt) for maximum impact
  • Brand blue color for visual identity
  • Bold weight for emphasis
  • Minimal spacing after (60)

Usage:

new Paragraph({
  style: "Name",
  children: [new TextRun("ROBIN COLLINS")]
})

2. Contact Info Style

Purpose: Email, phone, GitHub links

{
  id: "ContactInfo",
  name: "Contact Info",
  basedOn: "Normal",
  run: { 
    font: "Calibri", 
    size: 22            // 11pt - Standard size
  },
  paragraph: { 
    spacing: { after: 120 }, 
    alignment: AlignmentType.LEFT 
  }
}

Key characteristics:

  • Left-aligned (consistent with name)
  • Standard size (11pt)
  • More spacing after (120) to separate header from body

Usage (with clickable links):

new Paragraph({
  style: "ContactInfo",
  children: [
    new ExternalHyperlink({
      children: [new TextRun({ text: "robin.f.collins@outlook.com", style: "Hyperlink" })],
      link: "mailto:robin.f.collins@outlook.com"
    }),
    new TextRun(" | 0475 795 732 | "),
    new ExternalHyperlink({
      children: [new TextRun({ text: "github.com/robin-collins", style: "Hyperlink" })],
      link: "https://github.com/robin-collins"
    })
  ]
})

Important:

  • Use ExternalHyperlink for clickable email (mailto:) and web links
  • Use style: "Hyperlink" on TextRun within hyperlinks for standard link styling
  • Separate elements with | (pipe character with spaces)

3. Section Heading Style

Purpose: Major section headers (PROFILE, CORE COMPETENCIES, etc.)

{
  id: "SectionHeading",
  name: "Section Heading",
  basedOn: "Normal",
  run: { 
    font: "Calibri", 
    size: 28,           // 14pt - Prominent but not overwhelming
    bold: true, 
    color: "11217B"     // Brand blue
  },
  paragraph: { 
    spacing: { 
      before: 200,      // Space above for clear separation
      after: 120        // Space below before content
    },
    border: {
      bottom: {
        color: "11217B",      // Brand blue underline
        space: 1,
        style: BorderStyle.SINGLE,
        size: 18              // Border thickness
      }
    }
  }
}

Key characteristics:

  • Brand blue color for visual identity
  • Bold weight for emphasis
  • 14pt size for hierarchy
  • Bottom border in brand blue - signature visual element
  • Substantial spacing before (200) to separate sections
  • Spacing after (120) before section content

Usage:

new Paragraph({
  style: "SectionHeading",
  children: [new TextRun("PROFILE")]
})

Visual effect:

PROFILE
─────────────────────────────────────
(Blue underline extends across the text)

4. Job Title Style

Purpose: Job titles, company names, project titles (with custom internal formatting)

{
  id: "JobTitle",
  name: "Job Title",
  basedOn: "Normal",
  run: { 
    font: "Calibri", 
    size: 22,           // 11pt - Same as body
    bold: true,         // Default bold (overridden per TextRun)
    color: "11217B"     // Default brand blue (overridden per TextRun)
  },
  paragraph: { 
    spacing: { 
      before: 120,      // Space above for separation from previous content
      after: 60         // Space below before bullet points
    } 
  }
}

Key characteristics:

  • Style provides defaults (blue, bold) but individual TextRuns override
  • Same size as body text (11pt)
  • Spacing creates visual grouping with following bullet points

Usage: See Job Title Formatting Pattern below

5. Body Style

Purpose: Body paragraphs, profile section, any standard text

{
  id: "Body",
  name: "Body",
  basedOn: "Normal",
  run: { 
    font: "Calibri", 
    size: 21            // 10.5pt - Slightly smaller for better density
  },
  paragraph: { 
    spacing: { after: 100 }, 
    alignment: AlignmentType.JUSTIFIED 
  }
}

Key characteristics:

  • Slightly smaller (10.5pt) than default for better text density in paragraphs
  • Justified alignment for professional, polished appearance
  • Standard spacing after (100)

Usage:

new Paragraph({
  style: "Body",
  children: [new TextRun("Your body text content here...")]
})

Bullet List Configuration

Purpose: All bullet point lists throughout CV

numbering: {
  config: [
    {
      reference: "bullet-list",
      levels: [{
        level: 0,
        format: LevelFormat.BULLET,
        text: "•",
        alignment: AlignmentType.LEFT,
        style: {
          paragraph: {
            indent: { 
              left: 720,      // 0.5 inch indent
              hanging: 360    // 0.25 inch hanging indent
            }
          }
        }
      }]
    }
  ]
}

Key settings:

  • Standard bullet character: •
  • Left indent: 0.5 inch (720 DXA)
  • Hanging indent: 0.25 inch (360 DXA)
  • Use LevelFormat.BULLET constant (not string "bullet")

Usage in content:

new Paragraph({
  numbering: { reference: "bullet-list", level: 0 },
  children: [
    new TextRun({ text: "Business Development & Technology Sales: ", bold: true }), 
    new TextRun("Description text here...")
  ]
})

Pattern for competency/skill bullets:

  • Bold label followed by colon and space: { text: "Label: ", bold: true }
  • Regular text for description: new TextRun("Description...")

Content Formatting Patterns

Job Title Formatting Pattern

Structure: Job Title | Company Name | Location | Dates

Formatting rules:

  1. Job Title: Bold, Brand Blue (#11217B)
  2. Separator: | (pipe with spaces), Black (#000000)
  3. Company Name: Bold, Black (#000000)
  4. Separator: | (pipe with spaces), Black (#000000)
  5. Location: Italic, Black (#000000)
  6. Separator: | (pipe with spaces), Black (#000000)
  7. Dates: Regular (no bold/italic), Black (#000000)

Code template:

new Paragraph({
  style: "JobTitle",
  children: [
    new TextRun({ text: "Job Title Text", bold: true, color: "11217B" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "Company Name", bold: true, color: "000000" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "Location", italics: true, color: "000000" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "Date Range", color: "000000" })
  ]
})

Example 1 - Full format (Professional Experience):

new Paragraph({
  style: "JobTitle",
  children: [
    new TextRun({ text: "Support Engineer", bold: true, color: "11217B" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "IRIST IT", bold: true, color: "000000" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "Adelaide SA", italics: true, color: "000000" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "2019", color: "000000" })
  ]
})

Visual result:

Support Engineer | IRIST IT | Adelaide SA | 2019
^^^^^^^^^^^^^^^    ^^^^^^^^^   ^^^^^^^^^^^   ^^^^
Bold Blue          Bold Black  Italic Black  Regular Black

Example 2 - Career break (no company/location):

new Paragraph({
  style: "JobTitle",
  children: [
    new TextRun({ text: "Personal Leave", bold: true, color: "11217B" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "December 2017 – January 2025", color: "000000" })
  ]
})

Project Title Formatting Pattern

Structure: Project Name | Company/Organization | Dates

Formatting rules:

  1. Project Name: Bold, Brand Blue (#11217B)
  2. Separator: | (pipe with spaces), Black (#000000)
  3. Company/Organization: Bold, Black (#000000)
  4. Separator: | (pipe with spaces), Black (#000000)
  5. Dates: Italic, Black (#000000)

Code template:

new Paragraph({
  style: "JobTitle",  // Uses JobTitle style
  children: [
    new TextRun({ text: "Project Name", bold: true, color: "11217B" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "Company or Organization", bold: true, color: "000000" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "Date Range", italics: true, color: "000000" })
  ]
})

Example:

new Paragraph({
  style: "JobTitle",
  children: [
    new TextRun({ text: "Healthcare IT Compliance & Support", bold: true, color: "11217B" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "Flaxmill Road Doctors Surgery", bold: true, color: "000000" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "2014-2017", italics: true, color: "000000" })
  ]
})

Visual result:

Healthcare IT Compliance & Support | Flaxmill Road Doctors Surgery | 2014-2017
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^   ^^^^^^^^^
Bold Blue                            Bold Black                      Italic Black

Note: Projects use dates in italic to visually differentiate from job titles where dates are regular text.

Competency/Skill Bullet Formatting Pattern

Structure: Bold label followed by colon, then description text

Code template:

new Paragraph({
  numbering: { reference: "bullet-list", level: 0 },
  children: [
    new TextRun({ text: "Competency Label: ", bold: true }), 
    new TextRun("Detailed description and supporting information...")
  ]
})

Example:

new Paragraph({
  numbering: { reference: "bullet-list", level: 0 },
  children: [
    new TextRun({ text: "Business Development & Technology Sales: ", bold: true }), 
    new TextRun("Proven success in B2B technology sales, pipeline generation through multi-channel outreach...")
  ]
})

Visual result:

• Business Development & Technology Sales: Proven success in B2B 
  technology sales, pipeline generation through multi-channel outreach...
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  Bold label with colon

Technical Skills Bullet Formatting Pattern

Structure: Bold category label followed by colon, then technologies/tools

Code template:

new Paragraph({
  numbering: { reference: "bullet-list", level: 0 },
  children: [
    new TextRun({ text: "Category Name: ", bold: true }), 
    new TextRun("Technology 1, Technology 2, Technology 3 | Tool A, Tool B")
  ]
})

Example:

new Paragraph({
  numbering: { reference: "bullet-list", level: 0 },
  children: [
    new TextRun({ text: "AI/ML & Automation: ", bold: true }), 
    new TextRun("TensorFlow, PyTorch, Keras, Scikit-learn, OpenAI GPT, Anthropic Claude | Python, PowerShell, Bash scripting | Terraform, Ansible")
  ]
})

Visual result:

• AI/ML & Automation: TensorFlow, PyTorch, Keras, Scikit-learn, 
  OpenAI GPT, Anthropic Claude | Python, PowerShell, Bash scripting
  ^^^^^^^^^^^^^^^^^^^
  Bold category

Separator conventions:

  • Comma (,) - Between similar items in a list
  • Pipe (|) - Between different sub-categories of tools/technologies

Achievement Bullet Formatting Pattern

Structure: Plain text or text with emphasized portions

Standard bullet (no emphasis):

new Paragraph({
  numbering: { reference: "bullet-list", level: 0 },
  children: [new TextRun("Achievement or responsibility description...")]
})

Bullet with emphasized metrics:

new Paragraph({
  numbering: { reference: "bullet-list", level: 0 },
  children: [
    new TextRun("Led critical EMOTET cyberattack response, developing comprehensive remediation strategy and restoring all affected systems within "),
    new TextRun({ text: "12 hours", bold: true }),
    new TextRun(" through expert crisis management")
  ]
})

Usage guideline:

  • Most bullets are plain text
  • Use inline bold for key metrics or critical outcomes
  • Keep emphasis minimal for professional appearance

Complete Code Examples

Example 1: Complete Header Section

// Header with name and contact info
new Paragraph({
  style: "Name",
  children: [new TextRun("ROBIN COLLINS")]
}),
new Paragraph({
  style: "ContactInfo",
  children: [
    new ExternalHyperlink({
      children: [new TextRun({ text: "robin.f.collins@outlook.com", style: "Hyperlink" })],
      link: "mailto:robin.f.collins@outlook.com"
    }),
    new TextRun(" | 0475 795 732 | "),
    new ExternalHyperlink({
      children: [new TextRun({ text: "github.com/robin-collins", style: "Hyperlink" })],
      link: "https://github.com/robin-collins"
    })
  ]
}),

Example 2: Complete Section with Content

// Section heading
new Paragraph({
  style: "SectionHeading",
  children: [new TextRun("CORE COMPETENCIES")]
}),

// Competency bullets
new Paragraph({
  numbering: { reference: "bullet-list", level: 0 },
  children: [
    new TextRun({ text: "Business Development & Technology Sales: ", bold: true }), 
    new TextRun("Proven success in B2B technology sales, pipeline generation through multi-channel outreach (phone, email, face-to-face networking), and consultative selling approach.")
  ]
}),

new Paragraph({
  numbering: { reference: "bullet-list", level: 0 },
  children: [
    new TextRun({ text: "AI & Automation Expertise: ", bold: true }), 
    new TextRun("Deep hands-on knowledge of artificial intelligence, machine learning, and automation technologies.")
  ]
}),

Example 3: Complete Job Entry

// Job title with structured formatting
new Paragraph({
  style: "JobTitle",
  children: [
    new TextRun({ text: "Support Engineer", bold: true, color: "11217B" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "IRIST IT", bold: true, color: "000000" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "Adelaide SA", italics: true, color: "000000" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "2019", color: "000000" })
  ]
}),

// Achievement bullets
new Paragraph({
  numbering: { reference: "bullet-list", level: 0 },
  children: [new TextRun("Provided Level 1, 2, and 3 technical support, troubleshooting complex hardware, software, and network issues across diverse client environments")]
}),

new Paragraph({
  numbering: { reference: "bullet-list", level: 0 },
  children: [new TextRun("Led critical EMOTET cyberattack response, developing comprehensive remediation strategy and restoring all affected systems within 12 hours")]
}),

Example 4: Complete Project Entry

// Project title with structured formatting
new Paragraph({
  style: "JobTitle",
  children: [
    new TextRun({ text: "Healthcare IT Compliance & Support", bold: true, color: "11217B" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "Flaxmill Road Doctors Surgery", bold: true, color: "000000" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "2014-2017", italics: true, color: "000000" })
  ]
}),

// Project achievement bullets
new Paragraph({
  numbering: { reference: "bullet-list", level: 0 },
  children: [new TextRun("Provided comprehensive IT consulting and compliance services, conducting audits and remediating PCEHR/MyHR compliance gaps within 3 months")]
}),

new Paragraph({
  numbering: { reference: "bullet-list", level: 0 },
  children: [new TextRun("Implemented secure, centralized electronic health record system with robust backup/disaster recovery solutions")]
}),

Document Generation and Export

File Output

// Generate document buffer and save to file
Packer.toBuffer(doc).then(buffer => {
  fs.writeFileSync("Collins_Robin_CV_Enhanced_Technology_Sales.docx", buffer);
  console.log("Updated CV created successfully");
});

File naming convention:

  • Format: Collins_Robin_CV_[Descriptor].docx
  • Example: Collins_Robin_CV_Enhanced_Technology_Sales.docx
  • Use descriptive suffixes for different versions/purposes

Style Application Guidelines

When to Use Each Style

Style Usage Example
Name Only for candidate name at top of document ROBIN COLLINS
ContactInfo Contact information line (email, phone, links) Email | Phone | GitHub
SectionHeading Major section headers PROFILE, EXPERIENCE, SKILLS
JobTitle Job titles, project titles, any structured titles Job | Company | Location | Dates
Body Profile paragraphs, any narrative text blocks Profile summary, descriptions
numbering: bullet-list All bullet point lists Skills, achievements, responsibilities

Consistency Rules

  1. Always specify font explicitly in each style definition (font: "Calibri")
  2. Always specify color explicitly in job/project title TextRuns
  3. Use pipe separators consistently (| with spaces) in structured titles
  4. Apply bold to labels in competency/skill bullets
  5. Use justified alignment for body paragraphs only
  6. Use left alignment for everything else (name, contact, headings, titles, bullets)

Common Patterns Quick Reference

Pattern 1: Section with Bullet Content

new Paragraph({
  style: "SectionHeading",
  children: [new TextRun("SECTION NAME")]
}),
new Paragraph({
  numbering: { reference: "bullet-list", level: 0 },
  children: [new TextRun({ text: "Label: ", bold: true }), new TextRun("Content...")]
}),

Pattern 2: Job Entry

new Paragraph({
  style: "JobTitle",
  children: [
    new TextRun({ text: "Title", bold: true, color: "11217B" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "Company", bold: true, color: "000000" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "Location", italics: true, color: "000000" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "Dates", color: "000000" })
  ]
}),
new Paragraph({
  numbering: { reference: "bullet-list", level: 0 },
  children: [new TextRun("Achievement...")]
}),

Pattern 3: Project Entry

new Paragraph({
  style: "JobTitle",
  children: [
    new TextRun({ text: "Project Name", bold: true, color: "11217B" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "Organization", bold: true, color: "000000" }),
    new TextRun({ text: " | ", color: "000000" }),
    new TextRun({ text: "Dates", italics: true, color: "000000" })  // Note: Italic for projects
  ]
}),
new Paragraph({
  numbering: { reference: "bullet-list", level: 0 },
  children: [new TextRun("Project achievement...")]
}),

Validation Checklist

Before generating final document, verify:

  • All imports included (especially BorderStyle, ExternalHyperlink)
  • Font set to "Calibri" in all style definitions
  • Brand blue color ("11217B") used consistently for name, headings, titles
  • Section headings include bottom border
  • Contact info includes clickable hyperlinks
  • Job titles use structured 5-part format (Title | Company | Location | Dates)
  • Project titles use structured 3-part format with italic dates
  • All separators use | (pipe with spaces)
  • Color specified explicitly in all TextRuns within job/project titles
  • Bullet list uses LevelFormat.BULLET constant
  • Body paragraphs use justified alignment
  • Margins set to 1440 (1 inch) on all sides

Version History

Version 1.0 - November 3, 2025

  • Initial style guide created
  • Documented Calibri font standard
  • Documented brand blue color (#11217B)
  • Documented structured title formatting patterns
  • Documented hyperlink usage in contact information
  • Documented section heading border styling

Notes for Future Updates

Maintaining Consistency

  • Always refer to this guide when creating new CV versions
  • Update this guide if making any intentional style changes
  • Keep code examples synchronized with current standards

Adding New Sections

When adding new content sections:

  1. Use existing style definitions (don't create new ones unless necessary)
  2. Follow established formatting patterns for similar content
  3. Maintain consistent spacing (before/after values)
  4. Use appropriate bullet or paragraph format

Customizing for Different Positions

To customize CV for different job applications:

  • Keep all styles unchanged (consistency is key)
  • Modify content order/emphasis in sections
  • Adjust bullet point content and emphasis
  • Keep visual design consistent for brand recognition

Technical Reference

DXA Units Conversion

  • 1 inch = 1440 DXA (twentieths of a point)
  • Common values:
    • 720 DXA = 0.5 inch
    • 360 DXA = 0.25 inch
    • 1440 DXA = 1 inch

Half-Point Font Sizes

  • docx library uses half-points
  • To convert: Point size × 2 = half-points
  • Examples:
    • 11pt = 22 half-points
    • 14pt = 28 half-points
    • 33pt = 66 half-points

Color Format

  • Use 6-character hex color codes (without #)
  • Examples:
    • "11217B" = Professional blue
    • "000000" = Black
    • "FFFFFF" = White

Support and Questions

For questions or clarifications about this styling guide:

  1. Refer to code examples in this document first
  2. Check existing CV source files for implementation examples
  3. Test changes in isolated code before applying to full document
  4. Maintain backup of working version before major style updates

Document maintained by: Robin Collins
Last updated: November 3, 2025
Purpose: Standard reference for all CV document generation and updates

Reference in New Issue View Git Blame Copy Permalink