templates/about_me/index.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block style %}
  5.     @media screen and (max-width: 1400px) {
  6.         #presentation {
  7.             flex-direction:column;
  8.         }
  10.         #presentation img {
  11.             padding-right:0px;
  12.             margin-top:60px;
  13.         }
  15.         #esport, #collection {
  16.             flex-direction:column !important;
  17.         }
  19.         #photographie {
  20.             flex-direction:column-reverse !important;
  21.         }
  23.         #esportslider, #collectionslider, #photoslider {
  24.             margin-top:40px;
  25.         }
  27.         #esporttext, #photoslider, #collectiontext {
  28.             margin-right:0px !important;
  29.         }
  31.         #esportslider, #phototext, #collectionslider {
  32.             margin-left:0px !important;
  33.         }
  35.         #esporttext, #phototext, #collectiontext {
  36.             text-align:center !important;
  37.         }
  38.     }
  40.     @media screen and (max-width: 1750px) {
  41.         #esportslider, #photoslider, #collectionslider {
  42.             align-self:center;
  43.         }
  44.     }
  46.     #top-title {
  47.         display:flex;
  48.         background-image: url("{{ asset('img/top-bg.png') }}");
  49.         height:400px;
  50.         background-position-y: 50%;
  51.         background-size: cover;
  52.     }
  54.     #top-title div {
  55.         background: linear-gradient(to top, rgb(38, 38, 38), transparent);
  56.         display:flex;
  57.         flex-grow:1;
  58.         justify-content:center;
  59.     }
  61.     #top-title h1 {
  62.         align-content:center;
  63.         font-size:70px;
  64.         animation: slide-in-top 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  65.     }
  67.     @keyframes slide-in-top {
  68.         0% {
  69.             transform: translateY(-100px);
  70.             opacity: 0;
  71.         }
  72.         100% {
  73.             transform: translateY(0);
  74.             opacity: 1;
  75.         }
  76.     }
  78.     #content {
  79.         background-color:#0D0D0D;
  80.         box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5);
  81.         transform: scale(1); 
  82.         transition: transform 0.2s;
  83.         margin-left:130px;
  84.         margin-right:130px;
  85.         margin-top:40px;
  86.         padding:30px;
  87.         padding-top:10px;
  88.         border-radius: 20px;
  89.     }
  91.     #content a {
  92.         color:white;
  93.         transition: color 0.3s ease, font-weight 0.3s ease;
  94.     }
  96.     #content a:hover {
  97.         color:#1e4578;
  98.         font-weight:600;
  99.     }
  101.     #link a {
  102.         color:white;
  103.         background-color:#0D0D0D;
  104.         padding:20px;
  105.         border-radius:10px;
  106.         transition: color 0.3s ease, background-color 0.3s ease;
  107.     }
  109.     #link a:hover {
  110.         color:#0e2038;
  111.         background-color:white;
  112.     }
  114.     #passions {
  115.         background-color:white;
  116.     }
  118.     #passions h1 {
  119.         text-align:center;
  120.     }
  122.     #passions h2 {
  123.         font-size:30px;
  124.     }
  126.     #titlepassion {
  127.         text-align: -webkit-center;
  128.     }
  130.     #titlepassion h1 {
  131.         padding: 20px;
  132.         font-size: 40px;
  133.         background-color: black;
  134.         color: white;
  135.         font-weight: 200;
  136.         margin:0px;
  137.     }
  139.     #presentation {
  140.         display:flex;
  141.         flex-grow:1;
  142.         margin-bottom: 80px;
  143.         flex-direction:column;
  144.     }
  146.     #esport {
  147.         background-image:url("{{ asset('img/passions/esport/fond.jpg') }}");
  148.         background-size: cover;
  149.         background-position-y: 65%;
  150.     }
  152.     #photographie {
  153.         background-image:url("{{ asset('img/passions/photo/fond.jpg') }}");
  154.         background-size: cover;
  155.         background-position-y: 50%;
  156.     }
  158.     #collection {
  159.         background-image:url("{{ asset('img/passions/carte/fond.jpg') }}");
  160.         background-size: cover;
  161.     }
  163.     #esport, #photographie, #collection {
  164.         display:flex;
  165.         flex-direction:row;
  166.         padding-left:80px;
  167.         padding-right:80px;
  168.         padding-top:40px;
  169.         padding-bottom:40px;
  170.     }
  172.     #photographie {
  173.         background-color:#0D0D0D;
  174.     }
  176.     #phototext {
  177.         text-align:right;
  178.     }
  180.     #esporttext, #phototext, #collectiontext {
  181.         align-self:center;
  182.         background-color: rgba(38, 38, 38, 0.5);
  183.         padding:40px;
  184.     }
  186.     #esporttext, #photoslider, #collectiontext {
  187.         margin-right:40px;
  188.     }
  190.     #esportslider, #phototext, #collectionslider {
  191.         margin-left:40px;
  192.     }
  194.     #esportslider, #photoslider, #collectionslider {
  195.         color:white;
  196.         background-color: rgba(38, 38, 38, 0.5);
  197.         align-self:center;
  198.     }
  200.     .slider {
  201.         margin-top:20px;
  202.         padding:20px;
  203.         padding-bottom:0px;
  204.         display:flex;
  205.         font-size: 40px;
  206.         align-items: center;
  207.     }
  209.     #bubbleesport, #bubblephoto, #bubblecollection {
  210.         justify-content:center;
  211.         font-size:20px;
  212.         display:flex;
  213.         flex-direction:row;
  214.         margin-top:20px;
  215.         margin-bottom:20px;
  216.     }
  218.     #esportslider p:hover, #photoslider p:hover, #collectionslider p:hover {
  219.         cursor:pointer;
  220.     }
  222.     #esportslider img, #photoslider img, #collectionslider img {
  223.         width:600px;
  224.         margin-left:20px;
  225.         margin-right:20px;
  226.         transition: transform 1s ease-in-out;
  227.     }
  229.     .scale-in-center {
  230.         animation: scale-in-center 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  231.     }
  233.     .focus-in-expand {
  234.         animation: focus-in-expand 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  235.     }
  237.     .text-focus-in {
  238.         animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
  239.     }
  241.     @keyframes scale-in-center {
  242.         0% {
  243.             transform: scale(0);
  244.             opacity: 1;
  245.         }
  246.         100% {
  247.             transform: scale(1);
  248.             opacity: 1;
  249.         }
  250.     }
  252.     @keyframes focus-in-expand {
  253.         0% {
  254.             letter-spacing: -0.5em;
  255.             filter: blur(12px);
  256.             opacity: 0;
  257.         }
  258.         100% {
  259.             filter: blur(0px);
  260.             opacity: 1;
  261.         }
  262.     }
  264.     @keyframes text-focus-in {
  265.         0% {
  266.             filter: blur(12px);
  267.             opacity: 0;
  268.         }
  269.         100% {
  270.             filter: blur(0px);
  271.             opacity: 1;
  272.         }
  273.     }
  275.     @keyframes flip-in-ver-right {
  276.         0% {
  277.             transform: rotateY(-80deg);
  278.             opacity: 0;
  279.         }
  280.         100% {
  281.             transform: rotateY(0);
  282.             opacity: 1;
  283.         }
  284.     }
  286.     .slide-out {
  287.         -webkit-animation: flip-in-ver-right 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  288.         animation: flip-in-ver-right 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  289.     }
  291. {% endblock %}
  293. {% block javascripts %}
  294.     <script>
  295.         let numSliderEsport = 1;
  296.         let numSliderPhoto = 1;
  297.         let numSliderCollection = 1;
  298.         function changeImgSlider(slider, number){
  299.             if(slider == "esport"){
  300.                 numSliderEsport += number;
  301.                 if(numSliderEsport > 3){
  302.                     numSliderEsport = 1;
  303.                 }
  304.                 if(numSliderEsport < 1){
  305.                     numSliderEsport = 3;
  306.                 }
  307.                 document.getElementById('imgEsport').classList.add('slide-out');
  308.                 setTimeout(() => {
  309.                     document.getElementById('imgEsport').classList.remove('slide-out');
  310.                 }, 500); 
  311.                 switch(numSliderEsport){
  312.                     case 1:
  313.                         document.getElementById('bubbleesport').innerHTML = "●○○"
  314.                         break;
  315.                     case 2:
  316.                         document.getElementById('bubbleesport').innerHTML = "●●○"           
  317.                         break; 
  318.                     case 3:
  319.                         document.getElementById('bubbleesport').innerHTML = "●●●"
  320.                         break;     
  321.                 }
  322.                 document.getElementById('imgEsport').src="{{ asset('img/passions/esport')}}/"+numSliderEsport+".jpg";
  323.             } else if(slider == "photo"){
  324.                 numSliderPhoto += number;
  325.                 if(numSliderPhoto > 6){
  326.                     numSliderPhoto = 1;
  327.                 }
  328.                 if(numSliderPhoto < 1){
  329.                     numSliderPhoto = 6;
  330.                 }
  331.                 document.getElementById('imgPhoto').classList.add('slide-out');
  332.                 setTimeout(() => {
  333.                     document.getElementById('imgPhoto').classList.remove('slide-out');
  334.                 }, 500); 
  335.                 switch(numSliderPhoto){
  336.                     case 1:
  337.                         document.getElementById('bubblephoto').innerHTML = "●○○○○○"
  338.                         break;
  339.                     case 2:
  340.                         document.getElementById('bubblephoto').innerHTML = "●●○○○○"           
  341.                         break; 
  342.                     case 3:
  343.                         document.getElementById('bubblephoto').innerHTML = "●●●○○○"
  344.                         break;
  345.                     case 4:
  346.                         document.getElementById('bubblephoto').innerHTML = "●●●●○○"
  347.                         break;
  348.                     case 5:
  349.                         document.getElementById('bubblephoto').innerHTML = "●●●●●○"
  350.                         break;     
  351.                     case 6:
  352.                         document.getElementById('bubblephoto').innerHTML = "●●●●●●"
  353.                         break;      
  354.                 }
  355.                 document.getElementById('imgPhoto').src="{{ asset('img/passions/photo')}}/"+numSliderPhoto+".jpg";
  356.             } else {
  357.                 numSliderCollection += number;
  358.                 if(numSliderCollection > 2){
  359.                     numSliderCollection = 1;
  360.                 }
  361.                 if(numSliderCollection < 1){
  362.                     numSliderCollection = 2;
  363.                 }
  364.                 document.getElementById('imgCollection').classList.add('slide-out');
  365.                 setTimeout(() => {
  366.                     document.getElementById('imgCollection').classList.remove('slide-out');
  367.                 }, 500); 
  368.                 switch(numSliderCollection){
  369.                     case 1:
  370.                         document.getElementById('bubblecollection').innerHTML = "●○"
  371.                         break;
  372.                     case 2:
  373.                         document.getElementById('bubblecollection').innerHTML = "●●"           
  374.                         break; 
  375.                 }
  376.                 document.getElementById('imgCollection').src="{{ asset('img/passions/carte')}}/"+numSliderCollection+".jpg";
  377.             }
  378.         }
  379.     </script>
  380. {% endblock %}
  382. {% block body %}
  383. <div id="presentation">
  384.     <div id="top-title">
  385.         <div>
  386.             <h1>À propos de moi</h1>
  387.         </div>
  388.     </div>
  389.     <div style="flex-grow:1;text-align:center;">
  390.         <div id="content">
  391.             <div style="text-align: -webkit-center;">
  392.                 <h1 style="padding:10px;border-radius:10px;font-size:40px;background-color: white;width: fit-content;border: solid white;color: #0D0D0D;" class="focus-in-expand">Qui suis-je ?</h1>
  393.             </div>
  394.             <div class="text-focus-in" style="animation-delay:1s;">
  395.                 <p style="margin-top:40px;">
  396.                     Moi c'est Lucas. J'habite dans les environs de Reims et à tout juste 21 ans, j'ai décroché un Bac+3 en développement Web ! 
  397.                 </p>
  398.                 <p>Si tu as fait un tour sur ma page d'accueil, tu as probablement vu que je suis aussi un amateur de photographie.
  399.                     J'ai mon propre Canon 2000D et je m'amuse à prendre des clichés ici et là. Je ne suis peut-être pas un pro, 
  400.                     mais c'est un hobby qui me permet d'exprimer ma créativité et de capturer de beaux moments.
  401.                 </p>
  402.                 <p>En dehors de tout ça, j'adore voyager et découvrir de nouvelles cultures. Mon rêve ultime ? Mettre les pieds 
  403.                     au Japon dans quelques années ! L'idée de plonger dans une culture si unique, de goûter à une cuisine incroyable
  404.                     et de vivre cette combinaison entre tradition et modernité me fait vraiment rêver.
  405.                 </p>
  406.                 <p>J'ai aussi pu avoir la chance de m'investir dans des associations durant mes études !
  407.                     J'ai notamment débuté en devenant président de l'association d'étudiant de ma promotion lors de mon DUT,
  408.                     une belle expérience quoi que un peu gâchée par le covid qui a bloqué beaucoup de chose.
  409.                     Aujourd'hui, je suis membre de l'association LeBlueWall et j'ai le plaisir de pouvoir gérer principalement la régie de la partie Twitch !
  410.                 </p>
  411.                 <p>Donc voilà, je suis ce gars cool qui aime la tech, la créativité, et qui a soif d'aventure. Mon parcours et mes passions 
  412.                     reflètent ma curiosité sans fin, et je suis super excité de voir ce que l'avenir me réserve. 
  413.                     En attendant, je continue à suivre mes rêves et à m'éclater !
  414.                 </p>
  415.             </div>
  416.         </div>
  417.         <div id="link" style="margin-top:50px">
  418.             <a class="fade-in" href="https://m-lyshu-nextjs.vercel.app/" style="margin-right:40px;animation-delay: 2s;">Voir mon CV numérique</a>
  419.         </div>
  420.     </div>
  421. </div>
  422. <div id="passions">
  423.     <div id="titlepassion">
  424.         <h1>Mes passions</h1>
  425.     </div>
  426.     <div id="esport">
  427.         <div id="esporttext">
  428.             <h2>L'Esport</h2>
  429.             <p>En tant que fervent supporter de la <strong>Karmine Corp</strong>, mon aventure dans l'esport a pris une dimension passionnante et inoubliable. Mon engagement ne se limite pas à regarder les compétitions, mais s'étend bien au-delà, me plaçant au cœur de l'action en tant que <strong>membre actif de la communauté LeBlueWall.</strong> <br><br>
  431.                 Les moments les plus mémorables de mon expérience ont été gravés lors de déplacements aux événements majeurs de l'esport. Ma première immersion a eu lieu aux <strong>Worlds de Rocket League à Düsseldorf</strong>, où l'effervescence et l'énergie du BlueWall ont transcendé les frontières virtuelles pour devenir une véritable communion. Le <strong>KCX3</strong> a été une autre étape marquante de mon parcours. Vivre l'action en direct, <strong>soutenir la Karmine Corp dans les moments cruciaux</strong> et célébrer chaque victoire avec mes camarades de tribune ont créé des liens indéfectibles. L'<strong>Ultimate Fighting Arena</strong> a été un autre chapitre palpitant de mon aventure esportive. Les combats intenses et la compétition acharnée ont élevé l'atmosphère à des sommets inégalés. <br><br>
  432.     
  433.                 Mon rôle en tant que <strong>régisseur de la chaîne Twitch</strong> pour l'association des ultras LeBlueWall m'a offert une perspective unique en coulisses. Contribuer à la diffusion des moments clés et interagir avec la communauté en ligne ont ajouté une dimension interactive à mon expérience, <strong>renforçant ainsi le lien entre les supporters.</strong> <br><br>
  435.                 Être supporter de la Karmine Corp ne se limite pas à encourager une équipe, <strong>c'est embrasser une culture, une passion partagée</strong>, et c'est exactement ce que je vis en tant que membre actif du BlueWall. Chaque événement, chaque rencontre, et chaque victoire sont des éléments fondateurs de mon voyage esportif, <strong>un périple qui va au-delà des pixels pour devenir une aventure humaine et collective</strong>. Et c'est avec une fierté immense que je continue de porter les couleurs de la Karmine Corp, un supporter dévoué au cœur du mouvement LeBlueWall.</p>
  436.         </div>
  437.         <div id="esportslider">
  438.             <div class="slider">
  439.                 <p onclick="changeImgSlider('esport', -1)">&lsaquo;</p>
  440.                 <img src="{{ asset('img/passions/esport/1.jpg') }}" id="imgEsport">
  441.                 <p onclick="changeImgSlider('esport', 1)">&rsaquo;</p>
  442.             </div>
  443.             <div id="bubbleesport">
  444.                 &#x25CF;&#x25CB;&#x25CB;
  445.             </div>
  446.         </div>
  447.     </div>
  448.     <div id="photographie">
  449.         <div id="photoslider">
  450.             <div class="slider">
  451.                 <p onclick="changeImgSlider('photo', -1)">&lsaquo;</p>
  452.                 <img src="{{ asset('img/passions/photo/1.jpg') }}" id="imgPhoto">
  453.                 <p onclick="changeImgSlider('photo', 1)">&rsaquo;</p>
  454.             </div>
  455.             <div id="bubblephoto">
  456.                 &#x25CF;&#x25CB;&#x25CB;&#x25CB;&#x25CB;&#x25CB;
  457.             </div>
  458.         </div>
  459.         <div id="phototext">
  460.             <h2>La photographie</h2>
  461.             <p>Mon incursion dans le monde fascinant de la photographie a été <strong>une aventure que j'ai toujours rêvé de vivre</strong>. Longtemps passionné par la photographie, j'ai finalement sauté le pas grâce à l'argent provenant de mon alternance, me permettant d'acquérir mon tout premier appareil photo : <strong>un Canon 2000D Reflex.</strong><br><br>
  463.             Cet appareil représente bien plus qu'un simple outil, <strong>c'est une porte d'entrée vers un univers où la créativité et la capture de moments précieux prennent vie à travers l'objectif</strong>. Chaque cliché que je réalise devient une exploration visuelle, une tentative de figer l'instant éphémère dans le temps.<br><br>
  465.             Mes premiers pas dans la photographie m'ont conduit à expérimenter différentes techniques, à apprendre les subtilités de l'art de composer une image. Les premiers shoots ont été un mélange d'excitation et d'appréhension, mais avec chaque déclenchement, <strong>j'ai découvert une nouvelle passion qui a pris racine dans mon quotidien.</strong><br><br>
  467.             Capturer la beauté du monde qui m'entoure est devenu un moyen de <strong>m'exprimer artistiquement</strong>. Que ce soit la majesté d'un paysage, la complexité des détails urbains, ou la simplicité d'un instant volé, mon Canon 2000D a été le témoin silencieux de mes explorations photographiques.<br><br>
  469.             Avec mon Canon 2000D en main, je me lance dans une <strong>aventure visuelle</strong>, cherchant à capturer l'essence même de chaque moment. Chaque clic de l'obturateur est une invitation à explorer le monde à travers un nouvel objectif, et c'est avec enthousiasme et détermination que je continue de développer mon regard artistique, <strong>découvrant la magie de la photographie à chaque instant figé dans le temps.</strong></p>
  470.         </div>
  471.     </div>
  472.     <div id="collection">
  473.         <div id="collectiontext">
  474.             <h2>La collection de cartes</h2>
  475.             <p>La collection de cartes Pokémon a toujours été bien plus qu'un simple loisir pour moi, <strong>c'est une passion qui transcende le simple fait de posséder des cartes</strong>. Pour moi, l'essence de cette expérience réside davantage dans le plaisir palpitant <strong>d'ouvrir un booster que dans l'objectif de rassembler toutes les cartes existantes</strong>. C'est un voyage où chaque paquet ouvert devient une fenêtre vers l'inconnu, une source d'excitation et de découvertes.<br><br>
  477.             Lorsque je m'immerge dans le rituel d'ouvrir un booster, l'anticipation atteint son paroxysme. Chaque carte révélée ajoute une dose d'excitation, que ce soit une carte commune ou une rareté étincelante. <strong>L'effervescence de la découverte prime sur l'ambition de compléter une collection exhaustive</strong>.<br><br>
  479.             Parmi toutes les séries de cartes Pokémon, ce sont <strong>Poing de Fusion</strong> et <strong>Faille Paradoxe</strong> qui ont conquis mon cœur de collectionneur. Les illustrations captivantes et les choix de design de ces séries ajoutent une dimension artistique à ma passion, transformant chaque carte en <strong>une œuvre d'art miniature</strong>.<br><br>
  481.             La recherche des cartes de ces séries est devenue un véritable plaisir, une quête où <strong>chaque trouvaille est célébrée comme une victoire personnelle</strong>. Les moments d'émerveillement devant une rareté inattendue font partie intégrante de cette expérience de collection.<br><br>
  483.             Ainsi, ma collection de cartes Pokémon n'est pas simplement un ensemble de morceaux de carton colorés, mais <strong>un témoignage de moments de joie, d'émerveillement et de camaraderie</strong>. Chaque carte a son histoire, chaque booster ouvert est un chapitre de cette aventure continue. Et c'est dans cette passion pour l'inattendu et le plaisir de la découverte que réside <strong>le véritable enchantement de ma collection de cartes Pokémon.</strong></p>
  484.         </div>
  485.         <div id="collectionslider">
  486.             <div class="slider">
  487.                 <p onclick="changeImgSlider('collection', -1)">&lsaquo;</p>
  488.                 <img src="{{ asset('img/passions/carte/1.jpg') }}" id="imgCollection">
  489.                 <p onclick="changeImgSlider('collection', 1)">&rsaquo;</p>
  490.             </div>
  491.             <div id="bubblecollection">
  492.                 &#x25CF;&#x25CB;
  493.             </div>
  494.         </div>
  495.     </div>
  496. </div>
  497. {% endblock %}