hinata.io — Personal Brand OS + Admin Studio

telegram_user: 8000278765phase: 1-portfolio-mvpstatus: active

Architecture Overview

hinata.io (or your domain)
├── Public Layer (portfolio site)
│   ├── /home → Career highlights, featured projects
│   ├── /about → Location, awards, upbringing, interests
│   ├── /experience → Professional timeline
│   ├── /projects → Work + personal, separated
│   └── /contact → Email, socials
│
└── Admin Layer (auth-gated, mobile-first)
    ├── /studio/music → Chord charts, presets, iReal Pro sync
    ├── /studio/interview → Record/rerecord tool
    ├── /interview-library → Podcast-style playback (categorised)
    └── /settings → Face ID / password config

Tech stack recommendation: Next.js (React) — portfolio + admin both from same codebase, easy mobile PWA. Supabase (Face ID via WebAuthn + password fallback). Postgres (Supabase) — store interview metadata, chord presets, category tags. S3 or Supabase Storage — audio files. PWA first.

Phase 1: Portfolio Site (4–6 weeks)

MVP deliverable: Public-facing site + login gate.

• Buy domain (Namecheap, Vercel registrar)

• Deploy on Vercel (free tier works, scales with you)

• Single Next.js app, deploy on push

• Static portfolio pages (no backend yet)

• Supabase auth integration (Face ID + password)

Phase 2: Interview Tool (8–10 weeks)

• User selects category (e.g. "Tell me about your data engineering background")

• Record button → starts recording audio (browser MediaRecorder API)

• Latest only — new recording replaces old one (no history retained)

• Metadata saved: category, duration, timestamp

◆ hinata · projects/hinata-architecture/hinata-io-domain-strategy.html · phase-19 conversion