hr
/
resume_builder


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);
    @charset "utf-8";

    @-webkit-viewport {
      width: device-width;
    }

    @-moz-viewport {
      width: device-width;
    }

    @-ms-viewport {
      width: device-width;
    }

    @-o-viewport {
      width: device-width;
    }

    @viewport {
      width: device-width;
    }

    html {
      background-color: rgb(51, 73, 96);
    }

    * {
      box-sizing: border-box;
    }

    h1, h2, h3, h4, h5, h6 {
      font-size: 1em;
    }

    ol,
    ul {
      list-style: none;
      padding-inline: 0;
    }

    body {
      width: 80;
      max-width: 120ch;
      margin-top: 2em;
      margin-bottom: 2em;
      margin-right: auto;
      margin-left: auto;
      padding: 1em;
      background-color: white;
      font-family: 'Open Sans', Arial, Tahoma;
      font-weight: 400;

      display: grid;
      grid-template-areas:
      "basics basics"
      "work education"
      "work skills"
      "work languages"
      "work _";
    }

    dl {
      display: grid;
      grid-template-columns: auto 1fr;
    }

    dt {
      grid-column: 1/2;
    }

    dd {
      grid-column: 2/3;
    }

    #basics {
      grid-area: basics;

      display: grid;
      justify-items: center;
    }

    #work {
      grid-area: work;
    }

    #basics>h1,
    #basics>h2 {
      text-transform: uppercase;
    }

    data.name::after {
      content: attr(value);
    }

    data.position[lang="fr"]::after {
      content: 'Poste: ' attr(value);
    }

    data.position[lang="en"]::after {
      display: none;
    }

    dt.work_location+dd::before,
    data.work_location::after {
      content: '🏢 ' attr(value);
    }

    dt.location::after,
    data.location::after {
      content: '🏠 ' attr(value);
    }

    li h1,
    li h2,
    li h3 {
      font-weight: 500;
    }

    #skills .tools::after {
      content: "Outils";
    }
  </style>
</head>

<body>
  <div id="basics">
    <h1><%= @basics.name %></h1>
    <h2><%= @basics.label %></h2>

    <dl>
      <dt class="location">Lieu</dt>
      <dd><%= @basics.location.city %></dd>
    </dl>
  </div>

  <div id="work">
    <h1>Expériences professionnelles</h1>
    <ol>
      <%= for work <- @work do %>
      <li>
        <div>
          <h1><%= work.name %></h1>

          <dl>
            <dt class="position" lang="fr">Poste</dt>
            <dd lang="fr"><%= work.position %></dd>
            <dt class="start_date">Date début</dt>
            <dd><.date class="start_date" date={work.startDate}/></dd>
            <%= unless is_nil(work[:endDate]) do %>
              <dt class="end_date">Date fin</dt>
              <dd><.date class="end_date" date={work.endDate}/></dd>
              <% end %>
            <dt class="work_location"></dt>
            <dd>Paris</dd>
          </dl>

          <p class="summary" lang="en"><%= work.summary %></p>

          <ul class="highlights">
            <%= for highlight <- work.highlights do %>
              <li><%= highlight %></li>
            <% end %>
          </ul>
        </div>
      </li>
      <% end %>
    </ol>
  </div>

  <div id="skills">
    <h1>Compétences</h1>

    <ul>
      <%= for skill <- @skills do %>
        <li>
          <h1><%= skill.name %></h1>
          <ul>
            <%= for kw <- skill.keywords do %>
              <li><%= kw %></li>
            <% end %>
          </ul>
        </li>
      <% end %>
    </ul>
  </div>

  <div id="education">
    <h1>Formation</h1>

    <ol>
      <%= for educ <- @education do %>
        <li>
          <h1><%= educ.institution %></h1>

          <dl>
            <dt class="location"></dt>
            <dd><%= educ[:location] %></dd>
            <dt class="start_date">Date début</dt>
            <dd><.date class="start_date" date={educ.startDate}/></dd>
            <dt class="end_date">Date fin</dt>
            <dd><.date class="end_date" date={educ.endDate}/></dd>
          </dl>
        </li>
      <% end %>
    </ol>
  </div>

  <div id="languages">
    <h1>Langues</h1>

    <ul>
      <%= for lang <- @languages do %>
        <li><%= lang.language %> (<%= lang.fluency %>)</li>
      <% end %>
    </ul>
  </div>
</body>

</html>