Added social links

static/main/css/index.css

@@ -1,3 +1,10 @@
+:root {
+    --clr-purple: hsl(251, 91%, 63%);
+    --clr-blue: hsl(201, 85%, 55%);
+    --clr-dark-blue: hsl(201, 100%, 35%);
+    --clr-black: hsl(248, 16%, 10%);
+}
+
 #landing {
     display: flex;
     height: 100%;
@@ -22,3 +29,61 @@ img {
     font-weight: 700;
     text-align: center;
 }
+
+.landing-icons {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    width: 20%;
+    margin: 3rem auto 0 auto;
+}
+
+.social-link {
+    text-decoration: none;
+}
+
+.social-link > i {
+    display: grid;
+    place-items: center;
+    color: var(--clr-secondary);
+    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23EEF5FCFF' stroke-width='4' stroke-dasharray='24' stroke-dashoffset='8' stroke-linecap='square'/%3e%3c/svg%3e");
+    border-radius: 100px;
+    margin: auto 0.5rem 1rem 0.5rem;
+    font-size: 2rem;
+    width: 3rem;
+    aspect-ratio: 1;
+}
+
+.social-link:hover > i {
+    background-color: var(--clr-secondary);
+}
+
+.email:hover > i {
+    color: var(--clr-purple);
+    border: 2px solid var(--clr-purple);
+    background-image: none;
+}
+.telegram:hover > i {
+    color: var(--clr-blue);
+    border: 2px solid var(--clr-blue);
+    background-image: none;
+}
+.linkedin:hover > i {
+    color: var(--clr-dark-blue);
+    border: 2px solid var(--clr-dark-blue);
+    background-image: none;
+}
+.github:hover > i {
+    color: var(--clr-black);
+    border: 2px solid var(--clr-black);
+    background-image: none;
+}
+
+.social-link .label {
+    display: none;
+    color: var(--clr-secondary);
+}
+
+.social-link:hover .label {
+    display: block;
+}

static/main/css/layout.css

@@ -1,4 +1,5 @@
 :root {
+    font-size: 16px;
     --clr-primary: hsl(216, 28%, 7%);
     --clr-primary-100: hsla(215, 21%, 11%, 0.9);
     --clr-primary-200: hsla(215, 21%, 11%, 0.5);
@@ -68,6 +69,7 @@ body {
 
 .mobile-nav-toggle {
     display: none;
+    cursor: pointer;
 }
 
 .primary-navigation {

static/main/js/navigation.js

@@ -1,13 +1,13 @@
 const PRIMARY_NAV = document.querySelector(".primary-navigation")
-const NAV_TOGGLE = document.querySelector(".mobile-nav-toggle")
+const EMAIL = document.querySelector(".mobile-nav-toggle")
 
-NAV_TOGGLE.addEventListener("click", () => {
+EMAIL.addEventListener("click", () => {
-    const visibility = PRIMARY_NAV.getAttribute("data-visible") === "false"
+    const VISIBILITY = PRIMARY_NAV.getAttribute("data-visible") === "false"
-    if (visibility) {
+    if (VISIBILITY) {
         PRIMARY_NAV.setAttribute("data-visible", true)
-        NAV_TOGGLE.setAttribute("aria-expanded", true)
+        EMAIL.setAttribute("aria-expanded", true)
     } else {
         PRIMARY_NAV.setAttribute("data-visible", false)
-        NAV_TOGGLE.setAttribute("aria-expanded", false)
+        EMAIL.setAttribute("aria-expanded", false)
     }
 })

static/main/js/typewriter.js

@@ -34,6 +34,7 @@ typewriter = () => {
             if (i === PHRASES.length) {
                 i = 0
             }
+            TEXT_DISPLAY.innerHTML = " " // prevent element movement
         }
     }
     const TYPING_SPEED = Math.random() * 300

templates/main/index.html

@@ -5,6 +5,9 @@
     <link rel="stylesheet"
           type="text/css"
           href="{% static 'main/css/index.css' %}"/>
+    <link href="{% static 'fontawesomefree/css/all.min.css' %}"
+          rel="stylesheet"
+          type="text/css">
     <script src="{% static 'main/js/typewriter.js' %}" defer></script>
 {% endblock %}
 {% block content %}
@@ -17,7 +20,34 @@
             <h1 class="text">
                 I&#39;m <span class="highlight">Kristofers Solo</span>
             </h1>
-            <h1 id="text" class="text"></h1>
+            <h1 id="text" class="text">&nbsp;</h1>
+            <!-- ICONS -->
+            <div class="landing-icons">
+                <a class="social-link email"
+                   target="_blank"
+                   href="mailto:kristians.cagulis@pm.me">
+                    <i class="fa-sharp fa-solid fa-envelope"></i>
+                    <span class="label">E-Mail</span>
+                </a>
+                <a class="social-link telegram"
+                   target="_blank"
+                   href="https://telegram.me/kristofers_solo">
+                    <i class="fa-sharp fa-solid fa-paper-plane"></i>
+                    <span class="label">Telegram</span>
+                </a>
+                <a class="social-link linkedin"
+                   target="_blank"
+                   href="https://www.linkedin.com/in/kristians-francis-cagulis">
+                    <i class="fa-brands fa-linkedin-in"></i>
+                    <span class="label">LinkedIn</span>
+                </a>
+                <a class="social-link github"
+                   target="_blank"
+                   href="https://github.com/kristoferssolo">
+                    <i class="fa-brands fa-github "></i>
+                    <span class="label">GitHub</span>
+                </a>
+            </div>
         </div>
     </div>
 {% endblock %}