update: add custom theme color selection

- add theme data file
- update skills render
- update project icons
- add skill set custom color option
- refactor

src/_data/skills.yaml

@@ -1,4 +1,5 @@
 - category: Back End
+  color: indigo
   icon: bxs-cube
   items:
     - name: Python

src/_data/theme.yaml

@@ -0,0 +1,3 @@
+color:
+  primary: purple
+  ascents: violet

src/_includes/blocks/contact.njk

@@ -2,20 +2,20 @@
   <h2 class="font-semibold text-xl mb-5">Contact</h2>
   <div class="flex flex-col space-y-2">
     <a href="mailto:{{ information.email }}"
-       class="flex items-center text-green-600 hover:text-green-700 transition-all space-x-2">
+       class="flex items-center text-{{ theme.color.primary }}-600 hover:text-{{ theme.color.primary }}-700 transition-all space-x-2">
       <i class="bx bx-envelope text-xl"></i>
       <span>{{ information.email }}</span>
     </a>
     <a href="tel:{{ information.phone }}"
-       class="flex items-center text-green-600 hover:text-green-700 transition-all space-x-2 tracking-wide align-middle">
+       class="flex items-center text-{{ theme.color.primary }}-600 hover:text-{{ theme.color.primary }}-700 transition-all space-x-2 tracking-wide align-middle">
       <i class="bx bx-phone text-xl"></i>
       <span>{{ information.phone }}</span>
     </a>
   </div>
   <ul class="flex space-x-2 mt-4">
     {% for social in information.socials %}
       <li>
-        <a href="{{ social.url | url }}" class="hover:text-green-700 transition-all p-1"
+        <a href="{{ social.url | url }}" class="hover:text-{{ theme.color.primary }}-700 transition-all p-1"
            target="_blank">
           <i class="bx {{ social.icon }} text-2xl"></i>
         </a>

src/_includes/blocks/user.njk

@@ -1,5 +1,5 @@
 <section class="shadow rounded-xl overflow-hidden">
-  <div class="h-36 bg-gradient-to-br from-gray-600 to-green-800">
+  <div class="h-36 bg-gradient-to-br from-{{ theme.color.ascents }}-600 to-{{ theme.color.primary }}-800">
   </div>
   <div class="pt-14 p-7 bg-white relative">
     <span class="absolute top-4 right-7 text-white uppercase text-xs font-semibold rounded-full px-3 py-1 bg-gray-500
@@ -8,13 +8,14 @@
     </span>
     <a href="{{ "/" | url }}">
       <img src="{{ ("/assets/images/" + information.picture) | url }}" alt="{{ information.name }}"
-           class="absolute -top-28 w-40 h-40 border-2 rounded-xl bg-gradient-to-br from-green-100 to-lime-100">
+           class="absolute -top-28 w-40 h-40 border-2 rounded-xl bg-gradient-to-br
+           from-{{ theme.color.primary }}-100 to-{{ theme.color.ascents }}-100">
     </a>
     <div class="text-2xl font-semibold mb-1.5">{{ information.name }}</div>
     <div class="text-md text-gray-500 mb-7">{{ information.title }}</div>
-    <button class="flex justify-between items-center bg-green-600 hover:bg-green-700 w-full h-14 text-white rounded-xl transition-all group">
+    <button class="flex justify-between items-center bg-{{ theme.color.primary }}-600 hover:bg-{{ theme.color.primary }}-700 w-full h-14 text-white rounded-xl transition-all group">
       <span class="px-5 font-semibold">Download CV</span>
-      <span class="flex bg-green-700 rounded-r-xl h-full items-center">
+      <span class="flex bg-{{ theme.color.primary }}-700 rounded-r-xl h-full items-center">
         <i class="bx bx-download text-2xl px-5 py-3 group-hover:animate-[tada_2s_ease-in-out_1]"></i>
       </span>
     </button>

src/_includes/components/nav.njk

@@ -6,9 +6,9 @@
         <a href="{{ nav.url | url }}"
            class="sm:border-b-2 inline-flex pb-5
                 {% if nav.url == page.url %}
-                  text-green-700 border-green-600 font-semibold sm:font-normal
+                  text-{{ theme.color.primary }}-700 border-{{ theme.color.primary }}-600 font-semibold sm:font-normal
                 {% else %}
-                  hover:text-green-700 hover:border-green-600 border-transparent
+                  hover:text-{{ theme.color.primary }}-700 hover:border-{{ theme.color.primary }}-600 border-transparent
                 {% endif %}
                   transition-all"
         >{{ nav.title }}</a>

src/_includes/components/skills.njk

@@ -1,4 +1,4 @@
-{% macro render(skills, tags) %}
+{% macro render(skills, tags, defaultColor) %}
   <div class="-m-2 flex flex-wrap">
     {% for skill in skills %}
       {% if tags %}
@@ -9,7 +9,7 @@
           {% endif %}
         {% endfor %}
       {% endif %}
-      <span class="bg-{{ color or "green" }}-100 text-{{ color or "green" }}-700 cursor-default rounded-lg m-1 px-2 py-1 flex align-middle space-x-1">
+      <span class="bg-{{ color or defaultColor }}-100 text-{{ color or defaultColor }}-700 cursor-default rounded-lg m-1 px-2 py-1 flex align-middle space-x-1">
         {% if skill.icon %}
           <i class="bx {{ skill.icon }} text-lg before:align-text-top"></i>
         {% endif %}

src/_layouts/post.njk

