LifeSpent

A quiet reflection on time. No judgment, just math.

LifeSpent is a minimalist web application designed to show you exactly how much of your life has already passed, based on your age, average life expectancy, and population median age. It is built to break the illusion of "infinite youth" and encourage a calm, intentional approach to the time we have left.

✨ Key Notes

• Defaults: Average life expectancy is 75.37 for men and 80.88 for women; global population median age is 31.1 (modifiable in code).
• Tone: Calm, reflective, and restrained — no motivation, no judgment.
• Privacy: No accounts, no tracking, just math.

🕊️ Philosophy

LifeSpent is not a motivational tool, nor is it a memento mori designed to evoke fear. It is a mirror held up to time.

• Objective Reality: We use real actuarial data (average life expectancy: 75.37 for men, 80.88 for women; global population median age: 31.1 by default).
• Ceremonial Design: A dark, modern interface that prioritizes clarity and reflection.
• Zero Friction: No accounts, no tracking, just the numbers.

🛠️ Tech Stack

Built with a focus on performance, type safety, and modern standards:

• Frontend: Svelte 4
• Language: TypeScript
• Styling: Tailwind CSS
• Build Tool: Vite

🚀 Getting Started

Prerequisites

• Node.js (Latest LTS recommended)
• npm or pnpm

Setup

# Clone the repository
git clone https://github.com/nicejade/life-spent.git
cd life-spent

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

🔗 Live Demo

https://spent.lovejade.cn/

🌐 Access

• Local Development: Run npm run dev and open http://localhost:5173.
• Production Build: Run npm run build, then deploy dist/ to your static host.
• Hosting Options: Any static host works (Vercel, Netlify, GitHub Pages, etc.).

📂 Project Structure

src/
├── helper/            # Core logic, constants, and utilities
├── types/             # TypeScript type definitions
├── components/        # Svelte UI components
├── assets/icons/      # SVG icons (check, github, moon, selector, sun)
├── styles/            # Minimal global styles
├── App.svelte         # Main application entry
└── main.ts            # Bootstrapping

🎨 Design Principles

• Restraint: Minimalist copy and steady typography.
• Glassmorphism: Elegant, translucent cards for a layered, modern feel.
• Accessibility: Semantic HTML and full ARIA support by default.
• Responsive: Mobile-first design for reflection on the go.

🤝 Contributing

We welcome thoughtful, minimal contributions that respect the product's reflective tone.

• Open an issue first for substantial changes to confirm direction.
• Fork and branch off main, then submit a focused PR.
• Keep logic in lib/ and UI in src/ components.
• Add tests where logic changes (test setup may be minimal, but leave test-ready structure).
• Follow the existing style: Tailwind utilities, minimal custom CSS.

📜 License

MIT. See LICENSE.

Built with care to remind us that every second counts.

Copyright (c) 2026-present, nicejade.