From c7fb67b0cc530a506a573e75bafb3642d99ac980 Mon Sep 17 00:00:00 2001
From: LJ5O <75009579+LJ5O@users.noreply.github.com>
Date: Thu, 8 May 2025 15:09:34 +0200
Subject: [PATCH] Fixed welcome div display on phones

---
 src/components/home/dynamicOccupation.vue | 12 +++++++--
 src/components/home/welcome.vue           | 32 ++++++++++++++++++++++-
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/components/home/dynamicOccupation.vue b/src/components/home/dynamicOccupation.vue
index a902824..43645f6 100644
--- a/src/components/home/dynamicOccupation.vue
+++ b/src/components/home/dynamicOccupation.vue
@@ -1,5 +1,5 @@
 <template>
-  <h2>{{ displayedWorld }}</h2>
+  <h2>{{ displayedWorld }}<span id="cursor"/></h2>
 </template>
 
 <script setup>
@@ -53,12 +53,20 @@
 <style scoped>
 
     h2{
-        height: 1.5em;
+        height: fit-content;
         font-size: 1.5em;
         margin-top: 10px;
         margin-bottom: 5px;
         width: fit-content;
+        /*min-height: 3em;*/
+    }
+    #cursor{
         border-right: 2px solid #EAEAEA;
+        animation: blink 1s step-end infinite;
+    }
+
+    @keyframes blink {
+    50%{opacity: 0;}
     }
 
 </style>
\ No newline at end of file
diff --git a/src/components/home/welcome.vue b/src/components/home/welcome.vue
index 2cddf54..371cf5f 100644
--- a/src/components/home/welcome.vue
+++ b/src/components/home/welcome.vue
@@ -79,6 +79,10 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
+    gap: 15px;
+    justify-content: center; 
+    align-items: center;
+    
 }
 
 #profile_picture{
@@ -100,7 +104,7 @@
     width: fit-content;
 }
 #welcome_text_div h1{
-    margin-top: 100px;
+    margin-top: 2%;
     margin-bottom: 10px;
     font-size: 2em;
 }
@@ -118,6 +122,32 @@
   }
 }
 
+@media (max-width: 900px) {
+  #name_div {
+    margin-top: 30px;
+    margin-left: auto;
+    margin-right: auto;
+    flex-direction: column;
+    text-align: center;
+    gap: 20px;
+  }
+  #name_div_right_container {
+    align-items: center;
+    width: 80vw;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  #welcome_text_div h1 {
+    margin-top: 0px; /* name_div's gap replaces it */
+  }
+  #dynamic_occupation{
+    height: fit-content;
+  }
+  #social_networks {
+    justify-content: center;
+  }
+}
+
 #scroll_arrow{
     position: absolute;
     left: 50%;