Skip to content

feat: overhaul profile UI, add QR support and web creation tool #89

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
samyuktaap wants to merge 5 commits into from
Closed

feat: overhaul profile UI, add QR support and web creation tool #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e40b13e
feat: overhaul profile UI, add QR support and web creation tool
samyuktaap May 14, 2026
145ff54
Merge upstream main and resolve conflicts
samyuktaap May 18, 2026
1594a46
Merge upstream/main and resolve conflicts by keeping PR's overhauled UI
samyuktaap Jun 1, 2026
c3475c2
chore: sync pnpm-lock.yaml after upstream merge
samyuktaap Jun 1, 2026
c7abac7
Merge remote-tracking branch 'upstream/main'
samyuktaap Jun 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@
"devDependencies": {
"@sveltejs/adapter-auto": "^7.0.0",
"@sveltejs/kit": "^2.50.2",
"@sveltejs/vite-plugin-svelte": "^6.2.4",
"@sveltejs/vite-plugin-svelte": "^4.0.0",
"svelte": "^5.51.0",
"svelte-check": "^4.4.2",
"typescript": "^5.9.3",
"vite": "^7.3.1"
"vite": "^5.4.21"
}
}
264 changes: 148 additions & 116 deletions apps/web/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,214 +1,246 @@
<script>
import { onMount } from 'svelte';

let theme = 'light';

onMount(() => {
const saved = localStorage.getItem('devcard-theme');
if (saved) {
theme = saved;
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme = 'dark';
}
document.documentElement.classList.toggle('dark', theme === 'dark');
});

function toggleTheme() {
theme = theme === 'light' ? 'dark' : 'light';
document.documentElement.classList.toggle('dark', theme === 'dark');
localStorage.setItem('devcard-theme', theme);
}
</script>

<svelte:head>
<title>DevCard — One Tap. Every Profile. Every Platform.</title>
<meta
name="description"
content="Open source developer profile exchange platform. Share all your developer profiles with one QR code."
/>
</svelte:head>

<div class="bg-glow"></div>

<main class="landing">
<nav class="glass">
<div class="nav-content">
<div class="logo">⚡ <span class="gradient-text">DevCard</span></div>
<button
id="theme-toggle"
class="theme-toggle"
on:click={toggleTheme}
aria-label="Toggle theme"
>
{theme === 'light' ? '🌙' : '☀️'}
</button>
</div>
</nav>

<section class="hero">
<div class="hero-badge">GSSoC'26 Edition</div>
<h1 class="gradient-text">One Tap. Every Profile.<br/>Every Platform.</h1>
<p class="description">
The open-source standard for developer networking. Put all your profiles—GitHub, LinkedIn, LeetCode, and more—into a single, high-impact digital card.
</p>
<div class="cta-group">
<a href="/create" class="btn btn-primary">⚡ Create Your Card</a>
<a
href="https://github.com/Dev-Card/DevCard"
class="btn btn-secondary"
target="_blank"
rel="noopener"
>
⭐ Star on GitHub
</a>
<a href="/u/devcard-demo" class="btn btn-secondary">View Demo Profile →</a>
</div>
</section>

<section id="features" class="features">
<div class="feature-card glass">
<div class="feature-icon">🔗</div>
<h3>Unified Identity</h3>
<p>Combine your fragmented online presence into a cohesive professional identity.</p>
</div>
<div class="feature-card glass">
<div class="feature-icon">⚡</div>
<h3>Instant Follow</h3>
<p>Integrated APIs allow followers to connect with you instantly across platforms.</p>
</div>
<div class="feature-card glass">
<div class="feature-icon">🔒</div>
<h3>Private by Design</h3>
<p>No tracking, no data selling. Your information stays where it belongs: with you.</p>
</div>
</section>

<footer class="footer">
<p>© 2026 DevCard • Built for the Developer Community</p>
</footer>
</main>

<style>
.bg-glow {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.22), transparent 50%),
radial-gradient(circle at 0% 100%, rgba(168, 85, 247, 0.15), transparent 40%),
radial-gradient(circle at 100% 50%, rgba(99, 102, 241, 0.10), transparent 35%);
background: radial-gradient(circle at 50% 0%, var(--primary-glow), transparent 40%),
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 {
margin: 1.25rem auto 0;
width: min(1100px, calc(100% - 2rem));
position: sticky;
top: 1rem;
margin: 1rem auto;
width: calc(100% - 2rem);
max-width: 1100px;
border-radius: var(--radius-xl);
border-radius: var(--radius-lg);
z-index: 100;
padding: 1rem 1.5rem;
padding: 0.75rem 1.5rem;
}

