asdf
This commit is contained in:
Dominik Strangas
parent
e236c3d53a
commit
f339197021
|
|
@ -1,7 +1,7 @@
|
|||
import { Show, createSignal } from "solid-js"
|
||||
import { Show, createSignal } from "solid-js";
|
||||
|
||||
export const SkillsComponent = () => {
|
||||
const [skill, setSkill] = createSignal<'coding' | 'ci-cd' | 'other'>('coding')
|
||||
const [skill, setSkill] = createSignal<"coding" | "ci-cd" | "other">("coding");
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
<div class="flex w-full mt-8 justify-between mb-2">
|
||||
<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>
|
||||
<img class="w-12 h-12" src="/img/code.svg" alt="" />
|
||||
</div>
|
||||
<Show when={skill() === 'coding'}>
|
||||
<Show when={skill() === "coding"}>
|
||||
<img src="/img/arrowDown.svg" class="mt-2 mx-auto" alt="" />
|
||||
</Show>
|
||||
</div>
|
||||
<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>
|
||||
<img class="w-12 h-12" src="/img/server.svg" alt="" />
|
||||
</div>
|
||||
<Show when={skill() === 'ci-cd'}>
|
||||
<Show when={skill() === "ci-cd"}>
|
||||
<img src="/img/arrowDown.svg" class="mt-2 mx-auto" alt="" />
|
||||
</Show>
|
||||
</div>
|
||||
<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>
|
||||
<img class="w-12 h-12" src="/img/codepen.svg" alt="" />
|
||||
</div>
|
||||
<Show when={skill() === 'other'}>
|
||||
<Show when={skill() === "other"}>
|
||||
<img src="/img/arrowDown.svg" class="mt-2 mx-auto" alt="" />
|
||||
</Show>
|
||||
</div>
|
||||
</div >
|
||||
<Show when={skill() === 'coding'}>
|
||||
</div>
|
||||
<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="flex flex-col gap-6">
|
||||
<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 class="w-full min-h-24 gap-4 flex-wrap flex justify-between items-center">
|
||||
|
||||
<img class="h-20 w-24 object-scale-down bg-neutral-800 p-3 rounded-lg" 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/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/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-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 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="" />
|
||||
<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
|
||||
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>
|
||||
</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="flex flex-col">
|
||||
<p class="text-2xl font-bold text-neutral-800">CI/CD</p>
|
||||
<p class="w-3/4 text-neutral-800">
|
||||
Mit Grundkenntnissen im Web-App-Deployment und Container-Management habe ich bereits erfolgreich Projekte umgesetzt.
|
||||
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.
|
||||
Ebenfalls 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.
|
||||
Mit Grundkenntnissen im Web-App-Deployment und Container-Management habe ich bereits erfolgreich
|
||||
Projekte umgesetzt. 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. Ebenfalls
|
||||
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>
|
||||
</div>
|
||||
<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/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="" />
|
||||
</div>
|
||||
</div>
|
||||
</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="flex flex-col gap-6">
|
||||
<p class="text-2xl font-bold text-neutral-800">Other</p>
|
||||
<p class="text-neutral-800">
|
||||
In meiner Freizeit bin ich nicht nur in der Musik unterwegs, sondern schwimme auch leidenschaftlich.
|
||||
Guten Cappucino kann ich auch machen ☕😉<br />
|
||||
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.
|
||||
Guten Cappucino kann ich auch machen ☕😉
|
||||
<br />
|
||||
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>
|
||||
</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="flex flex-col gap-6">
|
||||
<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 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/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/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/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-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 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="" />
|
||||
<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
|
||||
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 class="w-full h-auto py-5 bg-emerald-600 px-10 flex justify-around flex-col">
|
||||
<div class="flex flex-col">
|
||||
<p class="text-2xl font-bold text-neutral-800">CI/CD</p>
|
||||
<p class="w-full text-neutral-800">
|
||||
Mit Grundkenntnissen im Web-App-Deployment und Container-Management habe ich bereits erfolgreich Projekte umgesetzt.
|
||||
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.
|
||||
Ebenfalls 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.
|
||||
Mit Grundkenntnissen im Web-App-Deployment und Container-Management habe ich bereits erfolgreich
|
||||
Projekte umgesetzt. 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. Ebenfalls 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>
|
||||
</div>
|
||||
<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/buildkite.png" 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="w-full text-neutral-800">
|
||||
In meiner Freizeit bin ich nicht nur in der Musik unterwegs, sondern schwimme auch leidenschaftlich.
|
||||
Guten Cappucino kann ich auch machen ☕😉<br />
|
||||
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.
|
||||
Guten Cappucino kann ich auch machen ☕😉
|
||||
<br />
|
||||
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>
|
||||
</div>
|
||||
<div class="w-full flex-wrap gap-3 h-auto flex justify-between items-center">
|
||||
|
||||
</div>
|
||||
<div class="w-full flex-wrap gap-3 h-auto flex justify-between items-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import PageLayout from "../layouts/PageLayout.astro";
|
|||
const encryptedMail = btoa("dominik@oceanwave018.de");
|
||||
const encryptedPhoneNumber = btoa("+49 176 6400 1756");
|
||||
---
|
||||
|
||||
<PageLayout>
|
||||
<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} />
|
||||
|
|
|
|||
Loading…
Reference in New Issue