Family Tree

A password-protected, interactive family tree deployed as a static site on Surge.

Tech stack

• Svelte 5 — UI components with runes-based reactivity
• Vite 8 — build tool and dev server
• D3 v7 — tree layout, SVG rendering, zoom/pan
• StatiCrypt — client-side AES password encryption
• Surge.sh — static hosting
• svelte-i18n — Italian / English language switching

Features

• Interactive tree — zoom, pan, expand/collapse, and auto-fit to the viewport.
• Couple support — each node can hold one person or a couple joined by a heart icon.
• Person modal — click any person to see photo, full name, age, birth date, and cities.
• Photos & avatars — use local files in public/photos/ or external URLs; missing photos fall back to deterministic DiceBear avatars.
• Bloodline indicator — a blue-to-pink ring marks family bloodline members.
• Search — find any family member and auto-zoom to them, expanding ancestors along the way.
• Themes — switch between light and dark modes; preference is persisted.
• Bilingual UI — toggle between Italian and English; choice is persisted.
• Password protection — the published page is encrypted with StatiCrypt; the app runs only after the correct password is entered.

Setup

1. Install dependencies:

   npm install

2. Copy .env.example to .env and configure:

   cp .env.example .env

   VITE_FAMILY_NAME=Your Family
   SURGE_DOMAIN=your-domain.surge.sh
   PASSWORD=your-password

Data

Edit src/data/treeData.ts:

export const PEOPLE = {
  john: {
    name: "John",
    surname: "Doe",
    gender: "male",
    bloodline: true,
    birthDate: "1940-05-12",
    currentCity: "Milano",
    originCity: "Bologna",
    photo: "john.jpg",      // local file in public/photos/ or external URL
  },
};

export const TREE = {
  people: ["john", "jane"],
  root: true,
  children: [
    { people: ["bob", "alice"], children: [...] },
  ],
};

• bloodline: true shows a blue-to-pink ring around the avatar.
• photo falls back to a deterministic DiceBear avatar if missing.
• Tree cards display name; the modal shows name and surname.

Build & deploy

npm run dev        # local dev server
make build         # production build + encryption
make publish       # build + deploy to Surge

make build:

1. Bundles with Vite into dist/.
2. Encrypts dist/index.html with StatiCrypt using PASSWORD.

make publish runs make build, then writes dist/CNAME from SURGE_DOMAIN and deploys to Surge.

To test the encrypted build locally, serve dist/ over HTTP. Opening dist/index.html directly with file:// will fail due to browser CORS restrictions.

npm run preview

Password protection

The published page is encrypted with StatiCrypt. Visitors must enter the password; the page is decrypted in the browser before any app code runs.