Add more content

css/styles.css

@@ -17,6 +17,10 @@ h1 {
     all: initial;
 }
 
+img {
+    all: initial;
+}
+
 h1 {
     font-family: 'Roboto', sans-serif;
     color: white;
@@ -85,7 +89,7 @@ h1 {
 
 .banner {
     width: 100%;
-    height: 500px;
+    height: fit-content;
     padding: 10px;
 }
 
@@ -93,8 +97,8 @@ h1 {
     float: left;
     width: 33.33%;
     width: calc(100% / 3);
-    padding: 10px;
-    height: 500px;
+    padding: 15px;
+    height: 400px;
     padding-bottom: 20px;
 }
 
@@ -117,10 +121,11 @@ h1 {
     border-radius: 2.5%;
     background-color: #005380;
     box-shadow: 2.5px 5px #FF8B00;
+    cursor: pointer;
 }
 
 .card:hover {
-    box-shadow: 5px 10px #FF8B00;
+    box-shadow: 6px 12px #FF8B00;
     transition: box-shadow 0.25s ease-in-out;
     -webkit-transition: box-shadow 0.25s ease-in-out;
     -o-transition: box-shadow 0.25s ease-in-out;
@@ -137,7 +142,17 @@ h1 {
     text-align: center;
     font-size: 3em;
     padding: 0;
-    margin-bottom: 0.3em;
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
+}
+
+.top-banner-text-medium {
+    color: white;
+    text-align: center;
+    font-size: 2em;
+    padding: 0;
+    margin-bottom: 0em;
+    margin-top: 0.5em;
 }
 
 .top-banner-text-smaller {
@@ -145,7 +160,38 @@ h1 {
     text-align: center;
     font-size: 1.5em;
     padding: 0;
-    margin: 0 0;
+    margin-bottom: 25px;
+}
+
+.card-header {
+    color: white;
+    font-family: 'Roboto', sans-serif;
+    text-align: center;
+    font-size: 1.75em;
+    padding: 10px;
+}
+
+.card-image-box {
+    padding: 20px;
+    padding-bottom: 5px;
+    padding-top: 5px;
+    width: 100%;
+    height: 50%;
+    text-align: center;
+    cursor: pointer;
+}
+
+.card-image {
+    height: 100%;
+    width: auto;
+    cursor: pointer;
+    border-radius: 2.5%;
+}
+
+.card-icon-container {
+    display: flex;
+    width: 100%;
+    height: fit-content;
 }
 
 @media only screen and (max-width: 850px) {

index.html

@@ -49,13 +49,13 @@
         </div>
         <nav class="Navbar__Items Navbar__Items--right">
             <div class="Navbar__Link">
-                <a href="/projects.html">Projects</a>
+                <a href="/projects">Projects</a>
             </div>
             <div class="Navbar__Link">
-                <a href="/about.html">About</a>
+                <a href="https://www.yeetpc.com/blog">Blog</a>
             </div>
             <div class="Navbar__Link">
-                <a href="https://www.yeetpc.com/blog">Blog</a>
+                <a href="/gallery.html">Gallery</a>
             </div>
             <div class="Navbar__Link">
                 <a href="mailto:ravi@yeetpc.com">Contact Me</a>
@@ -75,6 +75,8 @@
                 <a href="https://repairability.yeetpc.com">an iFixit repairability score dashboard</a>. I'm always looking for new projects to work on and contribute to. You can find me on <a href="https://www.reddit.com/user/rav4s">Reddit</a>, <a href="https://github.com/rav4s">GitHub</a>,
                 and on my <a href="https://www.youtube.com/channel/UC3T95a3-KMIcSLYbDhdKiTA/featured">YouTube channel</a>.
             </p>
+            <br />
+            <p class="top-banner-text-medium">Popular Projects</p>
         </div>
     </div>
     <!-- End Top Banner -->
@@ -82,24 +84,37 @@
     <!-- Begin Responsive Layout -->
     <div class="row">
         <div class="column">
-            <div class="card">
-                <p>Helo</p>
+            <br />
+            <div id="smartgaragedoor" class="card">
+                <div class="card-header">
+                    Smart Garage Door Controller
+                </div>
+                <div class="card-image-box">
+                    <img src="static/img/projects/smart-garage-door-thumbnail.jpeg" alt="Smart Garage Door Opener Thumbnail" class="card-image" />
+                </div>
             </div>
         </div>
         <div class="column">
-            <div class="card">
-                <p>Helo</p>
+            <br />
+            <div id="repairdashboard" class="card">
+                <div class="card-header">
+                    Repairability Score Dashboard
+                </div>
             </div>
         </div>
         <div class="column">
-            <div class="card">
-                <p>Helo</p>
+            <br />
+            <div id="thinkpadx220" class="card">
+                <div class="card-header">
+                    Thinkpad X220 Tablet Upgrades
+                </div>
             </div>
         </div>
     </div>
     <!-- End Responsive Layout -->
 
-    <script src="js/expandnavbar.js"></script>
+    <script src="js/redirects.js"></script>
+    <script src="js/expandnavbar.js" defer></script>
 </body>
 
 </html>

js/redirects.js

@@ -0,0 +1,11 @@
+document.getElementById("smartgaragedoor").onclick = function() {
+    location.href = "/projects/smart-garage-door-controller.html";
+};
+
+document.getElementById("repairdashboard").onclick = function() {
+    location.href = "/projects/iFixit-Repairability-Dashboard.html";
+};
+
+document.getElementById("thinkpadx220").onclick = function() {
+    location.href = "/projects/thinkpad-x220-tablet-build.html";
+};

static/site.webmanifest

@@ -0,0 +1 @@
+{ "name": "Ravi Shah's Portfolio", "short_name": "Portfolio", "icons": [{ "src": "/static/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/static/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }], "theme_color": "#040e1e", "background_color": "#040e1e", "display": "standalone" }