@@ -6,21 +6,21 @@ type: blog
   {% set link = collections.all | eleventyNavigation | where("key", "blog") %}
   <a href="{{ link.url | url }}"
      class=" absolute flex justify-center items-center p-3 left-8 top-6 rounded-full bg-white/70 hover:bg-white/100 transition group">
-    <i class="bx bx-arrow-back text-2xl sm:text-3xl text-gray-600 group-hover:text-green-700"></i>
+    <i class="bx bx-arrow-back text-2xl sm:text-3xl text-gray-600 group-hover:text-{{ theme.color.primary }}-700"></i>
   </a>
   <div class="absolute bg-white/60 right-0 top-96 -translate-y-8 h-8 rounded-tl-xl text-gray-600 px-3 p-1 inline-flex space-x-1 items-center text-sm cursor-default hover:bg-white/90 hover:text-gray-700 transition group">
     <span>Photo by</span>
     <a href="{{ post.data.image.author.url | url }}"
-       class="text-gray-800 group-hover:text-green-700">
+       class="text-gray-800 group-hover:text-{{ theme.color.primary }}-700">
       {{ post.data.image.author.name }}
     </a>
     <span>on</span>
     <a href="{{ post.data.image.source.url | url }}"
-       class="text-gray-800 group-hover:text-green-700">
+       class="text-gray-800 group-hover:text-{{ theme.color.primary }}-700">
       {{ post.data.image.source.name }}
     </a>
   </div>
-  <div class="flex items-center max-h-96 rounded-t-xl overflow-hidden bg-gradient-to-br from-lime-100 to-green-300">
+  <div class="flex items-center max-h-96 rounded-t-xl overflow-hidden bg-gradient-to-br from-lime-100 to-{{ theme.color.primary }}-300">
     <img src="{{ ( "/assets/images/blog/" + post.data.image.filename ) | url }}"
          class="w-full h-full object-cover object-center">
   </div>

src/education.njk

@@ -52,16 +52,18 @@ eleventyNavigation:
               <li>
                 {{ note.body }}
                 {% if note.link %}
-                  <a href="{{ note.link.url | url }}" class="whitespace-nowrap text-green-700">[{{ note.link.text }}
-                    ]</a>
+                  <a href="{{ note.link.url | url }}"
+                     class="whitespace-nowrap text-{{ theme.color.primary }}-600 hover:text-{{ theme.color.primary }}-700">
+                    [{{ note.link.text }}]
+                  </a>
                 {% endif %}
               </li>
             {% endfor %}
           </ol>
         </div>
         <div>
-          {% from "components/skills.njk" import render %}
-          {{ render(education.skills) }}
+          {% import "components/skills.njk" as skills %}
+          {{ skills.render(education.skills, defaultColor = theme.color.primary) }}
         </div>
         {% if not loop.last %}
           <div class="border-b border-gray-200"></div>

src/experience.njk

@@ -62,8 +62,8 @@ eleventyNavigation:
         </ol>
       </div>
       <div>
-        {% from "components/skills.njk" import render %}
-        {{ render(experince.skills) }}
+        {% import "components/skills.njk" as skills %}
+        {{ skills.render(experince.skills, defaultColor = theme.color.primary) }}
       </div>
       {% if not loop.last %}
         <div class="border-b border-gray-200"></div>

src/projects.njk

@@ -25,17 +25,17 @@ eleventyNavigation:
               <i class="bx bxs-category-alt"></i>
               <span>{{ project.category }}</span>
             </div>
-            <div class="flex text-green-600 items-center text-sm font-medium space-x-1.5">
-              <i class="bx bxs-lock-open-alt"></i>
+            <div class="flex text-{{ theme.color.primary }}-600 items-center text-sm font-medium space-x-1.5">
+              <i class="bx bx-category"></i>
               <span>{{ project.type }}</span>
             </div>
           </div>
         </div>
       </div>
       <p class="text-gray-600">{{ project.description }}</p>
       <div>
-        {% from 'components/skills.njk' import render %}
-        {{ render(project.skills) }}
+        {% import 'components/skills.njk' as skills %}
+        {{ skills.render(project.skills, defaultColor = theme.color.primary) }}
       </div>
       {% if project.links %}
       <div class="space-x-2">

src/skills.njk

@@ -10,10 +10,11 @@ eleventyNavigation:
 
 {% for skill in skills %}
   <div class="sm:flex sm:justify-start sm:space-y-0 sm:space-x-4 space-y-4">
-    <div class="flex w-16 h-16 bg-gradient-to-br from-lime-100 to-green-300 justify-center items-center rounded-xl">
-            <span class="w-16 text-3xl text-green-800 text-center">
-              <i class="bx {{ skill.icon }}"></i>
-            </span>
+    <div class="flex w-16 h-16 justify-center items-center rounded-xl
+                bg-gradient-to-br from-{{ skill.color or theme.color.primary }}-100 to-{{ skill.color or theme.color.primary }}-300">
+        <span class="w-16 text-3xl text-{{ skill.color or theme.color.primary }}-800 text-center">
+          <i class="bx {{ skill.icon }}"></i>
+        </span>
     </div>
 
     <div class="w-full space-y-5">
@@ -23,8 +24,8 @@ eleventyNavigation:
         </div>
       </div>
       <div>
-        {% from 'components/skills.njk' import render %}
-        {{ render(skill.items, tags) }}
+        {% import "components/skills.njk" as skills %}
+        {{ skills.render(skill.items, tags, defaultColor = skill.color or theme.color.primary) }}
       </div>
       {% if not loop.last %}
         <div class="border-b border-gray-200"></div>