Merge branch 'develop' into 'master'

Develop

See merge request inkletblot/inkletblot-com-v2!4

src/app/home/home.component.html

@@ -1,56 +1,16 @@
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
-<p>home works!</p>
+<div class="bio">
+    <div class="top">
+        <img class="headshot" src="../../assets/head.jpg" alt="A headshot of Solomon Laing">
+        <div class="text">
+            <h1>Inkletblot
+                <a href="https://www.linkedin.com/in/inkletblot/" target="_blank"><img class="contact-icon" src="../../assets/linkedin.png"></a>
+                <a href="mailto:solomonlaing@pm.me"><img class="contact-icon" src="../../assets/envelope.png"></a>
+            </h1>
+            <p>My name is Solomon Laing. I'm a twenty something year old uni student and IT professional from Adelaide, Australia. I'm passionate about Technology and IT, it as been a hobby of mine for most of my life in one way or another and I predict will be for many years to come. Should you wish to know more, I'm sure you'll be able to find some footprint of me online. Regardless of how hard I try to remove it.</p>
+        </div>
+    </div>
+    <p>This website serves as a personal website for myself. A place for me to put my projects, experiments, important links and the such-like. Projects relate to my publically accessable projects. Be it my linux config files, builds of applications, website, or anything else I decide to add. Links, the most important page to me, is where all of my services sit that I host myself.</p>
+    <p>On of the projects that you will not find listed on the projects page is my server that I operate from my loungeroom. It hosts this website, nextcloud, a mail server and client, many game servers, my gitlab instance, and many local services which I use at home. Part of this is a small Kubernetes cluster consiting of Odroid-MC1s (by Hardkernel) which run the very simple api for this site and the slightly more complicated api for my forum.</p>
+    <p>This site is a simple testement to my passion for technology, it is not supposed to be particularly eye-catching or engaging. I expect that few will ever see it. But if you are one of the few, 'Hello and Welcome'.</p>
+    <div class="attributions">Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> and <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
+</div>

src/app/home/home.component.scss

@@ -7,4 +7,51 @@
     overflow-y: auto;
     padding: 0 20px 0 20px;
     margin: 0 140px 10px 140px;
+}
+
+.bio {
+    text-align: justify;
+
+    .top {
+        display: flex;
+        flex-direction: row;
+
+    
+        .headshot {
+            width: 200px;
+            height: 200px;
+            border: colors.$inklets-color-fg 5px solid;
+            border-radius: 100px;
+        }
+    
+        .text {
+            margin-left: 30px;
+
+            h1 {
+                border-bottom: colors.$inklets-color-fg 2px dashed;
+
+                img {
+                    width: 30px;
+                    height: 30px;
+                    margin-left: 10px;
+                }
+            }
+
+            p{
+                padding-bottom: 0;
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    .attributions {
+        font-size: 8px;
+        > a {
+            text-decoration: none;
+            color: colors.$inklets-color-white;
+        }
+        > a:hover {
+            color: colors.$inklets-color-fg;
+        }
+    }
 }