refactor

k-urtica · Jul 10, 2024 · 7c533de · 7c533de
1 parent 4aab010
commit 7c533de
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 39 deletions.
diff --git a/src/components/MdiIcon.vue b/src/components/MdiIcon.vue
@@ -12,8 +12,8 @@ withDefaults(
     size?: string;
   }>(),
   {
-    color: '#e2e8f0',
-    size: '24',
+    color: 'currentColor',
+    size: '1.2em',
   }
 );
 </script>
diff --git a/src/components/NavLink.vue b/src/components/NavLink.vue
@@ -1,12 +1,8 @@
 <template>
-  <nav class="border-slate-300/20 bg-gray-700/50">
-    <ul>
-      <li>
-        <NuxtLink to="/" class="inline-block px-4 py-1">
-          <mdi-icon :icon="mdiHomeCircleOutline" class="inline" color="#5eead4" aria-label="Home" />
-        </NuxtLink>
-      </li>
-    </ul>
+  <nav class="border-slate-300/20 bg-gray-700/30">
+    <NuxtLink to="/" class="flex items-center p-2">
+      <MdiIcon :icon="mdiHomeCircleOutline" class="text-amber-200" size="24" aria-label="Home" />
+    </NuxtLink>
   </nav>
 </template>
 

diff --git a/src/components/SkillLists.vue b/src/components/SkillLists.vue
@@ -1,22 +1,18 @@
 <template>
-  <div>
-    <ul class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
-      <li
-        v-for="skill in skills"
-        :key="skill.title"
-        class="flex flex-col rounded-2xl border border-slate-200/20 bg-slate-700/30 p-4 text-center shadow-lg shadow-gray-500/10"
-      >
-        <div class="mx-auto">
-          <mdi-icon :icon="skill.icon" :color="skill.color" size="36" />
-        </div>
+  <ul class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
+    <li
+      v-for="{ title, color, icon, rating } in skills"
+      :key="title"
+      class="flex flex-col rounded-xl border border-slate-200/20 bg-slate-700/30 p-4 text-center shadow-lg shadow-gray-500/10"
+    >
+      <MdiIcon :icon :color size="36" class="mx-auto" />
 
-        <h3 class="mt-3 text-slate-100">{{ skill.title }}</h3>
-        <div class="mt-1 flex basis-1 justify-center text-yellow-200/95">
-          <mdi-icon v-for="n in skill.rating" :key="n" :icon="mdiStar" color="#FEF08A" size="15" />
-        </div>
-      </li>
-    </ul>
-  </div>
+      <h3 class="mt-3 text-slate-100">{{ title }}</h3>
+      <div class="mt-1 flex justify-center text-yellow-200/90">
+        <MdiIcon v-for="n in rating" :key="n" :icon="mdiStar" size="14" />
+      </div>
+    </li>
+  </ul>
 </template>
 
 <script setup lang="ts">

diff --git a/src/pages/about.vue b/src/pages/about.vue
@@ -52,9 +52,13 @@
           <h2 class="mb-3 text-2xl font-bold text-lime-300">Contact</h2>
           <p class="text-slate-200">
             Contact me on
-            <NuxtLink to="https://twitter.com/k_urtica" target="_blank" class="text-teal-300">
+            <NuxtLink
+              to="https://twitter.com/k_urtica"
+              target="_blank"
+              class="inline-flex items-center gap-1 text-teal-300"
+            >
               Twitter
-              <mdi-icon class="inline" size="16" color="#64748b" :icon="mdiOpenInNew" />
+              <MdiIcon size="16" :icon="mdiOpenInNew" />
             </NuxtLink>
           </p>
         </section>

diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -8,18 +8,16 @@
       </header>
 
       <section class="mb-3 mt-7 border-t border-slate-600">
-        <ul>
-          <li v-for="menu in menus" :key="menu.title" class="mt-5">
-            <NuxtLink :to="menu.to" class="text-indigo-300">
-              <h2 class="relative text-xl font-bold underline-offset-2 hover:underline">
-                {{ menu.title }}
-                <span class="absolute right-0 top-1.5">
-                  <mdi-icon :icon="menu.icon" color="#a5b4fc" size="18" />
-                </span>
+        <ul class="mt-5 space-y-5">
+          <li v-for="{ title, to, icon, caption } in menus" :key="title">
+            <NuxtLink :to class="flex items-center justify-between gap-2 text-indigo-300">
+              <h2 class="text-xl font-bold underline-offset-2 hover:underline">
+                {{ title }}
               </h2>
+              <MdiIcon :icon size="18" />
             </NuxtLink>
             <p class="mt-1 text-sm text-slate-200/90">
-              {{ menu.caption }}
+              {{ caption }}
             </p>
           </li>
         </ul>
@@ -31,7 +29,7 @@
           target="_blank"
           class="text-sm text-indigo-300/90"
         >
-          Source Code
+          GitHub
         </NuxtLink>
       </footer>
     </glass-card>