responsivce

This commit is contained in:
zktsn0w 2023-10-12 22:11:00 +02:00
parent 9dbc7b2084
commit 596bf7e9f5
2 changed files with 13 additions and 14 deletions

View File

@ -6,16 +6,16 @@ import Footer from "../views/Footer.astro";
<Navigation />
<div class="h-screen 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-2 grid-rows-3 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
class="col-span-1 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"
>
<a target="_blank" class="group" href="https://github.com/ZktSn0w/ColrJS">
<p class="text-2xl underline font-bold font-mono group-hover:text-emerald-500 text-emerald-800 transition">
Web-Entwicklung
</p>
</a>
<div class="flex flex-col gap-4">
<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.
@ -24,12 +24,11 @@ import Footer from "../views/Footer.astro";
Gerne unterstütze ich dich dabei, deine Online-Präsenz zu entwickeln.
</p>
</div>
<p class="font-mono font-bold text-zinc-700">
Colaborated with: <span class="text-emerald-700 underline"
><a target="_blank" href="https://iamsebastian.dev/">IamSebastianDev</a></span
>
<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>
<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"
@ -41,7 +40,7 @@ import Footer from "../views/Footer.astro";
<p class="ont-mono text-sm break-words">Weitere verwendete Technologien: TailwindCSS, SolidJS</p>
</div>
<div
class="col-span-1 row-start-2 col-start-2 bg-orange-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
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>
@ -53,7 +52,7 @@ import Footer from "../views/Footer.astro";
<p></p>
</div>
<div
class="col-span-2 row-start-3 bg-red-500 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 grid grid-rows-3 grid-cols-1"
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>

View File

@ -6,9 +6,9 @@ import Footer from "../views/Footer.astro";
<Navigation />
<div class="h-screen 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-2 grid-rows-3 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
class="col-span-1 row-span-2 bg-purple-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-purple-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
>
<a target="_blank" class="group" href="https://github.com/ZktSn0w/ColrJS">
<p class="text-2xl underline font-bold font-mono group-hover:text-emerald-500 text-emerald-800 transition">
@ -43,7 +43,7 @@ import Footer from "../views/Footer.astro";
<p class="ont-mono text-sm break-words">Weitere verwendete Technologien: TailwindCSS, SolidJS</p>
</div>
<div
class="col-span-1 row-start-2 col-start-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-start-2 2xl:col-start-2 bg-yellow-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">SolidJS Component Library</p>
@ -56,7 +56,7 @@ import Footer from "../views/Footer.astro";
<p></p>
</div>
<div
class="col-span-2 row-start-3 bg-emerald-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 grid grid-rows-3 grid-cols-1"
class="c2xl:col-span-2 2xl:row-start-3 bg-emerald-300 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">Weitere Projekte</p>