Merge pull request #21 from pengmaradi/feature/tailwind

chore: changed some text

_data/ceramic.yml

@@ -1,50 +1,49 @@
 - name: Kopf
-  src: https://lh3.googleusercontent.com/pw/AP1GczNB6tWcZ2W1--1HwjYNrkXDAzdHYda_PbpaB2POxOVN6U_BoyRsiS4COiKZJJ8MsyV8rVsLHaiaYldSp0CzkBELXBpPByAlmE6FAHMvhYByERWHhIgg=w2400
+  src: https://lh3.googleusercontent.com/pw/AP1GczNB6tWcZ2W1--1HwjYNrkXDAzdHYda_PbpaB2POxOVN6U_BoyRsiS4COiKZJJ8MsyV8rVsLHaiaYldSp0CzkBELXBpPByAlmE6FAHMvhYByERWHhIgg=
   description: Kopf im Buch
   lightbox: false
 
 - name: Geisterkopf
-  src: https://lh3.googleusercontent.com/pw/AP1GczOQ6CQ3maTbx9i3lbHHgwcws0r8CUy0IWy_NDs8CnL93XiNc0HO6zeO8UsSY2hiTFsleCO5hXym52IFxW4wqJqZot_iiO008zNId_tH6EmIlZ5hQbl4=w2400
+  src: https://lh3.googleusercontent.com/pw/AP1GczOQ6CQ3maTbx9i3lbHHgwcws0r8CUy0IWy_NDs8CnL93XiNc0HO6zeO8UsSY2hiTFsleCO5hXym52IFxW4wqJqZot_iiO008zNId_tH6EmIlZ5hQbl4=
   description: Geist ...
-  lightbox: false
+  lightbox: true
 
 - name: Krebs
-  src: https://lh3.googleusercontent.com/pw/AP1GczOL30ZKcawQUaZLHT75uDPd3PvgrY3ho-R-jizrDvTVvcQsdnUeI9T4pLKx8U54bgUNoLxMvnwv8jp0Rvy59-QcBhdHG58I3Q6FuBENt1VMy_dRecAi=w2400
+  src: https://lh3.googleusercontent.com/pw/AP1GczOL30ZKcawQUaZLHT75uDPd3PvgrY3ho-R-jizrDvTVvcQsdnUeI9T4pLKx8U54bgUNoLxMvnwv8jp0Rvy59-QcBhdHG58I3Q6FuBENt1VMy_dRecAi=
   description: Porzellan Auf Glasur, über 1200°C
   lightbox: false
 
 - name: grüne Vase
-  src: https://lh3.googleusercontent.com/pw/AP1GczPsVJCXh1sdQB0DT6LSnF1oBkUmUxPLLEAbVeWt64SwC2RJZO9SMbMXM18v1Lf9d8I5-4e2HkranFl5udk9YbK3HfVvOj1noFeVzgpa9moYuvwn1DT4=w2400
+  src: https://lh3.googleusercontent.com/pw/AP1GczPsVJCXh1sdQB0DT6LSnF1oBkUmUxPLLEAbVeWt64SwC2RJZO9SMbMXM18v1Lf9d8I5-4e2HkranFl5udk9YbK3HfVvOj1noFeVzgpa9moYuvwn1DT4=
   description: Porzellen Vase, Gipsform mit Celaton Glasur
-  lightbox: false
+  lightbox: true
 
 - name: weisse Vase
-  src: https://lh3.googleusercontent.com/pw/AP1GczNZn6ofx1m70z1LUOYoMmm2F_2zHXkABznkEEKk-5blU3Ie8DrkdmCgI0-l6UtdziHoxvc_sHwVXOk4_FiENu4bed8ttPXI3HGOeo0DCYHtTUfOj6x7=w2400
+  src: https://lh3.googleusercontent.com/pw/AP1GczNZn6ofx1m70z1LUOYoMmm2F_2zHXkABznkEEKk-5blU3Ie8DrkdmCgI0-l6UtdziHoxvc_sHwVXOk4_FiENu4bed8ttPXI3HGOeo0DCYHtTUfOj6x7=
   description: ohne Gasur, Gipsform mit scharz und weiss Wände
