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

asdf

This commit is contained in:
Dominik Strangas 2024-02-29 08:42:44 +01:00
parent e236c3d53a
commit f339197021
2 changed files with 211 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
src/components/Skills.tsx
View File

@ -1,7 +1,7 @@
import { Show, createSignal } from "solid-js" import { Show, createSignal } from "solid-js";
export const SkillsComponent = () => { export const SkillsComponent = () => {
const [skill, setSkill] = createSignal<'coding' | 'ci-cd' | 'other'>('coding') const [skill, setSkill] = createSignal<"coding" | "ci-cd" | "other">("coding");
return ( return (
<> <>
<div class="max-lg:hidden"> <div class="max-lg:hidden">
@ -9,81 +9,128 @@ export const SkillsComponent = () => {
<h1 class="text-3xl font-bold text-neutral-100 underline">Mehr zu meinen Skills</h1> <h1 class="text-3xl font-bold text-neutral-100 underline">Mehr zu meinen Skills</h1>
<div class="flex w-full mt-8 justify-between mb-2"> <div class="flex w-full mt-8 justify-between mb-2">
<div class="h-72 w-64 relative"> <div class="h-72 w-64 relative">
<div onclick={() => setSkill('coding')} class={` ${skill() === 'coding' ? 'bg-emerald-400 shadow-inner ' : 'bg-emerald-600'} w-64 h-64 hover:scale-[1.02] transition-all cursor-pointer flex flex-col gap-4 justify-center items-center`}> <div
onclick={() => setSkill("coding")}
class={` ${
skill() === "coding" ? "bg-emerald-400 shadow-inner " : "bg-emerald-600"
} w-64 h-64 hover:scale-[1.02] transition-all cursor-pointer flex flex-col gap-4 justify-center items-center`}
>
<p class="text-2xl font-bold text-neutral-800">Coding</p> <p class="text-2xl font-bold text-neutral-800">Coding</p>
<img class="w-12 h-12" src="/img/code.svg" alt="" /> <img class="w-12 h-12" src="/img/code.svg" alt="" />
</div> </div>
<Show when={skill() === 'coding'}> <Show when={skill() === "coding"}>
<img src="/img/arrowDown.svg" class="mt-2 mx-auto" alt="" /> <img src="/img/arrowDown.svg" class="mt-2 mx-auto" alt="" />
</Show> </Show>
</div> </div>
<div class="h-72 w-64 relative"> <div class="h-72 w-64 relative">
<div onclick={() => setSkill('ci-cd')} class={` ${skill() === 'ci-cd' ? 'bg-emerald-400 shadow-inner ' : 'bg-emerald-600'} w-64 h-64 hover:scale-[1.02] transition-all cursor-pointer flex flex-col gap-4 justify-center items-center`}> <div
onclick={() => setSkill("ci-cd")}
class={` ${
skill() === "ci-cd" ? "bg-emerald-400 shadow-inner " : "bg-emerald-600"
} w-64 h-64 hover:scale-[1.02] transition-all cursor-pointer flex flex-col gap-4 justify-center items-center`}
>
<p class="text-2xl font-bold text-neutral-800">CI/CD</p> <p class="text-2xl font-bold text-neutral-800">CI/CD</p>
<img class="w-12 h-12" src="/img/server.svg" alt="" /> <img class="w-12 h-12" src="/img/server.svg" alt="" />
</div> </div>
<Show when={skill() === 'ci-cd'}> <Show when={skill() === "ci-cd"}>
<img src="/img/arrowDown.svg" class="mt-2 mx-auto" alt="" /> <img src="/img/arrowDown.svg" class="mt-2 mx-auto" alt="" />
</Show> </Show>
</div> </div>
<div class="h-72 w-64 relative"> <div class="h-72 w-64 relative">
<div onclick={() => setSkill('other')} class={` ${skill() === 'other' ? 'bg-emerald-400 shadow-inner ' : 'bg-emerald-600'} w-64 h-64 hover:scale-[1.02] transition-all cursor-pointer flex flex-col gap-4 justify-center items-center`}> <div
onclick={() => setSkill("other")}
class={` ${
skill() === "other" ? "bg-emerald-400 shadow-inner " : "bg-emerald-600"
} w-64 h-64 hover:scale-[1.02] transition-all cursor-pointer flex flex-col gap-4 justify-center items-center`}
>
<p class="text-2xl font-bold text-neutral-800">Other</p> <p class="text-2xl font-bold text-neutral-800">Other</p>
<img class="w-12 h-12" src="/img/codepen.svg" alt="" /> <img class="w-12 h-12" src="/img/codepen.svg" alt="" />
</div> </div>
<Show when={skill() === 'other'}> <Show when={skill() === "other"}>
<img src="/img/arrowDown.svg" class="mt-2 mx-auto" alt="" /> <img src="/img/arrowDown.svg" class="mt-2 mx-auto" alt="" />
</Show> </Show>
</div> </div>
</div > </div>
<Show when={skill() === 'coding'}> <Show when={skill() === "coding"}>
<div class="w-full min-h-80 py-5 bg-emerald-600 px-20 flex justify-around flex-col"> <div class="w-full min-h-80 py-5 bg-emerald-600 px-20 flex justify-around flex-col">
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
<p class="text-2xl font-bold text-neutral-800">Coding</p> <p class="text-2xl font-bold text-neutral-800">Coding</p>
<p class="w-1/2 text-neutral-800">In meiner Ausbildung wie auch meiner Freizeit habe ich Erfahrung mit unterschiedlichen Frameworks und Programmiersprachen gesammelt, wie zum beispiel Angular, React und Laravel</p> <p class="w-1/2 text-neutral-800">
In meiner Ausbildung wie auch meiner Freizeit habe ich Erfahrung mit unterschiedlichen Frameworks und
Programmiersprachen gesammelt, wie zum beispiel Angular, React und Laravel
</p>
<p class="w-1/2 my-1 text-neutral-800">
Und privat so wie beruflich mit CMS-Systemen wie PayloadCMS, Twill oder AEM gearbeitet.
</p>
</div> </div>
<div class="w-full min-h-24 gap-4 flex-wrap flex justify-between items-center"> <div class="w-full min-h-24 gap-4 flex-wrap flex justify-between items-center">
<img
<img class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/angular.svg.png" alt="" /> class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg"
<img class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/laravel.svg.png" alt="" /> src="/img/angular.svg.png"
alt=""
/>
<img
class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg"
src="/img/laravel.svg.png"
alt=""
/>
<img class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/react.png" alt="" /> <img class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/react.png" alt="" />
<img class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/java.png" alt="" /> <img class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/java.png" alt="" />
<img class="h-20 w-24 object-scale-down bg-neutral-100 p-3 rounded-lg" src="/img/express.png" alt="" /> <img class="h-20 w-24 object-scale-down bg-neutral-100 p-3 rounded-lg" src="/img/express.png" alt="" />
<img class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/tailwind.svg" alt="" /> <img
class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg"
src="/img/tailwind.svg"
alt=""
/>
<img class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/sass.png" alt="" /> <img class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/sass.png" alt="" />
<img class="h-20 w-24 sepia-[.3] object-scale-down bg-neutral-800 grayscale-[.7] p-3 rounded-lg" src="/img/sql.png" alt="" /> <img
<img class="h-20 w-24 sepia-[.3] object-scale-down bg-neutral-800 grayscale-[.7] p-3 rounded-lg" src="/img/prisma.png" alt="" /> class="h-20 w-24 sepia-[.3] object-scale-down bg-neutral-800 grayscale-[.7] p-3 rounded-lg"
src="/img/sql.png"
alt=""
/>
<img
class="h-20 w-24 sepia-[.3] object-scale-down bg-neutral-800 grayscale-[.7] p-3 rounded-lg"
src="/img/prisma.png"
alt=""
/>
</div> </div>
</div> </div>
</Show> </Show>
<Show when={skill() === 'ci-cd'}> <Show when={skill() === "ci-cd"}>
<div class="w-full min-h-80 py-5 bg-emerald-600 px-20 flex justify-around flex-col"> <div class="w-full min-h-80 py-5 bg-emerald-600 px-20 flex justify-around flex-col">
<div class="flex flex-col"> <div class="flex flex-col">
<p class="text-2xl font-bold text-neutral-800">CI/CD</p> <p class="text-2xl font-bold text-neutral-800">CI/CD</p>
<p class="w-3/4 text-neutral-800"> <p class="w-3/4 text-neutral-800">
Mit Grundkenntnissen im Web-App-Deployment und Container-Management habe ich bereits erfolgreich Projekte umgesetzt. Mit Grundkenntnissen im Web-App-Deployment und Container-Management habe ich bereits erfolgreich
Mir sind Techniken wie BuilKite (Build-Pipelines) so wie das Resourcenmanagement mit Terraform in Azure nicht fremd und durfte da bereits meine ersten Kenntnisse sammeln. Projekte umgesetzt. Mir sind Techniken wie BuilKite (Build-Pipelines) so wie das Resourcenmanagement
Ebenfalls bin ich gut vertraut mit moderner Kontainerisierung von Applikationen mit Docker. mit Terraform in Azure nicht fremd und durfte da bereits meine ersten Kenntnisse sammeln. Ebenfalls
Dieses Portfolio zum Beispiel, läuft in einem Docker-Container und liegt hinter einem Traefik Proxy. bin ich gut vertraut mit moderner Kontainerisierung von Applikationen mit Docker. Dieses Portfolio zum
Beispiel, läuft in einem Docker-Container und liegt hinter einem Traefik Proxy.
</p> </p>
</div> </div>
<div class="w-full min-h-24 gap-4 flex justify-between items-center"> <div class="w-full min-h-24 gap-4 flex justify-between items-center">
<img class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/docker.png" alt="" /> <img class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/docker.png" alt="" />
<img class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/buildkite.png" alt="" /> <img
class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg"
src="/img/buildkite.png"
alt=""
/>
<img class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/server.svg" alt="" /> <img class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/server.svg" alt="" />
</div> </div>
</div> </div>
</Show> </Show>
<Show when={skill() === 'other'}> <Show when={skill() === "other"}>
<div class="w-full min-h-80 py-5 bg-emerald-600 px-20 flex justify-around flex-col"> <div class="w-full min-h-80 py-5 bg-emerald-600 px-20 flex justify-around flex-col">
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
<p class="text-2xl font-bold text-neutral-800">Other</p> <p class="text-2xl font-bold text-neutral-800">Other</p>
<p class="text-neutral-800"> <p class="text-neutral-800">
In meiner Freizeit bin ich nicht nur in der Musik unterwegs, sondern schwimme auch leidenschaftlich. In meiner Freizeit bin ich nicht nur in der Musik unterwegs, sondern schwimme auch leidenschaftlich.
Guten Cappucino kann ich auch machen &#9749;&#128521;<br /> Guten Cappucino kann ich auch machen &#9749;&#128521;
Um meine Umsetzungen vorstellen zu können, habe ich mehrere Präsentationen während meiner Ausbildung gehalten zu unterschiedlichsten themen welche meist wie Ted-Talks aufgebaut waren. <br />
Dadurch konnte ich aus meiner Schwäche, vor vielen Leuten wissen zu vermitteln, ein Skill aufbauen, auf den ich heute Stolz sein kann. Um meine Umsetzungen vorstellen zu können, habe ich mehrere Präsentationen während meiner Ausbildung
gehalten zu unterschiedlichsten themen welche meist wie Ted-Talks aufgebaut waren. Dadurch konnte ich
aus meiner Schwäche, vor vielen Leuten wissen zu vermitteln, ein Skill aufbauen, auf den ich heute
Stolz sein kann.
</p> </p>
</div> </div>
</div> </div>
@ -96,33 +143,51 @@ export const SkillsComponent = () => {
<div class="w-full h-auto py-5 bg-emerald-600 px-10 flex justify-around flex-col"> <div class="w-full h-auto py-5 bg-emerald-600 px-10 flex justify-around flex-col">
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
<p class="text-2xl font-bold text-neutral-800">Coding</p> <p class="text-2xl font-bold text-neutral-800">Coding</p>
<p class="w-full text-neutral-800">In meiner Ausbildung wie auch meiner Freizeit habe ich Erfahrung mit unterschiedlichen Frameworks und Programmiersprachen gesammelt, wie zum beispiel Angular, React und Laravel</p> <p class="w-full text-neutral-800">
In meiner Ausbildung wie auch meiner Freizeit habe ich Erfahrung mit unterschiedlichen Frameworks und
Programmiersprachen gesammelt, wie zum beispiel Angular, React und Laravel
</p>
</div> </div>
<div class="w-full flex-wrap gap-3 h-auto flex justify-between items-center"> <div class="w-full flex-wrap gap-3 h-auto flex justify-between items-center">
<img
<img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/angular.svg.png" alt="" /> class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg"
<img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/laravel.svg.png" alt="" /> src="/img/angular.svg.png"
alt=""
/>
<img
class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg"
src="/img/laravel.svg.png"
alt=""
/>
<img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/react.png" alt="" /> <img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/react.png" alt="" />
<img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/java.png" alt="" /> <img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/java.png" alt="" />
<img class="h-12 w-16 object-scale-down bg-neutral-100 p-3 rounded-lg" src="/img/express.png" alt="" /> <img class="h-12 w-16 object-scale-down bg-neutral-100 p-3 rounded-lg" src="/img/express.png" alt="" />
<img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/tailwind.svg" alt="" /> <img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/tailwind.svg" alt="" />
<img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/sass.png" alt="" /> <img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/sass.png" alt="" />
<img class="h-12 w-16 sepia-[.3] object-scale-down bg-neutral-800 grayscale-[.7] p-3 rounded-lg" src="/img/sql.png" alt="" /> <img
<img class="h-12 w-16 sepia-[.3] object-scale-down bg-neutral-800 grayscale-[.7] p-3 rounded-lg" src="/img/prisma.png" alt="" /> class="h-12 w-16 sepia-[.3] object-scale-down bg-neutral-800 grayscale-[.7] p-3 rounded-lg"
src="/img/sql.png"
alt=""
/>
<img
class="h-12 w-16 sepia-[.3] object-scale-down bg-neutral-800 grayscale-[.7] p-3 rounded-lg"
src="/img/prisma.png"
alt=""
/>
</div> </div>
</div> </div>
<div class="w-full h-auto py-5 bg-emerald-600 px-10 flex justify-around flex-col"> <div class="w-full h-auto py-5 bg-emerald-600 px-10 flex justify-around flex-col">
<div class="flex flex-col"> <div class="flex flex-col">
<p class="text-2xl font-bold text-neutral-800">CI/CD</p> <p class="text-2xl font-bold text-neutral-800">CI/CD</p>
<p class="w-full text-neutral-800"> <p class="w-full text-neutral-800">
Mit Grundkenntnissen im Web-App-Deployment und Container-Management habe ich bereits erfolgreich Projekte umgesetzt. Mit Grundkenntnissen im Web-App-Deployment und Container-Management habe ich bereits erfolgreich
Mir sind Techniken wie BuilKite (Build-Pipelines) so wie das Resourcenmanagement mit Terraform in Azure nicht fremd und durfte da bereits meine ersten Kenntnisse sammeln. Projekte umgesetzt. Mir sind Techniken wie BuilKite (Build-Pipelines) so wie das Resourcenmanagement mit
Ebenfalls bin ich gut vertraut mit moderner Kontainerisierung von Applikationen mit Docker. Terraform in Azure nicht fremd und durfte da bereits meine ersten Kenntnisse sammeln. Ebenfalls bin ich
Dieses Portfolio zum Beispiel, läuft in einem Docker-Container und liegt hinter einem Traefik Proxy. gut vertraut mit moderner Kontainerisierung von Applikationen mit Docker. Dieses Portfolio zum Beispiel,
läuft in einem Docker-Container und liegt hinter einem Traefik Proxy.
</p> </p>
</div> </div>
<div class="w-full flex-wrap gap-3 h-auto flex justify-between items-center"> <div class="w-full flex-wrap gap-3 h-auto flex justify-between items-center">
<img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/docker.png" alt="" /> <img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/docker.png" alt="" />
<img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/buildkite.png" alt="" /> <img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/buildkite.png" alt="" />
<img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/server.svg" alt="" /> <img class="h-12 w-16 object-scale-down bg-neutral-800 p-3 rounded-lg" src="/img/server.svg" alt="" />
@ -133,17 +198,18 @@ export const SkillsComponent = () => {
<p class="text-2xl font-bold text-neutral-800">Other</p> <p class="text-2xl font-bold text-neutral-800">Other</p>
<p class="w-full text-neutral-800"> <p class="w-full text-neutral-800">
In meiner Freizeit bin ich nicht nur in der Musik unterwegs, sondern schwimme auch leidenschaftlich. In meiner Freizeit bin ich nicht nur in der Musik unterwegs, sondern schwimme auch leidenschaftlich.
Guten Cappucino kann ich auch machen &#9749;&#128521;<br /> Guten Cappucino kann ich auch machen &#9749;&#128521;
Um meine Umsetzungen vorstellen zu können, habe ich mehrere Präsentationen während meiner Ausbildung gehalten zu unterschiedlichsten themen welche meist wie Ted-Talks aufgebaut waren. <br />
Dadurch konnte ich aus meiner Schwäche, vor vielen Leuten wissen zu vermitteln, ein Skill aufbauen, auf den ich heute Stolz sein kann. Um meine Umsetzungen vorstellen zu können, habe ich mehrere Präsentationen während meiner Ausbildung
gehalten zu unterschiedlichsten themen welche meist wie Ted-Talks aufgebaut waren. Dadurch konnte ich
aus meiner Schwäche, vor vielen Leuten wissen zu vermitteln, ein Skill aufbauen, auf den ich heute Stolz
sein kann.
</p> </p>
</div> </div>
<div class="w-full flex-wrap gap-3 h-auto flex justify-between items-center"> <div class="w-full flex-wrap gap-3 h-auto flex justify-between items-center"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</> </>
) );
} };

1
src/pages/impress.astro
View File

@ -6,7 +6,6 @@ import PageLayout from "../layouts/PageLayout.astro";
const encryptedMail = btoa("dominik@oceanwave018.de"); const encryptedMail = btoa("dominik@oceanwave018.de");
const encryptedPhoneNumber = btoa("+49 176 6400 1756"); const encryptedPhoneNumber = btoa("+49 176 6400 1756");
--- ---
<PageLayout> <PageLayout>
<section class="min-h-screen bg-neutral-100 py-6 max-w-full w-screen flex flex-col justify-center gap-5"> <section class="min-h-screen bg-neutral-100 py-6 max-w-full w-screen flex flex-col justify-center gap-5">
<ImpressComponent client:idle phoneNumber={encryptedPhoneNumber} email={encryptedMail} /> <ImpressComponent client:idle phoneNumber={encryptedPhoneNumber} email={encryptedMail} />