# Hello, Bambicim Blog ✨

Hi, I’m **Bambi**. This is my build-in-public notebook for **Bambicim**—a small studio that ships friendly software with a pink bow and a serious core. Expect design notes, engineering write-ups, tiny launches, and honest post-mortems. The vibe is gentle; the standards are not.

---

## What this blog is (and isn’t)

**Is:**
- A transparent changelog of craft: color systems, motion rules, and component patterns you can copy.
- Engineering diaries about streaming, retrieval, caching, and performance budgets that keep the site calm.
- Notes on accessibility that go beyond “check the box.”

**Isn’t:**
- A feed of empty announcements or model-drop hype.
- Pixel-perfect screenshots without the “why.”

If a post doesn’t teach something concrete, it doesn’t ship.

---

## The four rules I build by

### 1) Playful design, serious readability
Pink is the brand color, not a readability color. Copy sits on neutrals with strong contrast, while pink lives in edges—borders, focus rings, shadows, and micro-highlights. If a gradient ever fights the words, the words win.

### 2) Fast by default
Pages should feel instant on a normal laptop and okay on a tired phone. My working budget: **<170KB** gzipped critical path (CSS+JS), lazy-loaded images with explicit width/height to prevent layout shift, and SSE for streaming so the UI never feels stuck.

### 3) Accessibility is a feature
Typographic scale via `clamp()`, keyboard-first navigation, visible focus rings, and `prefers-reduced-motion: reduce` respected across the board. “Pretty” is incomplete without “reachable.”

### 4) Privacy & honesty
Minimal logs, no secret hoarding. Grounded answers in the Copilot with sources or a graceful “I don’t know.” The site should be as trustworthy as it is cute.

---

## What I’m building here

- **The Blog** you’re reading: long-form write-ups and tiny notes.
- **Bambicim Copilot:** a calm helper with **SSE** streaming and **hybrid retrieval** (BM25 + vectors) that cites sources.
- **Bambicim Game:** a tiny, cozy toy that’ll get a scoreboard and a 30-second zen mode.
- **Work/Portfolio:** selected projects with honest trade-offs and metrics.

You can explore from the header; everything shares the same design system and accessibility rules.

---

## How posts are made (process)

1. **Problem first.** Start with the friction (e.g., blog images routing, manifest 500s, slow first token).
2. **Constraint & rule.** Write the guardrail I’m adopting (budgets, tokens, or a11y rule).
3. **Small diff.** Show the change—code, tokens, or screenshots—with context.
4. **Measure.** Note a number: size, latency, CLS, or contrast.
5. **Next step.** End with one improvement I can ship within a week.

This rhythm keeps the blog useful and keeps me shipping.

---

## Colophon (aka the stack)

- **Django 4.x** with the world’s best admin.
- **Postgres** (+ `pgvector` when needed) for retrieval; simple full-text for keywords.
- **WhiteNoise** for static; a tiny media route for uploads.
- **Render** for deploys.
- **SSE** for chat streaming—smaller, simpler, and proxy-friendly.

If you want detailed code, the Copilot post goes deep.

---

## House style (for fellow designers/devs)

- **Tokens** live in one file and match Figma names (color, radius, easing, time).
- **Focus** is pretty *and* obvious: soft pink ring on dark surfaces.
- **Motion** is seasoning, not the meal—150–220ms, no parallax, micro-scale ≤ 1.02.
- **Images** ship with AVIF/WebP + PNG fallback, `decoding="async"` and size attributes.
- **Headings** have verbs; excerpts promise value, not vibes.

---

## Week-zero wins

- Fixed media routing and static manifest issues so covers render everywhere and social cards never 404.
- Added width/height to all post images to remove layout shift.
- Wrote the first pass of **Design Notes: Princess-Pink, but Accessible** and **Building a Calm Copilot**—both practical, both copy-pasteable.

---

## What’s next

- **Theme knobs:** seasonal palettes (lavender or warm peach) without breaking contrast.
- **Copilot “why this source”** tooltips that highlight matching sentences.
- **Public component library:** buttons, cards, badges with docs so I (and maybe you) can ship faster.
- **Tiny eval harness** for the Copilot to track answer quality over time.

---

## Follow along & say hi

- There’s an **RSS** feed at `/blog/rss`.
- The **Let’s talk** page is open for a11y reports, feature requests, or just kind words.
- If a post helped you, sharing a link genuinely helps this project grow.

Thanks for reading. The plan is simple: **soft aesthetics, hard standards**—built with love, a little glitter, and a lot of care. 💗