#91 - convert images to webp (#94)

* convert images to webp

* - fix

* - delete unnecessary files

* - delete unnecessary files

public/assets/meetups/2024-04-11-lmt-01/data.json

@@ -14,7 +14,7 @@
           "url": "https://softiq.pl/"
         }
       ],
-      "avatarUrl": "adam-marszowski.jpeg",
+      "avatarUrl": "adam-marszowski.webp",
       "about": "Adam specjalizuje się w programowaniu w React i Java. Na co dzień pracuje nad tworzeniem i rozwijaniem aplikacji webowych. Aktywnie uczestniczy w społeczności technologicznej, dzieląc się swoim doświadczeniem i wiedzą na temat najnowszych trendów i innowacji w dziedzinie technologii webowych oraz AI.",
       "presentationTitle": "",
       "presentationUrl": "",
@@ -34,7 +34,7 @@
           "url": "https://kancelaria.rewak.pl/"
         }
       ],
-      "avatarUrl": "joanna-rewak.png",
+      "avatarUrl": "joanna-rewak.webp",
       "about": "Asia jest radcą prawnym pasjonującym się prawem nowych technologii. Specjalizuje się w tworzeniu umów, regulaminów oraz dokumentów dotyczących ochrony danych dla podmiotów z branży technologicznej. Ciekawostkami prawnymi dzieli się w social mediach.",
       "presentationTitle": "",
       "presentationUrl": "",
@@ -50,7 +50,7 @@
           "url": "https://www.blumilk.pl/"
         }
       ],
-      "avatarUrl": "jacek-sawoszczuk.jpeg",
+      "avatarUrl": "jacek-sawoszczuk.webp",
       "about": "Jacek jest programistą fullstack — pracuje głównie z PHP, ale sięga także po Go i C#. Nie boi się też pracy na frontendzie, gdzie specjalizuje się w Vue.js i Tailwindzie. Entuzjasta oprogramowania open-source, Linuksa i całej społeczności powstałej wokół otwartego oprogramowania.",
       "presentationTitle": "",
       "presentationUrl": "",
@@ -93,14 +93,14 @@
     {
       "name": "Collegium Witelona Uczelnia Państwowa",
       "website": "https://collegiumwitelona.pl/",
-      "logoUrl": "cwup.png"
+      "logoUrl": "cwup.webp"
     }
   ],
   "partners": [
     {
       "name": "Softiq",
       "website": "https://softiq.pl/",
-      "logoUrl": "softiq.png"
+      "logoUrl": "softiq.webp"
     }
   ],
   "sponsors": [],

public/assets/meetups/2024-09-12-lmt-02/data.json

@@ -14,7 +14,7 @@
           "url": "https://www.synergycodes.com/"
         }
       ],
-      "avatarUrl": "przemyslaw-sokolowski.jpg",
+      "avatarUrl": "przemyslaw-sokolowski.webp",
       "about": "Przemek to software engineer i tech lead w Synergy Codes. Na co dzień pracuje z różnorodnymi technologiami, takimi jak .NET, NestJS, Vue, Angular i React. Kluczowe dla niego jest dostosowanie technologii do konkretnego rozwiązania, ponieważ nie każde narzędzie pasuje do każdego przypadku. Przemek wierzy, że elastyczność w doborze technologii jest niezbędna do tworzenia efektywnych i skalowalnych rozwiązań.",
       "presentationTitle": "HDD, czyli jak można zgubić się w projekcie",
       "presentationUrl": "przemyslaw-sokolowski.pdf",
@@ -30,7 +30,7 @@
           "url": "https://softiq.pl/"
         }
       ],
-      "avatarUrl": "piotr-dobrowolski.jpeg",
+      "avatarUrl": "piotr-dobrowolski.webp",
       "about": "Dzięki dogłębnej wiedzy w zakresie technologii .NET oraz umiejętnościom zarządzania zespołem, Piotr potrafi skutecznie kierować projektami, dbając o terminowość i efektywność realizacji zadań. Jego zaangażowanie w rozwój zespołu i chęć dzielenia się wiedzą sprawiają, że jest cenionym mentorem, który inspiruje innych do osiągania coraz wyższych standardów w pracy.",
       "presentationTitle": "Wprowadzenie do generatorów kodu źródłowego w C#",
       "presentationUrl": "piotr-dobrowolski.pdf",
@@ -46,7 +46,7 @@
           "url": "https://www.blumilk.pl/"
         }
       ],
