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

so much lol

This commit is contained in:
zktsn0w 2023-10-12 21:56:48 +02:00
parent 333fb8fc99
commit 9dbc7b2084
6 changed files with 220 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/img/align-left.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>
Side by Side

After

Width:  |  Height:  |  Size: 396 B

8
src/pages/mystory.astro
View File

@ -8,20 +8,20 @@ const storyItems: StoryItemType[] = [
{
title: "Ctrl-Alt-Grow",
description:
"As a curious kid, I dove headfirst into the world of computers, playing around with code, gaming, and tech wonders, solidifying my enduring passion for all things digital.",
"Als neugieriges Kind tauchte ich kopfüber in die Welt der Computer ein, experimentierte mit Computern, spielte und erkundete technische Wunder, wodurch meine anhaltende Leidenschaft für alles Digitale gefestigt wurde.",
image: "/img/ctrl-alt-grow.png"
},
{
title: "First Code",
description:
"At the age of 13, I penned my first lines of code. Over the following years, I transitioned from crafting Minecraft plugins with Java to entering the world of web development.",
"Mit 13 Jahren schrieb ich meine ersten Codezeilen. In den anschließenden Jahren erfolgte der Übergang von der Erstellung von Minecraft-Plugins mit Java zur Webentwicklung.",
image: "/img/code.png",
epochTime: "2017 - 2019"
},
{
title: "Apprenticeship",
description:
"During my three-year apprenticeship, I delved into web and backend application development, honing my skills and building a strong foundation in the field.",
"Während meiner dreijährigen Ausbildung habe ich mich ausgiebig mit der Entwicklung von Web- und Backend-Anwendungen beschäftigt, um meine Fähigkeiten zu verbessern und einen festen Grund in diesem Bereich zu schaffen.",
image: "/img/apprenticeship.png",
epochTime: "2020 - 2023",
paddingedImage: false
@ -29,7 +29,7 @@ const storyItems: StoryItemType[] = [
{
title: "Coding",
description:
"Now, i'm working professionally at a digital-agency in munich, developing enterprise-level Web-Solutions for small and big companies.",
"Jetzt arbeite ich professionell in einer Digitalagentur in München und entwickle mit einem tollen Team Enterprise-Level-Web-Lösungen für kleine und große Unternehmen.",
image: "/img/work.png",
epochTime: "since 2023",
paddingedImage: false

72
src/pages/products.astro
View File

@ -0,0 +1,72 @@
---
import { Navigation } from "../components/Navigation";
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="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"
>
<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">
<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.
</p>
<p class="font-mono text-lg break-words">
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>
</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"
>
<p class="font-mono font-bold text-2xl">Schulungen</p>
<p class="font-mono text-lg break-words">
Zusätzlich biete ich tolle IT-Schulungen auf Anfrage an, um digitale Kompetenzen zu vermitteln.
</p>
<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"
>
<div>
<p class="font-mono font-bold text-2xl">Server-Deployment</p>
</div>
<p class="font-mono">
Als Spezialist für Server-Deployment und Anwendungsbereitstellung mit Techniken wie Docker sorge ich dafür,
dass Anwendungen reibungslos und effizient auf Servern laufen.
</p>
<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"
>
<div>
<p class="font-mono font-bold text-2xl">WICHTIG!</p>
</div>
<div>
<p class="font-mono text-base">
Aktuell bin ich froh ein Teil eines Teams in einer Digital-agentur zu sein, jedoch kann ich dadurch auch
einige Dienste nicht als Selbständiger anbieten, trotzdem kannst du dich gerne bei mir melden und ich berate
dich dementsprechend.
</p>
</div>
</div>
</div>
</div>
<Footer />
</div>

72
src/pages/projects.astro
View File

@ -0,0 +1,72 @@
---
import { Navigation } from "../components/Navigation";
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="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"
>
<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">
ColrJs
</p>
</a>
<div class="flex flex-col gap-4">
<p class="font-mono text-lg break-words">
Ein schlankes, modernes und erweiterbares Farbpalettenextraktionswerkzeug, das im Browser oder in einem
Node.js-Kontext verwendet werden kann.
</p>
<p class="font-mono text-lg break-words">
Dank dieser Bibliothek konnte ich mein Abschlussprojekt während meiner Ausbildung erfolgreich realisieren.
</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>
</div>
<div
class="col-span-1 row-span-1 bg-emerald-300 rounded-2xl transition hover:scale-[1.02] p-6 duration-300 flex flex-col justify-between"
>
<p class="font-mono font-bold text-2xl">Portfolio</p>
<p class="font-mono text-lg break-words">
Mein Portfolio habe ich dem modernen Framework <span class="text-purple-700 underline font-bold"
><a target="_blank" href="https://astro.build/">Astro</a></span
> erstellt, um eine beeindruckende Online-Präsenz zu präsentieren.
</p>
<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"
>
<div>
<p class="font-mono font-bold text-2xl">SolidJS Component Library</p>
<p class="font-mono font-bold text-base text-zinc-500">In Progress...</p>
</div>
<p class="font-mono">
Ich arbeite derzeit an einer Component-Library für SolidJS, um die Entwicklung von Webanwendungen zu
optimieren und benutzerfreundlicher zu gestalten.
</p>
<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"
>
<div>
<p class="font-mono font-bold text-2xl">Weitere Projekte</p>
<p class="font-mono font-bold text-base text-zinc-500">Soon...</p>
</div>
<div>
<p class="font-mono text-base">Wer weiß, <br />vielleicht kommen bald weitere Projekte dazu &#x1F609;</p>
</div>
</div>
</div>
</div>
<Footer />
</div>

47
src/views/Products.astro
View File

@ -1,38 +1,23 @@
---import { Button } from "../components/partials/Button";
---
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/align-left.svg",
title: "Web-Entwicklung",
text: "Entwickeln von Webseiten mit modernen und robusten Technologien."
},
{
icon: "/img/terminal.svg",
title: "Server-Deployment",
text: "Aufsetzen von Web-Anwendungen sowie weiteren Lösungen in der Cloud oder in ihrem Netzwerk."
},
{
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."
title: "Und vieles mehr...",
text: "Schreib mir gerne eine kurze Mail mit deinem Anliegen und lass uns gemeinsam eine Lösung finden ;)"
}
];
---
@ -41,9 +26,9 @@ const products: Product[] = [
<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">
<div class="gap-3 grid grid-cols-1 grid-rows-1 rounded-xl b flex-1 mt-3 sm:grid-cols-3">
{
products.slice(0, 4).map((product, i) => {
products.slice(0, 3).map((product, i) => {
return (
<div
class={`sm:flex-col h-auto flex items-center px-3 py-2 gap-4 w-full rounded-lg ${
@ -61,7 +46,7 @@ const products: Product[] = [
}
</div>
<div class="w-52 mx-auto">
<Button link="/projects" text="Mehr" />
<Button link="/products" text="Mehr" />
</div>
</div>
</section>
</section>

35
src/views/Projects.astro
View File

@ -9,35 +9,24 @@ const projects: Project[] = [
},
{
icon: "/img/layers.svg",
title: "ColrJS",
text: "Farbpaletten aus Bildern extrahieren."
title: "Portfolio",
text: "Mein Portfolio"
},
{
icon: "/img/layers.svg",
title: "ColrJS",
text: "Farbpaletten aus Bildern extrahieren."
title: "SolidJS Komponenten-Bibliothek",
text: "Fertige Komponenten für SolidJS Projekte"
},
{
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."
title: "Soon...",
text: "Wer weiß, vielleicht kommen bald weitere Projekte dazu."
}
];
import { Button } from "../components/partials/Button"
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>
@ -53,11 +42,7 @@ import { Button } from "../components/partials/Button"
} 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}`}
/>
<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>
@ -69,9 +54,9 @@ import { Button } from "../components/partials/Button"
}
<div class="col-span-2 flex justify-center">
<div class="w-52">
<Button link="/projects" text="Mehr" />
<Button link="/projects" text="Mehr Informationen" />
</div>
</div>
</div>
</div>
</section>
</section>