Worked on contact page

src/components/home/intersection.vue

@@ -2,7 +2,7 @@
   <div class="intersection_div">
       <div class="intersection_content test">
         <h2 class="test">{{ props.text }}</h2>
-        <RouterLink :to="buttonLink"><div class="button intersection_button_div test">
+        <RouterLink :to="buttonLink" @click="goToTop"><div class="button intersection_button_div test">
             <p>{{buttonText}}</p>
         </div></RouterLink>
       </div>
@@ -26,6 +26,10 @@ const props = defineProps({
             required: true
         }
     });
+
+    function goToTop(){
+        window.scrollTo(0, 0);
+    }
 </script>
 
 <style scoped>

src/views/ContactView.vue

@@ -1,13 +1,18 @@
 <template>
     <Header/>
+    <div id="contact_page">
       <div id="contact_content">
+        <img :src="ContactSvg"/>
+        
+        <div id="contact_content_text">
           <h1>{{ $t("contact.title") }}</h1>
           <p>{{ $t("contact.subtitle") }}</p>
           <h2>{{ $t("contact.emails.research.title") }}</h2>
           <p>{{ $t("contact.emails.research.desc", {user:"a", domain:"b"}) }}</p>
           <h2>{{ $t("contact.emails.work.title") }}</h2>
           <p>{{ $t("contact.emails.work.desc", {user:"a", domain:"b"}) }}</p>
-      <img :src="ContactSvg"/>
+        </div>
+      </div>
     </div>
   </template>
 
@@ -18,20 +23,28 @@
 </script>
   
 <style scoped>
+  #contact_page{
+    /*min-height: 100vh;*/
+  }
+
   #contact_content{
     width: 80%;
     margin: auto;
     margin-top: 20px;
     display: flex;
-    flex-direction: column;
-    /*justify-content: center;*/
-    align-items: center;
-    text-align: center;
-    min-height: 100vh;
+    flex-direction: row-reverse;
+    justify-content: center;
+    /*align-items: center;
+    text-align: center;*/
+    flex-wrap: wrap;
   }
   #contact_content img{
-    width: 100%;
-    max-width: 600px;
+    width: 30%;
+    min-width: 200px;
+  }
+  #contact_content_text{
+    width: 60%;
+    min-width: 300px;
   }
 </style>