-      "avatarUrl": "patryk-mauer.jpg",
+      "avatarUrl": "patryk-mauer.webp",
       "about": "Doktorant na Politechnice Opolskiej w dyscyplinie Informatyka Techniczna i Telekomunikacja, współwłaściciel Epicentrum Art Gallery w Opolu oraz firmy informatycznej IT Goal sp. z o.o. Jego zainteresowania to automatyzacja i robotyzacja procesów biznesowych, w tym z wykorzystaniem uczenia maszynowego.",
       "presentationTitle": "Przewidywanie wyników aukcyjnych dzieł sztuki",
       "presentationUrl": "patryk-mauer.pdf",
@@ -93,41 +93,41 @@
     {
       "name": "Collegium Witelona Uczelnia Państwowa",
       "website": "https://collegiumwitelona.pl/",
-      "logoUrl": "cwup.png"
+      "logoUrl": "cwup.webp"
     },
     {
       "name": "Miasto Legnica",
       "website": "https://prezydent.legnica.eu/",
-      "logoUrl": "legnica.png"
+      "logoUrl": "legnica.webp"
     },
     {
       "name": "Legnicka Specjalna Strefa Ekonomiczna S.A.",
       "website": "https://lsse.eu/",
-      "logoUrl": "lsse.png"
+      "logoUrl": "lsse.webp"
     }
   ],
   "partners": [
     {
       "name": "Synergy Codes",
       "website": "https://www.synergycodes.com/",
-      "logoUrl": "synergy-codes.png"
+      "logoUrl": "synergy-codes.webp"
     },
     {
       "name": "Kancelaria radcy prawnego Joanna Rewak",
       "website": "https://kancelaria.rewak.pl/",
-      "logoUrl": "kancelaria-joanna-rewak.png"
+      "logoUrl": "kancelaria-joanna-rewak.webp"
     }
   ],
   "sponsors": [
     {
       "name": "Softiq",
       "website": "https://softiq.pl/",
-      "logoUrl": "softiq.png"
+      "logoUrl": "softiq.webp"
     },
     {
       "name": "JetBrains",
       "website": "https://www.jetbrains.com/",
-      "logoUrl": "jetbrains.png"
+      "logoUrl": "jetbrains.webp"
     }
   ],
   "partnersGridCols": 4,

public/gallery.php

