cv.html.heex 2.5 KB

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