(refactor): add link macro to portfolio template

templates/portfolio.html

@@ -1,10 +1,12 @@
 {% extends "base.html" %}
 {% block title %}Portfolio{% endblock %}
 
+{% macro link(link, value) %}
+  <a href="{{link}}" target="_blank" class="text-indigo-300">{{value}}</a>
+{% endmacro %}
+
 {% macro skill(link, label) %}
-<a href="{{link}}" target="_blank" style="text-decoration: none !important">
+  {% call link(link, label) %}
-  {{label}}
-</a>
 {% endmacro %}
 
 {% macro job(title, date, description) %}
@@ -18,9 +20,9 @@
 
 {% macro project(link, label) %}
 <div class="flex w-full items-baseline gap-1 my-1">
-  <a href="{{link}}" target="_blank">{{label}}</a>
+  {% call link(link, label) %}
   <div class="flex-1 border border-dashed h-0 border-white border-opacity-20"></div>
-  <a href="{{link}}" target="_blank">&#10238;</a>
+  {% call link(link, "👉") %}
 </div>
 {% endmacro %}
 
@@ -28,16 +30,15 @@
 {% block content %}
 <nav>
   <small>
-    <a href="/tuts">Micro Tuts</a> / <a href="/notes">Notes</a> /
+   {% call link("/tuts", "Micro Tuts") %} / {% call link("/notes", "Notes") %} / {% call link("https://tristonarmstrong.com/social", "Social") %}
-    <a href="https://tristonarmstrong.com/social" target="_blank">Social</a>
   </small>
 </nav>
 <hr />
 
-<h1>Triston Armstrong 🫰</h1>
+<h1 class="text-indigo-500">Triston Armstrong 🫰</h1>
 <p>
   Full Stack Software Developer
-  <a target="_blank" href="https://ventrahealth.com">@VentraHealth</a>
+  {% call link("https://ventrahealth.com", "@VentraHealth") %}
 </p>
 <p>
   I am a self taught Full Stack Software Developer with an unhealthy addiction
@@ -72,15 +73,15 @@
 {% call project("https://github.com/tristonarmstrong/zipapp", "Zip Code Distance App")%}
 
 <footer>
-  <a href="https://github.com/tristonarmstrong">Github</a>
+  {% call link("https://github.com/tristonarmstrong", "Github") %}
   |
-  <a href="https://www.linkedin.com/in/triston95strong/">LinkedIn</a>
+  {% call link("https://www.linkedin.com/in/triston95strong/", "LinkedIn") %}
   |
-  <a href="https://gitlab.com/Tarmstrong95">GitLab</a>
+  {% call link("https://gitlab.com/Tarmstrong95", "GitLab") %}
   |
-  <a href="https://twitter.com/triston_armstr">Twitter</a>
+  {% call link("https://twitter.com/triston_armstr", "Twitter") %}
   |
-  <a href="https://fosstodon.org/@TristonArmstrong">Fosstodon</a>
+  {% call link("https://fosstodon.org/@TristonArmstrong", "Fosstodon") %}
   <p><small>©2023-2024 Triston Armstrong. All rights reserved.</small></p>
 </footer>
 {% endblock %}

templates/tuts.html

@@ -2,7 +2,7 @@
 content %}
 <nav>
     <small>
-        <a href="/"><~ back</a>
+        <a href="/" class="text-indigo-300"><~ back</a>
     </small>
 </nav>
 
@@ -10,11 +10,11 @@ content %}
 <p>Here all my Micro Tuts</p>
 <div class="list-none gap-1 flex flex-col">
     {% for tut in tuts_list %}
-    <a href="tuts/{{tut}}" class="hover:no-underline" >
+    <a href="tuts/{{tut.file_path}}" class="hover:no-underline" >
       <div class="no-underline border-0 py-4 px-3 flex flex-row gap-3 border-b border-white border-dashed border-opacity-20 hover:bg-white hover:bg-opacity-10  hover:rounded-xl">
-        <img src="https://thispersondoesnotexist.com" width="100" height="100"/>
+        <div class="w-[6px] min-h-full bg-indigo-500 border rounded-xl"></div> 
         <div>
-          <h2 class="">{{tut}}</h3>
+          <h2 class="">{{tut.title}}</h3>
           <p class="text-white text-opacity-60">Some short description of the tut</p>
         </div>
       </div>