From a22177ed58e98224d45c88b2ec4202b990e089ad Mon Sep 17 00:00:00 2001
From: Sahil <987sahilkumar123@gmail.com>
Date: Fri, 22 May 2026 21:32:39 +0530
Subject: [PATCH] Implement mobile responsiveness, performance, accessibility,
SEO improvements
---
apps/web/src/app.css | 9 +++++++
apps/web/src/app.html | 5 ++++
apps/web/src/routes/+page.svelte | 44 +++++++++++++++-----------------
3 files changed, 35 insertions(+), 23 deletions(-)
diff --git a/apps/web/src/app.css b/apps/web/src/app.css
index c775623e..c9dfee50 100644
--- a/apps/web/src/app.css
+++ b/apps/web/src/app.css
@@ -182,3 +182,12 @@ html {
::-webkit-scrollbar-corner {
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;
+ }
+}
diff --git a/apps/web/src/app.html b/apps/web/src/app.html
index f273cc58..666257e4 100644
--- a/apps/web/src/app.html
+++ b/apps/web/src/app.html
@@ -3,6 +3,11 @@
+
+
+
+
+
%sveltekit.head%
diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
index 11f8085b..e620d249 100644
--- 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."
/>
+
+
+
+
+
+
+
@@ -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 {
@@ -220,17 +229,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));
@@ -238,16 +239,6 @@
transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
- .feature-card {
- min-height: 140px;
- padding: 16px;
-}
-@media (max-width: 640px) {
- .feature-card {
- margin-bottom: 12px;
- }
-}
-
.feature-card:hover {
transform: translateY(-8px);
border-color: rgba(99, 102, 241, 0.4);
@@ -297,16 +288,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;
+ }
}