feat: update portfolio

src/components/PortfolioLists.vue

@@ -1,68 +1,79 @@
 <script setup lang="ts">
+import { NuxtLink } from '#components';
+
 const portfolios = [
   {
-    image: 'p1.png',
+    image: 'p_webtoolbox.webp',
     title: 'Web ToolBox',
     text: 'Web tools for developers that can be used in the browser. This is what I\'m most focused on right now😆',
-    tools: 'Made with: NuxtJS, Vuetify, Python etc',
-    url: 'https://web-toolbox.dev',
+    stack: 'Made with: Nuxt, NuxtUI, Python etc',
+    to: 'https://web-toolbox.dev',
+  },
+  {
+    image: 'p_diffiy.webp',
+    title: 'Diffiy',
+    text: 'Diffiy is a powerful, secure text comparison tool🔍',
+    stack: 'Made with: Nuxt, shadcn/ui',
+    to: 'https://Diffiy.dev',
   },
   {
-    image: 'p2.png',
-    title: '日本踏破図🗾',
+    image: 'p_tintsshades.webp',
+    title: 'Tints and Shades Generator',
+    text: 'Intuitive generator to generate tints and shade colors.',
+    stack: 'Made with: Gatsby, Mantine',
+    to: 'https://tintsshades.netlify.app/',
+  },
+  {
+    image: 'p_traversjapan.png',
+    title: '日本踏破図🗾 (🌇 Sunset)',
     text: 'This service allows you to share the prefectures you have visited on a map of Japan!',
-    tools: 'Made with: NuxtJS, Vuetify',
-    url: 'https://traverse-japan.dev',
+    stack: 'Made with: Nuxt, Vuetify',
   },
   {
-    image: 'p3.png',
+    image: 'p_portfolio.png',
     title: 'Portfolio site',
     text: 'This is my personal website. It has been refined through several renewals🤭',
-    tools: 'Made with: NuxtJS, Tailwind CSS',
-    url: 'https://k-urtica.github.io',
+    stack: 'Made with: Nuxt, TailwindCSS',
+    to: 'https://k-urtica.github.io',
   },
   {
-    image: 'p4.png',
+    image: 'p_blog.png',
     title: 'My Blog',
     text: 'Markdown blog made by Gatsby. I have no experience with react, but I built it from scratch.',
-    tools: 'Made with: Gatsby, Tailwind CSS',
-    url: 'https://knote.dev',
+    stack: 'Made with: Gatsby, TailwindCSS',
+    to: 'https://knote.dev',
   },
   {
-    image: 'p5.png',
-    title: 'QT Visualizer',
+    image: 'p_qt.png',
+    title: 'QT Visualizer (🌇 Sunset)',
     text: 'Web service to visualize trends on the technology sharing platform Qiita. This is my first personal project🚀',
-    tools: 'Made with: Vue.js, Vuetify, Python etc',
-    url: 'https://qtvisualizer.com',
+    stack: 'Made with: Vue.js, Vuetify, Python etc',
   },
 ];
 </script>
 
 <template>
   <div>
-    <ul class="grid grid-cols-1 gap-8 sm:grid-cols-2">
-      <li v-for="p in portfolios" :key="p.title">
-        <NuxtLink :to="p.url" target="_blank">
+    <ul class="grid grid-cols-1 gap-6 sm:grid-cols-2">
+      <li v-for="{ image, title, text, stack, to } in portfolios" :key="title">
+        <component :is="to ? NuxtLink : 'div'" :to :target="to && '_blank'">
           <article
-            class="flex flex-col overflow-hidden rounded-2xl border border-slate-200/10 bg-gray-600/25 shadow-lg shadow-slate-700/20 transition duration-300 hover:bg-slate-500/20 hover:shadow-slate-200/20"
+            class="flex h-full flex-col overflow-hidden rounded-xl border border-slate-400/10 bg-slate-500/30 shadow-lg shadow-slate-700/20 transition duration-300 hover:bg-slate-500/30 hover:shadow-slate-200/20"
           >
-            <div class="aspect-video">
-              <img :alt="p.title" :src="`/images/${p.image}`">
-            </div>
-
-            <section class="p-4">
+            <img :alt="title" :src="`/images/${image}`" class="aspect-video">
+            <section class="p-4 pt-2">
               <h3 class="text-center text-lg font-bold text-orange-200">
-                {{ p.title }}
+                {{ title }}
               </h3>
-              <p class="mt-2 text-sm text-zinc-200/90">
-                {{ p.text }}
+              <p class="mt-1 text-sm text-zinc-200/90">
+                {{ text }}
               </p>
               <p class="mt-2 text-xs font-bold text-zinc-50">
-                {{ p.tools }}
+                {{ stack }}
               </p>
             </section>
           </article>
-        </NuxtLink>
+        </component>
       </li>
     </ul>
   </div>