Dominik
/
kurwafolio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

alskdjf

This commit is contained in:
Dominik Strangas 2023-08-11 00:03:01 +02:00
parent 510bae9d99
commit 712212c420
16 changed files with 320 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Navigation.tsx
View File

@ -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>

4
src/components/partials/Button.astro
View File

@ -1,4 +0,0 @@
---
let link: string
let action: ()=>{}
---

54
src/components/partials/Button.tsx Normal file
View File

@ -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>
</>
)
}

14
src/components/partials/StoryItem.tsx Normal file
View File

@ -0,0 +1,14 @@
type StoryItemProps = {
index: number,
epochTime: string,
epochTitle: string,
epochDescription: string
}
const StoryItem = (props: StoryItemProps) => {
return (
<div>
</div>
)
}

1
src/env.d.ts vendored
View File

@ -1 +1,2 @@
/// <reference types="astro/client" />

0
src/pages/impress.astro Normal file
View File

233
src/pages/index.astro
View File

@ -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! &#128640;
</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! &#127864;</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
src/pages/mystory.astro Normal file
View File

0
src/pages/products.astro Normal file
View File

0
src/pages/projects.astro Normal file
View File

0
src/pages/skills.astro Normal file
View File

50
src/views/AboutMe.astro Normal file
View File

@ -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>

8
src/views/Footer.astro Normal file
View File

@ -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>

22
src/views/LandingHero.astro Normal file
View File

@ -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! &#128640;
</p>
</div>
</div>
<img class="animate-bounce h-7 sm:hidden" src="/img/arrowDown.svg" alt="" />
</section>

67
src/views/Products.astro Normal file
View File

@ -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! &#127864;</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>

77
src/views/Projects.astro Normal file
View File

@ -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>