Update project header section of README

README.md

@@ -1,9 +1,26 @@
-# [johng.io](https://johng.io) [Web]
-![](https://img.shields.io/badge/type-HTML-orange.svg "Project type")
-![](https://img.shields.io/github/repo-size/jerboa88/jerboa88.github.io.svg "Repository size")
-[![](https://img.shields.io/github/license/jerboa88/jerboa88.github.io.svg "Project license")](LICENSE)
+<!-- Project Header -->
+<div align="center"> 
+  <img class="projectLogo" src="icon.png" alt="Project logo" title="Project logo" width="256">
 
-My personal/portfolio site. Made by hand using the Jekyll static site generator and the Liquid template language for modularization, as well as vanilla HTML and CSS
+  <h1 class="projectName">
+    <a href="https://johng.io">johng.io</a>
+  </h1>
+
+  <p class="projectBadges">
+    <img src="https://img.shields.io/badge/type-Website-ff5722.svg" alt="Project type" title="Project type">
+    <img src="https://img.shields.io/github/languages/top/jerboa88/jerboa88.github.io.svg" alt="Language" title="Language">
+    <img src="https://img.shields.io/github/repo-size/jerboa88/jerboa88.github.io.svg" alt="Repository size" title="Repository size">
+    <a href="LICENSE">
+      <img src="https://img.shields.io/github/license/jerboa88/jerboa88.github.io.svg" alt="Project license" title="Project license"/>
+    </a>
+  </p>
+
+  <p class="projectDesc">
+    My personal/portfolio site. Made by hand using the Jekyll static site generator and the Liquid template language for modularization, as well as vanilla HTML and CSS
+  </p>
+
+  <br/>
+</div>
 
 
 ## License