-  lightbox: false
+  lightbox: true
 
 - name: Spinnenlilien
-  src: https://lh3.googleusercontent.com/pw/AP1GczPFpGA7pO_kgO6rduW1Y0-DLu7Oq1-0Auk_rT0c6jOBxP1nUZCi6jjEqTmVS8oaAn7csGbiOr7p8voc0tSJPDpejsBgbgoT1Sj5YEN3UXTFRt8a2JDg=w2400
+  src: https://lh3.googleusercontent.com/pw/AP1GczPFpGA7pO_kgO6rduW1Y0-DLu7Oq1-0Auk_rT0c6jOBxP1nUZCi6jjEqTmVS8oaAn7csGbiOr7p8voc0tSJPDpejsBgbgoT1Sj5YEN3UXTFRt8a2JDg=
   description: Spinnenlilien
   lightbox: false
 
 - name: Kücken
-  src: https://lh3.googleusercontent.com/pw/AP1GczPkPlUeG3ZENnZkHB9NlEYMtxcpRwKv0K79BBALm-QoqunheX2UnEsVw68f_g4mWq1dRKLPt7NXHujkav5dRS9ISHTV07J2bYXE5Sq9L3-XYBQIS_Ri=w2400
+  src: https://lh3.googleusercontent.com/pw/AP1GczPkPlUeG3ZENnZkHB9NlEYMtxcpRwKv0K79BBALm-QoqunheX2UnEsVw68f_g4mWq1dRKLPt7NXHujkav5dRS9ISHTV07J2bYXE5Sq9L3-XYBQIS_Ri=
   description: xiao ji
   lightbox: false
 
 - name: Fisch
-  src: https://lh3.googleusercontent.com/pw/AP1GczP5A3NF1jQhvvyCBJaIdyJbeO4K9u0Da76lMLq70UbHU75ma64pixxJ-cBp4j70ClwEzb7bWvmlKyH_dCc6m7n8U2I0hTPkgT0I0w2ZYPuvQaKahTnR=w2400
+  src: https://lh3.googleusercontent.com/pw/AP1GczP5A3NF1jQhvvyCBJaIdyJbeO4K9u0Da76lMLq70UbHU75ma64pixxJ-cBp4j70ClwEzb7bWvmlKyH_dCc6m7n8U2I0hTPkgT0I0w2ZYPuvQaKahTnR=
   description: yu
   lightbox: false
 
 - name: Krähen
-  src: https://lh3.googleusercontent.com/pw/AP1GczP9r_OP9dnmUN8G8csiAULujYUMbhalM8PihemCWKgsVPP7-jjLh31bZSzXRn0X-cH82cePqzF3Wxr6yr0vrTwwl8Gp3YIk1be-FhyesGAiYrTU5Fqz=w2400
+  src: https://lh3.googleusercontent.com/pw/AP1GczP9r_OP9dnmUN8G8csiAULujYUMbhalM8PihemCWKgsVPP7-jjLh31bZSzXRn0X-cH82cePqzF3Wxr6yr0vrTwwl8Gp3YIk1be-FhyesGAiYrTU5Fqz=
   description: wu ya
   lightbox: false
 
 - name: Orchideen
-  src: https://lh3.googleusercontent.com/pw/AP1GczNqm9x5iZvv1VC1KeaCm677EdMMxsTcIoRt3np4TDOeaRlw4_mW_khMAKNY61ljcgJR5sGVZ-Kix_tZz1LkdvL5hqiJEINij7a_YV9Svj8XRaqLzks9=w2400
+  src: https://lh3.googleusercontent.com/pw/AP1GczNqm9x5iZvv1VC1KeaCm677EdMMxsTcIoRt3np4TDOeaRlw4_mW_khMAKNY61ljcgJR5sGVZ-Kix_tZz1LkdvL5hqiJEINij7a_YV9Svj8XRaqLzks9=
   description: lan hua
   lightbox: false
