|
|
@@ -1,230 +1,193 @@
|
|
|
<!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>
|
|
|
-
|
|
|
+ <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>
|
|
|
+ <.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>
|
