hello
This commit is contained in:
parent
874ec2bc2f
commit
510bae9d99
|
|
@ -3,5 +3,5 @@
|
|||
"tabWidth": 2,
|
||||
"semi": true,
|
||||
"singleQuote": false,
|
||||
"printWidth": 80
|
||||
"printWidth": 120
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="#18181b" fill="none" stroke-linecap="round" stroke-width="1.5" stroke-linejoin="round" stroke-align="center" class="pangolicons pangolicons-arrowDown " ><path d="M19.69,14.31l-7.69,7.69-7.69-7.69,7.69,7.69V2"/></svg>
|
||||
|
After Width: | Height: | Size: 308 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="#fafafa" fill="none" stroke-linecap="round" stroke-width="1.5" stroke-linejoin="round" stroke-align="center" class="pangolicons pangolicons-x " ><path d="M2,22L22,2m0,20L2,2"/></svg>
|
||||
|
After Width: | Height: | Size: 274 B |
|
|
@ -1,12 +1,56 @@
|
|||
import { Show, createSignal } from "solid-js";
|
||||
|
||||
const [mobileNav, showMobileNav] = createSignal(false);
|
||||
|
||||
const setShowMobileNav = (val: boolean) => showMobileNav(val);
|
||||
|
||||
export const Navigation = () => {
|
||||
return (
|
||||
<>
|
||||
<Show when={mobileNav()}>
|
||||
<div class={`fixed transition-all z-30 h-screen w-screen bg-zinc-900`}>
|
||||
<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="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="/projects">
|
||||
Projekte
|
||||
</a>
|
||||
<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">
|
||||
Über Mich
|
||||
</a>
|
||||
<a class="hover:underline transition-all hover:text-zinc-50" href="/skills">
|
||||
Projekte
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
<nav class="md:hidden h-14 w-screen bg-emerald-500 flex items-center">
|
||||
<button>
|
||||
<button onclick={() => setShowMobileNav(true)}>
|
||||
<img class="ml-4" src="/img/menu.svg" alt="" />
|
||||
</button>
|
||||
</nav>
|
||||
<nav class="max-md:hidden h-14 w-screen bg-emerald-500"></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="/projects">
|
||||
Projekte
|
||||
</a>
|
||||
<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">
|
||||
Über Mich
|
||||
</a>
|
||||
<a class="hover:underline transition-all hover:text-zinc-50" href="/skills">
|
||||
Projekte
|
||||
</a>
|
||||
</nav>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
export const ClientLink = (props: { mail: string; text: string }) => {
|
||||
const mailTo = () => {
|
||||
console.log(props.mail);
|
||||
location.href = `mailto:${atob(props.mail)}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div onclick={() => mailTo()} class="cursor-pointer hover:bg-emerald-500 transition-all w-52 h-16 rounded-lg flex items-center justify-center text-zinc-900 text-xl bg-emerald-400">
|
||||
<p >{props.text}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
export const NavigationBar = () => {
|
||||
return (
|
||||
<>
|
||||
<nav class="md:hidden h-14 w-screen bg-emerald-500 flex items-center">
|
||||
<button>
|
||||
<img class="ml-4" src="/img/menu.svg" alt="" />
|
||||
</button>
|
||||
</nav>
|
||||
<nav class="max-md:hidden h-14 w-screen bg-emerald-500"></nav>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,19 +1,77 @@
|
|||
---
|
||||
import "../styles/global.css";
|
||||
import { Navigation } from "../components/Navigation.tsx";
|
||||
import { ClientLink } from "../components/partials/ClientLink";
|
||||
|
||||
export type Project = {title: string, icon: string, text: string}
|
||||
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."}
|
||||
]
|
||||
{
|
||||
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."
|
||||
}
|
||||
];
|
||||
|
||||
const encryptedMail = btoa('dominik@oceanwave018.de')
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
|
|
@ -23,65 +81,162 @@ const projects: Project[] = [
|
|||
<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 />
|
||||
<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 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=""
|
||||
/>
|
||||
<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
|
||||
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! 🚀
|
||||
<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"
|
||||
>
|
||||
<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 w-5/6 overflow-hidden px-3">
|
||||
{projects.slice(0, 4).map((project, i)=>{
|
||||
<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={`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>
|
||||
<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>
|
||||
)
|
||||
})}
|
||||
<a href="/projects" class={`col-span-2 text-center justify-center border-2 shadow-md shadow-zinc-500 border-none bg-emerald-200 px-2 py-1 rounded-lg flex` }>
|
||||
);
|
||||
})
|
||||
}
|
||||
<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>
|
||||
<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="" />
|
||||
</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">
|
||||
<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"/>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue