chore: tweak all the stuff!

Author: mandrasch

src/content/pages/projekte.md

@@ -3,5 +3,5 @@ title: "Projekte"
 ---
 
 <p style="text-align:center;margin-bottom:2rem">
-    In meiner Freizeit erstelle ich gerne Tutorials und Demo-Projekte.
+    Sharing is caring!
 </p>

src/content/pages/ueber-mich.md

@@ -6,55 +6,51 @@ title: "Über mich"
 
 <!-- I'm currently located in the wonderful city of Vienna, happy to travel via Klimaticket through Austria. Moved from Cologne, Germany to Vienna in 2020.-->
 
-<h3>Erfahrung als Web-Entwickler 👨‍💻</h3>
-
-Zertifizierungen:
+<h3>Bildung 🎓</h3>
 
- <ul>
+<ul style="margin-top:2.5rem;">
     <li>
-        Staatlich anerkannter Fachinformatiker für Anwendungsentwicklung, IHK Berlin
+       Ausbildung Staatlich anerkannter Fachinformatiker für Anwendungsentwicklung<br>
+       <small>Junghanns.NET GmbH / IHK Berlin</small>
+    </li>
+    <li>
+      Master of Arts Pädagogik und Management in der Sozialen Arbeit<br><small>Technische Hochschule Köln</small>
+    </li>
+    <li>
+   Bachelor of Arts Medienbildung - Audiovisuelle Kultur und Kommunikation<br> <small>Otto-von-Guericke Universität Magdeburg</small>
     </li>
 </ul>
 
-Meine letzten Developer-Rollen:
+<h3>Stationen als Full Stack Web Developer 👨‍💻</h3>
 
  <ul>
+    <li>fredmansky, Linz<br>
+    <small><!--Full Stack Web Developer<br>-->Craft CMS, Vue, Tailwind; befristete Projekstelle als Full Stack Developer, Arbeit an einem größeren Webseiten-Projekt, welches mehrere Brands und Sprachen in einem Content-Hub mit Craft CMS vereint. Umsetzung von erstklassigen Figma-Designs.</small>
+    </li>
     <li>anexia, Wien<br>
-    <small>Full Stack Web Developer<br>Nuxt/Vue, Strapi CMS, Tailwind, Docker Compose <br>Tätigkeit im Development-Team der Marketingabteilung, u.a. Barrierefreiheits-Optimierung und Weiterentwicklung von <a href="https://www.netcup.com/" target="_blank">netcup.com</a>, einer Tochterfirma von anexia.</small>
+    <small><!--Full Stack Web Developer<br>-->Nuxt/Vue, Strapi CMS, Tailwind, Docker Compose; Tätigkeit im Development-Team der Marketingabteilung, u.a. Barrierefreiheits-Optimierung und Weiterentwicklung von <a href="https://www.netcup.com/" target="_blank">netcup.com</a>, einer Tochterfirma von anexia.</small>
     </li>
     <li>allaboutapps & dotsandlines, Wien<br>
-    <small>Full Stack Web Developer<br>Craft CMS, PHP, JavaScript, WordPress, Tailwind, DDEV, DX <br>Betreuung vielfältiger Kund:innen-Projekte im Designagentur-Umfeld.</small>
+    <small><!--Full Stack Web Developer<br>-->Craft CMS, PHP, JavaScript, WordPress, Tailwind, DDEV, DX; Betreuung vielfältiger Kund:innen-Projekte im Designagentur-Umfeld.</small>
     </li>
     <li>gugler* MarkenSinn, St. Pölten<br>
-    <small>Full Stack Web Developer<br> JavaScript, WordPress / PHP, Ionic Angular, SvelteKit, DDEV, DX<br>Web Accessibility Testing umd Umsetzung sowie Betreuung von Kund:innen-Projekte in der Kommunikationsagentur, die der nachhaltigen Öko-Druckerei gugler* angehört.</small></li>
+    <small><!--Full Stack Web Developer<br>--> JavaScript, WordPress / PHP, Ionic Angular, SvelteKit, DDEV, DX; Web Accessibility Testing umd Umsetzung sowie Betreuung von Kund:innen-Projekte in der Kommunikationsagentur, die der nachhaltigen Öko-Druckerei gugler* angehört.</small></li>
  </ul>
 
- <p>Ich verfüge über praktische Erfahrungen im Bereich Web Accessibility Testing sowie der barrierearmen Umsetzung von Webseiten.</p>
-
-<h3>Bildung 🎓</h3>
+ <p>Ich verfüge insbesondere über praktische Erfahrungen im Bereich Web Accessibility Testing, der barrierearmen Umsetzung von Webseiten sowie ganzheitlicher Projektarbeit mit Blick auf UX / AX / DX.</p>
+<!-- TODO: implement -->
+<!-- <h3>Stationen als wissenschaftlicher Mitarbeiter</h3> -->
 
