LeLab.dev

A modern, multilingual full-stack developer portfolio and project showcase built with SvelteKit 5, Skeleton Labs, and Paraglide JS i18n. Deployed to Cloudflare Workers with comprehensive testing infrastructure.

🎯 Project Overview

lelab.dev is a public showcase and portfolio platform for sharing diverse open-source projects:

• Golang projects - Backend services and CLI tools
• Python projects - Data processing and automation scripts
• SvelteForge boilerplate - Custom Svelte starter template for rapid web development
• Experimental projects - Cutting-edge technical explorations

The core site features a professional, accessible interface with full internationalization (EN/FR/DE/ES/JA), dark mode support, and dynamic project loading from markdown + Svelte files.

✨ Key Features

• Multilingual Landing Page - 5 languages with automatic browser locale detection
• Dynamic Project System - Projects loaded from .svx files (Markdown + Svelte) with locale fallback
• Dark Mode - Theme switcher with persistent preference
• Responsive Design - Mobile-first layout using Tailwind CSS and Skeleton Labs
• SEO Optimized - Meta tags, Open Graph, structured data, sitemap, robots.txt
• Type-Safe - Full TypeScript with strict mode enabled
• Comprehensive Testing - Vitest for unit tests, Playwright for e2e tests
• Professional Styling - Skeleton Labs CSS variables with automatic light/dark mode pairing
• Accessible UI - WCAG compliance with semantic HTML and ARIA attributes

🛠️ Tech Stack

Technology	Purpose
SvelteKit 5	Full-stack web framework with file-based routing
Skeleton Labs	Component library and design system with CSS variables
Tailwind CSS 4	Utility-first CSS with Skeleton themes
Paraglide JS	Runtime i18n with 5-language support
TypeScript	Type-safe development with strict mode
Vitest	Unit testing framework
Playwright	E2E testing framework
Cloudflare Workers	Serverless deployment platform

🚀 Quick Start

Prerequisites

• Node.js 18+ (or use nvm)
• npm, yarn, or pnpm

Installation & Development

# Install dependencies
npm install

# Start development server with hot reload
npm run dev

# Open in browser automatically
npm run dev -- --open

The development server runs at http://localhost:5173 with instant HMR for Svelte components.

📦 Building & Deployment

# Type check and validate
npm run check

# Run all tests
npm run test

# Build production bundle
npm run build

# Preview production build locally
npm run preview

# Format code
npm run format

# Lint and check formatting
npm run lint

Deployment to Cloudflare Workers

npm run build  # Creates optimized bundle in .svelte-kit/cloudflare

The project uses @sveltejs/adapter-cloudflare with nodejs_compat flag for Paraglide JS async_hooks support.

📁 Project Structure

src/
├── routes/                 # File-based routing
│   ├── +layout.svelte     # Root layout with SEO meta tags
│   ├── +page.svelte       # Landing page composition
│   ├── home/              # Landing page components (Hero, Projects, About)
│   ├── Navigation.svelte  # Sticky navbar with theme/language switchers
│   ├── Footer.svelte      # Footer with branding and links
│   └── demo/              # Demo pages and UI showcase
├── lib/
│   ├── components/        # Reusable Svelte components
│   │   ├── ui/           # UI elements (Link, buttons, etc.)
│   │   ├── Logo.svelte   # Gradient logo component
│   │   ├── LightSwitch.svelte # Dark mode toggle
│   │   └── LanguageSwitcher.svelte # Language selector (EN/FR/DE/ES/JA)
│   ├── services/          # Business logic (project loading, etc.)
│   ├── stores/            # Svelte stores (theme, language, i18n)
│   ├── utils/             # Utilities (icons, messages, theme manager)
│   ├── styles/            # Global CSS and shared patterns
│   └── types/             # TypeScript type definitions
├── content/
│   ├── links.ts          # Centralized URL management
│   ├── projects.ts       # Project registry and loading
│   └── projects/         # Project .svx files organized by locale
│       ├── en/           # English projects
│       ├── fr/           # French projects
│       ├── de/           # German projects
│       ├── es/           # Spanish projects
│       └── ja/           # Japanese projects
├── messages/              # i18n translation files (5 languages)
├── static/                # Static assets (favicon, robots.txt, .well-known/)
└── app.d.ts              # SvelteKit app type definitions

