responsivce
This commit is contained in:
parent
9dbc7b2084
commit
596bf7e9f5
|
|
@ -6,16 +6,16 @@ import Footer from "../views/Footer.astro";
|
||||||
<Navigation />
|
<Navigation />
|
||||||
<div class="h-screen w-screen flex flex-col">
|
<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="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
|
<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">
|
<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">
|
<p class="text-2xl underline font-bold font-mono group-hover:text-emerald-500 text-emerald-800 transition">
|
||||||
Web-Entwicklung
|
Web-Entwicklung
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</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">
|
<p class="font-mono text-lg break-words">
|
||||||
Als Webentwickler nutze ich moderne Frameworks, um erstklassige Websites mit einem herausragenden
|
Als Webentwickler nutze ich moderne Frameworks, um erstklassige Websites mit einem herausragenden
|
||||||
Nutzererlebnis zu gestalten. Meine Leidenschaft gilt der Schaffung ansprechender Online-Präsenzen.
|
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.
|
Gerne unterstütze ich dich dabei, deine Online-Präsenz zu entwickeln.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<p class="xl:hidden font-mono break-words">
|
||||||
<p class="font-mono font-bold text-zinc-700">
|
Ich bin Webentwickler und erstelle großartige Websites mit modernen Frameworks, um ein beeindruckendes
|
||||||
Colaborated with: <span class="text-emerald-700 underline"
|
Nutzererlebnis zu bieten. Lass mich dir bei deiner Online-Präsenz helfen.
|
||||||
><a target="_blank" href="https://iamsebastian.dev/">IamSebastianDev</a></span
|
|
||||||
>
|
|
||||||
</p>
|
</p>
|
||||||
|
<p></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"
|
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>
|
<p class="ont-mono text-sm break-words">Weitere verwendete Technologien: TailwindCSS, SolidJS</p>
|
||||||
</div>
|
</div>
|
||||||
<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>
|
<div>
|
||||||
<p class="font-mono font-bold text-2xl">Server-Deployment</p>
|
<p class="font-mono font-bold text-2xl">Server-Deployment</p>
|
||||||
|
|
@ -53,7 +52,7 @@ import Footer from "../views/Footer.astro";
|
||||||
<p></p>
|
<p></p>
|
||||||
</div>
|
</div>
|
||||||
<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>
|
<div>
|
||||||
<p class="font-mono font-bold text-2xl">WICHTIG!</p>
|
<p class="font-mono font-bold text-2xl">WICHTIG!</p>
|
||||||
|
|
|
||||||
|
|
@ -6,9 +6,9 @@ import Footer from "../views/Footer.astro";
|
||||||
<Navigation />
|
<Navigation />
|
||||||
<div class="h-screen w-screen flex flex-col">
|
<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="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
|
<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">
|
<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">
|
<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>
|
<p class="ont-mono text-sm break-words">Weitere verwendete Technologien: TailwindCSS, SolidJS</p>
|
||||||
</div>
|
</div>
|
||||||
<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>
|
<div>
|
||||||
<p class="font-mono font-bold text-2xl">SolidJS Component Library</p>
|
<p class="font-mono font-bold text-2xl">SolidJS Component Library</p>
|
||||||
|
|
@ -56,7 +56,7 @@ import Footer from "../views/Footer.astro";
|
||||||
<p></p>
|
<p></p>
|
||||||
</div>
|
</div>
|
||||||
<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>
|
<div>
|
||||||
<p class="font-mono font-bold text-2xl">Weitere Projekte</p>
|
<p class="font-mono font-bold text-2xl">Weitere Projekte</p>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue