Skills File

Header

Background color

Text color

Body

Text color

Footer

Background color

Text color

Template Leader Techniques

Template Leader Techniques

Parameters

Add to Cart

Un dossier de compétences est un élément très important aussi bien sur le contenu que sur la forme et le design pour attirer l’attention et donner envie à vos Clients donneurs d’ordre de lire le dossier de vos candidats. Nous vous proposons ici un modèle de dossier avec un contenu technique et un design plus élaborés. Vous avez des icones et des images pour un meilleur effet visuel. Le but est de mettre l’accent sur les éléments importants du dossier en les complétant avec des icônes et images.

//Variables set
  var formations = [];
  var experiences = [];
  var technicalSystems = [];
  var technicalLanguages = [];
  var technicalModelisations = [];
  var technicalSgbds = [];
  var technicalTools = [];
  var languages = [];
  var functionals = [];
  var managements = [];
  var businesses = [];
  var images = {};

// Loop over formations models
datas.candidate.formations.forEach((formation, i) => {
  var contentValue = [];
  formation.contents.forEach((content, j) => {
     contentValue[j] =  {style: 'formationContent', text: content.value};
  });
  formations[i] = {
    style: 'formations',
    columns: [
      {style: 'formationDate', text: formation.from+' - '+formation.to},
      {style: 'formationBlock',
      stack: [
        {style: 'formationTitle', text: formation.title},
        {style: 'formationInstitution', text: formation.institution.name},
        {style: 'formationLevel', text: formation.level},
        contentValue,
      ],
    },
  ],
  unbreakable: true,
};
});

// Loop over languages models
datas.candidate.languages.forEach((language, i) => {
  languages[i] = {
    style: 'languages',
    columns: [
      // {
      //   style: 'languageFlag',
      //   alignment: 'left',
      //   image: 'flag-'+i,
      //   width: 25,
      //   height: 17,
      // },
      {style: 'languageName', text: language.name},
      {style: 'languageLevel', text: language.level},
    ],
    unbreakable: true,
  };
});

// Loop over technicals models
datas.candidate.technicals.forEach((technical, i) => {
  // Loop over technicals systems models
  technical.technical_systems.forEach((technical_system, j) => {
    var levelValue = [];
    for (var k = 0; k < 5; k++) {
      levelValue[k] =
      {
        type: 'polyline',
        lineWidth: 1,
        closePath: true,
        lineColor: '#92d050',
        color: (technical_system.level > 2*k) ? '#92d050' : 'white',
        points: [{ x: 10*k, y: 0 }, { x: 10*k + 8, y: 4 }, { x: 10*k, y: 8 }],
      };
    }

technicalSystems[j] = [
      {
        columns: [
          {
            style: 'technicalName',
            text: technical_system.name,
          },
          {
            style: 'technicalLevel',
            canvas: levelValue,
          }
        ],
      },
    ];
  });

// Loop over technicals languages models
technical.technical_languages.forEach((technical_language, j) => {
    var levelValue = [];
    for (var k = 0; k < 5; k++) {
      levelValue[k] =
      {
        type: 'polyline',
        lineWidth: 1,
        closePath: true,
        lineColor: '#92d050',
        color: (technical_language.level > 2*k) ? '#92d050' : 'white',
        points: [{ x: 10*k, y: 0 }, { x: 10*k + 8, y: 4 }, { x: 10*k, y: 8 }],
      };
    }

technicalLanguages[j] = [
      {
        columns: [
          {
            style: 'technicalName',
            text: technical_language.name,
          },
          {
            style: 'technicalLevel',
            canvas: levelValue,
          }
        ],
      },
    ];
  });

// Loop over technicals modelisations models
technical.technical_modelisations.forEach((technical_modelisation, j) => {
    var levelValue = [];
    for (var k = 0; k < 5; k++) {
      levelValue[k] =
      {
        type: 'polyline',
        lineWidth: 1,
        closePath: true,
        lineColor: '#92d050',
        color: (technical_modelisation.level > 2*k) ? '#92d050' : 'white',
        points: [{ x: 10*k, y: 0 }, { x: 10*k + 8, y: 4 }, { x: 10*k, y: 8 }],
      };
    }

technicalModelisations[j] = [
      {
        columns: [
          {
            style: 'technicalName',
            text: technical_modelisation.name,
          },
          {
            style: 'technicalLevel',
            canvas: levelValue,
          }
        ],
      },
    ];
  });

// Loop over technicals sgbds models
  technical.technical_sgbds.forEach((technical_sgbd, j) => {
    var levelValue = [];
    for (var k = 0; k < 5; k++) {
      levelValue[k] =
      {
        type: 'polyline',
        lineWidth: 1,
        closePath: true,
        lineColor: '#92d050',
        color: (technical_sgbd.level > 2*k) ? '#92d050' : 'white',
        points: [{ x: 10*k, y: 0 }, { x: 10*k + 8, y: 4 }, { x: 10*k, y: 8 }],
      };
    }

technicalSgbds[j] = [
      {
        columns: [
          {
            style: 'technicalName',
            text: technical_sgbd.name,
          },
          {
            style: 'technicalLevel',
            canvas: levelValue,
          }
        ],
      },
    ];
  });

// Loop over technicals tools models
  technical.technical_tools.forEach((technical_tool, j) => {
    var levelValue = [];
    for (var k = 0; k < 5; k++) {
      levelValue[k] =
      {
        type: 'polyline',
        lineWidth: 1,
        closePath: true,
        lineColor: '#92d050',
        color: (technical_tool.level > 2*k) ? '#92d050' : 'white',
        points: [{ x: 10*k, y: 0 }, { x: 10*k + 8, y: 4 }, { x: 10*k, y: 8 }],
      };
    }

technicalTools[j] = [
      {
        columns: [
          {
            style: 'technicalName',
            text: technical_tool.name,
          },
          {
            style: 'technicalLevel',
            canvas: levelValue,
          }
        ],
      },
    ];
  });

});

