How khairinkamarizal/portfolio works
khair.ink is a personal portfolio with writing, selected-work, and an AI message experience; the repository also contains substantial finance-ledger and business-card capture features. The main visitor journey is browsing the portfolio and its work or writing, while finance and card capture form distinct application workflows. The sampled finance code confirms dashboard requests, ledger query planning and D1-backed repository behavior; other unsampled routes are shown as capabilities from the tree and README, without assuming their internal call wiring.
Main entry points: app.vue Nuxt App Shell · index.vue Portfolio Home · finance.vue Finance Dashboard · useFinanceDashboard.ts Dashboard State
Components 28
Portfolio
- Nuxt App Shell
app/app.vue - Portfolio Home
app/pages/index.vue - Profile Page
app/pages/about.vue - AI Message
app/pages/message.vue - Contact Form
app/components/ContactForm.vue
Writing And Work
- Work Showcase
app/pages/work.vue - Project Data
app/data/projects.ts - Writing Index
app/pages/writing/index.vue - Writing Post
app/pages/writing/[slug].vue - Writing Content
content.config.ts
Finance Ledger
- Finance Dashboard
app/pages/finance.vue - Dashboard State
app/composables/useFinanceDashboard.ts - Finance Views
app/components/finance/FinanceQuery.vue - Ledger Query API
server/api/finance/query.post.ts - Finance APIs
server/api/finance/transactions.get.ts - Query Planner
server/utils/finance-query.ts - Ledger Repository
server/utils/finance-repository.ts - Finance D1
Card Capture
- Card Capture
app/components/cards/CardCapture.vue - Card Review
app/components/cards/CardReviewForm.vue - Card Scan API
server/api/cards/scan.post.ts - Sheets Export
server/api/cards/sheets/append.post.ts
Server Services
- Gemini API
- Vertex AI
- Google Vision
- Google Sheets
- Browser Storage
Other components
- Site Visitor
Connections 30
- Site Visitor → Nuxt App Shell: opens site
- Nuxt App Shell → Portfolio Home: renders route
- Portfolio Home → Project Data: selects projects
- Portfolio Home → Writing Content: queries recent posts
- Site Visitor → Work Showcase: browses work
- Work Showcase → Project Data: reads projects
- Site Visitor → Writing Index: browses writing
- Writing Index → Writing Content: queries posts
- Site Visitor → Writing Post: opens post
- Writing Post → Writing Content: loads article
- Site Visitor → AI Message: asks question
- AI Message → Gemini API: requests response
- Site Visitor → Contact Form: sends message
- Site Visitor → Finance Dashboard: opens dashboard
- Finance Dashboard → Dashboard State: uses state
- Dashboard State → Finance APIs: fetches ledger data
- Dashboard State → Ledger Query API: submits question
- Finance Dashboard → Finance Views: renders query
- Ledger Query API → Query Planner: plans and executes
- Query Planner → Vertex AI: interprets filters
- Query Planner → Finance D1: queries ledger
- Finance APIs → Ledger Repository: reads and updates
- Ledger Repository → Finance D1: reads and writes
- Site Visitor → Card Capture: scans card
- Card Capture → Card Review: reviews draft
- Card Capture → Card Scan API: submits image
- Card Scan API → Google Vision: extracts text
- Site Visitor → Sheets Export: exports contact
- Sheets Export → Google Sheets: appends record
- Nuxt App Shell → Browser Storage: persists preferences