diff --git a/public/img/buildkite.png b/public/img/buildkite.png new file mode 100644 index 0000000..1ebbe84 Binary files /dev/null and b/public/img/buildkite.png differ diff --git a/public/img/code.svg b/public/img/code.svg new file mode 100644 index 0000000..6b0cc67 --- /dev/null +++ b/public/img/code.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/codepen.svg b/public/img/codepen.svg new file mode 100644 index 0000000..b72ae2d --- /dev/null +++ b/public/img/codepen.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/server.svg b/public/img/server.svg new file mode 100644 index 0000000..c2021db --- /dev/null +++ b/public/img/server.svg @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 139cfae..e1b9ac0 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -36,9 +36,9 @@ export const Navigation = () => { Über Mich - {/* + Skills - */} + @@ -62,9 +62,9 @@ export const Navigation = () => { Über Mich - {/* + Skills - */} + ); diff --git a/src/components/Skills.tsx b/src/components/Skills.tsx new file mode 100644 index 0000000..b695da9 --- /dev/null +++ b/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 ( +
+

Mehr zu meinen Skills

+
+
+
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`}> +

Coding

+ +
+ + + +
+
+
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`}> +

CI/CD

+ +
+ + + +
+
+
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`}> +

Other

+ +
+ + + +
+
+ +
+
+

Coding

+

In meiner Ausbildung wie auch meiner Freizeit habe ich Erfahrung mit unterschiedlichen Frameworks und Programmiersprachen gesammelt, wie zum beispiel Angular, React und Laravel

+
+
+ + + + +
+
+ + +
+
+

Coding

+

+ 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. +

+
+
+ + + + +
+
+ + +
+
+

Coding

+

In meiner Ausbildung wie auch meiner Freizeit habe ich Erfahrung mit unterschiedlichen Frameworks und Programmiersprachen gesammelt, wie zum beispiel Angular, React und Laravel

+
+
+ + + + +
+
+ +
+ ) +} \ No newline at end of file diff --git a/src/pages/skills.astro b/src/pages/skills.astro index dc5e736..4941070 100644 --- a/src/pages/skills.astro +++ b/src/pages/skills.astro @@ -1,18 +1,11 @@ --- import PageLayout from "../layouts/PageLayout.astro"; +import { SkillsComponent } from "../components/Skills"; --- + -
-

Einige meiner Skills:

-
- - - - - - - REACT -
+
+
diff --git a/tailwind.config.cjs b/tailwind.config.cjs index cf60053..1907d81 100644 --- a/tailwind.config.cjs +++ b/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}'], - theme: { - extend: { - fontFamily: { - fira: ["Fira"] - }, - backgroundImage: { - 'rect-pattern': "url('/img/RectLight.svg')", - 'small-rect-pattern': "url('/img/RectLightSmall.svg')", - 'thin-rect-pattern': "url('/img/RectLightThin.svg')", - 'polygon-luminary': "url('/img/PolygonLuminary.svg')", - 'simple-shiny': "url('/img/SimpleShiny.svg')", - }, - animation: { - 'pulse-custom': 'pulse-custom .8s ease infinite', - } - }, - }, - plugins: [], -} + content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], + theme: { + extend: { + fontFamily: { + fira: ["Fira"] + }, + backgroundImage: { + "rect-pattern": "url('/img/RectLight.svg')", + "small-rect-pattern": "url('/img/RectLightSmall.svg')", + "thin-rect-pattern": "url('/img/RectLightThin.svg')", + "polygon-luminary": "url('/img/PolygonLuminary.svg')", + "simple-shiny": "url('/img/SimpleShiny.svg')" + }, + animation: { + "pulse-custom": "pulse-custom .8s ease infinite" + } + } + }, + safelist: ["bg-emerald-400"], + plugins: [] +};