Added my face

_layouts/home.html

@@ -6,8 +6,24 @@
         <!-- Navbar -->
         {% include nav.html %}
 
+        <div class="landing container">
+
+            <div style="height:15vh;"></div>
+            <img id="face-backdrop" src="/assets/images/face-backdrop.png">
+
+            <div style="height:20vh;"></div>
+            <div class="nudge-right">
+                <h1 id="name-landing">Evan Pratten</h1>
+                <h3 id="me-landing">Programmer</h3>
+            </div>
+
+        </div>
+        <div class="landing-more container">
+            <h5><a href="/blog">Blog</a> <a href="/projects">Projects</a> <a href="#main-start">More</a></h5>
+        </div>
+
         <!-- Header -->
-        <div class="header container" style="height:30vh">
+        <div class="header container" style="height:30vh" id="main-start">
             <div class="home-header">
             </div>
         </div>
@@ -48,7 +64,7 @@
                             Since then, I have picked up many other languages, and am currently mainly using Python,
                             Java, and C.<br>
                             I am working on learning a few new languages, including Ruby at the moment.</p>
-                        
+
 
                         <br><br>
                         <h2>Projects</h2>

assets/css/main.css

@@ -6,7 +6,107 @@ body {
     background-color: #343a40;
 }
 
+html {
+    scroll-behavior: smooth;
+}
 
+.landing.container {
+    display: block;
+    height: 80vh;
+    -webkit-animation: fadein 1s;
+    /* Safari, Chrome and Opera > 12.1 */
+    -moz-animation: fadein 1s;
+    /* Firefox < 16 */
+    -ms-animation: fadein 1s;
+    /* Internet Explorer */
+    -o-animation: fadein 1s;
+    /* Opera < 12.1 */
+    animation: fadein 1s;
+}
+
+#name-landing {
+    background-color: #fff;
+    color: #343a40;
+    font-weight: bolder;
+    padding-left: 5;
+    padding-right: 5;
+    width: max-content;
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-size: xxx-large;
+    -webkit-animation: fadein 2s;
+    /* Safari, Chrome and Opera > 12.1 */
+    -moz-animation: fadein 2s;
+    /* Firefox < 16 */
+    -ms-animation: fadein 2s;
+    /* Internet Explorer */
+    -o-animation: fadein 2s;
+    /* Opera < 12.1 */
+    animation: fadein 2s;
+}
+
+#me-landing {
+    color: #fff;
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-weight: bold;
+    font-size: xx-large;
+    -webkit-animation: fadein 2s;
+    /* Safari, Chrome and Opera > 12.1 */
+    -moz-animation: fadein 2s;
+    /* Firefox < 16 */
+    -ms-animation: fadein 2s;
+    /* Internet Explorer */
+    -o-animation: fadein 2s;
+    /* Opera < 12.1 */
+    animation: fadein 2s;
+}
+
+.landing-more {
+    height: 20vh;
+    text-align: center;
+    width: max-content;
+    font-family: 'IBM Plex Sans', sans-serif;
+    -webkit-animation: fadein 4s;
+    /* Safari, Chrome and Opera > 12.1 */
+    -moz-animation: fadein 4s;
+    /* Firefox < 16 */
+    -ms-animation: fadein 4s;
+    /* Internet Explorer */
+    -o-animation: fadein 4s;
+    /* Opera < 12.1 */
+    animation: fadein 4s;
+}
+
+.landing-more a {
+    height: max-content;
+    background-color: #fff;
+    padding-left: 5;
+    padding-right: 5;
+    font-weight: normal;
+    color: #343a40;
+}
+
+.landing-more a:hover {
+    text-decoration: none;
+}
+
+.nudge-right {
+    padding-left: 10vw;
+}
+
+#face-backdrop {
+    height: 50vh;
+    float: right;
+    padding-right: 10vw;
+}
+
+@media only screen and (max-width: 993px) {
+    .landing.container {
+        display: none;
+    }
+    .landing-more {
+        display: none;
+    }
+}
 
 .site-info {
     color: rgb(199, 195, 195);
@@ -18,14 +118,13 @@ body {
     background-color: #ebeef1; */
 }
 
-.invert{
+.invert {
     background-color: #343a40;
     color: #fff;
     font-weight: bolder;
     width: max-content;
     padding-left: 5;
     padding-right: 5;
-
 }
 
 .header {
@@ -277,4 +376,57 @@ pre {
     padding: 3px;
 }
 
+}
+
+@keyframes fadein {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* Firefox < 16 */
+
+@-moz-keyframes fadein {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+
+@-webkit-keyframes fadein {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* Internet Explorer */
+
+@-ms-keyframes fadein {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* Opera < 12.1 */
+
+@-o-keyframes fadein {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }