Added name swap

static/main/js/text_swap.js

@@ -0,0 +1,10 @@
+const DISPLAY_NAME = document.getElementById("swap-text")
+
+DISPLAY_NAME.addEventListener("click", () => {
+    const NAMES = ["Kristofers Solo", "Kristiāns Francis Cagulis"]
+    if (DISPLAY_NAME.innerHTML == NAMES[0]) {
+        DISPLAY_NAME.innerHTML = NAMES[1]
+    } else {
+        DISPLAY_NAME.innerHTML = NAMES[0]
+    }
+})

static/projects/css/projects.css

@@ -81,39 +81,21 @@
     z-index: 2;
 }
 
-/* -- ↓ ↓ ↓ extra card content styles ↓ ↓ ↓ -- */
+.card-content > * {
-
-h1,
-h2,
-h3,
-h4,
-span {
     color: var(--color-fg-default);
-    font-weight: 400;
+    margin: 1rem;
-    margin: 0px;
 }
 
-.card-info-wrapper {
+.card-info-title > h2 {
-    align-items: center;
+    font-weight: 700;
-    display: flex;
+    font-size: 1.5rem;
-    flex-grow: 1;
+    line-height: 2rem;
-    justify-content: flex-start;
-    padding: 0px 20px;
 }
 
-.card-info {
+.card-info-text {
-    align-items: flex-start;
+    margin-top: 1rem;
-    display: flex;
-    gap: 10px;
 }
 
-.card-info-title > h3 {
-    font-size: 1.1em;
-    line-height: 20px;
-}
-
-/* -- ↓ ↓ ↓ some responsiveness ↓ ↓ ↓ -- */
-
 @media (max-width: 1000px) {
     body {
         align-items: flex-start;

templates/main/index.html

@@ -9,6 +9,7 @@
           rel="stylesheet"
           type="text/css">
     <script src="{% static 'main/js/typewriter.js' %}" defer></script>
+    <script src="{% static 'main/js/text_swap.js' %}" defer></script>
 {% endblock %}
 {% block content %}
     <div id="landing">
@@ -18,7 +19,7 @@
                      alt="Hello there.">
             </div>
             <h1 class="text">
-                I&#39;m <span class="highlight">Kristofers Solo</span>
+                I&#39;m <span id="swap-text">Kristofers Solo</span>
             </h1>
             <h1 id="rotating-text" class="text">&nbsp;</h1>
             <!-- ICONS -->

templates/projects/projects.html

@@ -14,48 +14,65 @@
                 <div class="card-content">
                     <div class="card-info-wrapper">
                         <div class="card-info-title">
-                            <h3>KARBS</h3>
+                            <h2>KARBS</h2>
+                        </div>
+                        <div class="card-info-text">
                             <p>Kristofers Auto-Rice Bootstrapping Script (KARBS).</p>
                         </div>
                     </div>
                 </div>
             </a>
-            <a class="card" href="https://github.com/kristoferssolo/SoloVim">
+            <a class="card"
+               href="https://github.com/kristoferssolo/SoloVim"
+               target="_blank">
                 <div class="card-content">
                     <div class="card-info-wrapper">
                         <div class="card-info-title">
-                            <h3>SoloVim</h3>
+                            <h2>SoloVim</h2>
+                        </div>
+                        <div class="card-info-text">
                             <p>This is my attempt for a Neovim IDE.</p>
                         </div>
                     </div>
                 </div>
             </a>
-            <a class="card" href="https://github.com/kristoferssolo/kristofersxyz">
+            <a class="card"
+               href="https://github.com/kristoferssolo/kristofersxyz"
+               target="_blank">
                 <div class="card-content">
                     <div class="card-info-wrapper">
                         <div class="card-info-title">
-                            <h3>kristofersxyz</h3>
+                            <h2>kristofersxyz</h2>
+                        </div>
+                        <div class="card-info-text">
                             <p>This site.</p>
                         </div>
                     </div>
                 </div>
             </a>
             <a class="card"
-               href="https://github.com/kristoferssolo/Traffic-Light-Detector">
+               href="https://github.com/kristoferssolo/Traffic-Light-Detector"
+               target="_blank">
                 <div class="card-content">
                     <div class="card-info-wrapper">
                         <div class="card-info-title">
-                            <h3>Traffic-Light-Detector</h3>
+                            <h2>Traffic-Light-Detector</h2>
+                        </div>
+                        <div class="card-info-text">
                             <p>Traffic Light recognition and color detection.</p>
                         </div>
                     </div>
                 </div>
             </a>
-            <a class="card" href="https://github.com/kristoferssolo/donut-rs">
+            <a class="card"
+               href="https://github.com/kristoferssolo/donut-rs"
+               target="_blank">
                 <div class="card-content">
                     <div class="card-info-wrapper">
                         <div class="card-info-title">
-                            <h3>donut-rs</h3>
+                            <h2>donut-rs</h2>
+                        </div>
+                        <div class="card-info-text">
                             <p>ASCII spinning donut rewrite in Rust.</p>
                         </div>
                     </div>
@@ -65,7 +82,9 @@
                 <div class="card-content">
                     <div class="card-info-wrapper">
                         <div class="card-info-title">
-                            <h3>Surprise me</h3>
+                            <h2>Surprise me</h2>
+                        </div>
+                        <div class="card-info-text">
                             <p>CSS Lightsaber.</p>
                         </div>
                     </div>