.nav-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}

.logo {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 1.35rem;
font-size: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}

.theme-toggle {
width: 46px;
height: 46px;
background: var(--bg-glass);
border: 1px solid var(--border-glass);
border-radius: 50%;
background: transparent;
border: none;
font-size: 1.5rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
transition: transform 0.24s ease, background-color 0.24s ease, border-color 0.24s ease;
padding: 0.5rem;
border-radius: 50%;
transition: transform 0.3s ease;
}

.theme-toggle:hover {
transform: scale(1.05);
background: rgba(99, 102, 241, 0.1);
border-color: rgba(99, 102, 241, 0.3);
}

.theme-toggle:focus-visible {
outline: 3px solid rgba(99, 102, 241, 0.24);
outline-offset: 3px;
transform: scale(1.1) rotate(10deg);
}

.landing {
max-width: 1100px;
margin: 0 auto;
padding: 0 1.25rem;
padding: 0 1.5rem;
}

.hero {
text-align: center;
padding: clamp(4rem, 8vw, 6rem) 0 4rem;
padding: 8rem 0 6rem;
}

.hero-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.45rem 1rem;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
font-size: 0.88rem;
font-weight: 700;
margin-bottom: 1.75rem;
display: inline-block;
padding: 0.4rem 1rem;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 100px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 2rem;
color: var(--primary);
}

h1 {
font-size: clamp(3rem, 5.8vw, 4.5rem);
font-size: 4.5rem;
font-weight: 900;
letter-spacing: -1px;
margin: 0 auto 1.5rem;
max-width: 760px;
letter-spacing: -3px;
margin-bottom: 1.5rem;
}

.description {
font-size: clamp(1rem, 1.1vw, 1.2rem);
font-size: 1.25rem;
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto 2.5rem;
line-height: 1.7;
margin: 0 auto 3rem;
line-height: 1.6;
}

.cta-group {
display: flex;
gap: 1rem;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}

.btn-secondary {
padding: 0.92rem 1.75rem;
border-radius: calc(var(--radius) * 1.15);
font-weight: 700;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.08);
color: var(--text-primary);
padding: 0.8rem 1.6rem;
border-radius: var(--radius);
font-weight: 600;
border: 1px solid var(--border);
background: var(--bg-card);
transition: all 0.2s;
}

.btn-secondary:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(99, 102, 241, 0.45);
background: var(--bg-secondary);
border-color: var(--primary);
}

.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.75rem;
padding: 4rem 0 5rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 4rem 0;
}

.feature-card {
padding: 2.4rem;
min-height: 140px;
padding: 2.5rem;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
background: var(--bg-card);
border: 1px solid var(--border);
transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
transition: transform 0.3s ease;
}

.feature-card:hover {
transform: translateY(-8px);
border-color: rgba(99, 102, 241, 0.4);
box-shadow: 0 26px 50px -18px rgba(0, 0, 0, 0.35);
transform: translateY(-10px);
}

.feature-icon {
font-size: 2.3rem;
margin-bottom: 1.4rem;
font-size: 2.5rem;
margin-bottom: 1.5rem;
}

h3 {
font-size: 1.4rem;
margin-bottom: 0.9rem;
font-size: 1.5rem;
margin-bottom: 1rem;
}

.feature-card p {
color: var(--text-secondary);
line-height: 1.7;
line-height: 1.6;
}

.footer {
text-align: center;
padding: 3rem 0 2rem;
padding: 6rem 0 3rem;
border-top: 1px solid var(--border);
color: var(--text-muted);
}

@media (max-width: 860px) {
nav {
margin-top: 0.9rem;
padding: 0.85rem 1.1rem;
}

.hero {
padding: clamp(3rem, 9vw, 5rem) 0 3rem;
}
}

@media (max-width: 640px) {
h1 {
font-size: 2.6rem;
}

.cta-group {
flex-direction: column;
align-items: stretch;
}

.features {
grid-template-columns: 1fr;
gap: 1rem;
padding: 2rem 1rem;
}

.feature-card {
padding: 1.8rem;
margin-bottom: 0;
}

.footer {
padding: 2rem 0 1.25rem;
}

.bg-glow {
opacity: 0.6;
}
@media (max-width: 768px) {
h1 { font-size: 3rem; letter-spacing: -1px; }
.hero { padding: 4rem 0 3rem; }
.cta-group { flex-direction: column; align-items: stretch; }
}
</style>
</style>
Loading
Loading