Added two more projects, more icons, and footer

5 years ago · e40419c2c0
9 changed files with 192 additions and 67 deletions
--- a/css/styles.css
+++ b/css/styles.css
@ -36,6 +36,15 @@ a:hover {
    color: #FF8B00;
 }

+.page-container {
+    position: relative;
+    min-height: 100vh;
+}
+
+.content-wrap {
+    padding-bottom: 8.5rem;
+}
+
 .Navbar {
    background-color: #005380;
    display: flex;
@ -152,7 +161,7 @@ h1 {
    font-size: 2em;
    padding: 0;
    margin-bottom: 0em;
-    margin-top: 0.5em;
+    margin-top: 0em;
 }

 .top-banner-text-smaller {
@ -180,6 +189,7 @@ h1 {
    height: 50%;
    text-align: center;
    cursor: pointer;
+    overflow: hidden;
 }

 .card-image {
@ -190,12 +200,70 @@ h1 {
 }

 .card-icon-container {
+    padding-top: 22.5px;
    display: flex;
    width: 100%;
    height: fit-content;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+}
+
+.social-icons {
+    text-align: center;
+    padding: 0;
+    margin: 0;
+}
+
+.social-icons li {
+    display: inline-flex;
+    list-style-type: none;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    cursor: pointer;
+}
+
+.social-icons li a {
+    border-bottom: none;
+}
+
+.social-icons li img {
+    width: 70px;
+    height: 70px;
+    margin-right: 10px;
+    cursor: pointer;
+}
+
+.footer {
+    background-color: #005380;
+    color: white;
+    text-align: center;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 5rem;
+}
+
+.footer-links {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    width: 100%;
+    height: 100%;
+    line-height: 1em;
 }

-@media only screen and (max-width: 1100px) {
+.footer a {
+    background-color: transparent;
+    font-size: 1.1em;
+}
+
+.footer p {
+    background-color: transparent;
+    font-size: 1.1em;
+}
+
+@media only screen and (max-width: 1200px) {
    .Navbar__Items,
    .Navbar {
        flex-direction: column;
@ -218,4 +286,10 @@ h1 {
    .column {
        width: 100%;
    }
+}
+
+@media only screen and (max-width: 1300px) {
+    .card-icon-container {
+        padding-top: 10px;
+    }
 }
--- a/index.html
+++ b/index.html
@ -39,79 +39,127 @@
 </head>

 <body>
-    <!-- Top Navbar -->
-    <div class="Navbar">
-        <div class="Navbar__Link Navbar__Link-brand">
-            <h1><a href="#">Ravi Shah's Portfolio</a></h1>
-        </div>
-        <div class="Navbar__Link Navbar__Link-toggle">
-            <i class="fa fa-bars"></i>
-        </div>
-        <nav class="Navbar__Items Navbar__Items--right">
-            <div class="Navbar__Link">
-                <a href="/projects">Projects</a>
-            </div>
-            <div class="Navbar__Link">
-                <a href="https://www.yeetpc.com/blog">Blog</a>
-            </div>
-            <div class="Navbar__Link">
-                <a href="/gallery.html">Gallery</a>
-            </div>
-            <div class="Navbar__Link">
-                <a href="mailto:ravi@yeetpc.com">Contact Me</a>
+    <div class="page-container">
+        <div class="content-wrap">
+            <!-- Top Navbar -->
+            <div class="Navbar">
+                <div class="Navbar__Link Navbar__Link-brand">
+                    <h1><a href="#">Ravi Shah's Portfolio</a></h1>
+                </div>
+                <div class="Navbar__Link Navbar__Link-toggle">
+                    <i class="fa fa-bars"></i>
+                </div>
+                <nav class="Navbar__Items Navbar__Items--right">
+                    <div class="Navbar__Link">
+                        <a href="/projects">Projects</a>
+                    </div>
+                    <div class="Navbar__Link">
+                        <a href="https://www.yeetpc.com/blog">Blog</a>
+                    </div>
+                    <div class="Navbar__Link">
+                        <a href="/gallery.html">Gallery</a>
+                    </div>
+                    <div class="Navbar__Link">
+                        <a href="mailto:ravi@yeetpc.com">Contact Me</a>
+                    </div>
+                </nav>
            </div>
-        </nav>
-    </div>
-    <!-- End Top Navbar -->
+            <!-- End Top Navbar -->

-    <!-- Begin Top Banner -->
-    <div class="banner">
-        <div class="card-top-banner">
-            <p class="top-banner-text">HI 👋 I'M RAVI SHAH!</p>
-            <p class="top-banner-text-smaller">
-                I'm currently a freshman at
-                <a href="https://westwood.roundrockisd.org/">Westwood High School</a>. Some of my projects include <a href="https://github.com/Rav4s/New-Pi-Garage-Door-Opener">a Raspberry Pi smart garage door controller</a>, <a href="https://www.yeetpc.com">a fully self-hosted website</a>,
-                <a href="https://www.yeetpc.com/blog/entry.php">my ThinkPad X220 Tablet build</a>, and
-                <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 -->
+            <!-- Begin Top Banner -->
+            <div class="banner">
+                <div class="card-top-banner">
+                    <p class="top-banner-text">HI 👋 I'M RAVI SHAH!</p>
+                    <p class="top-banner-text-smaller">
+                        I'm currently a freshman at
+                        <a href="https://westwood.roundrockisd.org/">Westwood High School</a>. Some of my projects include <a href="https://github.com/Rav4s/New-Pi-Garage-Door-Opener">a Raspberry Pi smart garage door controller</a>, <a href="https://www.yeetpc.com">a fully self-hosted website</a>,
+                        <a href="https://www.yeetpc.com/blog/entry.php">my ThinkPad X220 Tablet build</a>, and
+                        <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 -->

-    <!-- Begin Responsive Layout -->
-    <div class="row">
-        <div class="column">
-            <br />
-            <div id="smartgaragedoor" class="card">
-                <div class="card-header">
-                    Smart Garage Door Controller
+            <!-- Begin Responsive Layout -->
+            <div class="row">
+                <div class="column">
+                    <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 class="card-icon-container">
+                            <ul class="social-icons">
+                                <li>
+                                    <a href="https://youtu.be/An7KQbmUnhs"><img src='static/img/common/YouTube.svg' alt="View the Smart Garage Door Build Video on YouTube" /></a>
+                                </li>
+                                <li>
+                                    <a href="https://github.com/Rav4s/New-Pi-Garage-Door-Opener"><img src='static/img/common/Github.svg' alt="View the Smart Garage Door Github" /></a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
                </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 class="column">
+                    <br />
+                    <div id="repairdashboard" class="card">
+                        <div class="card-header">
+                            Repairability Score Dashboard
+                        </div>
+                        <div class="card-image-box">
+                            <img src="static/img/projects/repairability-score-dashboard-thumbnail.png" alt="Repairability Score Dashboard Thumbnail" class="card-image" />
+                        </div>
+                        <div class="card-icon-container">
+                            <ul class="social-icons">
+                                <li>
+                                    <a href="https://repairability.yeetpc.com"><img src='static/img/common/Internet.png' alt="View the live iFixit Repairability Score Dashboard" /></a>
+                                </li>
+                                <li>
+                                    <a href="https://github.com/Rav4s/iFixit-Repairability-Dashboard"><img src='static/img/common/Github.svg' alt="View the Repairability Score Dashboard Github" /></a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
                </div>
-            </div>
-        </div>
-        <div class="column">
-            <br />
-            <div id="repairdashboard" class="card">
-                <div class="card-header">
-                    Repairability Score Dashboard
+                <div class="column">
+                    <br />
+                    <div id="thinkpadx220" class="card">
+                        <div class="card-header">
+                            Thinkpad X220 Tablet Upgrades
+                        </div>
+                        <div class="card-image-box">
+                            <img src="static/img/projects/thinkpad-x220-tablet-upgrades-thumbnail.jpg" alt="Thinkpad X220 Tablet Upgrades Thumbnail" class="card-image" />
+                        </div>
+                        <div class="card-icon-container">
+                            <ul class="social-icons">
+                                <li>
+                                    <a href="https://www.yeetpc.com/blog/entry.php"><img src='static/img/common/Internet.png' alt="View the Thinkpad X220 Tablet Upgrades Blog Post" /></a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
                </div>
            </div>
-        </div>
-        <div class="column">
-            <br />
-            <div id="thinkpadx220" class="card">
-                <div class="card-header">
-                    Thinkpad X220 Tablet Upgrades
+            <!-- End Responsive Layout -->
+
+            <!-- Begin Footer -->
+
+            <div class="footer">
+                <div class="footer-links">
+                    <a href="https://www.vecteezy.com/free-vector/social-media-icons">Icon Vectors by Vecteezy</a>
+                    <p>© 2021 Ravi Shah</p>
                </div>
            </div>
+
+            <!-- End Footer -->
        </div>
    </div>
-    <!-- End Responsive Layout -->

    <script src="js/redirects.js"></script>
    <script src="js/expandnavbar.js" defer></script>
--- a/js/redirects.js
+++ b/js/redirects.js
@ -1,11 +1,11 @@
 document.getElementById("smartgaragedoor").onclick = function() {
-    location.href = "/projects/smart-garage-door-controller.html";
+    location.href = "https://github.com/Rav4s/New-Pi-Garage-Door-Opener";
 };

 document.getElementById("repairdashboard").onclick = function() {
-    location.href = "/projects/iFixit-Repairability-Dashboard.html";
+    location.href = "https://repairability.yeetpc.com/";
 };

 document.getElementById("thinkpadx220").onclick = function() {
-    location.href = "/projects/thinkpad-x220-tablet-build.html";
+    location.href = "https://www.yeetpc.com/blog/entry.php";
 };
--- a/static/img/common/Github.svg
+++ b/static/img/common/Github.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 85 85"><defs><style>.cls-1{fill:#3f91cb;}.cls-2,.cls-3{fill:#fff;}.cls-2{fill-rule:evenodd;}</style></defs><title>Github</title><g id="Circle_Color" data-name="Circle Color"><g id="Github"><circle id="back" class="cls-1" cx="42.5" cy="42.5" r="42.5"/><g id="Github-2" data-name="Github"><path class="cls-2" d="M42.5,19.29A23.8,23.8,0,0,0,35,65.67c1.19.22,1.62-.52,1.62-1.14s0-2.45,0-4.43c-6.62,1.43-8-2.81-8-2.81-1.08-2.75-2.64-3.49-2.64-3.49-2.16-1.47.16-1.44.16-1.44a5,5,0,0,1,3.65,2.45c2.12,3.64,5.57,2.59,6.93,2a5,5,0,0,1,1.51-3.18C32.87,53,27.31,51,27.31,41.84a9.17,9.17,0,0,1,2.46-6.38,8.5,8.5,0,0,1,.23-6.3s2-.64,6.54,2.44a22.6,22.6,0,0,1,11.92,0C53,28.52,55,29.16,55,29.16a8.5,8.5,0,0,1,.23,6.3,9.16,9.16,0,0,1,2.45,6.38C57.68,51,52.12,53,46.82,53.59A5.7,5.7,0,0,1,48.43,58c0,3.18,0,5.74,0,6.53,0,.63.43,1.37,1.64,1.14A23.8,23.8,0,0,0,42.5,19.29Z"/><path class="cls-3" d="M27.71,53.46c-.05.12-.23.15-.4.07s-.27-.24-.22-.36.24-.15.41-.07.27.24.21.36Zm-.29-.22"/><path class="cls-3" d="M28.68,54.53c-.11.11-.34.06-.49-.11a.37.37,0,0,1-.07-.49c.12-.11.33-.06.49.11s.19.39.07.49Zm-.23-.24"/><path class="cls-3" d="M29.62,55.91c-.15.1-.39,0-.53-.21s-.15-.47,0-.57.38,0,.53.2.15.47,0,.58Zm0,0"/><path class="cls-3" d="M30.9,57.23c-.13.14-.41.1-.61-.09s-.27-.47-.13-.61.41-.1.61.09.27.47.13.61Zm0,0"/><path class="cls-3" d="M32.68,58c-.06.18-.33.27-.6.19s-.44-.3-.39-.49.33-.27.6-.19.44.3.39.49Zm0,0"/><path class="cls-3" d="M34.62,58.14c0,.2-.22.36-.5.36s-.52-.15-.52-.34.22-.36.51-.37.51.16.51.35Zm0,0"/><path class="cls-3" d="M36.44,57.83c0,.19-.17.39-.45.44s-.53-.06-.56-.25.16-.4.44-.45.53.07.57.26Zm0,0"/></g></g></g></svg>
--- a/static/img/common/Internet.png
+++ b/static/img/common/Internet.png
--- a/static/img/common/Reddit.svg
+++ b/static/img/common/Reddit.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 85 85"><defs><style>.cls-1{fill:#ff4500;}.cls-2{fill:#fff;}</style></defs><title>Reddit</title><g id="Circle_Color" data-name="Circle Color"><g id="Reddit"><circle id="back" class="cls-1" cx="42.5" cy="42.5" r="42.5"/><g id="reddit-2" data-name="reddit"><path class="cls-2" d="M39,33.54a3,3,0,1,0-3,3A3,3,0,0,0,39,33.54Z"/><path class="cls-2" d="M49,30.58a3,3,0,1,0,3,3A3,3,0,0,0,49,30.58Z"/><path class="cls-2" d="M48.25,40.8c-1.12,1.12-3,1.67-5.75,1.67s-4.63-.55-5.75-1.67A.82.82,0,0,0,35.59,42c1.44,1.44,3.72,2.14,6.91,2.14S48,43.41,49.41,42a.82.82,0,0,0,0-1.17A.83.83,0,0,0,48.25,40.8Z"/><path class="cls-2" d="M63.92,30.31a4.88,4.88,0,0,0-4.87-4.87,4.83,4.83,0,0,0-3.23,1.24,24.36,24.36,0,0,0-12.15-3.56l2.51-7.94L53,16.79a4,4,0,1,0,.33-1.62L45.81,13.4a.81.81,0,0,0-1,.56L42,23.1a24.66,24.66,0,0,0-12.77,3.57,4.87,4.87,0,1,0-5.72,7.83,7.87,7.87,0,0,0-.11,1.38c0,3.48,2,6.73,5.74,9.15A20.74,20.74,0,0,0,33,47a8.92,8.92,0,0,0-4.66,8.16c0,4.17,2.46,7.67,5.76,8.57A22.72,22.72,0,0,0,34.93,66l-.46,0c-3,0-5.38,2-5.38,4.51a4,4,0,0,0,.2,1.18.83.83,0,0,0,.79.57H54.8a.83.83,0,0,0,.79-.58,4,4,0,0,0,.2-1.17C55.79,68,53.37,66,50.41,66h-.33c.31-.72.59-1.48.85-2.28,3.3-.9,5.76-4.4,5.76-8.57A9,9,0,0,0,52,47,20.12,20.12,0,0,0,55.91,45c3.7-2.42,5.74-5.67,5.74-9.15a7.87,7.87,0,0,0-.11-1.38A4.88,4.88,0,0,0,63.92,30.31ZM59.39,16.76A2.37,2.37,0,1,1,57,14.4,2.37,2.37,0,0,1,59.39,16.76ZM54.14,70.5a.31.31,0,0,1,0,.1h-7a13.37,13.37,0,0,0,2-2.8,4.79,4.79,0,0,1,1.22-.16C52.46,67.64,54.14,68.93,54.14,70.5ZM34.47,67.64a4.61,4.61,0,0,1,1.36.2,13.65,13.65,0,0,0,2,2.76h-7.1v-.1C30.74,68.93,32.41,67.64,34.47,67.64Zm10.07,3H40.46c-3.66-2.09-6.3-9.4-6.3-17.53a38,38,0,0,1,.41-5.54,28.15,28.15,0,0,0,15.86,0,37.88,37.88,0,0,1,.41,5.54C50.84,61.2,48.2,68.51,44.54,70.6ZM32.71,49.06a40,40,0,0,0-.2,4,36.64,36.64,0,0,0,1,8.68A7.34,7.34,0,0,1,30,55.15,7.65,7.65,0,0,1,32.71,49.06ZM51.48,61.75a36.64,36.64,0,0,0,1-8.68,40,40,0,0,0-.2-4,7.65,7.65,0,0,1,2.76,6.09A7.34,7.34,0,0,1,51.48,61.75ZM42.5,47C32.85,47,25,42,25,35.88S32.85,24.74,42.5,24.74,60,29.74,60,35.88,52.15,47,42.5,47ZM26,27.09a3.19,3.19,0,0,1,1.84.58A11.79,11.79,0,0,0,23.9,32.8,3.22,3.22,0,0,1,26,27.09Zm31.26.58a3.17,3.17,0,0,1,1.84-.58A3.22,3.22,0,0,1,61.1,32.8,11.87,11.87,0,0,0,57.21,27.67Z"/></g></g></g></svg>
--- a/static/img/common/YouTube.svg
+++ b/static/img/common/YouTube.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 85 85"><defs><style>.cls-1{fill:#e52d27;}.cls-2{fill:#fff;}</style></defs><title>Youtube</title><g id="Circle_Color" data-name="Circle Color"><g id="YouTube"><circle id="back" class="cls-1" cx="42.5" cy="42.5" r="42.5"/><path id="youtube-2" data-name="youtube" class="cls-2" d="M66.3,52a6.82,6.82,0,0,1-6.8,6.8h-34A6.82,6.82,0,0,1,18.7,52V33a6.82,6.82,0,0,1,6.8-6.8h34A6.82,6.82,0,0,1,66.3,33ZM37.58,48.34l12.87-6.66L37.58,35Z"/></g></g></svg>
--- a/static/img/projects/repairability-score-dashboard-thumbnail.png
+++ b/static/img/projects/repairability-score-dashboard-thumbnail.png
--- a/static/img/projects/thinkpad-x220-tablet-upgrades-thumbnail.jpg
+++ b/static/img/projects/thinkpad-x220-tablet-upgrades-thumbnail.jpg