🌍 Internationalization (i18n)

The project uses Paraglide JS for zero-runtime i18n with 5 languages:

• English (en)
• Français (fr)
• Deutsch (de)
• Español (es)
• 日本語 (ja)

Message Access

import * as m from '$lib/paraglide/messages';
import { setLocale, getLocale } from '$lib/paraglide/runtime';

// Type-safe message access
<h1>{m['hero.title']()}</h1>

// Change language
setLocale('fr');  // Switch to French

// Get current locale
const current = getLocale();  // Returns 'en', 'fr', 'de', 'es', or 'ja'

Adding New Messages

1. Add translation keys to all 5 message files:

   • messages/en.json
   • messages/fr.json
   • messages/de.json
   • messages/es.json
   • messages/ja.json

2. Rebuild to regenerate Paraglide runtime:

   npm run build

📦 Project System (.svx Files)

Projects are managed via .svx files (Markdown + Svelte) with YAML frontmatter:

---
title: "Project Name"
description: "Brief description"
github: "https://github.com/..."
icon: "IconName"      # From Phosphor Icons
color: "primary|secondary|tertiary"
---

# Project Details

Markdown content with features, use cases, and integration details.

Current Projects:

• svelteforge - Custom Svelte starter template
• rune-scroller - Interactive scrolling component
• hush-music - Music project
• gositemap - Go sitemap generator
• goto-slug - URL slug management
• tasky - Task management tool

Adding New Projects

1. Create .svx files in src/content/projects/{locale}/projectname.svx for each language
2. Add project slug to projectModules in src/content/projects.ts
3. Files automatically appear in the Projects grid with locale fallback

🎨 Styling System

Uses Skeleton Labs CSS variables with automatic light/dark mode pairing:

<!-- Color pairing for automatic dark mode -->
<div class="bg-surface-50-800 text-surface-950-50">
  Automatically light background with dark text in light mode,
  dark background with light text in dark mode
</div>

Available Colors:

• Surface - Backgrounds and text (50-950 scale)
• Primary - Main brand color (blue)
• Secondary - Accent color (green)
• Tertiary - Accent color (magenta)

🧪 Testing

# Unit tests (Vitest)
npm run test:unit

# Unit tests with UI
npm run test:unit -- --ui

# Unit tests in watch mode
npm run test:unit -- --watch

# E2E tests (Playwright)
npm run test:e2e

# Run all tests
npm run test

Test Patterns:

• Client tests: src/**/*.svelte.spec.ts (browser environment)
• Server tests: src/**/*.spec.ts (Node.js environment)
• E2E tests: e2e/**/*.spec.ts (Playwright)

All tests require requireAssertions: true - at least one assertion per test.

📚 Path Aliases

Use these convenient path aliases instead of relative imports:

import { Logo } from '$c/Logo';              // $c or $components
import { Link } from '$ui/Link';             // $ui
import { theme } from '$s/theme';            // $s or $stores
import { formatDate } from '$u/core';        // $u or $utils
import * as m from '$lib/paraglide/messages'; // i18n
import { projects } from '$content/projects'; // $content

🔍 SEO & Meta Tags

• Meta Tags - Title, description, keywords, author
• Open Graph - Social media preview optimization
• Twitter Card - Custom social media cards
• Canonical URLs - Prevent duplicate content issues
• hreflang Tags - Multi-language SEO support
• Robots.txt - Crawler instructions with sitemap reference
• Sitemap.xml - Dynamic sitemap generation
• Security.txt - Security contact information

📝 Commit Conventions

Follow Conventional Commits:

feat: add new feature
fix: resolve bug
docs: update documentation
refactor: improve code structure
test: add or update tests

Always include footer with collaboration attribution.

📄 License & Attribution

Created by LudoLoops as a full-stack developer portfolio.

🤝 Contributing

This is a personal portfolio project, but contributions and feedback are welcome!

1. Create a feature branch
2. Make changes following commit conventions
3. Run npm run check and npm run test to validate
4. Submit a pull request with detailed description

📞 Contact & Links

• Website: https://lelab.dev
• GitHub: https://github.com/ludoloops
• Security: See static/.well-known/security.txt

---

For detailed architecture and development guidelines, see CLAUDE.md.