asdf

public/img/code.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="#f5f5f5" fill="none" stroke-linecap="round" stroke-width="1.5" stroke-linejoin="round" stroke-align="center" class="pangolicons pangolicons-code " ><path  d="M7.83,17.33L2.5,12,7.83,6.67m9.33,10.67l5.33-5.33-5.33-5.33"/></svg>

public/img/codepen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="#f5f5f5" fill="none" stroke-linecap="round" stroke-width="1.5" stroke-linejoin="round" stroke-align="center" class="pangolicons pangolicons-codepen " ><path  d="M12,2l10,6.67-10,6.67L2,8.67,12,2ZM2,15.33l10,6.67,10-6.67-10-6.67L2,15.33Zm0-6.67v6.67m10,6.67v-6.67m10-6.67v6.67M12,2v6.67"/></svg>

public/img/server.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="#f5f5f5"
+    fill="none" stroke-linecap="round" stroke-width="1.5" stroke-linejoin="round"
+    stroke-align="center" class="pangolicons pangolicons-server ">
+    <path
+        d="M21,20.88H3c-.55,0-1-.45-1-1v-4.67c0-.55,.45-1,1-1H21c.55,0,1,.45,1,1v4.67c0,.55-.45,1-1,1Zm-14.34-3.67c-.18,0-.33,.15-.33,.33s.15,.33,.33,.33,.33-.15,.33-.33-.15-.33-.33-.33Zm14.34-7.42H3c-.55,0-1-.45-1-1V4.12c0-.55,.45-1,1-1H21c.55,0,1,.45,1,1v4.67c0,.55-.45,1-1,1Zm-3.83-3.67c-.18,0-.33,.15-.33,.33s.15,.33,.33,.33,.33-.15,.33-.33-.15-.33-.33-.33Z" />
+</svg>

src/components/Navigation.tsx

@@ -36,9 +36,9 @@ export const Navigation = () => {
               <a class="hover:underline transition-all hover:text-zinc-50" href="/mystory">
                 &#220;ber Mich
               </a>
-              {/* <a class="hover:underline transition-all hover:text-zinc-50" href="/skills">
+              <a class="hover:underline transition-all hover:text-zinc-50" href="/skills">
                 Skills
-              </a> */}
+              </a>
             </div>
           </div>
         </div>
@@ -62,9 +62,9 @@ export const Navigation = () => {
         <a class="hover:underline transition-all hover:text-zinc-50" href="/mystory">
           &#220;ber Mich
         </a>
-        {/* <a class="hover:underline transition-all hover:text-zinc-50" href="/skills">
+        <a class="hover:underline transition-all hover:text-zinc-50" href="/skills">
           Skills
-        </a> */}
+        </a>
       </nav>
     </>
   );

src/components/Skills.tsx

@@ -0,0 +1,86 @@
+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>
+                    <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="" />
+                    </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">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="" />
+                    </div>
+                </div>
+            </Show>
+        </div>
+    )
+}

src/pages/skills.astro

@@ -1,18 +1,11 @@
 ---
 import PageLayout from "../layouts/PageLayout.astro";
+import { SkillsComponent } from "../components/Skills";
 ---
 
+<script></script>
 <PageLayout>
-  <div class="h-[90vh] w-[90vh] flex flex-col justify-center gap-7">
+  <div class="h-screen w-screen flex flex-col">
-    <h1 class="text-3xl font-bold text-neutral-100">Einige meiner Skills:</h1>
+    <SkillsComponent client:load />
-    <div class="h-1/2 w-full flex flex-row flex-wrap justify-around">
-      <img class="h-24 object-scale-down aspect-square p-3" src="/img/angular.svg.png" alt="" />
-      <img class="h-24 object-scale-down aspect-square p-3" src="/img/typescript.svg.png" alt="" />
-      <img class="h-24 object-scale-down aspect-square p-3" src="/img/javascript.png" alt="" />
-      <img class="h-24 object-scale-down aspect-square p-3" src="/img/laravel.svg.png" alt="" />
-      <img class="h-24 object-scale-down aspect-square p-3" src="/img/docker.png" alt="" />
-      <img class="h-24 object-scale-down aspect-square p-3" src="/img/php.svg" alt="" />
-      <img class="h-24 object-scale-down aspect-square p-3" src="/img/react.png" alt="REACT" />
-    </div>
   </div>
 </PageLayout>

tailwind.config.cjs

@@ -1,22 +1,23 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
     extend: {
       fontFamily: {
         fira: ["Fira"]
       },
       backgroundImage: {
-				'rect-pattern': "url('/img/RectLight.svg')",
+        "rect-pattern": "url('/img/RectLight.svg')",
-				'small-rect-pattern': "url('/img/RectLightSmall.svg')",
+        "small-rect-pattern": "url('/img/RectLightSmall.svg')",
-				'thin-rect-pattern': "url('/img/RectLightThin.svg')",
+        "thin-rect-pattern": "url('/img/RectLightThin.svg')",
-				'polygon-luminary': "url('/img/PolygonLuminary.svg')",
+        "polygon-luminary": "url('/img/PolygonLuminary.svg')",
-				'simple-shiny': "url('/img/SimpleShiny.svg')",
+        "simple-shiny": "url('/img/SimpleShiny.svg')"
       },
       animation: {
-				'pulse-custom': 'pulse-custom .8s ease infinite',
+        "pulse-custom": "pulse-custom .8s ease infinite"
+      }
     }
   },
-	},
+  safelist: ["bg-emerald-400"],
-	plugins: [],
+  plugins: []
-}
+};