// Loop over experiences models
datas.candidate.experiences.forEach((experience, i) => {
  var taskValue = [];
  experience.tasks.forEach((task, j) => {
    taskValue[j] = task.value;
  });
  var environmentValue = [];
  experience.environments.forEach((environment, j) => {
    environmentValue[j] = environment.value;
  });

var breakPage;
if (i == 0) {
breakPage =
  {
    text: '',
  }
} else {
breakPage =
  {
    text: '',
    pageBreak: 'after',
  }
}

experiences[i] = [
    breakPage,
{
  margin: [ 0, 10, 0, 20],
  canvas: [
    {
      type: 'rect',
      x: 0, y: 0, w: 520, h: 80,
      lineColor: 'grey',
    },
  ]
},
{
  absolutePosition: { x: 60, y: 130 },
  columns: [
    {
      stack: [
        {text: experience.enterprise.name, bold: true},
        {text: experience.title}
      ],
      alignment: 'left',
      margin: [ 50, 0, 0, 0],
    },
    {
      stack: [
        {text: experience.city+', '+experience.country},
        {text: experience.from+' - '+experience.to}
      ],
      alignment: 'right',
      margin: [ 0, 0, 20, 0],
    },
  ],
 },
 {
  text: datas.chapters.experienceslist.mission,
  style: 'paragraphTitle',
 },
 {
   style: 'experienceMission',
   text: experience.title,
 },
 {
  text: datas.chapters.experienceslist.objective,
  style: 'paragraphTitle',
 },
 {
   style: 'paragraph',
   text: experience.purpose,
 },
 {
  text: datas.chapters.experienceslist.technicals,
  style: 'paragraphTitle',
 },
 {
   style: 'paragraph',
   stack: environmentValue,
 },
 {
  text: datas.chapters.experienceslist.tasks,
  style: 'paragraphTitle',
 },
 {
   style: 'paragraph',
   stack: taskValue,
}
];
});

// Header bar definition
var headerBar =
  {
     canvas: [
      {
       type: 'rect',
       x: 0, y: 0, w: 595, h: 80,
       linearGradient: datas.headerColor,
      },
     ]
  };

// Footer bar definition
var footerBar =
  {
     canvas: [
      {
       type: 'rect',
       x: 0, y: 20, w: 595, h: 80,
       linearGradient: datas.footerColor,
      },
     ]
  };

// Line under each chapter's title
var chapterUnderline =
    {
      margin: [ 0, 3, 0, 20],
      canvas: [
        {
          type: 'rect',
          x: 0, y: 0, w: 500, h: 2,
          color: 'grey',
        },
      ]
    };

// Images definition
images['titleImage'] = datas.images.title;
images['frontImage'] = datas.images.front;
images['logo'] = datas.images.logo;
// Loop over flags images
datas.images.flags.forEach((flag, i) => {
 images['flag-'+i] = flag;
});

