Initial Implementation of the Home Page

src/app/home/home.component.css

@@ -0,0 +1,113 @@
+.me-section {
+    background: rgb(46,46,46);
+    background: linear-gradient(180deg, rgba(46,46,46,1) 35%, rgba(51,51,51,1) 100%);
+    height: 90vh;
+}
+
+.intro {
+    height: 60%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.intro h1 {
+    font-weight: 600;
+    font-size: 2.5rem;
+    color: #ffffff;
+}
+
+.intro p {
+    font-family: "Poppins", sans-serif;
+
+    font-size: 1rem;
+    font-weight: 100;
+    color: #f1f1f1;
+}
+
+.intro br {
+    display: block;
+    margin: 10px 0;
+    content: " ";
+}
+
+
+/* SCROLL BUTTON*/
+.scroll-btn-container {
+    display: flex;
+}
+
+.scroll-btn span {
+    position: relative;
+    display: block;
+    content: "";
+
+    width: 24px;
+    height: 24px;
+
+    border-left: 1px solid #fff;
+    border-bottom: 1px solid #fff;
+
+    cursor: pointer;
+
+    transform-style: preserve-3d;
+
+    -webkit-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+    -webkit-animation: scbt 2s infinite;
+    animation: scbt 2s infinite;
+}
+.scroll-btn span:nth-of-type(1) {
+    -webkit-animation-delay: 0s;
+    animation-delay: 0s;
+}
+.scroll-btn span:nth-of-type(2) {
+    -webkit-animation-delay: .15s;
+    animation-delay: .15s;
+}
+.scroll-btn span:nth-of-type(3) {
+    -webkit-animation-delay: .3s;
+    animation-delay: .3s;
+}
+@-webkit-keyframes scbt {
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+@keyframes scbt {
+    0% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+
+
+/* STACK SECTION*/
+.stack-section {
+    background-color: #f1f1f1;
+    height: 90vh;
+}
+.stack {
+    height: 60%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.stack p {
+    font-family: "Poppins", sans-serif;
+
+    font-size: 1rem;
+    font-weight: 100;
+}