📍 You are here: Ship Features With Quality Gates

┌─────────────────────────────────────────────────┐
│  1. Discovery    → Understand before you code   │
│  2. Build        → Collaborate with AI          │
│  3. Test         → Prove it works               │
│  4. Preview      → Catch issues before users    │
│  5. Document     → Leave breadcrumbs            │
└─────────────────────────────────────────────────┘

# Work Order: Field Notes Section

## Goal
Add a section to the homepage that shows my recent learning notes,
organized by topic (psychology, cyber, AI).

## Deliverables
- [ ] FieldNotesSection component
- [ ] Data file with sample notes
- [ ] Basic tests
- [ ] Documentation update

## Constraints
- Mobile-friendly (single column on phones)
- Accessible (keyboard navigation works)
- Matches existing color palette

## Data shape
type FieldNote = {
  id: string;
  date: string;
  topic: 'psychology' | 'cyber' | 'ai';
  title: string;
  summary: string;
};

Context:
- Building a Field Notes section for my portfolio homepage
- Using Next.js, Tailwind CSS, and Framer Motion
- Work order attached: [paste your work order]

Observations:
- Data will live in src/data/fieldNotes.ts
- Need responsive layout (1 column mobile, 2 columns desktop)
- Should animate in when the section scrolls into view

Intention:
- Create a FieldNotesSection component that displays my learning notes
  with topic badges and a clean card layout

Quality bars:
- Accessible (keyboard navigation, good contrast)
- Mobile-first design
- Matches existing Tailwind config colors

Format:
- Show me your plan first
- Then create the component
- Then show what files changed

Ask:
- Walk me through your approach before writing any code

// src/components/home/FieldNotesSection.tsx

type FieldNote = {
  id: string;
  date: string;
  topic: 'psychology' | 'cyber' | 'ai';
  title: string;
  summary: string;
};

type FieldNotesSectionProps = {
  notes: FieldNote[];
};

export function FieldNotesSection({ notes }: FieldNotesSectionProps) {
  return (
    <section className="py-16 px-4">
      <h2 className="text-3xl font-bold mb-8">Field Notes</h2>
      <div className="grid md:grid-cols-2 gap-6">
        {notes.map((note) => (
          <article key={note.id} className="p-6 rounded-xl bg-slate-900/50">
            <span className="text-xs uppercase text-cyan-400">{note.topic}</span>
            <h3 className="text-xl font-semibold mt-2">{note.title}</h3>
            <p className="text-gray-400 mt-2">{note.summary}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

## Tests for FieldNotesSection

1. When I give it notes, it shows each note's title
2. When I give it no notes, it shows "No notes yet"
3. The topic badges display correctly

Using this spec, create a simple test file for FieldNotesSection:
- Renders each note title
- Shows empty state when no notes
- Displays topic badges

Use Vitest and React Testing Library.

// src/components/home/FieldNotesSection.test.tsx

import { render, screen } from '@testing-library/react';
import { FieldNotesSection } from './FieldNotesSection';

const sampleNotes = [
  { id: '1', date: '2025-12-01', topic: 'ai', title: 'Prompt patterns', summary: 'Learning...' },
];

describe('FieldNotesSection', () => {
  it('shows each note title', () => {
    render(<FieldNotesSection notes={sampleNotes} />);
    expect(screen.getByText('Prompt patterns')).toBeInTheDocument();
  });

  it('shows empty state when no notes', () => {
    render(<FieldNotesSection notes={[]} />);
    expect(screen.getByText(/no notes yet/i)).toBeInTheDocument();
  });
});

npm run test

git checkout -b feature/field-notes
git add .
git commit -m "feat: add Field Notes section"
git push origin feature/field-notes

## Preview QA — Field Notes Section

✅ Mobile view (iPhone 12 simulator)
✅ Desktop view (1440px)
✅ Keyboard navigation works
✅ npm run lint — passed
✅ npm run type-check — passed
✅ npm run test — passed
✅ Lighthouse Mobile: 94 / Desktop: 98

Notes: Adjusted card spacing on mobile for better thumb reach.

- `/` — Homepage (includes Field Notes section) ✓

## 2025-12-01 — Field Notes Section

- Added FieldNotesSection component
- 2 tests passing
- Preview: https://my-site-abc123.vercel.app
- Lighthouse: 94/98

Lesson: Writing the data shape first made AI suggestions much better.

## Bug: Cards clipping on Safari

**Error:** Animation cards were getting cut off on Safari
**Cause:** Missing overflow handling on parent container
**Fix:** Added `overflow-visible` to the motion wrapper
**Prevention:** Add Safari to my testing checklist