-

_includes/ceramic.html

@@ -4,14 +4,20 @@
         {% for item in site.data.ceramic %}
         {% if item.lightbox %}
         <a class="glightbox cursor-zoom-in group duration-1000 transition-all transform border rounded p-2"
-            x-intersect="$el.classList.add('fadeInUp')" href="{{ item.src }}">
+            x-intersect="$el.classList.add('fadeInUp')" href="{{ item.src }}w800">
             {% else %}
-            <div class="group duration-1000 transition-all transform border rounded p-2"
+            <div class="group duration-1000 transition-all transform border rounded p-2 relative"
                 x-intersect="$el.classList.add('fadeInUp')">
                 {% endif %}
                 <h5 class="mb-2 text-center group-hover:text-gray-200">{{ item.name }}</h5>
-                <img src="{{ item.src }}" class="h-auto w-full group-hover:sepia rounded" width="400" height="500"
-                    alt="{{ item.name }}" title="{{ item.description }}" />
+                <div class="relative h-52 w-full">
+                    <img src="{{ item.src }}w500" class="hidden h-auto w-full group-hover:sepia rounded" width="400"
+                        height="500" alt="{{ item.name }}" title="{{ item.description }}" />
+                    <div class="absolute inset-0 w-full h-full"
+                        style="background: url({{ item.src }}w500);background-size: cover; background-position: center;">
+                    </div>
+                </div>
+
                 {% if item.lightbox %}
         </a>{% else %}
     </div>{% endif %}

_includes/sanchoPanza.html

@@ -4,7 +4,7 @@
             <button type="button" data-modal-toggle="modal" data-modal-target="modal"
                 @click.prevent="(e) => { e.stopPropagation(); player.play(); }"
                 class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
-                kurze Video Sancho Panza
+                Kurzes Video von Sancho Panza
             </button>
         </div>
 
@@ -31,13 +31,9 @@ <h3 class="text-xl font-semibold text-gray-900 lg:text-2xl dark:text-white">
                     <!--Modal body-->
                     <div class="relative overflow-y-auto p-4">
                         <div class="plyr__video-embed" x-ref="videoElement">
-                            <iframe 
-                            allowfullscreen 
-                            allowtransparency 
-                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                            width="315"
-                            height="560"
-                            title="Sancho Panza"
+                            <iframe allowfullscreen allowtransparency
+                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                                width="315" height="560" title="Sancho Panza"
                                 src="https://youtube.com/embed/PYxe_rfWEJE"></iframe>
                         </div>
                     </div>

index.html

@@ -7,35 +7,37 @@
 <section clsss="duration-1000 transition-all transform" x-intersect="$el.classList.add('fadeInUp')">
     <h1>Willkommen auf meiner Webseite!</h1>
     <p>
-        Mein Name ist Xiaoling Peng, von Beruf bin ich Webentwickler und bin leidenschaftlicher Künstler im Bereich der
-        Skulpturengestaltung.
-        Mit Materialien wie Pappmaché und Ton erwecke ich im meiner Freizeit Figuren zum Leben, die sowohl Fantasie als
-        auch Emotionen
-        widerspiegeln.
-        Jede meiner Kreationen ist ein Unikat, das mit viel Liebe zum Detail und Hingabe gefertigt wird.
-        Ich lasse mich von der Natur, Kunstgeschichte und den kleinen Wundern des Alltags inspirieren und freue mich,
-        diese Inspirationen in meinen
-        Arbeiten mit Ihnen zu teilen.
+        Ich bin Xiaoling Peng, Webentwickler sowie leidenschaftlicher Künstler im Bereich der Skulpturengestaltung. In
+        meiner
+        Freizeit erschaffe ich Figuren aus Pappmaché und Ton, die Fantasie und Emotionen zum Leben erwecken. Jede
+        Skulptur, die
+        ich anfertige, ist ein Unikat, mit viel Liebe zum Detail und Hingabe gestaltet. Meine Inspiration schöpfe ich
+        aus der
+        Natur, der Kunstgeschichte und den kleinen Wundern des Alltags. Es freut mich, diese Eindrücke in meinen Werken
+        mit
+        Ihnen zu teilen.
     </p>
 </section>
 
 
 <section clsss="duration-1000 transition-all transform" x-intersect="$el.classList.add('fadeInUp')">
