projects.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <!-- Page description -->
  7. <meta name="description" content="The official website of Jovian Hersemeule.">
  8. <meta name="author" content="Jovian Hersemeule">
  9. <!-- Style sheet -->
  10. <link href="css/bootstrap.css" rel="stylesheet">
  11. <link href="css/custom/main.css" rel="stylesheet">
  12. <title>Projets - Jovian Hersemeule</title>
  13. </head>
  14. <body>
  15. <!-- Navbar -->
  16. <nav class="navbar navbar-expand-md navbar-dark bg-success fixed-top">
  17. <a class="navbar-brand" href="index.html">Jovian Hersemeule</a>
  18. <img class="rounded-circle jovian-toggler" type="button" data-toggle="collapse" data-target="#joviaNav"
  19. aria-controls="joviaNav"
  20. aria-expanded="false" aria-label="Dérouler le menu" src="https://img.icons8.com/color/48/000000/menu-2.png"
  21. alt="V">
  22. <div class="collapse navbar-collapse" id="joviaNav">
  23. <ul class="navbar-nav mr-auto">
  24. <li class="nav-item">
  25. <a class="nav-link" href="index.html">
  26. <img src="https://img.icons8.com/color/48/000000/city.png" alt="|">
  27. Accueil
  28. </a>
  29. </li>
  30. <li class="nav-item">
  31. <a class="nav-link" href="cv.html">
  32. <img src="https://img.icons8.com/color/48/000000/parse-from-clipboard.png" alt="|">
  33. CV
  34. </a>
  35. </li>
  36. <li class="nav-item active dropdown">
  37. <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown"
  38. aria-haspopup="true" aria-expanded="false">
  39. <img src="https://img.icons8.com/color/48/000000/code.png" alt="|">
  40. Projets
  41. </a>
  42. <div class="dropdown-menu" aria-labelledby="dropdown01">
  43. <div class="dropdown-item active">Liste des projets</div>
  44. <div class="dropdown-divider"></div>
  45. <a class="dropdown-item" href="projets/pro_static_site.html">
  46. Jovian Website
  47. </a>
  48. <a class="dropdown-item" href="projets/pro_ascii_space.html">
  49. ASCII Space Destroyer
  50. </a>
  51. <a class="dropdown-item" href="projets/pro_pulsar.html">
  52. Pulsar
  53. </a>
  54. <a class="dropdown-item" href="projets/pro_quoridor.html">
  55. Quoridor
  56. </a>
  57. </div>
  58. </li>
  59. <li class="nav-item">
  60. <a class="nav-link" href="contact.html">
  61. <img src="https://img.icons8.com/color/48/000000/secured-letter.png" alt="|">
  62. Contact
  63. </a>
  64. </li>
  65. </ul>
  66. </div>
  67. </nav>
  68. <!-- Main -->
  69. <main role="main" class="container">
  70. <div class="focus-center">
  71. <h1>
  72. Projets
  73. </h1>
  74. <img src="https://img.icons8.com/color/96/000000/code.png" alt="code flat icon">
  75. <h2>
  76. Tous mes projets de programmation
  77. </h2>
  78. <p class="lead">
  79. Voici l'ensemble des projets de programmation auxquels j'ai participé. Certains ont été faits en équipe,
  80. d'autres seuls, certains sont encore en développement.
  81. </p>
  82. </div>
  83. <h3>
  84. <img src="https://img.icons8.com/color/48/000000/term.png" alt="[Présentation]">
  85. Présentation
  86. </h3>
  87. <p>
  88. Chaque encard présente le résumé d'un projet. Si vous cliquez sur <code>Voir la page du projet</code>, vous
  89. arrivez directement sur sa page descriptive complète.
  90. </p>
  91. <p>
  92. N'hésitez pas à revenir consulter cette page plus tard, et revenir régulièrement. J'ai beaucoup de projets déjà
  93. réalisés qui ne sont pas encore affichés ici, et j'en lancerai bientôt de nouveaux.
  94. </p>
  95. <!-- Présentation : En cours -->
  96. <h3>
  97. <img src="https://img.icons8.com/color/50/000000/rocket.png" alt="v ">
  98. En cours
  99. </h3>
  100. <p>
  101. Retrouvez ici les projets sur lesquels je passe mon temps actuellement.
  102. </p>
  103. <p>
  104. Je travaille dessus, donc leur avancement évolue. N'hésitez donc pas à consulter régulièrement les pages qui
  105. leur sont dédiées, j'essaierai de les mettre à jour dès que j'ai du nouveau ...
  106. </p>
  107. <!-- Projets en cours -->
  108. <div class="card-columns">
  109. <div class="card">
  110. <img class="card-img-top" src="https://img.icons8.com/color/400/000000/city.png" alt="[Jovian site icon]">
  111. <div class="card-body">
  112. <h4 class="card-title">
  113. <img src="https://img.icons8.com/color/35/000000/rocket.png" alt="[En cours]">
  114. Jovian Website
  115. </h4>
  116. <p class="card-text">
  117. Mon site Internet : celui sur lequel vous naviguez actuellement.
  118. </p>
  119. <a href="projets/pro_static_site.html" class="btn btn-success">
  120. Voir la page du projet
  121. </a>
  122. </div>
  123. </div>
  124. </div>
  125. <!-- présentation projets présentables -->
  126. <h3>
  127. <img src="https://img.icons8.com/color/50/000000/space-shuttle.png" alt="v ">
  128. Présentables
  129. </h3>
  130. <p>
  131. Voici ici les projets qui sont <em>présentables</em>. j'entends par présentable tout projet suffisamment avancé
  132. pour susciter de l'intérêt.
  133. </p>
  134. <p>
  135. Tous ces projets sont sujets à amélioration. Et peut-être prendrai-je le temps un jour de les améliorer, mais le
  136. temps est une denrée rare ...
  137. </p>
  138. <p>
  139. Ainsi, vous, cher visiteur, avez peut-être plus de temps que moi. Si un projet vous intéresse, n'hésitez pas à
  140. vous l'appropriez !
  141. </p>
  142. <p>
  143. Toi, cher programmeur, tu peux récupérer le code depuis GitHub et me proposer des améliorations.
  144. </p>
  145. <p>
  146. Toi, cher utilisateur, si tu as testé quelques exécutables, n'hésite pas à me contacter pour proposer
  147. améliorations ou changements.
  148. </p>
  149. <p>
  150. Un projet vit, et c'est en partie grâce à vous !
  151. </p>
  152. <!-- Projets présentables -->
  153. <div class="card-columns">
  154. <div class="card">
  155. <img class="card-img-top" src="images/project_icon_ASCII.png"
  156. alt="[ASCII Space Destroyer]">
  157. <div class="card-body">
  158. <h4 class="card-title">
  159. <img src="https://img.icons8.com/color/35/000000/space-shuttle.png" alt="[Présentable]">
  160. ASCII Space Destroyer
  161. </h4>
  162. <p class="card-text">
  163. Un jeu de vaisseau spatial dessiné avec des caractères ASCII, où le joueur peut créer son propre
  164. vaisseau.
  165. </p>
  166. <a href="projets/pro_ascii_space.html" class="btn btn-success">
  167. Voir la page du projet
  168. </a>
  169. </div>
  170. </div>
  171. <div class="card">
  172. <img class="card-img-top" src="https://img.icons8.com/color/400/000000/code.png" alt="[Quoridor]">
  173. <div class="card-body">
  174. <h4 class="card-title">
  175. <img src="https://img.icons8.com/color/35/000000/space-shuttle.png" alt="[Présentable]">
  176. Quoridor
  177. </h4>
  178. <p class="card-text">
  179. Un jeu de plateau retranscrit sur ordinateur, où le joueur peut affronter un ami ou une intelligence
  180. articielle.
  181. </p>
  182. <a href="projets/pro_quoridor.html" class="btn btn-success">
  183. Voir la page du projet
  184. </a>
  185. </div>
  186. </div>
  187. </div>
  188. <!-- Présentation projets à venir -->
  189. <h3>
  190. <img src="https://img.icons8.com/color/50/000000/blueprint.png" alt="v ">
  191. À venir
  192. </h3>
  193. <p>
  194. Selon moi, un projet est un mouvement. Il y a une construction en cours, une dynamique qui façonne, de
  195. l'imagination qui devient création.
  196. </p>
  197. <p>
  198. Mais avant de devenir un projet, il y a une idée.
  199. </p>
  200. <p>
  201. Cette section <em>À venir</em> regroupe donc l'ensemble de mes idées qui n'attendent qu'une chose : suffisamment
  202. d'investissement pour être réalisées ...
  203. </p>
  204. <!-- Projets à venir -->
  205. <div class="card-columns">
  206. <div class="card">
  207. <img class="card-img-top" src="https://img.icons8.com/color/400/000000/code.png" alt="[Pulsar]">
  208. <div class="card-body">
  209. <h4 class="card-title">
  210. <img src="https://img.icons8.com/color/35/000000/blueprint.png" alt="[À venir]">
  211. Pulsar
  212. </h4>
  213. <p class="card-text">
  214. Un jeu de vaisseaux spatiaux, où chaque équipe tente de prendre l'ascendant dans un système solaire.
  215. </p>
  216. <a href="projets/pro_pulsar.html" class="btn btn-success">
  217. Voir la page du projet
  218. </a>
  219. </div>
  220. </div>
  221. </div>
  222. <!-- Présentation projets terminés -->
  223. <h3>
  224. <img src="https://img.icons8.com/color/48/000000/uranus-planet.png" alt="v ">
  225. Terminés
  226. </h3>
  227. <p>
  228. J'estime que cette section sera vide pour un bon moment. En effet, un projet n'est pas un produit. C'est un
  229. mouvement. Tout ce que je fais est améliorable ...
  230. </p>
  231. <p>
  232. Pensez au feu. Ce n'est pas de la matière : c'est un phénomène. Une flamme est belle quand elle est au
  233. mouvement, avec sa chaleur, sa vie et sa fulgurance ...
  234. </p>
  235. <p>
  236. Voilà, c'est tout pour la réflexion philosophique ...
  237. </p>
  238. <!-- ICons8 thanks -->
  239. <div class="sub">
  240. Images sources : ICON8
  241. <a href="https://icons8.com/icon/15175/rocket">Rocket icon by Icons8</a>
  242. <a href="https://icons8.com/icon/21447/space-shuttle">Space Shuttle icon by Icons8</a>
  243. <a href="https://icons8.com/icon/23885/blueprint">Blueprint icon by Icons8</a>
  244. <a href="https://icons8.com/icon/62040/uranus-planet">Uranus Planet icon by Icons8</a>
  245. </div>
  246. </main>
  247. <!-- Scripts -->
  248. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  249. integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
  250. crossorigin="anonymous"></script>
  251. <script src="js/bootstrap.js"></script>
  252. </body>
  253. </html>