150 lines
12 KiB
TypeScript
150 lines
12 KiB
TypeScript
import { Show, createSignal } from "solid-js"
|
|
|
|
export const SkillsComponent = () => {
|
|
const [skill, setSkill] = createSignal<'coding' | 'ci-cd' | 'other'>('coding')
|
|
return (
|
|
<>
|
|
<div class="max-lg:hidden">
|
|
<div class="px-20 mt-10">
|
|
<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`}>
|
|
<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'}>
|
|
<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`}>
|
|
<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'}>
|
|
<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`}>
|
|
<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'}>
|
|
<img src="/img/arrowDown.svg" class="mt-2 mx-auto" alt="" />
|
|
</Show>
|
|
</div>
|
|
</div >
|
|
<Show when={skill() === 'coding'}>
|
|
<div class="w-full h-80 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>
|
|
</div>
|
|
<div class="w-full h-24 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/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/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="" />
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
<Show when={skill() === 'ci-cd'}>
|
|
<div class="w-full h-80 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.
|
|
</p>
|
|
</div>
|
|
<div class="w-full h-24 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/server.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
<Show when={skill() === 'other'}>
|
|
<div class="w-full h-80 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="w-1/2 text-neutral-800">
|
|
In meiner Freizeit bin ich nicht nur in der Musik unterwegs, sondern schwimme auch leidenschaftlich.
|
|
Guten Cappucino kann ich auch machen ☕😉
|
|
Um meine Umsetzungen vorstellen zu können, habe ich mehrere Präsentationen während meiner Ausbildung gehalten zu unterschiedlichsten themen welche meist wie eine Art Ted-Talk aufgebaut waren gehalten.
|
|
Dadurch konnte ich aus meiner Schwäche vor vielen Leuten wissen zu vermitteln, ein Skill auf den ich heute Stolz sein kann. </p>
|
|
</div>
|
|
<div class="w-full h-24 flex justify-between items-center">
|
|
</div>
|
|
</div>
|
|
</Show>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="px-20 mt-10 flex flex-col gap-6 lg:hidden">
|
|
<h1 class="text-3xl font-bold text-neutral-100 underline">Mehr zu meinen Skills</h1>
|
|
<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>
|
|
</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/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="" />
|
|
</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.
|
|
</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="" />
|
|
</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 gap-6">
|
|
<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 ☕😉
|
|
Um meine Umsetzungen vorstellen zu können, habe ich mehrere Präsentationen während meiner Ausbildung gehalten zu unterschiedlichsten themen welche meist wie eine Art Ted-Talk aufgebaut waren gehalten.
|
|
Dadurch konnte ich aus meiner Schwäche vor vielen Leuten wissen zu vermitteln, ein Skill 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>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
} |