-    <h3>Hier finden Sie eine Auswahl meiner bisherigen Projekte.</h3>
     <p>
-        Von fantasievollen Tierfiguren über ausdrucksstarke Porträts bis hin zu abstrakten Formen – meine Werke
-        entstehen aus Pappmaché und Ton und tragen immer meine persönliche Handschrift. Jedes Projekt ist eine Reise,
-        die mit einer
-        Idee beginnt und in einer einzigartigen Skulptur endet.
+        Auf dieser Seite finden Sie eine Auswahl meiner bisherigen Projekte – von fantasievollen Tierfiguren über
+        ausdrucksstarke Porträts bis hin zu abstrakten Formen. Jedes Werk trägt meine persönliche Handschrift und ist
+        das
+        Ergebnis einer kreativen Reise, die mit einer Idee beginnt und in einer einzigartigen Skulptur gipfelt.
     </p>
     <p>
-        Lassen Sie sich von meinen bisherigen Arbeiten inspirieren und entdecken Sie die Vielfalt meiner kreativen Welt.
-        Wenn Sie eine besondere Idee haben, die Sie gerne verwirklicht sehen möchten, stehe ich Ihnen gerne zur
-        Verfügung, um ein individuelles Projekt für Sie zu gestalten.
+        Lassen Sie sich von meinen Arbeiten inspirieren und entdecken Sie die Vielfalt meiner künstlerischen Welt. Wenn
+        Sie eine
+        besondere Idee verwirklichen möchten, stehe ich Ihnen gerne zur Verfügung, um ein individuelles Projekt für Sie
+        zu
+        gestalten.
     </p>
 </section>
 
 {% include sanchoPanza.html %}
+{% include instagram.html %}
 <!-- {% include donQuijote.html %} -->
 
 {% include paper.html %}

profile.html

@@ -6,54 +6,56 @@
 ---
 <section clsss="duration-1000 transition-all transform" x-intersect="$el.classList.add('fadeInUp')">
     <h1>Über mich als Webentwickler</h1>
-    <p>Ich bin ein erfahrener Webentwickler mit über 15 Jahren Expertise im Bereich TYPO3. Zusätzlich zu meiner
-        umfassenden
-        TYPO3-Erfahrung bin ich auch versiert in der Arbeit mit Neos und Pimcore. Meine technischen Fähigkeiten decken
-        ein
-        breites Spektrum moderner Webtechnologien ab, die ich mit Leidenschaft in meinen Projekten einsetze.</p>
+    <p>
+        Als erfahrener Webentwickler mit über 15 Jahren Spezialisierung auf TYPO3 bringe ich tiefgreifendes Know-how in
+        der
+        Entwicklung komplexer Webprojekte mit. Neben TYPO3 beherrsche ich auch die Arbeit mit Neos und Pimcore und setze
+        moderne
+        Webtechnologien leidenschaftlich in meinen Projekten um.
+    </p>
 </section>
 
 <section clsss="duration-1000 transition-all transform" x-intersect="$el.classList.add('fadeInUp')">
 
     <h3>Frontend-Entwicklung:</h3>
     <p>
