feat: add demo buttons to project cards and update git links

src/components/Portfolio.tsx

@@ -18,7 +18,7 @@ const PROJECTS = [
     ],
     isFeatured: true,
     demoLink: "https://dabubble.andre-kempf.com/",
-    githubLink: "https://github.com/Chneemann/dabubble",
+    githubLink: "https://git.andre-kempf.com/Chneemann/dabubble",
   },
   {
     title: "Join",
@@ -33,8 +33,9 @@ const PROJECTS = [
       { name: "PostgreSQL", featured: false },
     ],
     isFeatured: false,
-    frontendLink: "https://github.com/Chneemann/join",
+    demoLink: "https://join.andre-kempf.com/",
-    backendLink: "https://github.com/Chneemann/join-api",
+    frontendLink: "https://git.andre-kempf.com/Chneemann/join",
+    backendLink: "https://git.andre-kempf.com/Chneemann/join-api",
   },
   {
     title: "Videoflix",
@@ -49,8 +50,11 @@ const PROJECTS = [
       { name: "PostgreSQL", featured: false },
     ],
     isFeatured: false,
-    frontendLink: "https://github.com/Chneemann/videoflix/tree/main/frontend",
+    demoLink: "https://videoflix.andre-kempf.com/",
-    backendLink: "https://github.com/Chneemann/videoflix/tree/main/backend",
+    frontendLink:
+      "https://git.andre-kempf.com/Chneemann/videoflix/src/branch/main/frontend",
+    backendLink:
+      "https://git.andre-kempf.com/Chneemann/videoflix/src/branch/main/backend",
   },
 ];
 
@@ -213,30 +217,45 @@ export default function Portfolio() {
                     ))}
                   </div>
 
-                  {/* Repository Links */}
+                  {/* Actions & Repository Links */}
-                  <div className="grid grid-cols-2 pt-2 border-t border-slate-800/60">
+                  <div className="pt-3 border-t border-slate-800/60 flex items-center justify-between gap-2">
+                    {project.demoLink && (
+                      <Link
+                        href={project.demoLink}
+                        target="_blank"
+                        className="text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 px-3 py-1.5 rounded-lg transition-colors inline-flex items-center gap-1 shadow-md shadow-blue-600/20 shrink-0"
+                      >
+                        Live Demo ↗
+                      </Link>
+                    )}
+
+                    <div className="flex items-center gap-3 text-sm font-semibold text-slate-400 ml-auto">
                       {project.frontendLink && (
                         <Link
                           href={project.frontendLink}
                           target="_blank"
-                        className="text-xs font-mono text-blue-400 hover:underline inline-flex items-center gap-1"
+                          className="hover:text-white transition-colors"
                         >
-                        Code (Frontend) →
+                          Frontend
                         </Link>
                       )}
+                      {project.frontendLink && project.backendLink && (
+                        <span>/</span>
+                      )}
                       {project.backendLink && (
                         <Link
                           href={project.backendLink}
                           target="_blank"
-                        className="text-xs font-mono text-blue-400 hover:underline inline-flex items-center justify-end gap-1 text-right"
+                          className="hover:text-white transition-colors"
                         >
-                        Code (Backend) →
+                          Backend
                         </Link>
                       )}
                     </div>
                   </div>
                 </div>
               </div>
+            </div>
           ))}
         </div>
       </div>