alskdjf
This commit is contained in:
Dominik Strangas
parent
510bae9d99
commit
712212c420
|
|
@ -8,14 +8,18 @@ export const Navigation = () => {
|
|||
return (
|
||||
<>
|
||||
<Show when={mobileNav()}>
|
||||
<div class={`fixed transition-all z-30 h-screen w-screen bg-zinc-900`}>
|
||||
<div class={`fixed transition-all z-30 h-screen w-screen bg-zinc-900 flex flex-col`}>
|
||||
<div class="w-screen border-b-2 border-b-zinc-50 h-14 bg-zinc-900 flex items-center">
|
||||
<button class="h-full w-auto aspect-square hover:bg-zinc-700" onclick={() => showMobileNav(false)}>
|
||||
<img class="ml-4 h-5 w-5" src="/img/x.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="h-full flex justify-center items-center">
|
||||
<div class="flex-1 flex justify-center items-center">
|
||||
<div class="h-1/3 items-center my-auto text-zinc-50 flex flex-col font-mono font-bold text-3xl justify-around">
|
||||
<a class="hover:underline transition-all hover:text-zinc-50" href="/">
|
||||
Home
|
||||
</a>
|
||||
|
||||
<a class="hover:underline transition-all hover:text-zinc-50" href="/projects">
|
||||
Projekte
|
||||
</a>
|
||||
|
|
@ -38,6 +42,10 @@ export const Navigation = () => {
|
|||
</button>
|
||||
</nav>
|
||||
<nav class="max-md:hidden h-14 w-screen bg-emerald-500 text-zinc-900 font-mono text-xl flex justify-around items-center font-bold">
|
||||
<a class="hover:underline transition-all hover:text-zinc-50" href="/">
|
||||
Home
|
||||
</a>
|
||||
|
||||
<a class="hover:underline transition-all hover:text-zinc-50" href="/projects">
|
||||
Projekte
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
let link: string
|
||||
let action: ()=>{}
|
||||
---
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import { Show, createSignal } from "solid-js"
|
||||
|
||||
type ButtonProps = {
|
||||
link?: string,
|
||||
action?: () => void,
|
||||
disabled?: boolean,
|
||||
text: string,
|
||||
encryptedMail?: string
|
||||
}
|
||||
|
||||
const [showHint, setShowHint] = createSignal(false)
|
||||
|
||||
const executeThenHref = async (action: ()=>void, link: string) => {
|
||||
await action()
|
||||
window.location.href = link
|
||||
}
|
||||
|
||||
const routeToEncryptedMail = (mail: string) => {
|
||||
location.href = `mailto:${atob(mail)}`;
|
||||
setTimeout(() => {
|
||||
setShowHint(true)
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
|
||||
export const Button = (props: ButtonProps) => {
|
||||
return (
|
||||
<>
|
||||
<Show when={props.link}>
|
||||
<a href={props.link} class={`col-span-2 w-full h-16 text-center items-center text-xl justify-center shadow-md shadow-zinc-500 border-none bg-emerald-400 transition-all hover:bg-emerald-500 px-2 py-1 rounded-lg flex`}>
|
||||
{props.text}
|
||||
</a>
|
||||
</Show>
|
||||
<Show when={props.action}>
|
||||
<button onclick={()=>props.action} class={`col-span-2 w-full h-16 text-center items-center text-xl justify-center shadow-md shadow-zinc-500 border-none bg-emerald-400 transition-all hover:bg-emerald-500 px-2 py-1 rounded-lg flex`}>
|
||||
{props.text}
|
||||
</button>
|
||||
</Show>
|
||||
<Show when={props.action && props.link}>
|
||||
<button onclick={()=>executeThenHref(props.action, props.link)} class={`col-span-2 w-full h-16 text-center items-center text-xl justify-center shadow-md shadow-zinc-500 border-none bg-emerald-400 transition-all hover:bg-emerald-500 px-2 py-1 rounded-lg flex`}>
|
||||
{props.text}
|
||||
</button>
|
||||
</Show>
|
||||
<Show when={props.encryptedMail}>
|
||||
<button onclick={()=>routeToEncryptedMail(props.encryptedMail)} class={`col-span-2 w-full h-16 text-center items-center text-xl justify-center shadow-md border-none bg-emerald-400 transition-all hover:bg-emerald-500 px-2 py-1 rounded-lg flex`}>
|
||||
{props.text}
|
||||
</button>
|
||||
<Show when={showHint()}>
|
||||
<p class="text-zinc-50 text-left mt-5">E-Mail App öffnet sich nicht? Hier die E-Mail adresse: <span class="mt-2 text-emerald-200">{atob(props.encryptedMail)}</span></p>
|
||||
</Show>
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
type StoryItemProps = {
|
||||
index: number,
|
||||
epochTime: string,
|
||||
epochTitle: string,
|
||||
epochDescription: string
|
||||
}
|
||||
|
||||
const StoryItem = (props: StoryItemProps) => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1 +1,2 @@
|
|||
/// <reference types="astro/client" />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,75 +1,13 @@
|
|||
---
|
||||
import "../styles/global.css";
|
||||
import { Navigation } from "../components/Navigation.tsx";
|
||||
import { Navigation } from "../components/Navigation";
|
||||
import { ClientLink } from "../components/partials/ClientLink";
|
||||
|
||||
export type Project = { title: string; icon: string; text: string };
|
||||
|
||||
const projects: Project[] = [
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
}
|
||||
];
|
||||
|
||||
const products: Project[] = [
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
}
|
||||
];
|
||||
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"
|
||||
|
||||
const encryptedMail = btoa('dominik@oceanwave018.de')
|
||||
---
|
||||
|
|
@ -85,158 +23,21 @@ const encryptedMail = btoa('dominik@oceanwave018.de')
|
|||
</head>
|
||||
<body class="bg-zinc-900 text-zinc-100">
|
||||
<Navigation client:load />
|
||||
<div 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! 🚀
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<img class="animate-bounce h-7 sm:hidden" src="/img/arrowDown.svg" alt="" />
|
||||
</div>
|
||||
<section class="py-5 w-screen 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">
|
||||
<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"
|
||||
>
|
||||
{
|
||||
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 ${
|
||||
i % 2 === 0 ? "flex-row-reverse bg-emerald-200" : "flex-row bg-zinc-900 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">
|
||||
<p class="text-lg sm:text-center">{project.title}</p>
|
||||
<p class="text-sm sm:text-center">{project.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
<div class="col-span-2 flex justify-center">
|
||||
<a
|
||||
href="/projects"
|
||||
class={`col-span-2 w-52 h-16 text-center items-center text-xl justify-center border-2 shadow-md shadow-zinc-500 border-none bg-emerald-400 transition-all hover:bg-emerald-500 px-2 py-1 rounded-lg flex`}
|
||||
>
|
||||
Mehr
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="py-5 w-screen max-sm:min-h-[66vh] bg-zinc-900 text-zinc-50">
|
||||
<div class="w-5/6 flex flex-col justify-around items-center h-full mx-auto gap-2">
|
||||
<p class="text-2xl underline">Mehr zu mir</p>
|
||||
<div
|
||||
class="max-sm:flex-1 sm:justify-center sm:items-center sm:grid sm:grid-cols-2 sm:gap-4 sm:grid-rows-1 py-3 justify-around flex flex-col gap-5 w-full overflow-hidden px-3"
|
||||
>
|
||||
<div class="p-4 sm:flex-1 sm:flex sm:flex-col sm:items-center">
|
||||
<p class="text-lg underline">Meine Skills</p>
|
||||
<ul class="ml-1.5 py-4 gap-5">
|
||||
<li><img src="" alt="" /><p>- Fullstack Web-entwicklung</p></li>
|
||||
<li><img src="" alt="" /><p>- SEO</p></li>
|
||||
<li><img src="" alt="" /><p>- Web-App Deployment</p></li>
|
||||
</ul>
|
||||
<a class="underline text-emerald-300 visited:text-purple-300" href="/skills" class="underline">Siehe alle</a
|
||||
>
|
||||
</div>
|
||||
<div class="w-full border border-dashed border-emerald-300 sm:hidden"></div>
|
||||
<div class="p-4 flex flex-col gap-4 sm:flex-1 sm:flex sm:flex-col sm:items-center">
|
||||
<p class="flex gap-2 flex-col text-lg underline">Mein Werdegang</p>
|
||||
<div class="flex gap-2 flex-col">
|
||||
<p>
|
||||
Ausbildung bei <a
|
||||
target="_blank"
|
||||
href="https://adabay.rocks"
|
||||
class="underline text-emerald-300 visited:text-purple-300">adabay</a
|
||||
> und der BSInfo. <span class="text-zinc-300 font-mono">2020-2023</span>
|
||||
</p>
|
||||
<p>
|
||||
Übernahme bei <a
|
||||
target="_blank"
|
||||
href="https://adabay.rocks"
|
||||
class="underline text-emerald-300 visited:text-purple-300">adabay.</a
|
||||
><span class="text-zinc-300 font-mono"> 2023</span>
|
||||
</p>
|
||||
<p>
|
||||
Angestellt als Technical Consultant bei <a
|
||||
target="_blank"
|
||||
href="https://adabay.rocks"
|
||||
class="underline text-emerald-300 visited:text-purple-300">adabay</a
|
||||
>
|
||||
<span class="text-zinc-300 font-mono">seit 07/2023</span>.
|
||||
</p>
|
||||
</div>
|
||||
<a href="mystory" class="underline text-emerald-300 visited:text-purple-300" class="underline"
|
||||
>Meine vollständige Geschichte</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<LandingHero />
|
||||
<Projects />
|
||||
<AboutMe />
|
||||
<section class="w-screen h-28 bg-emerald-500 text-zinc-900 flex flex-col justify-center items-center gap-4">
|
||||
<p class="text-2xl text-center w-full">Services und Produkte</p>
|
||||
<img class="animate-bounce h-7 sm:hidden" src="/img/arrowDownDark.svg" alt="" />
|
||||
<img class="animate-bounce h-7 w-7" src="/img/arrowDownDark.svg" alt="arrowDark" />
|
||||
</section>
|
||||
<section class="py-5 w-screen bg-zinc-50 text-zinc-900 flex flex-col items-center">
|
||||
<div class="w-5/6 flex flex-col p-4 gap-4">
|
||||
<p class="text-xl text-center">Willkommen an der Bar! 🍸</p>
|
||||
<p class="text-sm text-center">Was darfs denn heute sein?</p>
|
||||
<div class="gap-3 grid grid-cols-1 grid-rows-2 rounded-xl b flex-1 mt-3 sm:grid-cols-3">
|
||||
{
|
||||
products.slice(0, 4).map((product, i) => {
|
||||
return (
|
||||
<div
|
||||
class={`sm:flex-col h-auto flex items-center px-3 py-2 gap-4 w-full rounded-lg ${
|
||||
i % 2 === 0 ? "bg-emerald-500 text-zinc-900 flex-row" : "bg-zinc-900 text-zinc-100 flex-row-reverse"
|
||||
}`}
|
||||
>
|
||||
<img class={`h-8 sm:h-12 ${i % 2 == 0 ? "" : "invert"}`} src={product.icon} alt="" />
|
||||
<div class="flex-1">
|
||||
<p class="text-lg sm:text-center">{product.title}</p>
|
||||
<p class="sm:text-center">{product.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<a
|
||||
href="/products"
|
||||
class={`mx-auto col-span-2 w-52 h-16 text-center justify-center items-center text-xl border-2 shadow-md shadow-zinc-500 border-none transition-all bg-emerald-400 hover:bg-emerald-500 px-2 py-1 rounded-lg flex`}
|
||||
|
||||
>
|
||||
Mehr
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="py-10 w-screen gap-5 bg-zinc-900 text-zinc-50 flex flex-col items-center">
|
||||
<Products />
|
||||
<section class="py-10 w-screen gap-5 transition-all bg-zinc-900 text-zinc-50 flex flex-col items-center">
|
||||
<p class="text-3xl text-emerald-500">Interesse geweckt?</p>
|
||||
<p class="text-xl">Lass mir doch eine Nachricht da!</p>
|
||||
<ClientLink client:load mail={encryptedMail} text="E-Mail schreiben"/>
|
||||
<div class="w-52 text-zinc-900">
|
||||
<Button client:load encryptedMail={encryptedMail} text="E-Mail schreiben"/>
|
||||
</div>
|
||||
</section>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
<section class="py-5 w-screen max-sm:min-h-[66vh] bg-zinc-900 text-zinc-50">
|
||||
<div class="w-5/6 flex flex-col justify-around items-center h-full mx-auto gap-2">
|
||||
<p class="text-2xl underline">Mehr zu mir</p>
|
||||
<div
|
||||
class="max-sm:flex-1 sm:justify-center sm:items-center sm:grid sm:grid-cols-2 sm:gap-4 sm:grid-rows-1 py-3 justify-around flex flex-col gap-5 w-full overflow-hidden px-3"
|
||||
>
|
||||
<div class="p-4 sm:flex-1 sm:flex sm:flex-col sm:items-center">
|
||||
<p class="text-lg underline">Meine Skills</p>
|
||||
<ul class="ml-1.5 py-4 gap-5">
|
||||
<li><img src="" alt="" /><p>- Fullstack Web-entwicklung</p></li>
|
||||
<li><img src="" alt="" /><p>- SEO</p></li>
|
||||
<li><img src="" alt="" /><p>- Web-App Deployment</p></li>
|
||||
</ul>
|
||||
<a class="underline text-emerald-300 visited:text-purple-300" href="/skills" class="underline">Siehe alle</a
|
||||
>
|
||||
</div>
|
||||
<div class="w-full border border-dashed border-emerald-300 sm:hidden"></div>
|
||||
<div class="p-4 flex flex-col gap-4 sm:flex-1 sm:flex sm:flex-col sm:items-center">
|
||||
<p class="flex gap-2 flex-col text-lg underline">Mein Werdegang</p>
|
||||
<div class="flex gap-2 flex-col">
|
||||
<p>
|
||||
Ausbildung bei <a
|
||||
target="_blank"
|
||||
href="https://adabay.rocks"
|
||||
class="underline text-emerald-300 visited:text-purple-300">adabay</a
|
||||
> und der BSInfo. <span class="text-zinc-300 font-mono">2020-2023</span>
|
||||
</p>
|
||||
<p>
|
||||
Übernahme bei <a
|
||||
target="_blank"
|
||||
href="https://adabay.rocks"
|
||||
class="underline text-emerald-300 visited:text-purple-300">adabay.</a
|
||||
><span class="text-zinc-300 font-mono"> 2023</span>
|
||||
</p>
|
||||
<p>
|
||||
Angestellt als Technical Consultant bei <a
|
||||
target="_blank"
|
||||
href="https://adabay.rocks"
|
||||
class="underline text-emerald-300 visited:text-purple-300">adabay</a
|
||||
>
|
||||
<span class="text-zinc-300 font-mono">seit 07/2023</span>.
|
||||
</p>
|
||||
</div>
|
||||
<a href="mystory" class="underline text-emerald-300 visited:text-purple-300" class="underline"
|
||||
>Meine vollständige Geschichte</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
let blogUrl = "https://blog.oceanwave018.de"
|
||||
---
|
||||
|
||||
<section class="py-5 h-20 w-screen border-t-zinc-200 border-t font-mono bg-zinc-900 text-zinc-50 flex flex-row justify-center gap-5 items-center">
|
||||
<a class="hover:underline text-emerald-300" href="/impress">Impressum</a>
|
||||
<a class="hover:underline text-emerald-300" href={blogUrl}>Blog</a>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<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! 🚀
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<img class="animate-bounce h-7 sm:hidden" src="/img/arrowDown.svg" alt="" />
|
||||
</section>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
---import { Button } from "../components/partials/Button";
|
||||
|
||||
export type Product = { title: string; icon: string; text: string };
|
||||
|
||||
|
||||
const products: Product[] = [
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
}
|
||||
];
|
||||
---
|
||||
|
||||
<section class="py-5 w-screen bg-zinc-50 text-zinc-900 flex flex-col items-center">
|
||||
<div class="w-5/6 flex flex-col p-4 gap-4">
|
||||
<p class="text-xl text-center">Willkommen an der Bar! 🍸</p>
|
||||
<p class="text-sm text-center">Was darfs denn heute sein?</p>
|
||||
<div class="gap-3 grid grid-cols-1 grid-rows-2 rounded-xl b flex-1 mt-3 sm:grid-cols-3">
|
||||
{
|
||||
products.slice(0, 4).map((product, i) => {
|
||||
return (
|
||||
<div
|
||||
class={`sm:flex-col h-auto flex items-center px-3 py-2 gap-4 w-full rounded-lg ${
|
||||
i % 2 === 0 ? "bg-emerald-400 text-zinc-900 flex-row" : "bg-zinc-900 text-zinc-100 flex-row-reverse"
|
||||
}`}
|
||||
>
|
||||
<img class={`h-8 sm:h-12 ${i % 2 == 0 ? "" : "invert"}`} src={product.icon} alt="" />
|
||||
<div class="flex-1">
|
||||
<p class="text-lg sm:text-center">{product.title}</p>
|
||||
<p class="sm:text-center">{product.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<div class="w-52 mx-auto">
|
||||
<Button link="/projects" text="Mehr" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
---
|
||||
export type Project = { title: string; icon: string; text: string };
|
||||
|
||||
const projects: Project[] = [
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
},
|
||||
{
|
||||
icon: "/img/layers.svg",
|
||||
title: "ColrJS",
|
||||
text: "Farbpaletten aus Bildern extrahieren."
|
||||
}
|
||||
];
|
||||
|
||||
import { Button } from "../components/partials/Button"
|
||||
---
|
||||
|
||||
|
||||
<section class="py-5 w-screen 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">
|
||||
<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"
|
||||
>
|
||||
{
|
||||
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 ${
|
||||
i % 2 === 0 ? "flex-row-reverse bg-emerald-400" : "flex-row bg-zinc-900 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">
|
||||
<p class="text-lg sm:text-center">{project.title}</p>
|
||||
<p class="text-sm sm:text-center">{project.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
<div class="col-span-2 flex justify-center">
|
||||
<div class="w-52">
|
||||
<Button link="/projects" text="Mehr" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Loading…
Reference in New Issue