-        Ich beherrsche HTML und CSS in all ihren Facetten und nutze Frameworks wie TailwindCSS, Bootstrap und
-        Foundation, um ästhetische und funktionale Benutzeroberflächen zu gestalten. Im Bereich JavaScript arbeite ich
-        mit
-        jQuery, Alpine.js sowie den modernen Frameworks React und Vue.js, um interaktive und dynamische Webanwendungen
-        zu
-        realisieren.
+        Meine Expertise umfasst HTML und CSS in all ihren Facetten, ergänzt durch die Nutzung von Frameworks wie
+        TailwindCSS,
+        Bootstrap und Foundation, um ästhetisch ansprechende und funktionale Benutzeroberflächen zu gestalten. Im
+        Bereich
+        JavaScript arbeite ich sowohl mit jQuery und Alpine.js als auch mit den modernen Frameworks React und Vue.js, um
+        interaktive und dynamische Webanwendungen zu entwickeln.
     </p>
 </section>
 <section clsss="duration-1000 transition-all transform" x-intersect="$el.classList.add('fadeInUp')">
     <h3>PHP und Backend-Entwicklung:</h3>
     <p>
-        Mit fundierter Erfahrung in der objektorientierten Programmierung in PHP (von Version 5.x bis 8.x) und
-        der Arbeit mit Frameworks wie Symfony und CodeIgniter entwickle ich robuste Backend-Lösungen. Ich verstehe die
-        Feinheiten der Datenbankentwicklung und -verwaltung, insbesondere mit MySQL, und stelle sicher, dass alle
-        Datenbanklösungen effizient
-        und skalierbar sind.
+        Ich habe umfassende Erfahrung in objektorientierter PHP-Programmierung (Versionen 5.x bis 8.x) und arbeite
+        routiniert
+        mit Frameworks wie Symfony und CodeIgniter, um skalierbare und robuste Backend-Lösungen zu entwickeln. Ein
+        weiterer
+        Schwerpunkt meiner Arbeit liegt in der Datenbankentwicklung und -verwaltung, vor allem mit MySQL, wobei ich auf
+        Effizienz und Skalierbarkeit achte.
     </p>
 </section>
 
 <section clsss="duration-1000 transition-all transform" x-intersect="$el.classList.add('fadeInUp')">
     <h3>Tools und Workflow:</h3>
     <p>
-        In meiner täglichen Arbeit setze ich auf bewährte Tools und Methoden, um reibungslose
-        Entwicklungsprozesse zu gewährleisten. Ich nutze Git für Versionskontrolle und arbeite mit Docker (ddev) für die
-        Containerisierung meiner Projekte.
+        Für eine reibungslose Entwicklung setze ich auf bewährte Tools und Methoden. Git nutze ich für die
+        Versionskontrolle,
+        während ich mit Docker (ddev) eine effiziente Containerisierung meiner Projekte sicherstelle.
     </p>
 </section>
 
 <section clsss="duration-1000 transition-all transform" x-intersect="$el.classList.add('fadeInUp')">
-    <p>Meine Expertise erstreckt sich über Frontend- und Backend-Entwicklung, wobei ich stets auf moderne Technologien
-        und Best Practices setze. Mein Ziel ist es, benutzerfreundliche, responsive und leistungsstarke Weblösungen zu
-        schaffen,
-        die nicht nur funktional, sondern auch visuell ansprechend sind. Egal ob es sich um eine einfache Website, einen
-        Online-Shop oder eine komplexe Webanwendung handelt – ich sorge dafür, dass das Ergebnis Ihre Erwartungen
+    <p>Mit meiner umfassenden Expertise in Frontend- und Backend-Entwicklung verfolge ich stets einen technologie- und
+        praxisorientierten Ansatz. Mein Ziel ist es, benutzerfreundliche, responsive und leistungsstarke Weblösungen zu
+        schaffen, die sowohl funktional als auch visuell überzeugen. Egal, ob es sich um eine einfache Website, einen
+        Online-Shop oder eine komplexe Webanwendung handelt – ich garantiere, dass das Endergebnis Ihre Erwartungen
         übertrifft.
     </p>
 </section>
 <section clsss="duration-1000 transition-all transform" x-intersect="$el.classList.add('fadeInUp')">
-    <strong>Lassen Sie uns gemeinsam Ihr nächstes Webprojekt erfolgreich umsetzen!</strong>
+    <strong>Lassen Sie uns Ihr nächstes Webprojekt gemeinsam zum Erfolg führen!</strong>
 </section>