From 2915aea55fd818323c4a8caf7d83ce0e77e9b2cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micka=C3=ABl=20Lalanne?= <mickael.lalanne03@gmail.com>
Date: Wed, 17 Mar 2021 17:50:32 +0100
Subject: [PATCH] Responsive adjustments

---
 portfolio/src/components/home/Home.vue               | 9 ++++-----
 portfolio/src/components/presentation/Timeline.vue   | 3 +--
 portfolio/src/components/projects/ProjectPreview.vue | 6 ++++++
 portfolio/src/components/projects/Projects.vue       | 2 +-
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/portfolio/src/components/home/Home.vue b/portfolio/src/components/home/Home.vue
index 68efb28..65b1829 100644
--- a/portfolio/src/components/home/Home.vue
+++ b/portfolio/src/components/home/Home.vue
@@ -5,8 +5,7 @@
                 <div>
                     Salut, moi c'est
                     <div class="name-container"><h1 class="highlight">Mickaël Lalanne</h1>.</div>
-                    <br />
-                    Je suis développeur web full-stack.
+                    <div>Je suis développeur web full-stack.</div>
                     <CustomButton
                         class="see-work-button"
                         text="Voir mon travail"
@@ -253,6 +252,9 @@ export default {
     .home-content-container {
         font-size: 39px;
     }
+    .name-container {
+        display: block;
+    }
 }
 
 // Small devices (landscape phones, max 576px and less)
@@ -260,8 +262,5 @@ export default {
     .home-content-container {
         font-size: 26px;
     }
-    .name-container {
-        display: block;
-    }
 }
 </style>
diff --git a/portfolio/src/components/presentation/Timeline.vue b/portfolio/src/components/presentation/Timeline.vue
index 5e8c1de..d1a5851 100644
--- a/portfolio/src/components/presentation/Timeline.vue
+++ b/portfolio/src/components/presentation/Timeline.vue
@@ -115,10 +115,9 @@ export default {
 
     &__event {
         background: #fff;
-        margin-bottom: 20px;
         position: relative;
         display: flex;
-        margin: 20px 0;
+        margin: 10px 0;
         border-radius: 8px;
         box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
         z-index: 0;
diff --git a/portfolio/src/components/projects/ProjectPreview.vue b/portfolio/src/components/projects/ProjectPreview.vue
index 8b4f8f0..e0245a1 100644
--- a/portfolio/src/components/projects/ProjectPreview.vue
+++ b/portfolio/src/components/projects/ProjectPreview.vue
@@ -129,4 +129,10 @@ export default {
         width: 100%;
     }
 }
+// Small devices (landscape phones, max 576px and less)
+@media (max-width: 576px) {
+    .project-img {
+        max-width: 95vw;
+    }
+}
 </style>
diff --git a/portfolio/src/components/projects/Projects.vue b/portfolio/src/components/projects/Projects.vue
index 23afdcd..8a78ee7 100644
--- a/portfolio/src/components/projects/Projects.vue
+++ b/portfolio/src/components/projects/Projects.vue
@@ -85,6 +85,6 @@ export default {
     background-color: var(--v-primary-base);
     text-align: center;
     margin: auto;
-    margin-bottom: 100px;
+    margin-bottom: 65px;
 }
 </style>