haaa

public/fonts/Syne/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2017 The Syne Project Authors (https://gitlab.com/bonjour-monde/fonderie/syne-typeface)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public/fonts/Syne/README.txt

@@ -0,0 +1,67 @@
+Syne Variable Font
+==================
+
+This download contains Syne as both a variable font and static fonts.
+
+Syne is a variable font with this axis:
+  wght
+
+This means all the styles are contained in a single file:
+  Syne-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Syne:
+  static/Syne-Regular.ttf
+  static/Syne-Medium.ttf
+  static/Syne-SemiBold.ttf
+  static/Syne-Bold.ttf
+  static/Syne-ExtraBold.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.

src/components/LandingHeroAnim.tsx

@@ -0,0 +1,65 @@
+import { For, Show, createSignal } from "solid-js"
+const [mockElements, setmock] = createSignal([...Array(60).keys()])
+
+export const LandingHeroAnim = () => {
+    return (
+        <>
+            <div class="relative justify-center items-center hidden lg:flex text-neutral-100">
+                <div class="w-full h-fit min-h-[66vh] relative grid grid-cols-10 grid-rows-6 gap-1" >
+                    <For each={mockElements()}>{() =>
+                        <div class="w-full h-full relative bg-neutral-800 hover:bg-emerald-600 transition-all duration-[1500ms] hover:duration-100">
+                        </div>
+                    }</For>
+
+
+                </div>
+                <section id="whoami" class="h-3/4 rounded-tl-3xl rounded-br-3xl rounded-bl-md rounded-tr-md border border-neutral-100 backdrop-blur-xl hover:backdrop-blur-none hover:bg-neutral-800 transition-all z-30 w-3/4 mx-auto absolute flex justify-center items-center flex-col py-5">
+                    <div class="w-5/6 flex-1 flex flex-col md:flex-row justify-center items-center gap-6">
+                        <div class="w-full flex flex-col items-center gap-3">
+                            <div
+                                class="flex justify-center items-center w-3/5 border-4 border-emerald-500 aspect-square rounded-2xl overflow-hidden"
+                            >
+                                <img class="aspect-square object-contain w-full" src="/img/me.jpg" alt="" />
+                            </div>
+                            <p class="text-2xl">Das bin ich!</p>
+                        </div>
+                        <div class="flex flex-col gap-1 max-md:items-center text-center md:text-left md:text-2xl w-full">
+                            <p class="md:text-3xl md:underline">Hi, ich bin Dominik</p>
+                            <p>
+                                Ein <span class="text-emerald-300">Full-Stack</span> Web-Developer aus München
+                            </p>
+                            <p>
+                                <span class="text-emerald-300">Toll</span> das du da bist, endecke gerne meinen Kosmos! &#128640;
+                            </p>
+                        </div>
+                    </div>
+                    <img class="animate-bounce h-7 sm:hidden" src="/img/arrowDown.svg" alt="" />
+                </section>
+            </div>
+
+            <section id="whoami" class="text-neutral-100 w-full h-fit min-h-[66vh] justify-center items-center flex-col py-5 max-lg:flex hidden">
+                <div class="w-5/6 flex-1 flex flex-col md:flex-row justify-center items-center gap-6">
+                    <div class="w-full flex flex-col items-center gap-3">
+                        <div
+                            class="flex justify-center items-center w-3/5 border-4 border-emerald-500 aspect-square rounded-2xl overflow-hidden"
+                        >
+                            <img class="aspect-square object-contain w-full" src="/img/me.jpg" alt="" />
+                        </div>
+                        <p class="text-2xl">Das bin ich!</p>
+                    </div>
+                    <div class="flex flex-col gap-1 max-md:items-center text-center md:text-left md:text-2xl w-full">
+                        <p class="md:text-3xl md:underline">Hi, ich bin Dominik</p>
+                        <p>
+                            Ein <span class="text-emerald-300">Full-Stack</span> Web-Developer aus München
+                        </p>
+                        <p>
+                            <span class="text-emerald-300">Toll</span> das du da bist, endecke gerne meinen Kosmos! &#128640;
+                        </p>
+                    </div>
+                </div>
+                <img class="animate-bounce h-7 sm:hidden" src="/img/arrowDown.svg" alt="" />
+            </section>
+        </>
+
+    )
+}

src/components/Navigation.tsx

@@ -9,6 +9,8 @@ const setShowMobileNav = () => {
 };
 
 export const Navigation = () => {
+  console.log(mobileNav());
+  
   return (
     <>
     <meta charset="UTF-8" />
@@ -31,7 +33,7 @@ export const Navigation = () => {
               <a class="hover:underline transition-all hover:text-zinc-50" href="/products">
                 Produkte
               </a>
-              <a class="hover:underline transition-all hover:text-zinc-50" href="/mystory/">
+              <a class="hover:underline transition-all hover:text-zinc-50" href="/mystory">
                 &#220;ber Mich
               </a>
               <a class="hover:underline transition-all hover:text-zinc-50" href="/skills">

src/layouts/PageLayout.astro

@@ -7,11 +7,13 @@ import Footer from '../views/Footer.astro';
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
-  <body>
+  <body class="bg-neutral-900">
-    <Navigation />
+    <Navigation client:only />
     <article>
       <slot />
     </article>
+    <div class="block">
     <Footer />
+    </div>
   </body>
 </html>

src/pages/impress.astro

@@ -6,10 +6,10 @@ import { Button } from "../components/partials/Button";
 import Projects from "../views/Projects.astro";
 import AboutMe from "../views/AboutMe.astro";
 import Products from "../views/Products.astro";
-import LandingHero from "../views/LandingHero.astro";
 import Footer from "../views/Footer.astro";
 import { DecryptLink } from "../components/partials/DecryptLink";
 import { ImpressComponent } from "../components/Impress";
+import PageLayout from "../layouts/PageLayout.astro";
 
 const encryptedMailLink = btoa("mailto:dominik@oceanwave018.de");
 const encryptedMail = btoa("dominik@oceanwave018.de");
@@ -17,18 +17,8 @@ const encryptedPhoneNumberLink = btoa("tel:017664001756");
 const encryptedPhoneNumber = btoa("+49 176 6400 1756");
 ---
 
-<html lang="en">
+<PageLayout>
-  <head>
+    <section class="min-h-screen bg-neutral-100 py-6 max-w-full w-screen flex flex-col justify-center gap-5">
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width" />
-    <title>Dominik - FullStackDev</title>
-  </head>
-  <body class="bg-zinc-900 text-zinc-100">
-    <Navigation client:load />
-    <section class="h-auto py-6 max-w-full w-1/2 flex flex-col justify-center gap-5">
       <ImpressComponent client:idle phoneNumber={encryptedPhoneNumber} email={encryptedMail} />
-      <Footer />
     </section>
-  </body>
+  </PageLayout>
-</html>

src/pages/index.astro

@@ -6,24 +6,15 @@ import { Button } from "../components/partials/Button"
 import Projects from "../views/Projects.astro" 
 import AboutMe from "../views/AboutMe.astro"
 import Products from "../views/Products.astro"
-import LandingHero from "../views/LandingHero.astro"
 import Footer from "../views/Footer.astro"
+import PageLayout from "../layouts/PageLayout.astro";
+import { LandingHeroAnim } from "../components/LandingHeroAnim";
 
 const encryptedMail = btoa('dominik@oceanwave018.de')
 ---
 
-<html lang="en">
+<PageLayout>
-  <head>
+    <LandingHeroAnim />
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="generator" content={Astro.generator} />
-    <title>Dominik - FullStackDev</title>
-
-  </head>
-  <body class="bg-zinc-900 text-zinc-100">
-    <Navigation client:load />
-    <LandingHero />
     <Projects />
     <AboutMe />
     <section class="w-screen h-28 bg-emerald-500 text-zinc-900 flex flex-col justify-center items-center gap-4">
@@ -38,6 +29,4 @@ const encryptedMail = btoa('dominik@oceanwave018.de')
         <Button client:load encryptedMail={encryptedMail} text="E-Mail schreiben"/>
       </div>      
     </section>
-    <Footer />
+</PageLayout>
-  </body>
-</html>

src/pages/mystory.astro

@@ -2,6 +2,7 @@
 import { Navigation } from "../components/Navigation";
 import { StoryItems } from "../components/StoryItems";
 import { StoryItemType } from "../components/partials/StoryItem";
+import PageLayout from "../layouts/PageLayout.astro";
 import Footer from "../views/Footer.astro";
 
 const storyItems: StoryItemType[] = [
@@ -37,9 +38,9 @@ const storyItems: StoryItemType[] = [
 ];
 ---
 
-<Navigation />
+<PageLayout>
 <div class="min-h-screen w-screen p-10 bg-zinc-100">
   <h1 class="text-4xl font-bold">Meine Geschichte</h1>
   <StoryItems client:load storyItems={storyItems} />
 </div>
-<Footer />
+</PageLayout>

src/pages/products.astro

@@ -1,70 +1,68 @@
 ---
 import { Navigation } from "../components/Navigation";
 import Footer from "../views/Footer.astro";
-import PageLayout from '../layouts/PageLayout.astro'
+import PageLayout from "../layouts/PageLayout.astro";
 ---
 
 <PageLayout>
-<div class="h-screen w-screen flex flex-col">
+  <div class="w-screen flex flex-col">
-  <div class="flex-1 w-screen bg-zinc-900 flex justify-center items-center py-8 px-12">
+    <div class="flex-1 w-screen bg-zinc-900 flex justify-center items-center py-8 px-12">
-    <div class="grid grid-cols-1 2xl:grid-cols-2 grid-rows-3 xl:w-1/2 h-full gap-7">
+      <div class="grid grid-cols-1 2xl:grid-cols-2 grid-rows-3 xl:w-1/2 h-full gap-7">
-      <div
+        <div
-        class="col-span-1 2xl:row-span-2 bg-yellow-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
+          class="col-span-1 2xl:row-span-2 bg-yellow-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
-      >
+        >
-          <p class="text-2xl font-bold font-mono  text-zinc-800 transition">
+          <p class="text-2xl font-bold font-mono text-zinc-800 transition">Web-Entwicklung</p>
-            Web-Entwicklung
+          <div class="flex flex-col gap-4 max-xl:hidden">
+            <p class="font-mono text-lg break-words">
+              Als Webentwickler nutze ich moderne Frameworks, um erstklassige Websites mit einem herausragenden
+              Nutzererlebnis zu gestalten. Meine Leidenschaft gilt der Schaffung ansprechender Online-Präsenzen.
+            </p>
+            <p class="font-mono text-lg break-words">
+              Gerne unterstütze ich dich dabei, deine Online-Präsenz zu entwickeln.
+            </p>
+          </div>
+          <p class="xl:hidden font-mono break-words">
+            Ich bin Webentwickler und erstelle großartige Websites mit modernen Frameworks, um ein beeindruckendes
+            Nutzererlebnis zu bieten. Lass mich dir bei deiner Online-Präsenz helfen.
           </p>
-        <div class="flex flex-col gap-4 max-xl:hidden">
+          <p></p>
+        </div>
+        <div
+          class="col-span-1 row-span-1 bg-purple-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
+        >
+          <p class="font-mono font-bold text-2xl">Schulungen</p>
           <p class="font-mono text-lg break-words">
-            Als Webentwickler nutze ich moderne Frameworks, um erstklassige Websites mit einem herausragenden
+            Zusätzlich biete ich gerne IT-Schulungen auf Anfrage an, um digitale Kompetenzen zu vermitteln.
-            Nutzererlebnis zu gestalten. Meine Leidenschaft gilt der Schaffung ansprechender Online-Präsenzen.
           </p>
-          <p class="font-mono text-lg break-words">
+          <p class="ont-mono text-sm break-words">Weitere verwendete Technologien: TailwindCSS, SolidJS</p>
-            Gerne unterstütze ich dich dabei, deine Online-Präsenz zu entwickeln.
+        </div>
+        <div
+          class="col-span-1 2xl:row-start-2 2xl:col-start-2 bg-orange-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
+        >
+          <div>
+            <p class="font-mono font-bold text-2xl">Server-Deployment</p>
+          </div>
+          <p class="font-mono">
+            Als Spezialist für Server-Deployment und Anwendungsbereitstellung mit Techniken wie Docker sorge ich dafür,
+            dass Anwendungen reibungslos und effizient auf Servern laufen.
           </p>
+          <p></p>
         </div>
-        <p class="xl:hidden font-mono break-words">
+        <div
-          Ich bin Webentwickler und erstelle großartige Websites mit modernen Frameworks, um ein beeindruckendes
+          class="2xl:col-span-2 2xl:row-start-3 bg-red-500 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 grid grid-rows-3 grid-cols-1"
-          Nutzererlebnis zu bieten. Lass mich dir bei deiner Online-Präsenz helfen.
+        >
-        </p>
+          <div>
-        <p></p>
+            <p class="font-mono font-bold text-2xl">WICHTIG!</p>
-      </div>
+          </div>
-      <div
+          <div>
-        class="col-span-1 row-span-1 bg-purple-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
+            <p class="font-mono text-base">
-      >
+              Aktuell bin ich froh ein Teil eines Teams in einer Digital-agentur zu sein, jedoch kann ich dadurch auch
-        <p class="font-mono font-bold text-2xl">Schulungen</p>
+              einige Dienste nicht als Selbständiger anbieten, trotzdem kannst du dich gerne bei mir melden und ich
-        <p class="font-mono text-lg break-words">
+              berate dich dementsprechend.
-          Zusätzlich biete ich tolle IT-Schulungen auf Anfrage an, um digitale Kompetenzen zu vermitteln.
+            </p>
-        </p>
+          </div>
-        <p class="ont-mono text-sm break-words">Weitere verwendete Technologien: TailwindCSS, SolidJS</p>
-      </div>
-      <div
-        class="col-span-1 2xl:row-start-2 2xl:col-start-2 bg-orange-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
-      >
-        <div>
-          <p class="font-mono font-bold text-2xl">Server-Deployment</p>
-        </div>
-        <p class="font-mono">
-          Als Spezialist für Server-Deployment und Anwendungsbereitstellung mit Techniken wie Docker sorge ich dafür,
-          dass Anwendungen reibungslos und effizient auf Servern laufen.
-        </p>
-        <p></p>
-      </div>
-      <div
-        class="2xl:col-span-2 2xl:row-start-3 bg-red-500 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 grid grid-rows-3 grid-cols-1"
-      >
-        <div>
-          <p class="font-mono font-bold text-2xl">WICHTIG!</p>
-        </div>
-        <div>
-          <p class="font-mono text-base">
-            Aktuell bin ich froh ein Teil eines Teams in einer Digital-agentur zu sein, jedoch kann ich dadurch auch
-            einige Dienste nicht als Selbständiger anbieten, trotzdem kannst du dich gerne bei mir melden und ich berate
-            dich dementsprechend.
-          </p>
         </div>
       </div>
     </div>
   </div>
-</div>
 </PageLayout>

src/pages/projects.astro

@@ -1,10 +1,11 @@
 ---
 import { Navigation } from "../components/Navigation";
+import PageLayout from "../layouts/PageLayout.astro";
 import Footer from "../views/Footer.astro";
 ---
 
-<Navigation />
+<PageLayout>
-<div class="h-screen w-screen flex flex-col">
+<div class="w-screen flex flex-col">
   <div class="flex-1 w-screen bg-zinc-900 flex justify-center items-center py-8 px-12">
     <div class="grid grid-cols-1 2xl:grid-cols-2 grid-rows-3 xl:w-1/2 h-full gap-7">
       <div
@@ -68,5 +69,5 @@ import Footer from "../views/Footer.astro";
       </div>
     </div>
   </div>
-  <Footer />
 </div>
+</PageLayout>

src/pages/skills.astro

@@ -0,0 +1,8 @@
+---
+import PageLayout from "../layouts/PageLayout.astro";
+
+---
+
+<PageLayout>
+    
+</PageLayout>

src/styles/global.css

@@ -3,6 +3,11 @@
     src: url("/fonts/FiraSans/FiraSans-Regular.ttf") format("truetype");
 }
 
+@font-face {
+  font-family: syne;
+  src: url("/fonts/Syne/Syne-VariableFont_wght.ttf") format("truetype");
+}
+
 @keyframes pulse-custom {
     0%, 100% {
       opacity: 1;
@@ -13,5 +18,6 @@
   }
 
 body {
-    font-family: 'Fira';
+    font-family: 'syne';
+    font-weight: bold;
 }

src/views/LandingHero.astro

@@ -1,22 +0,0 @@
-<section id="whoami" class="w-full h-fit min-h-[66vh] flex justify-center items-center flex-col py-5">
-    <div class="w-5/6 flex-1 flex flex-col md:flex-row justify-center items-center gap-6">
-      <div class="w-full flex flex-col items-center gap-3">
-        <div
-          class="flex justify-center items-center w-3/5 border-4 border-emerald-500 aspect-square rounded-2xl overflow-hidden"
-        >
-          <img class="aspect-square object-contain w-full" src="/img/me.jpg" alt="" />
-        </div>
-        <p class="text-2xl">Das bin ich!</p>
-      </div>
-      <div class="flex flex-col gap-1 max-md:items-center text-center md:text-left md:text-2xl w-full">
-        <p class="md:text-3xl md:underline">Hi, ich bin Dominik</p>
-        <p>
-          Ein <span class="text-emerald-300">Full-Stack</span> Web-Developer aus München
-        </p>
-        <p>
-          <span class="text-emerald-300">Toll</span> das du da bist, endecke gerne meinen Kosmos! &#128640;
-        </p>
-      </div>
-    </div>
-    <img class="animate-bounce h-7 sm:hidden" src="/img/arrowDown.svg" alt="" />
-  </section>

src/views/Products.astro

@@ -12,7 +12,7 @@ const products: Product[] = [
   {
     icon: "/img/terminal.svg",
     title: "Server-Deployment",
-    text: "Aufsetzen von Web-Anwendungen sowie weiteren Lösungen in der Cloud oder in ihrem Netzwerk."
+    text: "Aufsetzen von Web-Anwendungen sowie weiteren Lösungen in der Cloud oder in deinem Netzwerk."
   },
   {
     icon: "/img/layers.svg",
@@ -31,8 +31,8 @@ const products: Product[] = [
         products.slice(0, 3).map((product, i) => {
           return (
             <div
-              class={`sm:flex-col h-auto flex items-center px-3 py-2 gap-4 w-full rounded-lg ${
+              class={`sm:flex-col h-auto flex items-center px-3 py-2 gap-4 w-full rounded-lg shadow-md ${
-                i % 2 === 0 ? "bg-emerald-400 text-zinc-900 flex-row" : "bg-zinc-900 text-zinc-100 flex-row-reverse"
+                i % 2 === 0 ? "bg-gradient-to-r from-emerald-400 to-emerald-500 text-zinc-900 flex-row" : "bg-gradient-to-l from-neutral-900 to-neutral-800 text-neutral-100 flex-row-reverse"
               }`}
             >
               <img class={`h-8 sm:h-12 ${i % 2 == 0 ? "" : "invert"}`} src={product.icon} alt="" />

src/views/Projects.astro

@@ -5,17 +5,17 @@ const projects: Project[] = [
   {
     icon: "/img/layers.svg",
     title: "ColrJS",
-    text: "Farbpaletten aus Bildern extrahieren."
+    text: ""
   },
   {
     icon: "/img/layers.svg",
-    title: "Portfolio",
+    title: "Mein Portfolio",
-    text: "Mein Portfolio"
+    text: ""
   },
   {
     icon: "/img/layers.svg",
     title: "SolidJS Komponenten-Bibliothek",
-    text: "Fertige Komponenten für SolidJS Projekte"
+    text: "coming soon..."
   },
   {
     icon: "/img/layers.svg",
@@ -27,24 +27,24 @@ const projects: Project[] = [
 import { Button } from "../components/partials/Button";
 ---
 
-<section class="py-5 w-screen h-[66vh] bg-zinc-50 text-zinc-900">
+<section class="w-screen min-h-[66vh] bg-zinc-50 text-zinc-900">
-  <div class="w-5/6 flex flex-col justify-around items-center h-full mx-auto gap-2">
+  <div class="py-5  w-5/6 flex flex-col justify-around items-center h-full mx-auto gap-2">
     <p class="text-2xl underline">Meine Projekte</p>
     <div
-      class="max-sm:flex-1 border-2 sm:grid sm:grid-cols-2 sm:gap-4 sm:grid-rows-1 py-3 justify-around flex flex-col rounded-2xl border-zinc-900 border-dashed overflow-hidden px-3"
+      class="max-sm:flex-1 gap-2 border-2 sm:grid sm:grid-cols-2 sm:gap-4 sm:grid-rows-1 py-3 justify-around flex flex-col rounded-2xl border-zinc-900 border-dashed overflow-hidden px-3"
     >
       {
         projects.slice(0, 4).map((project, i) => {
           return (
             <div
-              class={`sm:flex-col sm:justify-center sm:items-center sm:h-auto h-1/5 flex justify-between sm:py-3 ${
+              class={`sm:flex-col sm:justify-center sm:items-center sm:h-auto h-1/5 flex justify-between sm:py-3 shadow-md ${
-                i % 2 === 0 ? "flex-row-reverse bg-emerald-400" : "flex-row bg-zinc-900 text-zinc-100"
+                i % 2 === 0 ? "flex-row-reverse bg-gradient-to-r from-emerald-400 to-emerald-500" : "flex-row bg-gradient-to-tl from-zinc-900 to-zinc-800 text-zinc-100"
               }  rounded-lg px-2 py-2 gap-5`}
             >
               <div class="max-sm:flex-1 min-w-[2.5rem] flex justify-center">
                 <img class={`w-10 ${i % 2 === 0 ? "" : "invert"}`} src={project.icon} alt={`img of ${project.icon}`} />
               </div>
-              <div class="flex flex-col justify-center">
+              <div class="flex flex-col justify-center flex-[2]">
                 <p class="text-lg sm:text-center">{project.title}</p>
                 <p class="text-sm sm:text-center">{project.text}</p>
               </div>
@@ -59,4 +59,5 @@ import { Button } from "../components/partials/Button";
       </div>
     </div>
   </div>
+  <svg class="rotate-180 max-md:hidden block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#18181b" fill-opacity="1" d="M0,224L60,197.3C120,171,240,117,360,117.3C480,117,600,171,720,170.7C840,171,960,117,1080,122.7C1200,128,1320,192,1380,224L1440,256L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"></path></svg>
 </section>