sdf
This commit is contained in:
Dominik Strangas
parent
14b4f46d65
commit
91bcca129d
|
|
@ -3,88 +3,142 @@ import { Show, createSignal } from "solid-js"
|
|||
export const SkillsComponent = () => {
|
||||
const [skill, setSkill] = createSignal<'coding' | 'ci-cd' | 'other'>('coding')
|
||||
return (
|
||||
<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>
|
||||
<>
|
||||
<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'}>
|
||||
<img src="/img/arrowDown.svg" class="mt-2 mx-auto" alt="" />
|
||||
<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="" />
|
||||
</div>
|
||||
</div>
|
||||
</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="" />
|
||||
<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">Coding</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>
|
||||
</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="" />
|
||||
<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">
|
||||
Ich beherrsche Tailwind und Sass für die Gestaltung von ansprechenden Frontends. Zusätzlich zeichnet mich eine ausgeprägte Expertise im Umgang mit SQL aus, wodurch ich effizient und zuverlässig Datenbanken verwalten kann, und mit ORMs wie Prisma habe ich ebenfalls bereits Erfahrung sammeln können. </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/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>
|
||||
</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">
|
||||
</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-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-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="" />
|
||||
</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">Coding</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">
|
||||
Ich beherrsche Tailwind und Sass für die Gestaltung von ansprechenden Frontends. Zusätzlich zeichnet mich eine ausgeprägte Expertise im Umgang mit SQL aus, wodurch ich effizient und zuverlässig Datenbanken verwalten kann, und mit ORMs wie Prisma habe ich ebenfalls bereits Erfahrung sammeln können. </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/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>
|
||||
</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">Coding</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">
|
||||
Ich beherrsche Tailwind und Sass für die Gestaltung von ansprechenden Frontends. Zusätzlich zeichnet mich eine ausgeprägte Expertise im Umgang mit SQL aus, wodurch ich effizient und zuverlässig Datenbanken verwalten kann, und mit ORMs wie Prisma habe ich ebenfalls bereits Erfahrung sammeln können. </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/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>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@ import { SkillsComponent } from "../components/Skills";
|
|||
|
||||
<script></script>
|
||||
<PageLayout>
|
||||
<div class="h-screen w-screen flex flex-col">
|
||||
<div class="h-auto min-h-screen py-4 w-screen flex flex-col">
|
||||
<SkillsComponent client:load />
|
||||
</div>
|
||||
</PageLayout>
|
||||
|
|
|
|||
Loading…
Reference in New Issue