A hormone replacement therapy (HRT) tracking tool built with an industrial-techwear UI inspired by Arknights: Endfield. Record daily medications, track journey milestones, and log status reports with a cyberpunk terminal aesthetic.
- Medication Management — Add, edit, delete medications with dosage, schedule, and frequency tracking
- Daily Check-in — One-click toggle to mark medication as taken, with streak counter
- Journey Stats — Elapsed days/months since HRT start, doses today, streak, and log count
- Status Reports — 6 mood states with kaomoji indicators for daily logging
- Objectives — Set and track personal goals
- Checkup Reminders — Record doctor info and next appointment date
- Boot Sequence — Terminal-style loading animation with scrolling log lines
- Matrix Background — Canvas-based falling characters (katakana + hex) for cyberpunk atmosphere
- Side HUD — Decorative side panels with rulers, barcodes, and coordinate data
- Data Scan Overlay — Holographic scan effect on card hover
- Local Storage — All data persisted in browser localStorage, no account required
| Category | Technology |
|---|---|
| Framework | Next.js 16 |
| UI Library | React 19 |
| Language | TypeScript 5 |
| Styling | Tailwind CSS 4 |
| Components | shadcn/ui (Radix UI + CVA) |
| Icons | Lucide React |
| Fonts | Oswald (headings) + JetBrains Mono (data/terminal) |
# Install dependencies
npm install
# Start dev server
npm devOpen http://localhost:3000.
# Production build
npm run build
# Start production server
npm startsrc/
├── app/
│ ├── globals.css # Theme tokens, animations, card system, HUD styles
│ ├── layout.tsx # Root layout (fonts, Navbar, Footer, SideHUD, MatrixBackground)
│ └── page.tsx # Main SPA (state management, all feature components)
├── components/
│ ├── Navbar.tsx # Fixed top nav with system status indicator
│ ├── Footer.tsx # Bottom bar with version and sys status
│ ├── MatrixBackground.tsx # Canvas matrix rain effect
│ ├── LoadingOverlay.tsx # Boot sequence animation with log lines
│ ├── ScrambleText.tsx # Text decode/scramble animation
│ ├── SideHUD.tsx # Decorative side panels (rulers, barcodes, coords)
│ ├── ThemeProvider.tsx # Theme context (dark/light/system)
│ ├── ThemeToggle.tsx # Theme cycle button
│ └── ui/ # shadcn/ui primitives
│ ├── button.tsx
│ ├── card.tsx
│ ├── input.tsx
│ └── textarea.tsx
└── lib/
└── utils.ts # cn() utility (clsx + tailwind-merge)
The UI treats the application as a fictional operating system ("HRT_SYSTEM_01"). All interactions are framed as system operations:
- Navigation becomes module access with
SYS: ONLINEstatus - Loading becomes a boot sequence with scrolling kernel logs
- Cards feature corner bracket decorations and yellow scan-line hover effects
- Buttons use clip-path cut corners with slide-in yellow fill
- Side HUD panels show rulers, barcodes, and coordinate data
- Color palette: near-black
#09090bbase with industrial yellow#FCEE21accent
- Edit theme tokens in
src/app/globals.css(@theme inlineblock) - Modify mood configurations in
src/app/page.tsx(MOOD_CONFIG) - Adjust boot sequence logs in
src/components/LoadingOverlay.tsx(DEFAULT_LOGS)
MIT