From 13036954554e8b7fadbc783a726fb6d3d0411cca Mon Sep 17 00:00:00 2001 From: Dominik Strangas Date: Thu, 25 Jan 2024 08:22:02 +0100 Subject: [PATCH] asdf --- public/img/buildkite.png | Bin 0 -> 3623 bytes public/img/code.svg | 1 + public/img/codepen.svg | 1 + public/img/server.svg | 6 +++ src/components/Navigation.tsx | 8 ++-- src/components/Skills.tsx | 86 ++++++++++++++++++++++++++++++++++ src/pages/skills.astro | 15 ++---- tailwind.config.cjs | 41 ++++++++-------- 8 files changed, 123 insertions(+), 35 deletions(-) create mode 100644 public/img/buildkite.png create mode 100644 public/img/code.svg create mode 100644 public/img/codepen.svg create mode 100644 public/img/server.svg create mode 100644 src/components/Skills.tsx diff --git a/public/img/buildkite.png b/public/img/buildkite.png new file mode 100644 index 0000000000000000000000000000000000000000..1ebbe8489e238016d29ac7e1065587b98cec070d GIT binary patch literal 3623 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 literal 0 HcmV?d00001 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: [] +};