hr
/
resume_builder


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
							<!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;
      }

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

      dt.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>
            <.work work={work} />
          </li>
        <% end %>
      </ol>
    </div>

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

      <ul>
        <%= for skill <- @skills do %>
          <li><.skill skill={skill} /></li>
        <% end %>
      </ul>
    </div>

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

      <ol>
        <%= for educ <- @education do %>
          <li><.education educ={educ} /></li>
        <% end %>
      </ol>
    </div>

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

      <ul>
        <%= for lang <- @languages do %>
          <li><.language lang={lang} /></li>
        <% end %>
      </ul>
    </div>
  </body>
</html>