Add macros for chip, add tasks for creating job and skill

assets/views/website/about.html

@@ -1,4 +1,5 @@
-{% extends "website/base.html" %} {% block content %}
+{% import "website/macros/chip.html" as chip %} {% extends "website/base.html"
+%} {% block content %}
 <span class="m-8">🌟</span>
 <div
   class="flex flex-col items-center justify-center gap-2 p-4 bg-white rounded-lg"
@@ -26,56 +27,18 @@
 <div
   class="flex flex-wrap items-center justify-center gap-4 m-4 md:m-0 md:w-1/2"
 >
-  <p
-    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
-  >
-    Programming 💻
-  </p>
-  <p
-    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
-  >
-    Filmmaking 🎥
-  </p>
-  <p
-    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
-  >
-    Gaming 🕹️
-  </p>
-  <p
-    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
-  >
-    Playing guitar 🎸
-  </p>
+  {{ chip::chip(text="Programming 💻")}} {{ chip::chip(text="Filmmaking 🎥")}}
+  {{ chip::chip(text="Gaming 🕹️")}} {{ chip::chip(text="Playing guitar 🎸")}}
 </div>
 <h1 class="mt-6 text-3xl font-bold">Interests 🌌📚</h1>
 <div
   class="flex flex-wrap items-center justify-center gap-4 m-4 md:m-0 md:w-1/2"
 >
-  <p
-    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
-  >
-    Computer Science 💾
-  </p>
-  <p
-    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
-  >
-    Sci-Fi Books 📚
-  </p>
-  <p
-    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
-  >
-    Astronomy 🔭
-  </p>
-  <p
-    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
-  >
-    Sports 🏅
-  </p>
-  <p
-    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
-  >
-    History 🏰
-  </p>
+  {{ chip::chip(text="Computer Science 💾")}}
+  {{ chip::chip(text="Sci-Fi Books📚")}}
+  {{ chip::chip(text="Astronomy 🔭")}}
+  {{ chip::chip(text="Sports 🏅") }}
+  {{ chip::chip(text="History 🏰")}}
 </div>
 <h1 class="mt-6 text-3xl font-bold">FAQ ❓</h1>
 <div class="flex flex-col gap-2 m-4">

assets/views/website/components/job.html

@@ -1,10 +0,0 @@
-<div class="flex flex-col gap-2 p-4 text-black bg-gray-100 rounded-lg">
-  <h4 class="text-2xl">
-    <span class="fas fa-user-circle"></span> {{ job.position }}
-  </h4>
-  <h5 class="text-xl font-light">
-    <span class="fas fa-building"></span> {{ job.company }}
-  </h5>
-  <p class="font-bold"><span class="fas fa-microchip"></span> Technologies</p>
-  <div class="flex flex-wrap gap-2"></div>
-</div>

assets/views/website/index.html

@@ -1,4 +1,5 @@
-{% extends "website/base.html" %} {% block content %}
+{% import "website/macros/chip.html" as chip %} {% extends "website/base.html"
+%} {% block content %}
 <div class="w-full mt-8"></div>
 <h3 class="mt-4 mb-2 text-5xl font-bold tracking-tight">Who am I? 🤔</h3>
 <section
@@ -11,17 +12,11 @@
   💾.
 </section>
 <h3 class="mt-4 mb-2 text-5xl font-bold tracking-tight">Skills 🛠️</h3>
-{% for skill in skills %}
-<p
-  class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
->
-  {{ skill.name }}
-</p>
-{%endfor%}
+{% for skill in skills %} {{ chip::chip(text=skill.name) }} {%endfor%}
 <section class="flex flex-wrap justify-center w-1/2 gap-4"></section>
 <h3 class="mt-4 mb-2 text-5xl font-bold tracking-tight">Experience 📈</h3>
 {% for job in jobs %}
-<div class="bg-gray-100 rounded-lg p-4 text-black flex flex-col gap-2">
+<div class="flex flex-col gap-2 p-4 text-black bg-gray-100 rounded-lg">
   <h4 class="text-2xl">
     <span class="fas fa-user-circle"></span> {{ job.position }}
   </h4>
@@ -40,13 +35,8 @@
   </h6>
   {% endif %}
   <p class="font-bold"><span class="fas fa-microchip"></span> Technologies</p>
-  {% for technology in job.technologies %}
-  <p
-    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
-  >
-    {{ technology }}
-  </p>
-  {% endfor %}
+  {% for technology in job.technologies %} {{ chip::chip(text=technology.name)
+  }} {% endfor %}
 </div>
 {%endfor%}
 <section class="flex flex-col flex-wrap justify-center gap-4 m-4"></section>

assets/views/website/macros/chip.html

@@ -0,0 +1,7 @@
+{% macro chip(text) %}
+<p
+  class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
+>
+  {{ text }}
+</p>
+{% endmacro chip %}

assets/views/website/projects.html

@@ -0,0 +1,6 @@
+{% extends "website/base.html" %} {% block content %}
+<span class="m-8"></span>
+<div class="flex flex-col w-full gap-4 m-4">
+  <h1 class="text-5xl font-bold text-center">My projects</h1>
+</div>
+{% endblock content %}