update UI on small screen

src/App.vue

@@ -11,7 +11,7 @@
         </header>
         <main>
           <div style="max-width: 1000px">
-            <RouterView :projects="pages[0].items" />
+            <RouterView :isMobile="isMobile" :projects="pages[0].items" />
           </div>
         </main>
         <el-footer class="footer">
@@ -67,12 +67,20 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, onMounted, onUnmounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import banner1 from "@/assets/banner1.png";
 import banner4 from "@/assets/banner4.png";
 import banner3 from "@/assets/banner3.png";
 
+let windowWidth = ref(window.innerWidth);
+const onWidthChange = () => (windowWidth.value = window.innerWidth);
+
+const isMobile = computed(() => {
+  if (windowWidth.value < 850) return true;
+  else return false;
+});
+
 const router = useRouter();
 
 const currentPage = ref("0");
@@ -119,6 +127,9 @@ function navigateTo(index) {
     );
   } else router.push(pages.value.find((it) => it.index == index).path);
 }
+
+onMounted(() => window.addEventListener("resize", onWidthChange));
+onUnmounted(() => window.removeEventListener("resize", onWidthChange));
 </script>
 
 <style lang="scss">

src/views/Home.vue

@@ -5,7 +5,25 @@
         <el-row style="width: 100%" justify="space-between">
           <h1 style="width: 100%" class="name">Welcome to my website!</h1>
         </el-row>
-        <el-row>
+        <el-row v-if="isMobile">
+          <div class="about">
+            <el-image class="profile-image" :src="p_picture" lazy />
+            <p class="bio">
+              Hi my name is Massimiliano Sartore and I am a software developer
+              from Italy. I have a passion for mobile development and creating
+              innovative solutions for different platforms. I have a solid
+              foundation in software engineering and industry 4.0, as I
+              graduated from ITS-ICT as a Higher technician in 2021. I am also
+              pursuing a degree in computer science to expand my knowledge and
+              skills in this field. I love learning new technologies and
+              applying them to real-world challenges that can make a positive
+              impact. On this website, you can find out more about me and my
+              projects, as well as contact me if you are interested in working
+              with me or collaborating on something exciting.
+            </p>
+          </div>
+        </el-row>
+        <el-row v-else>
           <el-col :span="8">
             <el-image class="profile-image" :src="p_picture" lazy />
           </el-col>
@@ -33,6 +51,19 @@
     <h2>Projects</h2>
     <el-col style="text-align: center">
       <el-carousel
+        v-if="isMobile"
+        :interval="4000"
+        indicator-position="outside"
+      >
+        <el-carousel-item
+          v-for="project in props.projects"
+          :key="project.label"
+        >
+          <img class="img_carousel" :src="project.img" lazy />
+        </el-carousel-item>
+      </el-carousel>
+      <el-carousel
+        v-else
         :motion-blur="true"
         :interval="4000"
         type="card"
@@ -82,6 +113,7 @@ import p_picture from "@/assets/p_picture.jpg";
 
 const props = defineProps({
   projects: Array,
+  isMobile: Boolean,
 });
 
 const ew_list = [
@@ -121,7 +153,8 @@ const ew_list = [
 }
 
 .about {
-  display: flex;
+  display: block;
+  text-align: center;
 }
 
 .name {
@@ -154,6 +187,8 @@ h2 {
 .profile-image {
   width: 100%;
   border-radius: 100%;
+  margin-bottom: 20px;
+  margin-top: 50px;
   max-height: 200px;
   max-width: 200px;
 }