Added mobile layout

ViruSel · ViruSel · commit 102098923417 · 2025-01-09T13:43:17.000+02:00
diff --git a/index.html b/index.html
@@ -5,7 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Portofolio</title>
     <link rel="stylesheet" href="style.css">
-    <script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
+    <script src="https://kit.fontawesome.com/ce00775e50.js" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 </head>
 <body>
     <nav class="navbar">
@@ -19,6 +20,9 @@
                 <li><a href="#">About</a></li>
                 <li><a href="#">Contact</a></li>
             </ul>
+            <div class="menu-btn">
+                <i class="fas fa-bars"></i>    
+            </div>
         </div>
     </nav>
 
@@ -27,10 +31,13 @@
         <div class="max-width">
             <div class="home-content">
                 <div class="text-1">Hi, my name is</div>
-                <div class="text-2">Moldovan Alexandru</div>
+                <div class="text-2">Alexandru Moldovan</div>
                 <div class="text-3">And I'm a <span>Software Engineer</span></div>
             </div>
         </div>
     </section>
+
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus ad quam aliquam, nam dolorem at praesentium odio, unde deleniti vel nihil saepe asperiores vero adipisci doloremque quibusdam? Dignissimos, architecto sunt praesentium doloribus repudiandae ipsum in neque at molestiae maxime. Hic, repellat a maiores deserunt corporis debitis sit animi, suscipit delectus perspiciatis libero vero in quam, ut odio molestias asperiores. Dolorum voluptates id nobis hic, quae tempore alias eos quam, placeat obcaecati nam fugit necessitatibus aperiam assumenda harum aliquam reprehenderit laborum. Voluptate nulla, ea nemo perferendis a adipisci et impedit non iure deserunt ratione asperiores quibusdam tempora aperiam dolorum, repudiandae eos nam odit rerum. Voluptate asperiores fugiat aliquam ab amet alias sint molestiae labore dolores consequatur corporis debitis saepe magnam repellendus magni commodi non, voluptatum accusamus culpa, architecto voluptatibus. Ipsam molestiae consequatur corrupti cupiditate ducimus ex fugiat culpa et dolores? Tempora numquam veniam atque nobis, eos dolorum, animi molestias debitis reiciendis iusto eius. Soluta officiis rem quidem quisquam laudantium ex architecto culpa, minima perferendis veritatis iste quo quaerat nesciunt quos quas alias nulla autem quis? Iste minima possimus eum soluta eaque tempora illum dolorum aperiam. Consequuntur itaque odit architecto? Vero nihil tempora ex consequuntur mollitia aut doloremque optio quam et aspernatur!</p>
+    <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,19 @@
+$(document).ready(function(){
+    // Toggle navbar color when scrolling down script
+    $(window).scroll(function(){
+        if(this.scrollY > 20)
+        {
+            $('.navbar').addClass("sticky");
+        }
+        else
+        {
+            $('.navbar').removeClass("sticky");
+        }
+    })
+
+    // Toggle navbar script
+    $('.menu-btn').click(function(){
+        $('.navbar .menu').toggleClass("active")
+        $('.menu-btn i').toggleClass("active")
+    })
+});
diff --git a/style.css b/style.css
@@ -18,9 +18,15 @@
 .navbar{
     position: fixed;
     width: 100%;
+    padding: 30px 0;
+    /* background: indigo; */
+    font-family: "Exo 2", serif;
+    transition: all 0.3s ease;
+}
+
+.navbar.sticky{
     padding: 15px 0;
     background: indigo;
-    font-family: "Exo 2", serif;
 }
 
 .navbar .max-width{
@@ -35,6 +41,12 @@
     font-weight: 600;
 }
 
+.navbar .logo a:hover{
+    color: blueviolet;
+    font-size: 35px;
+    font-weight: 600;
+}
+
 .navbar .menu li{
     list-style: none;
     display: inline-block;
@@ -45,6 +57,19 @@
     font-size: 18px;
     font-weight: 500;
     margin-left: 25px;
+    transition: color 0.3 ease;
+}
+
+.navbar .menu li a:hover{
+    color: blueviolet;
+}
+
+/* Menu button styling */
+.menu-btn{
+    color: whitesmoke;
+    font-size: 23px;
+    cursor: pointer;
+    display: none;
 }
 
 /* Home Section Styling */
@@ -78,4 +103,41 @@
 
 .home .home-content .text-3 span{
     color: blueviolet;
+}
+
+/* Mobile adaptation */
+@media (max-width: 947px){
+    .max-width{
+        padding: 0 50px;
+    }
+    .menu-btn{
+        display: block;
+        z-index: 999;
+    }
+    .menu-btn i.active::before{
+        content: "\f00d";
+    }
+    .navbar .menu{
+        position: fixed;
+        height: 100vh;
+        width: 100%;
+        left: -100%;
+        top: 0;
+        background: black;
+        text-align: center;
+        padding-top: 80px;
+        transition: all 0.3s ease;
+    }
+    .navbar .menu.active{
+        left: 0;
+    }
+    .navbar .menu li{
+        display: block;
+    }
+    .navbar .menu li a{
+        display: inline-block;
+        padding: 20px;
+        margin: 25px, 0;
+        font-size: 25px;
+    }
 }
