🚩: Change Button

Author: pphatdev

index.html

@@ -78,11 +78,20 @@ <h1 class="relative mt-3 text-2xl font-bold text-gray-800 break-words transition
                         Welcome to my portfolio - Thoughts from a wandering mind. I am the senior front-end developer of TurboTech, and an UI/UX designer. In my free time, I like design side projects and developing them.
                     </p>
                     <div class="flex items-center justify-center w-full gap-3 text-center sm:justify-start">
-                        <a href="/projects" class="px-4 active:bg-primary py-1.5 text-xs sm:text-sm transition-colors border rounded-lg border-stone-200 drop-shadow-sm hover:bg-primary-800 text-white bg-primary-700 dark:bg-black/20 backdrop-blur-lg hover:border-stone-300 dark:border-stone-500 dark:hover:border-stone-400">
-                            My Works
+                        <a target="_blank" href="https://github.com/pphatdev" class="px-4 gap-2 active:bg-primary/10 flex items-center py-1.5 text-xs sm:text-sm transition-colors border rounded-lg border-stone-200 drop-shadow-sm text-stone-800 dark:text-white bg-white/40 dark:bg-black/20 backdrop-blur-lg hover:border-stone-300 dark:border-stone-500 dark:hover:border-stone-400">
+                            <span>Projects</span>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5 dark:text-white" viewBox="0 0 24 24">
+                                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"> </path>
+                            </svg>
+                            <div class="absolute inset-0 items-end h-5 overflow-hidden rounded-full translate-y-7 sm:translate-y-8 group-hover:flex">
+                                <div class="flex -mb-px h-[1px] w-full">
+                                    <div class="w-full flex-none blur-sm [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]"></div>
+                                    <div class="-ml-[99%] w-full flex-none blur-[1px] [background-image:linear-gradient(90deg,rgba(56,189,248,0)_0%,#0EA5E9_32.29%,rgba(236,72,153,0.3)_67.19%,rgba(236,72,153,0)_100%)]"></div>
+                                </div>
+                            </div>
                         </a>
                         <a target="_blank" href="https://drive.google.com/file/d/10rCDGaZmPShEig1ffibrQaec6N8tsRfS/view?usp=sharing" class="px-4 gap-2 active:bg-primary/10 flex items-center py-1.5 text-xs sm:text-sm transition-colors border rounded-lg border-stone-200 drop-shadow-sm text-stone-800 dark:text-white bg-white/40 dark:bg-black/20 backdrop-blur-lg hover:border-stone-300 dark:border-stone-500 dark:hover:border-stone-400">
-                            <span>Download CV</span>
+                            <span>CV</span>
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
                             </svg>
@@ -95,11 +104,6 @@ <h1 class="relative mt-3 text-2xl font-bold text-gray-800 break-words transition
                         </a>
                     </div>
                 </div>
-                <!-- <div data-image class="relative z-10 items-center justify-center flex-shrink-0 order-first block border-2 border-dashed animate-faded dark:border-slate-900 md:order-last">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 animate-spin text-black/50">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
-                    </svg>
-                </div> -->
                 <div class="relative z-10 items-center justify-center flex-shrink-0 order-first block mt-5 border-2 border-dashed animate-faded dark:border-slate-900 md:order-last">
                     <div class="rounded-full box w-36 h-36 sm:w-44 md:w-64 sm:h-44 md:h-64">
                         <img src="./src/images/leat-sophat.webp" loading="lazy" class="py-1 rounded-full w-36 shrink-0 ring-primary h-36 sm:w-44 md:w-64 sm:h-44 md:h-64" alt="Leat Sophat">