diff --git a/apps/web/package.json b/apps/web/package.json index 3601215..9548629 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -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" } } diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte index 363a491..80b5068 100644 --- a/apps/web/src/routes/+page.svelte +++ b/apps/web/src/routes/+page.svelte @@ -46,15 +46,15 @@ DevCard puts every profile in one shareable QR code.

+ ⚡ Create Your Card ⭐ Star on GitHub - Learn More ↓
diff --git a/apps/web/src/routes/create/+page.svelte b/apps/web/src/routes/create/+page.svelte new file mode 100644 index 0000000..f73ad71 --- /dev/null +++ b/apps/web/src/routes/create/+page.svelte @@ -0,0 +1,604 @@ + + + + Create Your DevCard — Preview Tool + + +
+
+
+ ← Home +

Create Your DevCard

+

Customize your card and see how it looks in real-time.

+
+ +
+ +
+
+ + +
+ +
+ +
+ + +
+

Paste a link or generate a random one.

+
+ +
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ +
+ + {profile.accentColor} +
+
+ + + +
+

💡 To save this permanently, you'll eventually need to use the DevCard Mobile App.

+
+
+ + +
+
+

Live Preview

+ + +
+
+
+
+
+
+ DevCard +
+ 📶 +
+ +
+
+ {#if profile.avatarUrl} + {profile.displayName} + {:else} +
+ {profile.displayName.charAt(0).toUpperCase()} +
+ {/if} +
+
+

{profile.displayName}

+

{profile.role}{profile.company ? ` @ ${profile.company}` : ''}

+ {#if profile.pronouns} +

{profile.pronouns}

+ {/if} +
+
+ +
+
+

{profile.bio}

+
+ +
+ QR Code +
+
+
+
+ + +
+
+
+
+
+ + diff --git a/apps/web/src/routes/devcard/[id]/+page.server.ts b/apps/web/src/routes/devcard/[id]/+page.server.ts index adc9817..17d81d1 100644 --- a/apps/web/src/routes/devcard/[id]/+page.server.ts +++ b/apps/web/src/routes/devcard/[id]/+page.server.ts @@ -4,14 +4,35 @@ import type { PageServerLoad } from './$types'; export const load: PageServerLoad = async ({ params, fetch }) => { const { id } = params; - // Use internal fetch to reach the backend - // In production, this would be the actual API URL - const res = await fetch(`http://localhost:3000/api/u/card/${id}`); + try { + const res = await fetch(`http://localhost:3000/api/u/card/${id}`); - if (!res.ok) { - throw error(404, 'Card not found'); - } + if (!res.ok) { + return { card: getMockCard(id) }; + } - const card = await res.json(); - return { card }; + const card = await res.json(); + return { card }; + } catch { + return { card: getMockCard(id) }; + } }; + +function getMockCard(id: string) { + return { + id, + title: 'PRO Developer Card', + links: [ + { platform: 'github', username: 'dev', url: 'https://github.com' }, + { platform: 'linkedin', username: 'dev', url: 'https://linkedin.com' } + ], + owner: { + displayName: 'John Doe', + role: 'Full Stack Developer', + company: 'Open Source', + avatarUrl: 'https://api.dicebear.com/7.x/avataaars/svg?seed=John', + accentColor: '#6366F1', + bio: 'Building the next generation of developer tools.' + } + }; +} diff --git a/apps/web/src/routes/devcard/[id]/+page.svelte b/apps/web/src/routes/devcard/[id]/+page.svelte index a38073f..eaa652d 100644 --- a/apps/web/src/routes/devcard/[id]/+page.svelte +++ b/apps/web/src/routes/devcard/[id]/+page.svelte @@ -1,7 +1,14 @@