@@ -7,7 +7,7 @@ function getGalleryImages($meetupId) {
 
     if (is_dir($galleryPath)) {
         $files = scandir($galleryPath);
-        $allowedExtensions = ['jpg', 'jpeg', 'png', 'gif'];
+        $allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
 
         foreach ($files as $file) {
             $extension = strtolower(pathinfo($file, PATHINFO_EXTENSION));

public/index.html

@@ -76,7 +76,7 @@
   </style>
 
   <body
-    class="overflow-x-hidden bg-slate-950 bg-[url('./images/background.png')] bg-cover"
+    class="overflow-x-hidden bg-slate-950 bg-[url('./images/background.webp')] bg-cover"
     x-data="initialize()"
     x-init="start()"
   >
@@ -90,7 +90,7 @@
                   <a href="/">
                     <img
                       class="h-10 w-auto pl-3"
-                      src="./images/logo.png"
+                      src="./images/logo.webp"
                       alt="Legnicki Meetup Technologiczny"
                     />
                   </a>
@@ -187,7 +187,7 @@
                   <a href="/">
                     <img
                       class="h-12"
-                      src="./images/logo.png"
+                      src="./images/logo.webp"
                       alt="Legnicki Meetup Technologiczny"
                     />
                   </a>
@@ -251,14 +251,14 @@
         <div
           class="absolute right-10 top-0 hidden lg:right-40 lg:block 2xl:right-0"
         >
-          <img class="mt-12 size-24" src="./images/x.svg" alt="Krzyżyk" />
+          <img class="mt-12 size-24" src="./images/x.webp" alt="Krzyżyk" />
         </div>
         <div
           class="absolute right-0 top-10 hidden h-24 w-24 lg:block 2xl:right-10"
         >
           <img
             class="mt-36 size-12 2xl:ml-40"
-            src="./images/x-white.svg"
+            src="./images/x-white.webp"
             alt="Krzyżyk"
           />
         </div>
@@ -474,7 +474,7 @@ <h2 class="pl-4 text-2xl font-bold">O czym?</h2>
               <div class="flex h-[120px] items-center lg:mx-auto">
                 <a href="https://blumilk.pl/" target="_blank">
                   <img
-                    src="./images/blumilk-white.png"
+                    src="./images/blumilk-white.webp"
                     alt="Blumilk sp. z o.o."
                     class="h-[71px]"
                   />
@@ -807,7 +807,9 @@ <h2 class="pl-4 text-2xl font-bold">O czym?</h2>
         <div class="relative max-w-screen-2xl flex-col text-white lg:mx-auto">
           <div class="flex flex-col" id="previousEditions">
             <div class="flex flex-col px-4 text-left lg:w-full">
-              <div class="text-5xl font-bold lg:mt-8">Poprzednie edycje</div>
+              <div class="text-3xl font-bold lg:mt-8 lg:text-5xl">
+                Poprzednie edycje
+              </div>
               <div
                 class="text-md w-3/4 pt-6 lg:mx-auto lg:w-full lg:px-0 lg:text-base"
               >
@@ -821,7 +823,7 @@ <h2 class="pl-4 text-2xl font-bold">O czym?</h2>
               <template x-for="meetup in pastMeetups">
                 <a :href="`meetup.html?meetupId=${meetup.id}`" target="_blank">
                   <div
-                    class="grid grid-cols-[180px,1fr,auto] items-center py-4 lg:py-10"
+                    class="flex items-center py-4 lg:grid lg:grid-cols-[180px,1fr,auto] lg:py-10"
                   >
                     <div
                       class="text-2xl font-bold text-green-500 lg:text-4xl"

public/meetup.html

@@ -69,7 +69,7 @@
   </style>
 
   <body
-    class="overflow-x-hidden bg-slate-950 bg-[url('./images/background.png')] bg-cover"
+    class="overflow-x-hidden bg-slate-950 bg-[url('./images/background.webp')] bg-cover"
     x-data="initialize()"
     x-init="start()"
   >
@@ -83,7 +83,7 @@
                   <a href="/">
                     <img
                       class="h-10 w-auto pl-3"
-                      src="./images/logo.png"
+                      src="./images/logo.webp"
                       alt="Legnicki Meetup Technologiczny"
                     />
                   </a>
@@ -165,7 +165,7 @@
                   <a href="/">
                     <img
                       class="h-12"
-                      src="./images/logo.png"
+                      src="./images/logo.webp"
                       alt="Legnicki Meetup Technologiczny"
                     />
                   </a>
@@ -248,7 +248,7 @@
               <div class="flex h-[120px] items-center lg:mx-auto">
                 <a href="https://blumilk.pl/" target="_blank">
                   <img
-                    src="./images/blumilk-white.png"
+                    src="./images/blumilk-white.webp"
                     alt="Blumilk sp. z o.o."
                     class="h-[71px]"
                   />
@@ -340,7 +340,7 @@
           <div class="w-full lg:h-[650px] 2xl:h-[750px]">
             <div class="hidden h-full w-full lg:flex">
               <div
-                class="z-10 hidden h-full w-fit overflow-hidden rounded-r-2xl bg-black bg-opacity-50 lg:flex"
+                class="z-10 hidden h-full w-fit overflow-hidden bg-black bg-opacity-50 lg:flex"
               >
                 <div class="flex h-full w-full overflow-hidden">
                   <template
@@ -515,8 +515,74 @@
                       </div>
                     </template>
                   </div>
-                  <div class="flex px-14 pb-14 pt-4 text-base text-neutral-200">
-                    <p x-text="speaker.about"></p>
+                  <div
+                    class="flex flex-col px-14 pb-14 pt-4 text-base text-neutral-200"
+                  >
+                    <p x-text="speaker.about" class="mb-4"></p>
+                    <div>
+                      <template x-if="speaker.presentationTitle">
+                        <a :href="speaker.presentationUrl" target="_blank">
+                          <div class="mb-6 flex items-center">
+                            <svg
+                              class="mr-2 size-5 flex-none"
+                              viewBox="0 0 15 19"
+                              fill="none"
+                              xmlns="http://www.w3.org/2000/svg"
+                              aria-label="Przejdź do slajdów z prezentacji"
+                            >
+                              <g id="SVGRepo_iconDocument">
+                                <path
+                                  d="M9 1.5V5.05556C9 5.2913 9.09365 5.5174 9.26035 5.68409C9.42705 5.85079 9.65314 5.94444 9.88889 5.94444H13.4444M9 1.5H2.77778C2.30628 1.5 1.8541 1.6873 1.5207 2.0207C1.1873 2.3541 1 2.80628 1 3.27778V15.7222C1 16.1937 1.1873 16.6459 1.5207 16.9793C1.8541 17.3127 2.30628 17.5 2.77778 17.5H11.6667C12.1382 17.5 12.5903 17.3127 12.9237 16.9793C13.2571 16.6459 13.4444 16.1937 13.4444 15.7222V5.94444M9 1.5L13.4444 5.94444M7.22222 13.9444V8.61111M7.22222 13.9444L5 11.7222M7.22222 13.9444L9.44444 11.7222"
+                                  stroke="#01FF6B"
+                                  stroke-width="1.5"
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                />
+                              </g>
+                            </svg>
+                            <p
+                              x-text="speaker.presentationTitle"
+                              class="font-semibold"
+                            ></p>
+                          </div>
+                        </a>
+                      </template>
+                      <template x-if="speaker.videoUrl">
+                        <a
+                          :href="speaker.videoUrl"
+                          target="_blank"
+                          class="mb-4 lg:mb-6"
+                        >
+                          <div class="flex items-center">
+                            <svg
+                              class="mr-2 size-5 flex-none"
+                              viewBox="0 0 18 15"
+                              fill="none"
+                              xmlns="http://www.w3.org/2000/svg"
+                              aria-label="Przejdź do nagrania z prezentacji"
+                            >
+                              <g id="SVGRepo_iconPlay">
+                                <path
+                                  d="M1 4.29998C1 3.45128 1.33714 2.63735 1.93726 2.03723C2.53737 1.43712 3.35131 1.09998 4.2 1.09998H13.8C14.6487 1.09998 15.4626 1.43712 16.0627 2.03723C16.6629 2.63735 17 3.45128 17 4.29998V10.7C17 11.5487 16.6629 12.3626 16.0627 12.9627C15.4626 13.5628 14.6487 13.9 13.8 13.9H4.2C3.35131 13.9 2.53737 13.5628 1.93726 12.9627C1.33714 12.3626 1 11.5487 1 10.7V4.29998Z"
+                                  stroke="#01FF6B"
+                                  stroke-width="1.5"
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                />
+                                <path
+                                  d="M7.4 5.09998L11.4 7.49998L7.4 9.89998V5.09998Z"
+                                  stroke="#01FF6B"
+                                  stroke-width="1.5"
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                />
+                              </g>
+                            </svg>
+                            <p class="font-semibold">Obejrzyj na YouTube</p>
+                          </div>
+                        </a>
+                      </template>
+                    </div>
                   </div>
                 </div>
               </template>
@@ -525,7 +591,7 @@
         </template>
       </div>
     </section>
-    <section class="relative mt-20 lg:mb-0 lg:mt-32">
+    <section class="relative mt-4 lg:mb-0 lg:mt-32">
       <div class="pointer-events-none absolute right-0 hidden lg:flex">
         <div class="css-blurry-green-gradient"></div>
       </div>
@@ -654,13 +720,13 @@ <h2 class="text-5xl font-bold">Galeria</h2>
               </div>
             </div>
             <div class="hidden flex-row justify-end gap-10 lg:flex">
-              <img src="./images/o.svg" alt="Kółko" class="size-7" />
-              <img src="./images/o.svg" alt="Kółko" class="size-7" />
-              <img src="./images/o.svg" alt="Kółko" class="size-7" />
-              <img src="./images/o.svg" alt="Kółko" class="size-7" />
-              <img src="./images/o.svg" alt="Kółko" class="size-7" />
-              <img src="./images/o.svg" alt="Kółko" class="size-7" />
-              <img src="./images/o.svg" alt="Kółko" class="size-7" />
+              <img src="./images/o.webp" alt="Kółko" class="size-7" />
+              <img src="./images/o.webp" alt="Kółko" class="size-7" />
+              <img src="./images/o.webp" alt="Kółko" class="size-7" />
+              <img src="./images/o.webp" alt="Kółko" class="size-7" />
+              <img src="./images/o.webp" alt="Kółko" class="size-7" />
+              <img src="./images/o.webp" alt="Kółko" class="size-7" />
+              <img src="./images/o.webp" alt="Kółko" class="size-7" />
             </div>
           </div>
           <div

styles.css

@@ -15,7 +15,7 @@ html {
   background:
     linear-gradient(0deg, #231769 8.09%, rgba(0, 0, 0, 0) 51.12%),
     linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-    url(./images/background.jpg),
+    url(./images/background.webp),
     lightgray 50%;
   background-size: cover;
   background-repeat: no-repeat;