(refactor): add link macro to portfolio template

This commit is contained in:
Triston Armstrong 2024-03-31 16:51:41 -05:00
parent d668eb2d9d
commit d463da8489
2 changed files with 19 additions and 18 deletions

View File

@ -1,10 +1,12 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Portfolio{% endblock %} {% block title %}Portfolio{% endblock %}
{% macro link(link, value) %}
<a href="{{link}}" target="_blank" class="text-indigo-300">{{value}}</a>
{% endmacro %}
{% macro skill(link, label) %} {% macro skill(link, label) %}
<a href="{{link}}" target="_blank" style="text-decoration: none !important"> {% call link(link, label) %}
{{label}}
</a>
{% endmacro %} {% endmacro %}
{% macro job(title, date, description) %} {% macro job(title, date, description) %}
@ -18,9 +20,9 @@
{% macro project(link, label) %} {% macro project(link, label) %}
<div class="flex w-full items-baseline gap-1 my-1"> <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> <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> </div>
{% endmacro %} {% endmacro %}
@ -28,16 +30,15 @@
{% block content %} {% block content %}
<nav> <nav>
<small> <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> </small>
</nav> </nav>
<hr /> <hr />
<h1>Triston Armstrong 🫰</h1> <h1 class="text-indigo-500">Triston Armstrong 🫰</h1>
<p> <p>
Full Stack Software Developer Full Stack Software Developer
<a target="_blank" href="https://ventrahealth.com">@VentraHealth</a> {% call link("https://ventrahealth.com", "@VentraHealth") %}
</p> </p>
<p> <p>
I am a self taught Full Stack Software Developer with an unhealthy addiction 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")%} {% call project("https://github.com/tristonarmstrong/zipapp", "Zip Code Distance App")%}
<footer> <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> <p><small>©2023-2024 Triston Armstrong. All rights reserved.</small></p>
</footer> </footer>
{% endblock %} {% endblock %}

View File

@ -2,7 +2,7 @@
content %} content %}
<nav> <nav>
<small> <small>
<a href="/"><~ back</a> <a href="/" class="text-indigo-300"><~ back</a>
</small> </small>
</nav> </nav>
@ -10,11 +10,11 @@ content %}
<p>Here all my Micro Tuts</p> <p>Here all my Micro Tuts</p>
<div class="list-none gap-1 flex flex-col"> <div class="list-none gap-1 flex flex-col">
{% for tut in tuts_list %} {% 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"> <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> <div>
<h2 class="">{{tut}}</h3> <h2 class="">{{tut.title}}</h3>
<p class="text-white text-opacity-60">Some short description of the tut</p> <p class="text-white text-opacity-60">Some short description of the tut</p>
</div> </div>
</div> </div>