adding a bit at a time.. using border to see the boxes.. only has a h…

…orizontal scroll because of the outline

index.css

@@ -1,12 +1,18 @@
 * {
     border: 1px solid red;
+    margin: 0;
+    padding: 0;
 }
 
 body {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: 50px 1fr 50px;
-    grid-gap: 1rem;
+    grid-template-areas:
+        "header"
+        "main"
+        "footer";
+    width: 100vw;
 }
 
 nav {
@@ -15,6 +21,38 @@ nav {
     align-items: center;
 }
 
+main {
+    grid-area: main;
+}
+
+#intro {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 100vw;
+}
+
+#profilePic {
+    width: 300px;
+    height: 300px;
+}
+
+#socials {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.icon {
+    width: 30px;
+    height: 30px;
+}
+
+#matrixImage {
+    width: 300px;
+    height: 300px;
+}
+
 footer {
     display: flex;
     justify-content: center;

index.html

@@ -15,8 +15,28 @@
         </nav>
     </header>
     <main>
-        <h1>Jesus Tello</h1> <img src="https://avatars.githubusercontent.com/u/22569672?s=400&u=4959806090e507fbb811869e5b8785eb015f6e66&v=4" alt="a picture of me"
-        <p>I am a single father that finds coding fun and exciting. This page is hosted on GitHub and is used to showcase my projects</p>
+    <section id="intro">
+        <img id="profilePic" src="https://avatars.githubusercontent.com/u/22569672?s=400&u=4959806090e507fbb811869e5b8785eb015f6e66&v=4" alt="a picture of me" />
+        <div>
+            <h1>GitHub Page</h1>
+            <h2>Full Stack Web Developer</h2>
+            <p>This page is hosted on GitHub and is used to showcase my projects</p>
+            <div id="socials">
+                <a href="https://www.linkedin.com/">Jesustellor@gmail.com</a>
+                <a href="https://github.com/"><img class="icon" src="https://github.com/fluidicon.png" alt="GitHub" /></a>
+                <a href="https://twitter.com/"><img class="icon" src="https://github.com/fluidicon.png" alt="Twitter" /></a>
+                <a href="https://www.linkedin.com/"><img class="icon" src="https://github.com/fluidicon.png" alt="LinkedIn" /></a>
+            </div>
+        </div>
+        <img id="matrixImage" src="/images/matrixImage.png" alt="a matrix" />
+    </section>
+    <section id="about">
+        <div id="projects">
+            <h2>Projects</h2>
+            <img class="projectImage" src="/images/Project1.png" alt="Project 1" />
+            <p>Take a peek at my projects.. </p>
+        </div>
+    </section>
     </main>
     <footer>
         <p>Copyright &copy; 2020</p>