cv.html.heex 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans" />
  9. <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300" />
  10. <link
  11. rel="stylesheet"
  12. href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
  13. integrity="sha512NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
  14. crossorigin="anonymous"
  15. referrerpolicy="no-referrer"
  16. />
  17. <style>
  18. <%= Layout.resets() |> Phoenix.HTML.raw() %>
  19. <%= Layout.page_css() |> Phoenix.HTML.raw() %>
  20. dl {
  21. display: grid;
  22. grid-template-columns: auto 1fr;
  23. }
  24. dt {
  25. grid-column: 1/2;
  26. }
  27. dd {
  28. grid-column: 2/3;
  29. }
  30. <%= Work.css() |> Phoenix.HTML.raw() %>
  31. <%= Basics.css() |> Phoenix.HTML.raw() %>
  32. dt.work_location+dd::before {
  33. content: '🏢 ' attr(value);
  34. }
  35. dt.location::after {
  36. content: '🏠 ' attr(value);
  37. }
  38. li h1,
  39. li h2,
  40. li h3 {
  41. font-weight: 500;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <div id="basics">
  47. <Basics.basics name={@basics.name} title={@basics.label} />
  48. </div>
  49. <div id="work" class="section">
  50. <h1>Expériences professionnelles</h1>
  51. <ol>
  52. <%= for work <- @work do %>
  53. <li>
  54. <Work.work {work} />
  55. </li>
  56. <% end %>
  57. </ol>
  58. </div>
  59. <div id="skills" class="section">
  60. <h1>Compétences</h1>
  61. <ul>
  62. <%= for skill <- @skills do %>
  63. <li><Skill.skill skill={skill} /></li>
  64. <% end %>
  65. </ul>
  66. </div>
  67. <div id="education" class="section">
  68. <h1>Formation</h1>
  69. <ol>
  70. <%= for educ <- @education do %>
  71. <li><Education.education educ={educ} /></li>
  72. <% end %>
  73. </ol>
  74. </div>
  75. <div id="languages" class="section">
  76. <h1>Langues</h1>
  77. <ul>
  78. <%= for lang <- @languages do %>
  79. <li><Language.language lang={lang} /></li>
  80. <% end %>
  81. </ul>
  82. </div>
  83. </body>
  84. </html>