feat: home page mobile

alevann · Apr 15, 2024 · f7aacbd · f7aacbd
1 parent 1c81320
commit f7aacbd
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 15 deletions.
diff --git a/assets/dots-3-vertical-svgrepo-com.svg b/assets/dots-3-vertical-svgrepo-com.svg
diff --git a/assets/tree-home-mobile.png b/assets/tree-home-mobile.png
diff --git a/home.css b/home.css
@@ -7,6 +7,42 @@
     margin-top: 20%;
 }
 
+@media only screen and (max-width: 560px) {
+    .page {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-evenly;
+        padding: 1.5rem;
+    }
+
+    .hero {
+        margin-top: 5%;
+        width: 100%;
+    }
+
+    .hero > .title {
+        font-size: 1.25rem;
+    }
+
+    .hero > .fancy {
+        font-size: 1.5rem;
+    }
+
+    .socials {
+        display: none !important;
+    }
+
+    .description {
+        font-size: 1.2rem;
+        text-align: justify;
+    }
+
+    #tree-bg {
+        position: relative !important;
+    }
+}
+
 .hero > .fancy {
     color: var(--accent);
     line-height: 40px;
@@ -18,12 +54,17 @@
     margin-top: 1rem;
 }
 
+.description > p {
+    max-width: 400px;
+}
+
 #tree-bg {
     position: absolute;
     bottom: 0;
     right: 0;
     object-fit: contain;
     max-height: calc(100vh - 40%);
+    z-index: -1;
 }
 
 .socials {

diff --git a/index.html b/index.html
@@ -18,7 +18,11 @@
 </head>
 <body>
 
-  <nav class="nav-menu">
+  <div class="menu-toggle-icon-container hide-on-big-screen">
+    <div id="menu-icon"></div>
+  </div>
+
+  <nav class="nav-menu hide-on-small-screen">
     <div class="item selected">
       <a>About Me</a>
     </div>
@@ -38,9 +42,11 @@
     </div>
     <div class="description">
       <p>
-        I am highly motivated, passionate about mathematics,<br />
-        software development, music, and nature.<br />
-        While I found my home in front-end development,<br />
+        I am highly motivated, passionate about mathematics,
+        software development, music, and nature.
+      </p>
+      <p>
+        While I found my home in front-end development,
         I am able to work across the stack to fit the needs of any team.
       </p>
     </div>
@@ -49,7 +55,11 @@
       <a href="https://stackoverflow.com/users/13183072/kil" target="_blank" id="stack-overflow"></a>
       <a href="https://www.linkedin.com/in/alessandro-vannini-a56a6418a/" target="_blank" id="linked-in"></a>
     </div>
-    <img id="tree-bg" src="/assets/tree-home.png" alt="" />
+    <picture>
+      <source media="(max-width: 560px)" srcset="/assets/tree-home-mobile.png">
+      <source media="(min-width: 561px)" srcset="/assets/tree-home.png">
+      <img id="tree-bg" src="/assets/tree-home.png" alt="" />
+    </picture>
   </div>
 
 </body>

diff --git a/menu.css b/menu.css
@@ -37,3 +37,29 @@
 .nav-menu > .item.selected {
   color: var(--accent);
 }
+
+@media only screen and (max-width: 560px){
+  .hide-on-small-screen {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 560px){
+  .hide-on-big-screen {
+    display: none;
+  }
+}
+
+.menu-toggle-icon-container {
+  background-color: var(--background);
+  padding: 1rem;
+  margin-left: auto;
+  max-height: 64px;
+}
+
+#menu-icon {
+  height: 36px;
+  width: 36px;
+  background-color: var(--color);
+  mask: url("/assets/dots-3-vertical-svgrepo-com.svg") 0 0 / 36px 36px no-repeat;
+}
diff --git a/src/menu.js b/src/menu.js
diff --git a/theme.css b/theme.css
@@ -19,21 +19,24 @@ body {
   display: flex;
 }
 
-.fancy {
-  font-family: "Aref Ruqaa", serif;
-}
-
-.title {
-  font-family: "Antic Slab", serif;
-}
-
 .page {
   padding: 2rem;
   width: 100%;
+  height: 100%;
   position: relative;
   overflow: hidden;
 }
 
-.fill-icon {
-  fill: var(--color);
+@media only screen and (max-width: 560px) {
+  body {
+    flex-direction: column;
+  }
+}
+
+.fancy {
+  font-family: "Aref Ruqaa", serif;
+}
+
+.title {
+  font-family: "Antic Slab", serif;
 }