-<ul style="margin-top:2.5rem;">
-    <li>
-      Master of Arts Pädagogik und Management in der Sozialen Arbeit<br><small>Technische Hochschule Köln</small>
-    </li>
-    <li>
-   Bachelor of Arts Medienbildung - Audiovisuelle Kultur und Kommunikation<br> <small>Otto-von-Guericke Universität Magdeburg</small>
-    </li>
-    <li>
-       Ausbildung Staatlich anerkannter Fachinformatiker für Anwendungsentwicklung<br>
-       <small>Junghanns.NET GmbH / IHK Berlin</small>
-    </li>
+<p>Meine gesamte Vita findet sich auf <a href="https://www.linkedin.com/in/mandrasch/">LinkedIn</a>.</p>
 
-</ul>
 
 <h3>Persönlicher Hintergrund</h3>
 
-Meine Freude am Programmieren habe ich schon als Teenager entdeckt. Nach der Schule absolvierte ich eine dreijährige duale Fachinformatiker-Ausbildung in Berlin.
+Meine Freude am Programmieren habe ich schon als Teenager entdeckt, u.a. mit einem PHP4-Buch und der <a href="https://www.schattenbaum.net/php/" target="_blank">schattenbaum.net-Lernseite</a>. Eine erste kleine Firmenseite für Bekannte entstand. Nach dem Abitur absolvierte ich daher eine dreijährige duale Fachinformatiker-Ausbildung in Berlin, um mehr praktische Erfahrung zu sammeln.
 
-Danach entschied ich mich für ein Studium im Bereich Medienpädagogik (Sozialwissenschaften) um meinen Horizont zu erweitern. Nach dem Master-Abschluss arbeitete ich in Köln als Wissenschaftlicher Mitarbeiter in Hochschulprojekten, u.a. zu Themen wie Open Educational Resources (OER) oder Digitaler Inklusion.
+Anschließend entschied ich mich für ein Studium im Bereich Medienpädagogik (Sozialwissenschaften), um meinen Horizont zu erweitern. Der Medienbildungs-Bachelor führte mich nach Magdeburg. Nach dem Master-Abschluss arbeitete ich in Köln als wissenschaftlicher Mitarbeiter in Hochschulprojekten, u.a. zu Themen wie Open Educational Resources (OER) und Digitaler Inklusion. Ein persönlicher Antrieb ist stets das Thema Soziale Gerechtigkeit für mich.
 
-Seit dem Jahr 2020 arbeite ich wieder hauptberuflich als Web-Entwickler. Vielen Dank an die Agentur gugler\* MarkenSinn, die mir den Wiedereinstieg mit speziellem Fokus auf Barrierefreiheit und Sustainable Web Design ermöglichte.
+Seit dem Jahr 2020 arbeite ich wieder hauptberuflich als Web-Entwickler. Vielen Dank an die Agentur gugler\* MarkenSinn, die mir den Wiedereinstieg mit speziellem Fokus auf Barrierefreiheit und Sustainable Web Design in Österreich ermöglichte.
 
 Ich freue mich, dass ich auch als Web-Entwickler Themen wie Digitale Inklusion - durch Barrierefreiheit im Web - oder das Thema Klimaschutz - durch Green Coding und Sustainable Web Design - vorantreiben kann.
 
-<p>Meine gesamte Vita findet sich auf <a href="https://www.linkedin.com/in/mandrasch/">LinkedIn</a>.</p>

src/navigation.ts

@@ -7,7 +7,6 @@ export const headerData = {
     { text: 'Projekte', href: getPermalink('/projekte') },
     { text: 'Schreiben', href: getPermalink('/schreiben') },
     { text: 'Lesen', href: getPermalink('/lesen') },
-    { text: 'English', href: getPermalink('/en') },
   ],
 };
 

src/pages/absurditaet-des-lebens.astro

