icons + style update

index.html

@@ -10,6 +10,7 @@
       href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap"
       rel="stylesheet"
     />
+    <script src="https://use.fontawesome.com/e427b1b41a.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css" />
     <title>Tyler Koenig</title>
   </head>
@@ -27,11 +28,11 @@
       <h1>
         <a href="index.html">Tyler Koenig</a>
       </h1>
-      <h2 class="intro">
+      <h3>
         Warehouse Associate at Amazon
         <p>Student at We Can Code IT</p>
         <p>Web Developer in the making!</p>
-      </h2>
+      </h3>
     </header>
     <main>
       <section id="aboutMe">
@@ -43,8 +44,11 @@
           </p>
           <h4>skills</h4>
           <ul>
-            <li>problem solver</li>
-            <li>microsoft office</li>
+            <li>problem solving</li>
+            <li>attention to detail</li>
+            <li>flexibility</li>
+            <li>time management</li>
+            <li>creativity</li>
           </ul>
         </div>
         <div id="contact">
@@ -55,16 +59,20 @@
                 href="https://github.com/lerko96"
                 target="_blank"
                 title="github"
-                >github</a
               >
+                github</a
+              >
+              <i class="fa fa-github fa-lg" aria-hidden="true"></i>
             </li>
             <li>
               <a
                 href="https://www.linkedin.com/in/tyler-koenig-72607a18b/"
                 target="_blank"
                 title="LinkedIn"
-                >linkedin</a
               >
+                linkedin</a
+              >
+              <i class="fa fa-linkedin-square fa-lg" aria-hidden="true"></i>
             </li>
             <li>
               <a
@@ -73,6 +81,7 @@
                 title="email"
                 >email</a
               >
+              <i class="fa fa-envelope-o fa-lg" aria-hidden="true"></i>
             </li>
           </ul>
         </div>
@@ -93,10 +102,11 @@
             <img src="/images/amok.png" alt="virtual-pet-amok-console" />
             <ul class="project-skills">
               <h4>skills</h4>
-              <li>Interface</li>
-              <li>Abstract Classes</li>
-              <li>Encapsulation</li>
               <li>TDD</li>
+              <li>polymorphism</li>
+              <li>encapsulation</li>
+              <li>interface (implements)</li>
+              <li>abstract class (extends)</li>
             </ul>
           </article>
           <article class="project-item">
@@ -112,10 +122,12 @@
             </div>
             <img src="/images/shelter.png" alt="virtual-pet-shelter-console" />
             <ul class="project-skills">
-              <h4>Skills</h4>
-              <li>abstract</li>
-              <li>encaps</li>
-              <li>tdd</li>
+              <h4>skills</h4>
+              <li>TDD</li>
+              <li>constructor() {...}</li>
+              <li>getter() {...}</li>
+              <li>map<> = hashmap<>()></li>
+              <li>collections<></li>
             </ul>
           </article>
           <article class="project-item">
@@ -131,7 +143,7 @@
             </div>
             <img src="/images/pet.png" alt="virtual-pet-console" />
             <ul class="project-skills">
-              <h4>Skills</h4>
+              <h4>skills</h4>
               <li>game loop</li>
               <li>user input</li>
               <li>classes</li>

style.css

@@ -1,9 +1,16 @@
 body {
-  margin: 0;
+  /* box-sizing: border-box; */
   color: #c9cacc;
   background-color: #1b1b1b;
-  font-size: 1.1rem;
+  font-size: 15px;
   font-family: "Source Code Pro", monospace;
+  font-weight: 400;
+  line-height: 1.725;
+  text-rendering: geometricPrecision;
+  min-height: 100%;
+  display: block;
+  flex-direction: column;
+  margin: 0;
 }
 
 #links ul {
@@ -33,14 +40,21 @@ body {
 }
 
 header {
-  background-color: #767f90;
-  color: #1b1b1b;
+  background-color: #1b1b1b;
+  color: #c9cacc;
   margin: 0 auto;
   text-align: center;
   padding: 2rem;
   line-height: 0.75rem;
-  border-top: 2px solid #ffffff;
-  border-bottom: 2px solid #ffffff;
+  border-top: 1.5px solid #c9cacc;
+  border-bottom: 1.5px solid #c9cacc;
+}
+
+header img {
+  width: 150px;
+  border: 5px solid #f4f1de;
+  border: 5px solid grey;
+  border-radius: 165px;
 }
 
 h1 {
@@ -49,7 +63,7 @@ h1 {
 }
 
 h1 a {
-  color: #3d405b;
+  color: #c9cacc;
   text-decoration: none;
 }
 
@@ -64,25 +78,26 @@ h2,
 h3,
 h4 {
   letter-spacing: 0.1em;
-}
-
-header img {
-  width: 165px;
-  border: 5px solid #f4f1de;
-  border: 5px solid grey;
-  border-radius: 165px;
+  font-weight: 800;
 }
 
 /* h2 {
   font-size: 1.3rem;
 } */
 
+main {
+  width: 700px;
+  margin: 0 auto;
+}
+
 #aboutMe {
   display: flex;
   border: 2px solid black;
-  width: 70%;
+  /* width: 70%; */
   padding: 1.5rem;
   margin: 0 auto;
+  text-align: center;
+  justify-content: center;
 }
 
 @media (max-width: 620px) {
@@ -99,12 +114,15 @@ header img {
   }
 }
 #bio {
-  width: 66%;
+  width: 400px;
   margin: 0 auto;
   padding: 1.5rem;
+  text-align: start;
 }
 
 #contact {
+  border: 1px solid red;
+  width: fit-content;
   text-align: end;
   margin: 0 auto;
   padding: 1.5rem;
@@ -113,6 +131,7 @@ header img {
 .contactLinks li {
   list-style: none;
   line-height: 2rem;
+  letter-spacing: 0.15rem;
 }
 
 .contactLinks a {
@@ -128,7 +147,7 @@ header img {
 
 #projects {
   display: block;
-  width: 70%;
+  /* width: 70%; */
   border: 2px solid red;
   padding: 1.5rem;
   margin: 0 auto;
@@ -163,7 +182,8 @@ header img {
 }
 
 .project-item img {
-  width: 45%;
+  max-height: 200px;
+  /* width: 45%; */
   border: 2px solid red;
   margin: 0 auto;
 }
@@ -181,13 +201,16 @@ header img {
 }
 
 #projects h4 {
+  font-weight: 400;
 }
 
 .project-skills {
+  color: #666;
+  border: 1px solid red;
   list-style: none;
-  width: 25%;
+  width: 33%;
   margin: 0 auto;
   text-align: end;
   float: left;
-  line-height: 1.2rem;
+  line-height: 1.15rem;
 }