// PDFMake document
var docDefinition = {
  pageMargins: [ 40, 100, 40, 100],

header: function(currentPage) {
  if (currentPage == 1)
    return [
        headerBar,
     ]
  else
    return [
       headerBar,
      {
        columns: [
          {
            image: 'logo',
            width: 50,
            height: 50,
            absolutePosition: {x: 20, y: 15},
            alignment: 'left',
          },
          {
            fontSize: 22,
            bold: true,
            absolutePosition: {x: 0, y: 25},
            text: datas.document.header,
            alignment: 'center',
            color: datas.headerTextColor,
          }
        ]
      },
     ]
  },

footer: function(currentPage, pageCount) {
  if (currentPage == 1)
    return [
      {
        canvas: [
          {
            type: 'rect',
            x: 0, y: -20, w: 595, h: 120,
            linearGradient: datas.footerColor,
          }
        ]
      },
      {
        absolutePosition: {x: 0, y: 20},
        columns: [
          {
            fontSize: 26,
            bold: true,
            text: datas.document.header,
            alignment: 'center',
            color: datas.footerTextColor,
          },
         ]
      }
     ]
  else
    return [
      footerBar ,
      {
        columns: [
          {
            fontSize: 8,
            bold: true,
            text: currentPage.toString() + '/' + pageCount,
            absolutePosition: { x: 300, y: 30 },
            color: datas.footerTextColor,
          },
          {
            fontSize: 8,
            bold: true,
            stack: [
      datas.company.name+', '+datas.company.type+' au capital de '+datas.company.capital+' Euros',
      'Immatriculé '+datas.company.registration+' - APE '+datas.company.code,
      datas.company.street+' – '+datas.company.zip+' '+datas.company.city+' – '+datas.company.country,
      'Tel : '+datas.company.phone+' / '+'Fax : '+datas.company.fax,
      datas.company.website,
            ],
            absolutePosition: { x: 80, y: 50 },
            color: datas.footerTextColor,
          },
          {
            fontSize: 6,
            bold: false,
            italics: true,
            text: 'P5-CP-01 (v4.0)',
            absolutePosition: { x: 540, y: 80 },
            color: datas.footerTextColor,
          },
        ]
      },
    ]
  },

images,

content: [
    {
      image: 'titleImage',
      width: 500,
      height: 80,
      alignment: 'center',
      margin: [ 0, 20, 0, 0 ],
    },
    {
      text: datas.candidate.name+' '+datas.candidate.surname
,
      fontSize: 40,
      color: 'grey',
      alignment: 'center',
      margin: [ 0, 100, 0, 0 ]
    },
    {
      text: datas.candidate.function,
      fontSize: 40,
      color: '#3e4081',
      alignment: 'center',
      margin: [ 0, 10, 0, 60 ]
    },
    {
      image: 'frontImage',
      fit: [270, 180],
      alignment: 'center',
      pageBreak: 'after'
    },
    {
      text: datas.chapters.technicals,
      style: 'header',
    },
    chapterUnderline,
    {
     text: datas.chapters.technicalslist.systems,
     style: 'paragraphTitle',
    },
     technicalSystems,
    {
     text: datas.chapters.technicalslist.languages,
     style: 'paragraphTitle',
    },
     technicalLanguages,
    {
     text: datas.chapters.technicalslist.modelisations,
     style: 'paragraphTitle',
    },
     technicalModelisations,
    {
     text: datas.chapters.technicalslist.sgbd,
     style: 'paragraphTitle',
    },
     technicalSgbds,
    {
     text: datas.chapters.technicalslist.tools,
     style: 'paragraphTitle',
    },
     technicalTools,
     {
      text: '',
      pageBreak: 'after'
     },
    {
      text: datas.chapters.formations,
      style: 'header',
    },
   {
      margin: [ 0, 3, 0, 20],
      canvas: [
        {
          type: 'rect',
          x: 0, y: 0, w: 500, h: 2,
          color: 'grey',
        },
      ]
    },
formations,
{
text: '',
pageBreak: 'after',
},
     {
      text: datas.chapters.languages,
      style: 'header',
    },
    {
      margin: [ 0, 3, 0, 20],
      canvas: [
        {
          type: 'rect',
          x: 0, y: 0, w: 500, h: 2,
          color: 'grey',
        },
      ]
    },
languages,
{
text: '',
pageBreak: 'after',
},
experiences,
    ],
  defaultStyle: {
    color: datas.bodyTextColor,
  },
    styles: {
      header: {
        fontSize: 18,
        bold: false,
        color: '#3e4081',
        alignment: 'justify',
        margin: [ 0, 40, 0, 0],
    },
    paragraphTitle: {
      bold: true,
      color: '#3e4081',
      margin: [ 0, 20, 0, 10],
    },
    paragraph: {
      margin: [ 20, 10, 0, 20],
    },
    formations: {
         margin: [ 0, 0, 0, 20],
      },
      formationDate: {
         alignment: 'left',
         width: 100,
      },
      formationBlock: {
         alignment: 'left',
      },
      formationTitle: {
         bold: true,
      },
      formationInstitution: {
         bold: false,
      },
      formationLevel: {
         italics: true,
      },
      formationContent: {
         color: 'grey',
      },
      languages: {
         margin: [ 40, 10, 40, 0],
      },
      languageFlag: {
         alignment: 'left',
      },
      languageName: {
         alignment: 'center',
      },
      languageLevel: {
         alignment: 'right',
         color: '#92d050',
      },
      technicalName: {
         margin: [ 40, 0, 0, 0],
         alignment: 'left',
      },
      technicalLevel: {
         margin: [ 0, 0, 40, 0],
         alignment: 'right',
      },
      experienceMission: {
         alignment: 'center',
         bold: true,
      },
    },
  }