@@ -19,7 +19,7 @@ const metadata = {
 
 <Layout metadata={metadata}>
   <section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-4xl">
-    <h1 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 font-heading">
+    <h1 class="text-4xl md:text-5xl font-bold leading-tighter tracking-normal mb-8 font-heading">
       {title}
     </h1>
     <div class="mx-auto prose dark:prose-invert max-w-4xl">

src/pages/blog/[...page].astro

@@ -4,7 +4,7 @@ import { getAllPosts, getFeaturedImage, formatDate, stripHtml } from '~/utils/wo
 
 export async function getStaticPaths() {
   const allPosts = await getAllPosts();
-  const postsPerPage = 10;
+  const postsPerPage = 12;
   const totalPages = Math.ceil(allPosts.length / postsPerPage);
   
   return Array.from({ length: totalPages }, (_, i) => ({
@@ -26,53 +26,55 @@ const metadata = {
 ---
 
 <Layout metadata={metadata}>
-  <section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-4xl">
-    <h1 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 font-heading">
+  <section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
+    <h1 class="text-4xl md:text-5xl font-bold leading-tighter tracking-normal mb-8 font-heading">
       Blog
     </h1>
 
-    <div class="space-y-12">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
       {posts.map((post) => {
         const featuredImage = getFeaturedImage(post);
         const excerpt = stripHtml(post.excerpt.rendered);
         const year = new Date(post.date).getFullYear();
         const postHref = `/blog/${year}/${post.slug}`;
 
         return (
-          <article class="border-b border-gray-200 dark:border-gray-700 pb-8">
+          <article class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden hover:shadow-md transition-shadow flex flex-col">
             {featuredImage && (
               <a href={postHref}>
                 <img
                   src={featuredImage.url}
                   alt={featuredImage.alt}
-                  class="w-full h-auto rounded-lg mb-4 hover:opacity-90 transition-opacity"
+                  class="w-full h-48 object-cover hover:opacity-90 transition-opacity"
                   loading="lazy"
                 />
               </a>
             )}
 
-            <div class="text-sm text-muted mb-2">
-              {formatDate(post.date)}
-            </div>
+            <div class="p-5 flex flex-col flex-1">
+              <div class="text-sm text-muted mb-2">
+                {formatDate(post.date)}
+              </div>
+
+              <h2 class="text-lg font-bold mb-3 tracking-normal">
+                <a
+                  href={postHref}
+                  class="hover:text-accent transition-colors"
+                  set:html={post.title.rendered}
+                />
+              </h2>
+
+              <div class="text-sm text-secondary mb-4 leading-relaxed line-clamp-3 flex-1">
+                {excerpt}
+              </div>
 
-            <h2 class="text-2xl md:text-3xl font-bold mb-3">
               <a
                 href={postHref}
-                class="hover:text-accent transition-colors"
-                set:html={post.title.rendered}
-              />
-            </h2>
-
-            <div class="text-secondary mb-4 leading-relaxed">
-              {excerpt}
+                class="text-accent hover:underline font-medium text-sm"
+              >
+                Weiterlesen →
+              </a>
             </div>
-
-            <a
-              href={postHref}
-              class="text-accent hover:underline font-medium"
-            >
-              Weiterlesen →
-            </a>
           </article>
         );
       })}

src/pages/blog/[year]/[slug].astro

@@ -52,7 +52,7 @@ const metadata = {
       </div>
 
       <h1
-        class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-6 font-heading"
+        class="text-4xl md:text-5xl font-bold leading-tighter tracking-normal mb-6 font-heading"
         set:html={post.title.rendered}
       />
 

src/pages/en/index.astro src/pages/en/index.astro.disabledsrc/pages/en/index.astro renamed to src/pages/en/index.astro.disabled

@@ -19,7 +19,7 @@ const metadata = {
 
 <Layout metadata={metadata}>
   <section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-4xl">
-    <h1 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 font-heading">
+    <h1 class="text-4xl md:text-5xl font-bold leading-tighter tracking-normal mb-8 font-heading">
       {title}
     </h1>
     <div class="mx-auto prose dark:prose-invert max-w-4xl">

src/pages/green-coding.astro

@@ -18,7 +18,7 @@ const metadata = {
 
 <Layout metadata={metadata}>
   <section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-4xl">
-    <h1 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 font-heading">
+    <h1 class="text-4xl md:text-5xl font-bold leading-tighter tracking-normal mb-8 font-heading">
       {title}
     </h1>
     <div class="mx-auto prose dark:prose-invert max-w-4xl">

src/pages/impressum-datenschutz.astro

@@ -15,7 +15,7 @@ const metadata = {
   <!-- ═══ HERO ═══ -->
   <section class="hero-section">
     <div class="hero-text">
-      <div class="status-badge">#OpenForWork · 20h/Wo. ab Herbst 2026</div>
+      <div class="status-badge">#OpenForWork · 20h/Wo. ab Herbst 2026 (angestellt)</div>
       <h1 class="font-heading text-4xl md:text-6xl leading-[1.1] mb-2 text-[var(--aw-color-text-heading)]">
         Matthias Andrasch,<br><em class="italic text-accent">Web Developer<br>& Hobby Blogger</em>
       </h1>