webfussel/wf4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ADD: Technology tip

Browse source
This commit is contained in:
webfussel 2024-05-22 08:34:08 +02:00
parent 1c86f3569e
commit b7a11e5b84
6 changed files with 43 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

8
components/Skills/Skills.css
View file

@ -3,11 +3,17 @@
background-image: radial-gradient(circle at 90vw 0, rgba(255,145,0,0.2) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0) 100%);
background-repeat: no-repeat;
& .skills-wrapper {
& .skill-list {
display: flex;
flex-wrap: wrap;
}
& .tech-list ul {
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
& .bottom {
align-items: center;
}

7
components/Skills/Skills.vue
View file

@ -4,7 +4,7 @@
<section class="Skills content">
<h2>Meine Expertise.</h2>
<h3>Dies sind meine <span class="highlight">Spezialgebiete</span> - aber ich bin flexibel!</h3>
<div class="skills-wrapper margin-top default-gap">
<div class="skill-list margin-top default-gap">
<article class="z-2 card flex-col default-gap" v-for="skill in skills">
<h3>{{skill.title}}</h3>
<main>
@ -12,8 +12,9 @@
</main>
</article>
</div>
<article class="z-2 card flex-col default-gap margin-top">
<article class="tech-list z-2 card flex-col default-gap margin-top">
<h3>Technologien</h3>
<p>Neben den klassischen Webentwicklungsstandards JavaScript, HTML und CSS biete ich außerdem folgende Technologien.</p>
<ul class="default-gap">
<li v-for="tech in technologies">
<Technology v-bind="tech" size="l"/>
@ -29,7 +30,7 @@
<script setup lang="ts">
import { css, gl, html, java, jetbrains, js, njs, nuxt, pcss, react, rust, ts, vitest, vue } from '~/Skills'
import { gl, java, jetbrains, njs, nuxt, pcss, react, rust, ts, vitest, vue } from '~/Skills'
const technologies = [ts, pcss, vue, react, nuxt, njs, java, rust, vitest, gl, jetbrains]