Implement mobile responsiveness, performance, accessibility, SEO improvements (#261)

silentguyracer · ShantKhatri · web-flow · commit a937047c23b7 · 2026-05-23T22:04:12.000+05:30
Signed-off-by: Prashantkumar Khatri &lt;96608160+ShantKhatri@users.noreply.github.com&gt;
Co-authored-by: Prashantkumar Khatri &lt;96608160+ShantKhatri@users.noreply.github.com&gt;
diff --git a/apps/web/src/app.css b/apps/web/src/app.css
@@ -183,6 +183,14 @@ html {
   background: var(--bg-secondary);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
 
 .premium-card {
   background: #ffffff;
@@ -226,4 +234,4 @@ button {
 
 button:hover {
   background: #4338ca;
-}
+}
diff --git a/apps/web/src/app.html b/apps/web/src/app.html
@@ -3,6 +3,11 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
+		<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0f0f1a" />
+		<meta property="og:type" content="website" />
+		<meta property="og:site_name" content="DevCard" />
+		<meta name="twitter:card" content="summary_large_image" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
@@ -26,6 +26,13 @@
     name="description"
     content="Open source developer profile exchange platform. Share all your developer profiles with one QR code."
   />
+  <meta property="og:title" content="DevCard — One Tap. Every Profile. Every Platform." />
+  <meta property="og:description" content="Open source developer profile exchange platform. Share all your developer profiles with one QR code." />
+  <meta property="og:url" content="https://devcard.example.com/" />
+  <meta property="og:image" content="https://devcard.example.com/og-image.jpg" />
+  <meta name="twitter:title" content="DevCard" />
+  <meta name="twitter:description" content="Open source developer profile exchange platform." />
+  <meta name="twitter:image" content="https://devcard.example.com/og-image.jpg" />
 </svelte:head>
 
 <div class="bg-glow"></div>
@@ -98,6 +105,8 @@
                 radial-gradient(circle at 0% 100%, var(--accent-glow), transparent 30%);
     pointer-events: none;
     z-index: -1;
+    will-change: transform, opacity;
+    transform: translateZ(0);
   }
 
   nav {
@@ -218,17 +227,9 @@
     padding: 4rem 0 5rem;
   }
 
-  @media (max-width: 640px) {
-  .features {
-    display: grid;
-    grid-template-columns: 1fr; /* single column */
-    gap: 16px;
-    padding: 0 12px;
-  }
-}
-
   .feature-card {
     padding: 2.4rem;
+    min-height: 140px;
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-lg);
     background: linear-gradient(180deg, rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.5));
@@ -339,16 +340,23 @@
       align-items: stretch;
     }
 
-    .feature-card {
-      padding: 1.8rem;
+    .features {
+      grid-template-columns: 1fr;
+      gap: 1rem;
+      padding: 2rem 1rem;
     }
 
-    .features {
-      gap: 1.2rem;
+    .feature-card {
+      padding: 1.8rem;
+      margin-bottom: 0;
     }
 
     .footer {
       padding: 2rem 0 1.25rem;
     }
+    
+    .bg-glow {
+      opacity: 0.6;
+    }
   }
 </style>
