templates/projets/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block style %}
  5.     @media screen and (max-width: 1400px) {
  6.         .tileProjet {
  7.             height:600px !important;
  8.         }
  9.     }
  11.     @media screen and (max-width: 1000px) {
  12.         .tileProjet {
  13.             flex-direction: column !important;
  14.         }
  16.         .textProjet {
  17.             width:100% !important;
  18.         }
  20.         #MyJapanese {
  21.             flex-direction: column-reverse !important;
  22.         }
  23.     }
  25.     #top-title {
  26.         display:flex;
  27.         background-image: url("{{ asset('img/top-bg.png') }}");
  28.         height:400px;
  29.         background-position-y: 50%;
  30.         background-size: cover;
  31.     }
  33.     #top-title div {
  34.         background: linear-gradient(to top, rgb(38, 38, 38), transparent);
  35.         display:flex;
  36.         flex-grow:1;
  37.         justify-content:center;
  38.     }
  40.     #top-title h1 {
  41.         align-content:center;
  42.         font-size:70px;
  43.         animation: slide-in-top 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  44.     }
  46.     @keyframes slide-in-top {
  47.         0% {
  48.             transform: translateY(-100px);
  49.             opacity: 0;
  50.         }
  51.         100% {
  52.             transform: translateY(0);
  53.             opacity: 1;
  54.         }
  55.     }
  57.     #projet {
  58.         display:flex;
  59.         flex-grow:1;
  60.         flex-direction:column;
  61.         margin-bottom:40px;
  62.     }
  64.     #content {
  65.         background-color:#0D0D0D;
  66.         box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5);
  67.         transform: scale(1); 
  68.         transition: transform 0.2s;
  69.         margin-left:130px;
  70.         margin-right:130px;
  71.         margin-top:40px;
  72.         padding:20px;
  73.         border-radius: 20px;
  74.         align-self:center;
  75.         font-size:20px;
  76.         text-align:center;
  77.     }
  79.     .tileProjet {
  80.         height:400px;
  81.         display:flex;
  82.         padding:10px 60px;
  83.         align-items:center;
  84.     }
  86.     #Galler-E {
  87.         background-image:url({{ asset('img/projets/galler-e/fond.png') }});
  88.         background-size: cover;
  89.     }
  91.     #tChat {
  92.         background-color:#f8a9b0;
  93.     }
  95.     .titreProjet h1 {
  96.         font-size:60px;
  97.         padding: 20px;
  98.     }
  100.     .titreProjet:nth-child(2n){
  101.         justify-content:right;
  102.     }
  104.     .textProjet {
  105.         flex-direction:column;
  106.         width:50%;
  107.         padding:30px;
  108.         align-items:center;
  109.     }
  111.     .titreProjet, .textProjet {
  112.         display:flex;
  113.         flex-grow:1;
  114.     }
  116.     .titreProjet h1, .textProjet {
  117.         background-color: rgba(38, 38, 38, 0.5);
  118.     }
  120.     .textProjet a {
  121.         color:white;
  122.         font-weight:600;
  123.         padding:10px 20px;
  124.         border:solid 1px white;
  125.         border-radius:10px;
  126.         width:fit-content;
  127.         font-size:20px;
  128.     }
  130.     .textProjet p {
  131.         margin:0px;
  132.         padding:0px 0px 30px 0px;
  133.     }
  135.     #alert-bar {
  136.         display:none;
  137.     }
  139. {% endblock %}
  141. {% block body %}
  142. <div id="projet">
  143.     <div id="top-title">
  144.         <div>
  145.             <h1>Mes projets</h1>
  146.         </div>
  147.     </div>
  148.     <div id="listeProjets">
  149.         <div class="tileProjet" id="Galler-E">
  150.             <div class="titreProjet">
  151.                 <h1>Galler-E</h1>
  152.             </div>
  153.             <div class="textProjet">
  154.                 <p><strong>Galler-E</strong> est un site web conçu avec <strong>Next.js et hébergé sur Vercel</strong>, qui a pour vocation de devenir une véritable <strong>galerie en ligne</strong> pour mes créations photographiques. L'idée derrière ce projet est de <strong>rassembler toutes mes photos et de les organiser en projets distincts</strong>, permettant ainsi une présentation soignée et immersive de mes travaux. Chaque projet représente une série d'images regroupées autour <strong>d'une thématique ou d'un lieu particulier</strong>, afin d'offrir une expérience visuelle cohérente et captivante.
  155.                     <br>
  156.                     <br>
  157.                     Sur Galler-E, vous pourrez <strong>explorer librement les images</strong> que j'ai sélectionnées pour être partagées. L'interface est conçue pour <strong>faciliter la navigation</strong> entre les différents projets, vous permettant de parcourir les photos selon vos envies. Vous avez ainsi la possibilité de zoomer sur chaque image, de découvrir les détails, et de vous <strong>plonger dans l'univers photographique</strong> que j'ai voulu retranscrire à travers chaque cliché.
  158.                     <br>
  159.                     <br>
  160.                     Ce site est bien plus qu'une simple <strong>vitrine</strong> de mes travaux photographiques ; c'est également une <strong>plateforme évolutive qui me permet de documenter et d'exposer mon évolution artistique</strong> au fil du temps. De nouvelles images et projets sont régulièrement ajoutés, garantissant ainsi une expérience toujours renouvelée pour les visiteurs.
  161.                 </p>
  162.                 <a href="https://galler-e2.vercel.app/">Voir Galler-E</a>
  163.             </div>
  164.         </div>
  165.         <div class="tileProjet" id="tChat">
  166.             <div class="textProjet">
  167.                 <p>
  168.                 <strong>tChat</strong> est un réseau social en ligne développé avec <strong>Symfony et UX React</strong>, pensé pour offrir une expérience immersive et fonctionnelle inspirée des grandes plateformes comme <strong>X</strong>, <strong>Instagram</strong> ou <strong>Facebook</strong>. Ce projet a pour but d'allier apprentissage et innovation en proposant un espace où je peux tester et perfectionner mes compétences en programmation, tout en offrant une interface intuitive et moderne.
  169.                 <br>
  170.                 <br>
  171.                 Sur tChat, les utilisateurs peuvent découvrir un aperçu de ce que pourrait être un réseau social complet, avec des fonctionnalités comme les <strong>publications</strong>, les <strong>commentaires</strong> et les <strong>interactions sociales</strong>. Cependant, certaines fonctionnalités restent en cours de développement et arriveront progressivement, l’objectif étant d’enrichir l’expérience utilisateur avec des outils toujours plus complets et optimisés.
  172.                 <br>
  173.                 <br>
  174.                 <strong>tChat</strong> est avant tout un projet évolutif, constamment amélioré, qui reflète mon parcours de développeur. Bien qu'il ne soit pas destiné à une utilisation quotidienne ou au grand public, il reste une vitrine de mes compétences techniques et de mon engagement à créer des expériences numériques captivantes.</p>
  175.                 <a href="https://tchat.mlyshu.fr/">Voir tChat</a>
  176.             </div>
  177.             <div class="titreProjet">
  178.                 <h1>tChat</h1>
  179.             </div>
  180.         </div>
  181.     </div>
  182. </div>
  183. {% endblock %}