refreshed styling; better overview; projects list and certificates;

index.css

@@ -1,96 +1,176 @@
 body {
-    font-size:14px;
-    font-family:'Merriweather', serif;
+    font-size: 14px;
+    font-family: 'Merriweather', serif;
     line-height: 1.8;
     color: #d9d9d9;
-    background-color:#ffffff;
-  }
+    background-color: #ffffff;
+}
 
 h1 {
     font-size: 35px;
     text-transform: uppercase;
-    color:#b3b3b3;
+    color: #b3b3b3;
     font-weight: 600;
-  }
+}
 
 a {
-    color:#cccccc;
+    color: #cccccc;
     text-decoration: none;
 }
 
-.clear_top{
+.clear_top {
     font-size: 40px;
-    color:#ffffff;
+    color: #ffffff;
 }
 
-.card-img{
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top:20%;
-  max-height:80%;
-  max-width:80%;
-  border-radius: 20%;
-  border-style: 
-}
-.card-img:hover {
-  -webkit-transform: scaleX(-1);
-  transform: scaleX(-1);
+.card-img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 20%;
+    max-height: 80%;
+    max-width: 80%;
+    border-radius: 20%;
+    border-style:
 }
 
-.list-inline-item{
-  size:15px;
-  color:#00004d;
+    .card-img:hover {
+        -webkit-transform: scaleX(-1);
+        transform: scaleX(-1);
+    }
+
+.list-inline-item {
+    size: 15px;
+    color: #00004d;
 }
 
-.skill{
-  height:45px;
+.skill {
+    height: 45px;
 }
 
-.show_first{display:block;}
-.show_hover{display:none;}
-
-.terminal{
-  padding-top: 5px;
-  padding-bottom: 10px;
-  background-color: black;
+.show_first {
+    display: block;
 }
 
-.window-top{
-  color: black;
-  background-color: #b0b7b2;
-  border: 1px solid #353535;
+.show_hover {
+    display: none;
 }
 
-.terminal a, .terminal p{
-  position: relative;
-  color: #00ff00;
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-}
-.terminal .cursor{
-  position: relative;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  background: black;
-  box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  border-left: .5em solid;
-    
-  -webkit-animation: typing 12s steps(20, end) infinite,
-        blinking 1s step-end infinite;
-  animation: typing 12s steps(20, end) infinite,
-        blinking 1s step-end infinite;
+
+.project-folder {
+    background-color: #8cf5f5;
+    color: #1e3332;
+    border: 1px solid grey;
 }
 
-@-webkit-keyframes blinking {
-    from, to { border-color: transparent; }
-    50% { border-color: green; }
+.project-head {
+    padding: 15px;
+    background-color: #548f8f;
 }
 
-@keyframes blinking {
-    from, to { border-color: transparent; }
-    50% { border-color: green; }
+.project a {
+    color: black;
 }
+
+.certifications {
+    background-color: #253ab7;
+    color: #7599c4;
+}
+
+.cert-img {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+.overlay {
+    position: absolute;
+    bottom: 0;
+    background: rgb(0, 0, 0);
+    background: rgba(0, 0, 0, 0.5);
+    color: #f1f1f1;
+    width: 100%;
+    transition: .5s ease;
+    opacity: 0;
+    color: white;
+    font-size: 15px;
+    padding: 15px;
+    text-align: center;
+}
+
+.cert-container {
+    position: relative;
+    width: 50%;
+    max-width: 200px;
+    margin: 5px;
+}
+.cert-container:hover .overlay {
+    opacity: 1;
+}
+
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
+}
+
+/* Modal Content (image) */
+.modal-content {
+    margin: auto;
+    display: block;
+    width: 80%;
+    max-width: 700px;
+}
+/* Add Animation */
+.modal-content, #caption {
+    -webkit-animation-name: zoom;
+    -webkit-animation-duration: 0.6s;
+    animation-name: zoom;
+    animation-duration: 0.6s;
+}
+
+@-webkit-keyframes zoom {
+    from {
+        -webkit-transform: scale(0)
+    }
+
+    to {
+        -webkit-transform: scale(1)
+    }
+}
+
+@keyframes zoom {
+    from {
+        transform: scale(0)
+    }
+
+    to {
+        transform: scale(1)
+    }
+}
+
+/* The Close Button */
+.close {
+    position: absolute;
+    top: 15px;
+    right: 35px;
+    color: #f1f1f1;
+    font-size: 40px;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+    .close:hover,
+    .close:focus {
+        color: #bbb;
+        text-decoration: none;
+        cursor: pointer;
+    }