From 1015d6f3b4d790beebe47e97f2b274ac4aa3b047 Mon Sep 17 00:00:00 2001
From: webfussel <fiona@webfussel.de>
Date: Thu, 20 Jun 2024 09:54:34 +0200
Subject: [PATCH] fix: better SEO

---
 app.vue               |  4 ++--
 assets/css/global.css |  2 +-
 assets/css/header.css |  4 +++-
 assets/css/intro.css  | 29 ++++++++++++++++++++++++-----
 components/Header.vue |  4 ++--
 components/Intro.vue  |  8 ++++----
 6 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/app.vue b/app.vue
index 742c9a1..c61b42b 100644
--- a/app.vue
+++ b/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',
diff --git a/assets/css/global.css b/assets/css/global.css
index a44cc6e..3df2e91 100644
--- a/assets/css/global.css
+++ b/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;
 }
 
diff --git a/assets/css/header.css b/assets/css/header.css
index 292c8e4..405fd64 100644
--- a/assets/css/header.css
+++ b/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;
diff --git a/assets/css/intro.css b/assets/css/intro.css
index 2fc7d0b..59ae314 100644
--- a/assets/css/intro.css
+++ b/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;
         }
diff --git a/components/Header.vue b/components/Header.vue
index 92e09cf..897d7b5 100644
--- a/components/Header.vue
+++ b/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/>
diff --git a/components/Intro.vue b/components/Intro.vue
index a0e6be2..78ba103 100644
--- a/components/Intro.vue
+++ b/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>