ADD: Technology tip

Skills.ts

@@ -36,7 +36,7 @@ export const css: ISkill = {name: 'CSS', img: cssImg}
 export const html: ISkill = {name: 'HTML', img: htmlImg}
 export const phaser: ISkill = {name: 'Phaser 3', img: phaserImg}
 export const unity: ISkill = {name: 'Unity 3D', img: unityImg}
-export const cs: ISkill = {name: 'c sharp', img: csImg}
+export const cs: ISkill = {name: 'C#', img: csImg}
 export const ase: ISkill = {name: 'Aseprite', img: aseImg}
 export const gl: ISkill = {name: 'GitLab', img: glImg, link: 'https://gitlab.com'}
 export const vitest: ISkill = {name: 'Vitest', img: vitestImg, link: 'https://vitest.dev'}

components/Services/Services.vue

@@ -24,8 +24,10 @@
       </article>
     </div>
     <h3 class="margin-top-big">Mein Netzwerk</h3>
-    <p class="margin-top">Doch auch wenn ich mal voll ausgelastet bin - keine Sorge! Mein <span class="highlight">Netzwerk an Profis</span> kann dir sicher auch weiterhelfen!</p>
-    <div class="network-list default-gap margin-top" :style="{'--width': `${width}px`, '--children': network.length }">
+    <p class="margin-top">Doch auch wenn ich mal voll ausgelastet bin - keine Sorge!
+      Mein <span class="highlight">Netzwerk an Profis</span> kann dir sicher auch weiterhelfen.
+    </p>
+    <div class="network-list default-gap margin-top">
       <Person ref="persons" v-for="person in network" v-bind="person" />
     </div>
   </section>
@@ -35,13 +37,6 @@
 import check from 'iconoir/icons/regular/double-check.svg'
 import type { Person } from '#components'
 
-const width = ref(0)
-const persons = ref<InstanceType<typeof Person>[]>([])
-
-onMounted(() => {
-  width.value = persons.value[0].$el.getBoundingClientRect().width
-})
-
 const services = [
   {
     title: 'Bug Research',

components/Skills/Skills.css

@@ -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;
     }

components/Skills/Skills.vue

@@ -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]
 

components/Technology/Technology.css

@@ -1,10 +1,28 @@
 .Technology {
+    position: relative;
+    align-items: center;
 
-    &.m {
+    &.m img {
         height: 30px;
     }
 
-    &.l {
+    &.l img {
         height: 50px;
     }
+
+    & span {
+        scale: 0;
+        position: absolute;
+        top: -3rem;
+        width: max-content;
+        border: 1px solid var(--color-white);
+        border-radius: 999px;
+        background-color: var(--color-black);
+        padding: .5em 1.5rem;
+        transition: 150ms;
+    }
+
+    &:hover span {
+        scale: 1;
+    }
 }

components/Technology/Technology.vue

@@ -1,10 +1,13 @@
 <style scoped src="./Technology.css"/>
 
 <template>
-  <a v-if="link" :href="link" target="_blank" rel="noopener noreferrer">
-    <img class="Technology" :src="img" :alt="name" :class="[size]"/>
-  </a>
-  <img v-else class="Technology" :src="img" :alt="name" :class="[size]"/>
+  <div class="Technology flex-col" :class="[size]">
+    <a v-if="link" :href="link" target="_blank" rel="noopener noreferrer">
+      <img :src="img" :alt="name" :class="[size]"/>
+    </a>
+    <img v-else :src="img" :alt="name"/>
+    <span class="tip">{{name}}</span>
+  </div>
 </template>
 
 <script setup lang="ts">