fix: better SEO

app.vue

@@ -8,8 +8,8 @@
 
 <script setup>
 useSeoMeta({
-  title: 'webfussel | mehr Fussel im Web',
-  description: 'Du brauchst was fürs Web? Komponenten, APIs oder Fullstack? Kein Ding.',
+  title: 'webfussel | mehr Fussel im Web by Fiona Urban',
+  description: 'Du brauchst was fürs Web? Komponenten, APIs oder Fullstack? Kein Ding. Fiona Urban erledigt das.',
   author: 'webfussel',
   robots: 'index, follow',
   themeColor: '#2a2723',

assets/css/global.css

@@ -77,7 +77,7 @@ h1, h2, h3, h4, h5, h6 {
     font-family: 'Roboto Condensed', sans-serif;
 }
 
-h2 {
+h1 {
     font-size: 4rem;
 }
 

assets/css/header.css

@@ -30,7 +30,9 @@
         }
     }
 
-    & h1 {
+    & strong {
+        font-family: 'Roboto Condensed', sans-serif;
+        font-size: 1.5rem;
         flex: 2;
         cursor: default;
         display: flex;

assets/css/intro.css

@@ -4,14 +4,14 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
 
-    .intro-img {
+    & .intro-img {
         width: 750px;
         display: flex;
         position: absolute;
         bottom: 0;
         right: 0;
 
-        img {
+        & img {
             transition: 250ms;
             position: relative;
             width: 100%;
@@ -23,7 +23,26 @@
         justify-content: center;
         z-index: 1;
 
-        .fulltext {
+        & h1 {
+            position: relative;
+
+            & small {
+                position: absolute;
+                font-size: 1.5rem;
+                rotate: -30deg;
+                translate: -30px -20px;
+
+                &:before {
+                    content: '(';
+                }
+
+                &:after {
+                    content: ')';
+                }
+            }
+        }
+
+        & .fulltext {
             color: var(--color-white);
         }
     }
@@ -31,7 +50,7 @@
 
 @media (width <= 430px) {
     .Intro {
-        .intro-img{
+        & .intro-img{
             width: 430px;
         }
     }
@@ -46,7 +65,7 @@
         }
 
         & .intro-text,
-        & h2{
+        & h1 {
             align-items: center;
             text-align: center;
         }

components/Header.vue

@@ -2,7 +2,7 @@
   <div ref="stickyWatch" />
   <header ref="header" class="Header">
     <div ref="headerWrapper" class="wrapper z-0">
-      <h1>
+      <strong>
         <svg aria-label="Logo" class="logo" height="40" viewBox="0 0 2500 2500" width="40">
           <g id="Logo">
             <g transform="matrix(2.00744,0,-5.91646e-31,2.00744,-1223.85,-1050.52)">
@@ -21,7 +21,7 @@
           </g>
         </svg>
         webfussel
-      </h1>
+      </strong>
       <input id="navToggle" v-model="isBurgerOpen" type="checkbox">
       <label :aria-label="burgerLabel" for="navToggle">
         <span/><span/><span/><span/>

components/Intro.vue

@@ -1,10 +1,10 @@
 <template>
   <section id="intro" class="Intro content full default-gap">
     <div class="intro-text flex-col default-gap">
-      <h2 class="flex-col">
+      <h1 class="flex-col">
         <span class="greeting">Moin.</span>
-        <span class="my-name-wrapper">Ich bin <span class="highlight">Fiona</span>.</span>
-      </h2>
+        <span class="my-name-wrapper">Ich bin <span class="highlight">Fiona</span><small>Urban</small>.</span>
+      </h1>
       <h3>
         Component <span class="highlight">&</span> API Entwicklerin
       </h3>
@@ -24,7 +24,7 @@
     <div class="intro-img">
       <picture>
         <source width="750" height="866" media="(min-width: 431px)" srcset="/img/profile_big.webp" />
-        <img width="430" height="866" src="/img/profile_small.webp" alt="Bild von mir" />
+        <img width="430" height="866" src="/img/profile_small.webp" alt="Bild von Fiona Urban" />
       </picture>
     </div>
   </section>