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;
+}

src/app/home/home.component.html

@@ -0,0 +1,40 @@
+<div #me class="me-section">
+    <div class="intro container">
+        <h1>
+            I'M VITOR HIDEYOSHI
+        </h1>
+        <p>
+            I'm a software engineer with a passion for web development
+            and a strong interest in data science. I spend most of my time
+            learning new technologies and improving my skills, searching for
+            new challenges and opportunities to grow as a professional.
+
+            <br>
+
+            In this search for new challenges I gained experience in different
+            areas of software development, from web development to data science.
+            I'm always looking for new opportunities to learn and improve my skills.
+        </p>
+    </div>
+
+    <div class="scroll-btn-container">
+        <a class="scroll-btn" (click)="scrollToElement(stack)">
+            <span></span>
+            <span></span>
+            <span></span>
+        </a>
+    </div>
+</div>
+
+
+<div #stack class="stack-section">
+    <div class="stack container">
+        <h2>
+            My Stack
+        </h2>
+        <p>
+            I'm always looking for new technologies to learn and improve my skills.
+            Here are some of the technologies I've been working with recently:
+        </p>
+    </div>
+</div>

src/app/home/home.component.ts

@@ -7,4 +7,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent {
     constructor() {}
+
+    scrollToElement(element: HTMLElement): void {
+        element.scrollIntoView({
+            behavior: "smooth",
+            block: "start",
+            inline: "nearest"
+        });
+    }
 }