First:  - Take what you've learned about these playbooks and generate a new playbook for a graphic design project. These are often projects such as making a series of flyers for an event, taking infor…


TodoWrite

Build Graphic Design Playbook

Add queue button and sidebar to Standard3

Adding queue button and sidebar to Standard3

Add Podcast and Graphic Design Playbook cards to Dashboard (defer podcast — waiting for equipment list)

Audit and normalize headers across all pages

Add artifact timestamp display to all playbooks

Add search and filter to Standard1 and Standard5 artifact cards

Adding search and filter to Standard pages


Todos have been modified successfully. Ensure that you continue to use the todo list to track your progress. Please proceed with the current tasks if applicable

Build Graphic Design Playbook

Add queue button and sidebar to Standard3

Adding queue button and sidebar to Standard3

Add Podcast Playbook card to Dashboard (defer — waiting for equipment list)

Audit and normalize headers across all pages

Add artifact timestamp display to all playbooks

Add search and filter to Standard1 and Standard5 artifact cards

Adding search and filter to Standard pages

Build Graphic Design Playbook

Add Podcast and Graphic Design Playbook cards to Dashboard (defer podcast — waiting for equipment list)


Graphic Design Playbook done. Now fixing Standard3's missing queue button — it needs the sidebar HTML, sidebar CSS, and toggle wiring that Standard1 and Standard5 have.


20
21	        body { font-family: 'Inter', sans-serif; margin: 0; background-color: var(--light-bg); color: #333; padding-top: var(--nav-height); }
22
23	        .app-shell { display: flex; min-height: calc(100vh - var(--nav-height)); }
24
25	        /* --- GLOBAL NAVIGATION --- */
26	        .main-nav {
27	            background: var(--primary);
28	            height: var(--nav-height);
29	            width: 100%;
30	            position: fixed;
31	            top: 0;
32	            left: 0;
33	            z-index: 1000;
34	            display: flex;
35	            align-items: center;
36	            border-bottom: 4px solid var(--secondary);
37	            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
38	        }
39	        .main-nav .nav-container {
40	            max-width: 100%;
41	            margin: 0 auto;
42	            width: 100%;
43	            display: flex;
44	            justify-content: space-between;
45	            align-items: center;
46	            padding: 0 20px;
47	        }
48	        .nav-logo-link {
49	            display: flex;

        body { font-family: 'Inter', sans-serif; margin: 0; background-color: var(--light-bg); color: #333; padding-top: var(--nav-height); }

        .app-shell { display: flex; min-height: calc(100vh - var(--nav-height)); }

        /* --- GLOBAL NAVIGATION --- */
        .main-nav {
            background: var(--primary);
            height: var(--nav-height);
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
            display: flex;
            align-items: center;
            border-bottom: 4px solid var(--secondary);
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
        }
        .main-nav .nav-container {
            max-width: 100%;
            margin: 0 auto;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        .nav-logo-link {
            display: flex;


55	        .nav-links { display: flex; gap: 10px; }
56	        .nav-links a {
57	            color: rgba(255,255,255,0.9);
58	            text-decoration: none;
59	            font-size: 0.8rem;
60	            font-weight: 700;
61	            padding: 8px 14px;
62	            border-radius: 6px;
63	            text-transform: uppercase;
64	            letter-spacing: 0.03em;
65	            transition: all 0.2s;
66	        }
67	        .nav-links a:hover { color: var(--secondary); background: rgba(255,255,255,0.1); }
68	        .nav-links a.active { background: var(--secondary); color: var(--primary); }
69
70	        /* ── SIDEBAR ── */
71	        .sidebar {
72	            width: 280px;
73	            min-width: 280px;
74	            background: white;
75	            border-right: 1px solid #E5E7EB;
76	            position: sticky;
77	            top: var(--nav-height);
78	            height: calc(100vh - var(--nav-height));
79	            overflow-y: auto;
80	            display: flex;
81	            flex-direction: column;
82	            flex-shrink: 0;
83	        }
84	        .sidebar-header { padding: 20px 18px 16px; border-bottom: 1px solid #E5E7EB; }
85	        .sidebar-std-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: #6B7280; margin-bottom: 4px; }
86	        .sidebar-std-title { font-size: 1rem; font-weight: 800; color: var(--primary); line-height: 1.3; margin-bottom: 14px; }
87	        .progress-bar-wrap { background: #E5E7EB; border-radius: 4px; height: 6px; overflow: hidden; margin-bottom: 6px; }
88	        .progress-bar-fill { height: 100%; background: var(--secondary); border-radius: 4px; transition: width 0.4s; }
89	        .progress-label { font-size: 0.72rem; color: #6B7280; }
90	        .phase-group { padding: 8px 0; border-bottom: 1px solid #F3F4F6; }
91	        .sidebar-phase-label {
92	            font-size: 0.68rem;
93	            font-weight: 800;
94	            text-transform: uppercase;
95	            letter-spacing: 0.1em;
96	            padding: 6px 18px 4px;
97	            color: var(--primary);
98	            display: block;
99	            opacity: 0.6;
100	        }
101	        .step-btn {
102	            display: flex;
103	            align-items: center;
104	            gap: 10px;
105	            width: 100%;
106	            padding: 10px 18px;
107	            background: none;
108	            border: none;
109	            cursor: pointer;
110	            text-align: left;
111	            font-family: inherit;
112	            font-size: 0.84rem;
113	            color: #374151;
114	            border-left: 3px solid transparent;
115	            transition: all 0.15s;
116	            font-weight: 500;
117	        }
118	        .step-btn:hover { background: #F9FAFB; }
119	        .step-btn.active { background: #FBF5FF; border-left-color: var(--primary); color: var(--primary); font-weight: 700; }
120	        .step-btn.done .step-check { background: #10B981; border-color: #10B981; }
121	        .step-btn.done .step-check::after { content: '✓'; }
122	        .step-check {
123	            width: 18px; height: 18px;
124	            border-radius: 50%;
125	            border: 2px solid #D1D5DB;
126	            flex-shrink: 0;
127	            display: flex; align-items: center; justify-content: center;
128	            font-size: 0.6rem;
129	            color: white;
130	            transition: all 0.2s;
131	        }
132	        .step-name { flex: 1; line-height: 1.3; }
133	        .sidebar-footer { margin-top: auto; padding: 14px 16px; border-top: 1px solid #E5E7EB; }
134	        .btn-reset {

        .nav-links { display: flex; gap: 10px; }
        .nav-links a {
            color: rgba(255,255,255,0.9);
            text-decoration: none;
            font-size: 0.8rem;
            font-weight: 700;
            padding: 8px 14px;
            border-radius: 6px;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            transition: all 0.2s;
        }
        .nav-links a:hover { color: var(--secondary); background: rgba(255,255,255,0.1); }
        .nav-links a.active { background: var(--secondary); color: var(--primary); }

        /* ── SIDEBAR ── */
        .sidebar {
            width: 280px;
            min-width: 280px;
            background: white;
            border-right: 1px solid #E5E7EB;
            position: sticky;
            top: var(--nav-height);
            height: calc(100vh - var(--nav-height));
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
        }
        .sidebar-header { padding: 20px 18px 16px; border-bottom: 1px solid #E5E7EB; }
        .sidebar-std-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: #6B7280; margin-bottom: 4px; }
        .sidebar-std-title { font-size: 1rem; font-weight: 800; color: var(--primary); line-height: 1.3; margin-bottom: 14px; }
        .progress-bar-wrap { background: #E5E7EB; border-radius: 4px; height: 6px; overflow: hidden; margin-bottom: 6px; }
        .progress-bar-fill { height: 100%; background: var(--secondary); border-radius: 4px; transition: width 0.4s; }
        .progress-label { font-size: 0.72rem; color: #6B7280; }
        .phase-group { padding: 8px 0; border-bottom: 1px solid #F3F4F6; }
        .sidebar-phase-label {
            font-size: 0.68rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            padding: 6px 18px 4px;
            color: var(--primary);
            display: block;
            opacity: 0.6;
        }
        .step-btn {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 10px 18px;
            background: none;
            border: none;
            cursor: pointer;
            text-align: left;
            font-family: inherit;
            font-size: 0.84rem;
            color: #374151;
            border-left: 3px solid transparent;
            transition: all 0.15s;
            font-weight: 500;
        }
        .step-btn:hover { background: #F9FAFB; }
        .step-btn.active { background: #FBF5FF; border-left-color: var(--primary); color: var(--primary); font-weight: 700; }
        .step-btn.done .step-check { background: #10B981; border-color: #10B981; }
        .step-btn.done .step-check::after { content: '✓'; }
        .step-check {
            width: 18px; height: 18px;
            border-radius: 50%;
            border: 2px solid #D1D5DB;
            flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.6rem;
            color: white;
            transition: all 0.2s;
        }
        .step-name { flex: 1; line-height: 1.3; }
        .sidebar-footer { margin-top: auto; padding: 14px 16px; border-top: 1px solid #E5E7EB; }
        .btn-reset {


140	            border-radius: 8px;
141	            font-family: inherit;
142	            font-size: 0.78rem;
143	            font-weight: 700;
144	            cursor: pointer;
145	            transition: all 0.2s;
146	        }
147	        .btn-reset:hover { background: #FEE2E2; }
148
149	        /* Main Content */
150	        main { flex-grow: 1; padding: 60px; }
151	        .section { display: none; max-width: 1000px; animation: fadeIn 0.3s ease-out; }
152	        .section.active { display: block; }
153	        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
154
155	        h2 { color: var(--apex-navy); font-size: 2.2rem; margin-top: 0; font-weight: 800; margin-bottom: 25px; }
156
157	        /* Overview & Callout Boxes */
158	        .overview-card { background: white; border: 2px solid var(--waukee-gold); border-radius: 12px; padding: 30px; margin-bottom: 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
159	        .overview-item h4 { margin: 0 0 10px 0; color: var(--waukee-purple); font-size: 0.9rem; text-transform: uppercase; }
160	        .overview-item p { margin: 0; font-size: 0.85rem; line-height: 1.4; color: #555; }
161
162	        .callout { padding: 20px; border-radius: 8px; margin-bottom: 25px; border-left: 5px solid; display: flex; align-items: center; gap: 15px; font-weight: 500; font-size: 0.95rem; }
163	        .callout-blue { background: #e3f2fd; border-color: #2196f3; color: #0d47a1; }
164	        .callout-red { background: #fdeaea; border-color: #f44336; color: #b71c1c; }
165	        .callout-green { background: #f1f8e9; border-color: #689f38; color: #2e7d32; }
166	        .callout-yellow { background: #fff9c4; border-color: #fbc02d; color: #827717; }
167
168	        /* Cards */
169	        .card { background: var(--white); border-radius: 12px; padding: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 25px; border-top: 1px solid #eee; }
170	        .card h3 { margin-top: 0; color: var(--waukee-purple); font-size: 1.3rem; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
171	        .card-desc { font-size: 0.9rem; color: #666; margin-bottom: 20px; line-height: 1.4; }
172
173	        .bookmark-btn {
174	            background: #FEF3C7;
175	            color: #92400E;
176	            border: 1px solid #FDE68A;
177	            font-size: 0.7rem;
178	            padding: 4px 8px;
179	            border-radius: 4px;
180	            cursor: pointer;
181	            margin-left: auto;
182	            transition: 0.2s;
183	        }
184	        .bookmark-btn:hover { background: #92400E; color: white; }
185
186	        /* Form Elements */
187	        .selection-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
188	        .pill { padding: 10px 20px; background: #fff; border: 2px solid var(--border); border-radius: 50px; cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: 0.2s; }
189	        .pill.selected { background: var(--waukee-purple); color: white; border-color: var(--waukee-purple); }

            border-radius: 8px;
            font-family: inherit;
            font-size: 0.78rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-reset:hover { background: #FEE2E2; }

        /* Main Content */
        main { flex-grow: 1; padding: 60px; }
        .section { display: none; max-width: 1000px; animation: fadeIn 0.3s ease-out; }
        .section.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        h2 { color: var(--apex-navy); font-size: 2.2rem; margin-top: 0; font-weight: 800; margin-bottom: 25px; }

        /* Overview & Callout Boxes */
        .overview-card { background: white; border: 2px solid var(--waukee-gold); border-radius: 12px; padding: 30px; margin-bottom: 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .overview-item h4 { margin: 0 0 10px 0; color: var(--waukee-purple); font-size: 0.9rem; text-transform: uppercase; }
        .overview-item p { margin: 0; font-size: 0.85rem; line-height: 1.4; color: #555; }

        .callout { padding: 20px; border-radius: 8px; margin-bottom: 25px; border-left: 5px solid; display: flex; align-items: center; gap: 15px; font-weight: 500; font-size: 0.95rem; }
        .callout-blue { background: #e3f2fd; border-color: #2196f3; color: #0d47a1; }
        .callout-red { background: #fdeaea; border-color: #f44336; color: #b71c1c; }
        .callout-green { background: #f1f8e9; border-color: #689f38; color: #2e7d32; }
        .callout-yellow { background: #fff9c4; border-color: #fbc02d; color: #827717; }

        /* Cards */
        .card { background: var(--white); border-radius: 12px; padding: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 25px; border-top: 1px solid #eee; }
        .card h3 { margin-top: 0; color: var(--waukee-purple); font-size: 1.3rem; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
        .card-desc { font-size: 0.9rem; color: #666; margin-bottom: 20px; line-height: 1.4; }

        .bookmark-btn {
            background: #FEF3C7;
            color: #92400E;
            border: 1px solid #FDE68A;
            font-size: 0.7rem;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            margin-left: auto;
            transition: 0.2s;
        }
        .bookmark-btn:hover { background: #92400E; color: white; }

        /* Form Elements */
        .selection-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
        .pill { padding: 10px 20px; background: #fff; border: 2px solid var(--border); border-radius: 50px; cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: 0.2s; }
        .pill.selected { background: var(--waukee-purple); color: white; border-color: var(--waukee-purple); }


I have a good enough picture of Standard3. I need to add:
1. The Work Queue sidebar CSS (same as Standard1 and Standard5)
2. The Work Queue sidebar HTML (before the nav)
3. A "📌 Queue" button in the nav links
4. Toggle functions in the JS

Let me also check what the nav currently looks like in Standard3.

From the earlier read:
- line 150: `main { flex-grow: 1; padding: 60px; }`
- The `body` has `padding-top: var(--nav-height)`

I need to add:

Standard3 already uses `.sidebar` for its navigation panel, so I can't reuse that class name for the queue drawer like Standard1 and Standard5 do. I'll need to use `.queue-sidebar` instead to avoid the naming conflict. I'm checking Standard3's CSS variables and confirming that `--sidebar-width` isn't defined there, so I can safely add it for the queue drawer without conflicts. The navigation sidebar has a fixed 280px width, while the queue drawer will need different positioning and sizing.

My approach is to add the CSS variable, create a separate `.queue-drawer` class to avoid naming collisions, update the body padding with a new `.body-queue-open` class, and then add the corresponding HTML and JavaScript functions. I notice Standard3 already has an `addToQueue` function in its code, so I need to check what's already implemented there.

Looking at the existing `addToQueue` function, it stores queue items in localStorage with an ID, title, URL, description, and timestamp. Since Standard3 already has this storage mechanism in place, I just need to add the UI sidebar to display and manage the queue items. Now I need to find where the nav section is in Standard3 so I can add the queue button there.


Good — Standard3 already has `addToQueue` wired up but no sidebar to display it. I need to add the queue drawer CSS, HTML, nav button, and display functions without colliding with the existing `.sidebar` navigation class.


282	            <button class="step-btn" id="btn-outreach" onclick="showSection('outreach')">
283

284	                🤝 Local Connections
285	            </button>
286

287
288

289	            <button class="btn-reset" onclick="clearData()">Clear All Data</button>
290

291
292
293
294

295
Phase 1: Discovery

296
297

298

1. Self-Discovery

Map your Work Values, Activity Interests, and Skill Levels. Reflection here is the fuel for the rest of the process.

299

2. AI Synthesis

Translate your DNA into 10-15 specific career paths using deep-linked AI prompts. Refine these results with Russ.

300

3. Career Deep Dive

Validate your ideas by researching "Day-in-the-Life" profiles and macro industry trends for your top choices.

301

4. Making Connections

Move from theory to reality by finding 5 local professionals in Des Moines for shadows or interviews.

302

303
304

305
❤ Work Values

306
Identify the core motivations that drive your career satisfaction. What matters most to you in a job? (Select up to 3)

307

308	                <textarea id="ref-values" rows="2" placeholder="Why did you choose these top 3 values? Give an example of why they matter to you." oninput="autoSave()"></textarea>
309

310
311

<button class="step-btn" id="btn-outreach" onclick="showSection('outreach')">

                🤝 Local Connections
            </button>

            <button class="btn-reset" onclick="clearData()">Clear All Data</button>

Phase 1: Discovery

1. Self-Discovery

Map your Work Values, Activity Interests, and Skill Levels. Reflection here is the fuel for the rest of the process.

2. AI Synthesis

Translate your DNA into 10-15 specific career paths using deep-linked AI prompts. Refine these results with Russ.

3. Career Deep Dive

Validate your ideas by researching "Day-in-the-Life" profiles and macro industry trends for your top choices.

4. Making Connections

Move from theory to reality by finding 5 local professionals in Des Moines for shadows or interviews.

❤ Work Values

Identify the core motivations that drive your career satisfaction. What matters most to you in a job? (Select up to 3)

                <textarea id="ref-values" rows="2" placeholder="Why did you choose these top 3 values? Give an example of why they matter to you." oninput="autoSave()"></textarea>


224	        a { color: var(--waukee-purple); font-weight: 700; text-decoration: underline; }
225	    </style>
226
227
228
229
230

231
232
233
234

235	            Dashboard
236	            S1
237	            S2
238	            S3
239	            S4
240	            S5
241

242

243
244
245

246
247

248
Waukee APEX · Standard 3

249
Critical Thinking & Problem Solving

250

251

252

253
0 of 4 phases complete

a { color: var(--waukee-purple); font-weight: 700; text-decoration: underline; }
    </style>

            Dashboard
            S1
            S2
            S3
            S4
            S5

Waukee APEX · Standard 3

Critical Thinking & Problem Solving

0 of 4 phases complete


Now I have everything I need. I'll add the queue drawer CSS, HTML, nav button, and JS in one pass.


Edit

        a { color: var(--waukee-purple); font-weight: 700; text-decoration: underline; }
    </style>

        a { color: var(--waukee-purple); font-weight: 700; text-decoration: underline; }

        /* ── WORK QUEUE DRAWER ── */
        :root { --queue-width: 300px; }
        body { transition: padding-left 0.3s; }
        .body-queue-open { padding-left: calc(var(--queue-width) + 20px); }
        .queue-drawer {
            position: fixed; left: 0; top: var(--nav-height); bottom: 0;
            width: var(--queue-width); background: var(--white);
            border-right: 1px solid #E5E7EB; box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            transform: translateX(-100%); transition: transform 0.3s ease;
            z-index: 998; overflow-y: auto;
        }
        .queue-drawer.open { transform: translateX(0); }
        .queue-drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #E5E7EB; background: var(--primary); color: white; position: sticky; top: 0; z-index: 1; }
        .queue-drawer-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
        #closeQueue { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 5px; border-radius: 4px; transition: background 0.2s; }
        #closeQueue:hover { background: rgba(255,255,255,0.1); }
        .queue-list { padding: 16px; }
        .queue-item { border: 1px solid #E5E7EB; border-radius: 8px; padding: 14px; margin-bottom: 10px; background: #F9FAFB; position: relative; }
        .queue-item a { text-decoration: none; color: var(--primary); font-weight: 600; display: block; margin-bottom: 4px; font-size: 0.95rem; }
        .queue-item a:hover { color: var(--accent, #4b4f54); }
        .queue-item p { margin: 0; font-size: 0.82rem; color: #6B7280; line-height: 1.4; padding-right: 20px; }
        .queue-item .remove-btn { position: absolute; top: 10px; right: 10px; background: #EF4444; color: white; border: none; border-radius: 4px; width: 20px; height: 20px; cursor: pointer; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }
        .queue-item .remove-btn:hover { background: #DC2626; }
        .empty-queue { text-align: center; color: #6B7280; font-style: italic; padding: 40px 20px; font-size: 0.9rem; }
    </style>


The file /Users/russgoerend/Desktop/Portfolio HTMLs/Standard3.html has been updated successfully. (file state is current in your context — no need to Read it back)

        a { color: var(--waukee-purple); font-weight: 700; text-decoration: underline; }
    </style>

        a { color: var(--waukee-purple); font-weight: 700; text-decoration: underline; }

        /* ── WORK QUEUE DRAWER ── */
        :root { --queue-width: 300px; }
        body { transition: padding-left 0.3s; }
        .body-queue-open { padding-left: calc(var(--queue-width) + 20px); }
        .queue-drawer {
            position: fixed; left: 0; top: var(--nav-height); bottom: 0;
            width: var(--queue-width); background: var(--white);
            border-right: 1px solid #E5E7EB; box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            transform: translateX(-100%); transition: transform 0.3s ease;
            z-index: 998; overflow-y: auto;
        }
        .queue-drawer.open { transform: translateX(0); }
        .queue-drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #E5E7EB; background: var(--primary); color: white; position: sticky; top: 0; z-index: 1; }
        .queue-drawer-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
        #closeQueue { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 5px; border-radius: 4px; transition: background 0.2s; }
        #closeQueue:hover { background: rgba(255,255,255,0.1); }
        .queue-list { padding: 16px; }
        .queue-item { border: 1px solid #E5E7EB; border-radius: 8px; padding: 14px; margin-bottom: 10px; background: #F9FAFB; position: relative; }
        .queue-item a { text-decoration: none; color: var(--primary); font-weight: 600; display: block; margin-bottom: 4px; font-size: 0.95rem; }
        .queue-item a:hover { color: var(--accent, #4b4f54); }
        .queue-item p { margin: 0; font-size: 0.82rem; color: #6B7280; line-height: 1.4; padding-right: 20px; }
        .queue-item .remove-btn { position: absolute; top: 10px; right: 10px; background: #EF4444; color: white; border: none; border-radius: 4px; width: 20px; height: 20px; cursor: pointer; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }
        .queue-item .remove-btn:hover { background: #DC2626; }
        .empty-queue { text-align: center; color: #6B7280; font-style: italic; padding: 40px 20px; font-size: 0.9rem; }
    </style>

input[type="text"] { width: 95%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }

+        :root { --queue-width: 300px; }

+        body { transition: padding-left 0.3s; }

+        .body-queue-open { padding-left: calc(var(--queue-width) + 20px); }

+            position: fixed; left: 0; top: var(--nav-height); bottom: 0;

+            width: var(--queue-width); background: var(--white);

+            border-right: 1px solid #E5E7EB; box-shadow: 2px 0 10px rgba(0,0,0,0.1);

+            transform: translateX(-100%); transition: transform 0.3s ease;

+            z-index: 998; overflow-y: auto;

+        .queue-drawer.open { transform: translateX(0); }

+        .queue-drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #E5E7EB; background: var(--primary); color: white; position: sticky; top: 0; z-index: 1; }

+        .queue-drawer-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }

+        #closeQueue { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 5px; border-radius: 4px; transition: background 0.2s; }

+        #closeQueue:hover { background: rgba(255,255,255,0.1); }

+        .queue-item { border: 1px solid #E5E7EB; border-radius: 8px; padding: 14px; margin-bottom: 10px; background: #F9FAFB; position: relative; }

+        .queue-item a { text-decoration: none; color: var(--primary); font-weight: 600; display: block; margin-bottom: 4px; font-size: 0.95rem; }

+        .queue-item a:hover { color: var(--accent, #4b4f54); }

+        .queue-item p { margin: 0; font-size: 0.82rem; color: #6B7280; line-height: 1.4; padding-right: 20px; }

+        .queue-item .remove-btn { position: absolute; top: 10px; right: 10px; background: #EF4444; color: white; border: none; border-radius: 4px; width: 20px; height: 20px; cursor: pointer; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }

+        .queue-item .remove-btn:hover { background: #DC2626; }

+        .empty-queue { text-align: center; color: #6B7280; font-style: italic; padding: 40px 20px; font-size: 0.9rem; }


            Dashboard
            S1
            S2
            S3
            S4
            S5

📌 Work Queue

        <button id="closeQueue">×</button>

No items yet. Bookmark a card to add it here.

            Dashboard
            S1
            S2
            S3
            S4
            S5
            <button id="queueToggle" style="color:rgba(255,255,255,0.9);font-size:0.8rem;font-weight:700;padding:8px 14px;border-radius:6px;text-transform:uppercase;letter-spacing:0.03em;transition:all 0.2s;background:none;border:none;cursor:pointer;">📌 Queue</button>


            Dashboard
            S1
            S2
            S3
            S4
            S5

📌 Work Queue

        <button id="closeQueue">×</button>

No items yet. Bookmark a card to add it here.

            Dashboard
            S1
            S2
            S3
            S4
            S5
            <button id="queueToggle" style="color:rgba(255,255,255,0.9);font-size:0.8rem;font-weight:700;padding:8px 14px;border-radius:6px;text-transform:uppercase;letter-spacing:0.03em;transition:all 0.2s;background:none;border:none;cursor:pointer;">📌 Queue</button>

+        <button id="closeQueue">×</button>

+    <div class="queue-list" id="queueList">

+
No items yet. Bookmark a card to add it here.

+            <button id="queueToggle" style="color:rgba(255,255,255,0.9);font-size:0.8rem;font-weight:700;padding:8px 14px;border-radius:6px;text-transform:uppercase;letter-spacing:0.03em;transition:all 0.2s;background:none;border:none;cursor:pointer;">📌 Queue</button>


Build Graphic Design Playbook

Add queue button and sidebar to Standard3


Now add the queue JS functions to Standard3's script block:


640	            addToQueue(title, 'Standard3.html', desc);
641	            const btn = h3.querySelector('.bookmark-btn');
642	            btn.innerText = '✓ Bookmarked';
643	            btn.style.background = '#10B981';
644	            btn.style.color = 'white';
645	            setTimeout(() => {
646	                btn.innerText = '📌 Bookmark';
647	                btn.style.background = '#FEF3C7';
648	                btn.style.color = '#92400E';
649	            }, 2000);
650	        }
651
652	        function addToQueue(title, url, desc) {
653	            const queue = JSON.parse(localStorage.getItem('apex_work_queue') || '[]');
654	            const id = Date.now().toString();
655	            queue.push({id, title, url, desc, addedAt: new Date().toISOString()});
656	            localStorage.setItem('apex_work_queue', JSON.stringify(queue));
657	        }
658	    </script>
659	</body>

            addToQueue(title, 'Standard3.html', desc);
            const btn = h3.querySelector('.bookmark-btn');
            btn.innerText = '✓ Bookmarked';
            btn.style.background = '#10B981';
            btn.style.color = 'white';
            setTimeout(() => {
                btn.innerText = '📌 Bookmark';
                btn.style.background = '#FEF3C7';
                btn.style.color = '#92400E';
            }, 2000);
        }

        function addToQueue(title, url, desc) {
            const queue = JSON.parse(localStorage.getItem('apex_work_queue') || '[]');
            const id = Date.now().toString();
            queue.push({id, title, url, desc, addedAt: new Date().toISOString()});
            localStorage.setItem('apex_work_queue', JSON.stringify(queue));
        }
    </script>
</body>


        function addToQueue(title, url, desc) {
            const queue = JSON.parse(localStorage.getItem('apex_work_queue') || '[]');
            const id = Date.now().toString();
            queue.push({id, title, url, desc, addedAt: new Date().toISOString()});
            localStorage.setItem('apex_work_queue', JSON.stringify(queue));
        }
    </script>

function addToQueue(title, url, desc) {
            const queue = JSON.parse(localStorage.getItem('apex_work_queue') || '[]');
            const id = Date.now().toString();
            queue.push({id, title, url, desc, addedAt: new Date().toISOString()});
            localStorage.setItem('apex_work_queue', JSON.stringify(queue));
            loadQueue();
        }

        function toggleQueue() {
            const drawer = document.getElementById('queueDrawer');
            const isOpen = drawer.classList.contains('open');
            drawer.classList.toggle('open', !isOpen);
            document.body.classList.toggle('body-queue-open', !isOpen);
        }

        function loadQueue() {
            const queue = JSON.parse(localStorage.getItem('apex_work_queue') || '[]');
            const list = document.getElementById('queueList');
            if (!list) return;
            if (queue.length === 0) {
                list.innerHTML = '
No items yet. Bookmark a card to add it here.
';
                return;
            }
            list.innerHTML = queue.map(item => `

                    ${item.title}

${item.desc || ''}

                    <button class="remove-btn" onclick="removeFromQueue('${item.id}')">×</button>

            `).join('');
        }

        function removeFromQueue(id) {
            const queue = JSON.parse(localStorage.getItem('apex_work_queue') || '[]');
            localStorage.setItem('apex_work_queue', JSON.stringify(queue.filter(i => i.id !== id)));
            loadQueue();
        }

        document.getElementById('queueToggle').addEventListener('click', toggleQueue);
        document.getElementById('closeQueue').addEventListener('click', toggleQueue);
    </script>


        function addToQueue(title, url, desc) {
            const queue = JSON.parse(localStorage.getItem('apex_work_queue') || '[]');
            const id = Date.now().toString();
            queue.push({id, title, url, desc, addedAt: new Date().toISOString()});
            localStorage.setItem('apex_work_queue', JSON.stringify(queue));
        }
    </script>

function addToQueue(title, url, desc) {
            const queue = JSON.parse(localStorage.getItem('apex_work_queue') || '[]');
            const id = Date.now().toString();
            queue.push({id, title, url, desc, addedAt: new Date().toISOString()});
            localStorage.setItem('apex_work_queue', JSON.stringify(queue));
            loadQueue();
        }

        function toggleQueue() {
            const drawer = document.getElementById('queueDrawer');
            const isOpen = drawer.classList.contains('open');
            drawer.classList.toggle('open', !isOpen);
            document.body.classList.toggle('body-queue-open', !isOpen);
        }

        function loadQueue() {
            const queue = JSON.parse(localStorage.getItem('apex_work_queue') || '[]');
            const list = document.getElementById('queueList');
            if (!list) return;
            if (queue.length === 0) {
                list.innerHTML = '
No items yet. Bookmark a card to add it here.
';
                return;
            }
            list.innerHTML = queue.map(item => `

                    ${item.title}

${item.desc || ''}

                    <button class="remove-btn" onclick="removeFromQueue('${item.id}')">×</button>

            `).join('');
        }

        function removeFromQueue(id) {
            const queue = JSON.parse(localStorage.getItem('apex_work_queue') || '[]');
            localStorage.setItem('apex_work_queue', JSON.stringify(queue.filter(i => i.id !== id)));
            loadQueue();
        }

        document.getElementById('queueToggle').addEventListener('click', toggleQueue);
        document.getElementById('closeQueue').addEventListener('click', toggleQueue);
    </script>

+            const drawer = document.getElementById('queueDrawer');

+            const isOpen = drawer.classList.contains('open');

+            drawer.classList.toggle('open', !isOpen);

+            document.body.classList.toggle('body-queue-open', !isOpen);

+            const queue = JSON.parse(localStorage.getItem('apex_work_queue') || '[]');

+            const list = document.getElementById('queueList');

+                list.innerHTML = '
No items yet. Bookmark a card to add it here.
';

+            list.innerHTML = queue.map(item => `

+                <div class="queue-item">

+                    <button class="remove-btn" onclick="removeFromQueue('${item.id}')">×</button>

+            localStorage.setItem('apex_work_queue', JSON.stringify(queue.filter(i => i.id !== id)));

+        document.getElementById('queueToggle').addEventListener('click', toggleQueue);

+        document.getElementById('closeQueue').addEventListener('click', toggleQueue);


Now I need to call `loadQueue()` on page load. Let me find the `window.onload` in Standard3:


Bash

grep -n "window.onload\|loadSidebarState\|loadQueue" "/Users/russgoerend/Desktop/Portfolio HTMLs/Standard3.html"

Find window.onload in Standard3


487:        window.onload = () => {
657:            loadQueue();
667:        function loadQueue() {
687:            loadQueue();


487	        window.onload = () => {
488	            const vGrid = document.getElementById('values-grid');
489	            values.forEach(v => {
490	                let p = document.createElement('div'); p.className = 'pill'; p.innerText = v;
491	                p.onclick = () => toggle(p, 'values', 3); vGrid.appendChild(p);
492	            });
493	            const iGrid = document.getElementById('interests-grid');
494	            interests.forEach(i => {
495	                let p = document.createElement('div'); p.className = 'pill'; p.innerText = i;
496	                p.onclick = () => toggle(p, 'interests', 3); iGrid.appendChild(p);

        window.onload = () => {
            const vGrid = document.getElementById('values-grid');
            values.forEach(v => {
                let p = document.createElement('div'); p.className = 'pill'; p.innerText = v;
                p.onclick = () => toggle(p, 'values', 3); vGrid.appendChild(p);
            });
            const iGrid = document.getElementById('interests-grid');
            interests.forEach(i => {
                let p = document.createElement('div'); p.className = 'pill'; p.innerText = i;
                p.onclick = () => toggle(p, 'interests', 3); iGrid.appendChild(p);


496	                p.onclick = () => toggle(p, 'interests', 3); iGrid.appendChild(p);
497	            });
498	            const sCont = document.getElementById('skills-container');
499	            skills.forEach(s => {
500	                let row = document.createElement('div'); row.className = 'skill-row';
501	                row.innerHTML = `
${s.name}${s.desc}

502
<button class="rate-btn" onclick="rate(this,'${s.name}','Low')">Low</button><button class="rate-btn" onclick="rate(this,'${s.name}','Med')">Med</button><button class="rate-btn" onclick="rate(this,'${s.name}','High')">High</button>
`;
503	                sCont.appendChild(row);
504	            });
505	            load();
506
507	            // Add bookmark buttons to all cards
508	            document.querySelectorAll('.card h3').forEach(h3 => {
509	                const btn = document.createElement('button');
510	                btn.className = 'bookmark-btn';

p.onclick = () => toggle(p, 'interests', 3); iGrid.appendChild(p);
            });
            const sCont = document.getElementById('skills-container');
            skills.forEach(s => {
                let row = document.createElement('div'); row.className = 'skill-row';
                row.innerHTML = `
${s.name}${s.desc}

<button class="rate-btn" onclick="rate(this,'${s.name}','Low')">Low</button><button class="rate-btn" onclick="rate(this,'${s.name}','Med')">Med</button><button class="rate-btn" onclick="rate(this,'${s.name}','High')">High</button>
`;
                sCont.appendChild(row);
            });
            load();

            // Add bookmark buttons to all cards
            document.querySelectorAll('.card h3').forEach(h3 => {
                const btn = document.createElement('button');
                btn.className = 'bookmark-btn';


Edit

            load();

            // Add bookmark buttons to all cards

            load();
            loadQueue();

            // Add bookmark buttons to all cards


            load();

            // Add bookmark buttons to all cards

            load();
            loadQueue();

            // Add bookmark buttons to all cards

document.querySelectorAll('.card h3').forEach(h3 => {


Now add the Graphic Design Playbook card to the dashboard (holding off on Podcast until the equipment list arrives):


452
Playbooks

453

454
455	                Playbook
456
Video Production Workflow

457
Access the full video project playbook and open its built-in project task board from the page.

458
Open Playbook

459
460
461
462	                Playbook
463
Social Media Workflow

464
Launch the social media playbook and manage your project tasks in the playbook task board.

465
Open Playbook

466
467
468
469	                Playbook
470
Marketing Analytics Workflow

471
Open the analytics playbook for data-driven client strategy, reporting, and campaign insight.

472
Open Playbook

473
474

475

476

Playbooks

                Playbook

Video Production Workflow

Access the full video project playbook and open its built-in project task board from the page.

Open Playbook

                Playbook

Social Media Workflow

Launch the social media playbook and manage your project tasks in the playbook task board.

Open Playbook

                Playbook

Marketing Analytics Workflow

Open the analytics playbook for data-driven client strategy, reporting, and campaign insight.

Open Playbook


Build Graphic Design Playbook

Add Podcast and Graphic Design Playbook cards to Dashboard (defer podcast — waiting for equipment list)

Audit and normalize headers across all pages

Add artifact timestamp display to all playbooks

Add search and filter to Standard1 and Standard5 artifact cards


                Playbook

Marketing Analytics Workflow

Open the analytics playbook for data-driven client strategy, reporting, and campaign insight.

Open Playbook

                Playbook

Marketing Analytics Workflow

Open the analytics playbook for data-driven client strategy, reporting, and campaign insight.

Open Playbook

                Playbook

Podcast Production Workflow

Plan, record, edit, and publish a professional podcast episode from concept to distribution.

Open Playbook

                Playbook

Graphic Design Workflow

Guide a design project from client discovery and creative brief through concepts, revisions, and final file delivery.

Open Playbook


The file /Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Dashboard.html has been updated successfully. (file state is current in your context — no need to Read it back)

                Playbook

Marketing Analytics Workflow

Open the analytics playbook for data-driven client strategy, reporting, and campaign insight.

Open Playbook

                Playbook

Podcast Production Workflow

Plan, record, edit, and publish a professional podcast episode from concept to distribution.

Open Playbook

                Playbook

Graphic Design Workflow

Guide a design project from client discovery and creative brief through concepts, revisions, and final file delivery.

Open Playbook

+            <a href="Podcast Production Playbook.html" class="standard-card">

+
Plan, record, edit, and publish a professional podcast episode from concept to distribution.

+            <a href="Graphic Design Playbook.html" class="standard-card">

+
Guide a design project from client discovery and creative brief through concepts, revisions, and final file delivery.


Also add the new playbooks to the dashboard nav links:


371	    </style>
372
373
374
375
376

377
378
379
380

</style>


380

381	            Dashboard
382	            Portfolio
383	            Video Playbook
384	            Social Media
385	            <button id="sidebarToggle" style="color: rgba(255,255,255,0.9); text-decoration: none; font-size: 0.8rem; font-weight: 700; padding: 8px 14px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.03em; transition: all 0.2s ease; background: none; border: none; cursor: pointer;">📌 Queue</button>
386

387

388
389

            Dashboard
            Portfolio
            Video Playbook
            Social Media
            <button id="sidebarToggle" style="color: rgba(255,255,255,0.9); text-decoration: none; font-size: 0.8rem; font-weight: 700; padding: 8px 14px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.03em; transition: all 0.2s ease; background: none; border: none; cursor: pointer;">📌 Queue</button>


Video
            Social
            Podcast
            Design


Video
            Social
            Podcast
            Design

<button id="sidebarToggle" style="color: rgba(255,255,255,0.9); text-decoration: none; font-size: 0.8rem; font-weight: 700; padding: 8px 14px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.03em; transition: all 0.2s ease; background: none; border: none; cursor: pointer;">📌 Queue</button>


TodoWrite

Build Graphic Design Playbook

Add queue button and sidebar to Standard3

Adding queue button and sidebar to Standard3

Add Podcast and Graphic Design Playbook cards to Dashboard

Audit and normalize headers across all pages

Add artifact timestamp display to all playbooks

Add search and filter to Standard1 and Standard5 artifact cards

Adding search and filter to Standard pages


Todos have been modified successfully. Ensure that you continue to use the todo list to track your progress. Please proceed with the current tasks if applicable

Build Graphic Design Playbook

Add queue button and sidebar to Standard3

Build Graphic Design Playbook

Add Podcast and Graphic Design Playbook cards to Dashboard


Three items done. Here's where things stand on the rest of the list:

**✅ Graphic Design Playbook** — 15 steps across 4 phases. Distinct features vs. the other playbooks: CARP principle cards, a file format reference table, a dedicated client review card style (blue border, distinct from yellow mentor checkpoints), emphasis on documenting revision scope, and a "never show one concept" callout.

**✅ Standard3 queue button** — Added the 📌 Queue nav button, slide-out drawer, and JS functions. Uses `.queue-drawer` class to avoid colliding with Standard3's existing `.sidebar` nav class.

**✅ Dashboard updated** — Podcast and Graphic Design cards added to the Playbooks section. Nav links shortened (Video, Social, Podcast, Design) to keep the bar clean.

**⏳ Podcast dashboard** — stub card is live; ready to update the description with specific equipment when you get the list tomorrow.

**Remaining on the list** — Headers audit, artifact timestamps, and search/filter. These touch multiple files each and are worth a dedicated pass. Want me to start on those now, or save them for another session?


<ide_opened_file>The user opened the file /Users/russgoerend/Desktop/Portfolio HTMLs/Graphic Design Playbook.html in the IDE. This may or may not be related to the current task.</ide_opened_file>

If you feel comfortable doing it, I'm going to turn on edit automatically and let you hammer it out.

If you want to build a Photography playbook when you're done, that works too. Client projects for that would be something like taking pictures at an event or scheduling a time to take "custom stock photos" for a business. That kind of stuff.


The user wants me to tackle the remaining items on the to-do list:
1. Audit and normalize headers across all pages
2. Add artifact timestamp display to all playbooks
3. Add search and filter to Standard1 and Standard5 artifact cards
4. Optionally build a Photography playbook

Let me start with the headers audit since that requires understanding what's across all pages, then timestamps, then search/filter, then the Photography playbook.

Let me first assess what "headers" means - probably the page titles and subtitles across all the standard pages and playbooks. Let me check a few files to understand the inconsistencies.

Now I'm looking at the actual header structure across the different pages. The Standard pages use a `<header>` block with `<h1>` and `.subtitle` classes, while the playbooks have `<h1 class="step-title">` nested inside each step section, and the dashboard has its own separate header structure. I need to examine what the current headers actually look like across the files to identify what needs to be standardized.

Looking at the headers in place, I can see several inconsistencies: Standard4BSU includes an emoji and version tag in the title, the Standard pages have varying subtitle text, Standard3 uses `<h2>` tags for phase titles within sections, and the APEX portfolio page has its own header format. I need to figure out what a normalized header structure should look like across all these pages.

The Standard pages should follow a consistent pattern with a main title like "Standard X: [Name]" and a uniform subtitle or description, while the Playbooks and other sections can maintain their own conventions. Let me audit the actual files to see the full scope of what needs standardizing, then make targeted fixes.

For the timestamps, I'll display the `savedAt` value from the artifact state as a "Last saved" indicator in each artifact zone. And for Standard 1 and Standard 5, I need to add a search input above the columns that filters the visible cards by their title and brief text.

I'll start by checking the h1 tags across all files to understand the current header structure, then normalize them, add the timestamp displays, and implement the search/filter functionality.

For the Photography playbook, I'm thinking through a client-focused workflow with three main phases: Pre-Production covers understanding client needs and planning the shoot, Production is the actual photography work, and Post-Production handles editing and delivery. It's similar to the Video Production structure but tailored for photography-specific work.

Now I'll execute the implementation plan in order: first normalizing the headers across all playbooks, then adding artifact timestamps everywhere, implementing search and filtering for S1 and S5, and finally building out the Photography playbook.


Let me audit the headers across all files first before touching anything.


Bash

grep -rn "<h1\|<title>" "/Users/russgoerend/Desktop/Portfolio HTMLs/" --include="*.html" | grep -v "step-title\|card-title\|std-title\|vibe-title\|sidebar-std-title\|mentor-name\|task-modal\|portfolio-modal" | sort

Audit all h1 and title tags across every HTML file


/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Dashboard.html:404:
Aspiring Professional Dashboard

/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Dashboard.html:6:    <title>APEX Professional Dashboard</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Portfolio.html:252:
APEX Professional Portfolio

/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Portfolio.html:6:    <title>APEX Professional Portfolio | Dashboard</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Review_Prep.html:6:    <title>APEX | Performance Review Prep</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/Graphic Design Playbook.html:6:    <title>DCS Playbook | Graphic Design</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/Marketing Analytics Playbook.html:6:    <title>Marketing Analytics Playbook</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/Podcast Production Playbook.html:6:    <title>DCS Playbook | Podcast Production</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/Project Task Boards.html:122:
Project Task Boards Dashboard

/Users/russgoerend/Desktop/Portfolio HTMLs/Project Task Boards.html:6:    <title>Project Task Boards Dashboard</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/Social Media Playbook.html:6:    <title>DCS Playbook | Social Media</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard1.html:338:
Standard 1: Servant Leadership & Client Relationships

/Users/russgoerend/Desktop/Portfolio HTMLs/Standard1.html:6:    <title>APEX Portfolio | Standard 1: Servant Leadership</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard3.html:6:    <title>Waukee APEX Career Launchpad</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4.html:6:    <title>Standard 4 | Waukee APEX</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4.html:95:
Technical & Digital Skills

/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4BSU.html:269:
🚀 BSU Professional Sprint Portfolio v3

/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4BSU.html:6:    <title>BSU Portfolio v3 | Professional Sprint Log</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4DCS.html:6:    <title>Personal Brand Studio | Waukee APEX DCS</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard5.html:196:
Standard 5: Professional Skills

/Users/russgoerend/Desktop/Portfolio HTMLs/Standard5.html:6:    <title>APEX Portfolio | Standard 5: Professional Skills</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/Video Production Playbook.html:6:    <title>DCS Playbook | Video Production</title>


If you feel comfortable doing it, I'm going to turn on edit automatically and let you hammer it out.   If you want to build a Photography playbook when you're done, that works too. Client projects for…


Now I can see the issues clearly:

1. **`<title>` inconsistencies:**
 - `Marketing Analytics Playbook.html`: `Marketing Analytics Playbook` (no "DCS Playbook |" prefix)
 - `Standard3.html`: `Waukee APEX Career Launchpad` (should be `APEX Portfolio | Standard 3: Career Exploration`)
 - `Standard4BSU.html`: `BSU Portfolio v3 | Professional Sprint Log` (should be `APEX Portfolio | Standard 4: Technical Skills (BSU)`)
 - `Standard4DCS.html`: `Personal Brand Studio | Waukee APEX DCS` (should be `APEX Portfolio | Standard 4: Technical Skills (DCS)`)
 - `APEX_Professional_Portfolio.html`: `APEX Professional Portfolio | Dashboard` (remove "| Dashboard")

2. **`<h1>` inconsistencies:**
 - `Standard4BSU.html` has an emoji and version tag that feel out of place, and Standard3 is missing a proper heading altogether.

3. **Page subtitle inconsistencies:**
 - Standard1, Standard5, and Standard4BSU all have different subtitle formats and content that need to align.

Now I'm checking the actual standard names across the portfolio—they've been updated to Standard 1: Servant Leadership & Client Relationships, Standard 2: Professionalism & Ethics, Standard 3: Career Exploration, Standard 4: Technical Skills (with BSU/DCS variants), and Standard 5: Professional Skills. I need to verify that Standard1's subtitle and heading match this naming convention.

Standard3 is the tricky one since it uses sidebar navigation instead of a traditional page h1. The sidebar currently displays "Waukee APEX · Standard 3" and "Critical Thinking & Problem Solving," but these need to be updated to reflect the new "Career Exploration" naming. I should also check if Standard3's section headers like "Phase 1: Discovery" need any adjustments to stay consistent with the redesign.

Now I'm mapping out the specific title and h1 updates needed across all the pages—the browser tabs need standardized naming following the "APEX Portfolio | Standard X: [Name]" pattern, and the h1 content needs to match the new standard names while keeping any relevant subtitles like "BSU" or "DCS" where applicable.

I'm also noticing that some pages like Standard4BSU have inconsistent headers compared to Standard1 and Standard5, which use a centered header block with h1 and subtitle—so I need to check what the current subtitle text is on Standard4BSU and align the formatting across all standard pages.


grep -n "subtitle\|<header\|h1\|version-tag\|sidebar-std-title\|sidebar-std-label" "/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4BSU.html" | head -20
echo "---"
grep -n "subtitle\|<header\|sidebar-std-title\|sidebar-std-label" "/Users/russgoerend/Desktop/Portfolio HTMLs/Standard3.html" | head -10
echo "---"
grep -n "subtitle\|<header\|h1" "/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Portfolio.html" | head -10

Audit header/subtitle content across key files


71:        .version-tag { font-size: 0.7rem; background: #E5E7EB; padding: 2px 8px; border-radius: 10px; vertical-align: middle; margin-left: 10px; }
72:        h1 { font-size: 2.2rem; color: var(--primary); margin-bottom: 5px; }
73:        .subtitle { font-size: 1rem; color: var(--text-sub); max-width: 600px; margin: 0 auto; }
268:
269:
🚀 BSU Professional Sprint Portfolio v3

270:
A living showcase of high-stakes entrepreneurial analysis and execution. Choose your sprint, master the narrative, and link your evidence.

---
85:        .sidebar-std-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: #6B7280; margin-bottom: 4px; }
86:        .sidebar-std-title { font-size: 1rem; font-weight: 800; color: var(--primary); line-height: 1.3; margin-bottom: 14px; }
284:
Waukee APEX · Standard 3

285:
Critical Thinking & Problem Solving

---
108:        h1 { font-size: 2.8rem; margin: 0; font-weight: 800; letter-spacing: -0.03em; color: var(--primary); }
250:
252:
APEX Professional Portfolio


Now I have a clear picture of what needs to change. Let me organize the full list of header fixes:

1. **`Standard3.html`**:
   - `<title>`: "Waukee APEX Career Launchpad" → "APEX Portfolio | Standard 3: Career Exploration"
   - Sidebar: "Critical Thinking & Problem Solving" → "Career Exploration"

2. **`Standard4BSU.html`**:
   - `<title>`: "BSU Portfolio v3 | Professional Sprint Log" → "APEX Portfolio | Standard 4: Technical Skills — BSU"
   - `<h1>`: "🚀 BSU Professional Sprint Portfolio v3" → "Standard 4: Technical Skills"
   - `.subtitle`: "A living showcase..." → "Business Startup · Professional Sprint Portfolio"

3. **`Standard4DCS.html`**:
   - `<title>`: "Personal Brand Studio | Waukee APEX DCS" → "APEX Portfolio | Standard 4: Technical Skills — DCS"
   - The DCS page uses a sidebar header instead of a main h1, so no changes needed there

4. **`Marketing Analytics Playbook.html`**:
   - `<title>`: "Marketing Analytics Playbook" → "DCS Playbook"

5. **`APEX_Professional_Portfolio.html`**:
   - `<title>`: "APEX Professional Portfolio | Dashboard" → "APEX Professional Portfolio"

Now I need to check the sidebar structure on the Standard4DCS page since it was recently updated.


grep -n "sidebar-std-label\|sidebar-std-title\|<title>" "/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4DCS.html" | head -10
echo "---"
grep -n "<title>" "/Users/russgoerend/Desktop/Portfolio HTMLs/Standard1.html" "/Users/russgoerend/Desktop/Portfolio HTMLs/Standard5.html" "/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Review_Prep.html"

Check Standard4DCS sidebar labels and remaining title tags


6:    <title>Personal Brand Studio | Waukee APEX DCS</title>
38:        .sidebar-std-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: #6B7280; margin-bottom: 4px; }
39:        .sidebar-std-title { font-size: 1rem; font-weight: 800; color: var(--primary); line-height: 1.3; margin-bottom: 14px; }
168:
Waukee APEX · DCS Standard 4

169:
Personal Brand Studio

---
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard1.html:6:    <title>APEX Portfolio | Standard 1: Servant Leadership</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard5.html:6:    <title>APEX Portfolio | Standard 5: Professional Skills</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Review_Prep.html:6:    <title>APEX | Performance Review Prep</title>


Now I have a complete picture. Here's the full list of changes needed:

**Titles (browser tab) - normalize to "APEX Portfolio | Standard X: Name" or "DCS Playbook | Tool":**
1. `Standard3.html`: "Waukee APEX Career Launchpad" → "APEX Portfolio | Standard 3: Career Exploration"
2. `Standard4BSU.html`: "BSU Portfolio v3 | Professional Sprint Log" → "APEX Portfolio | Standard 4: Technical Skills — BSU"

3. `Standard4DCS.html`: "Personal Brand Studio | Waukee APEX DCS" → "APEX Portfolio | Standard 4: Technical Skills — DCS"
4. `Marketing Analytics Playbook.html`: "Marketing Analytics Playbook" → "DCS Playbook | Marketing Analytics"
5. `APEX_Professional_Portfolio.html`: "APEX Professional Portfolio | Dashboard" → "APEX Professional Portfolio"
6. `APEX_Review_Prep.html`: "APEX | Performance Review Prep" → "APEX | Review Prep"

Standard1 is already correct with "APEX Portfolio | Standard 1: Servant Leadership".

For Standard5, the title "APEX Portfolio | Standard 5: Professional Skills" looks good. I'm also reviewing the H1 headers and subtitles across the pages—Standard4BSU needs its header changed to "Standard 4: Technical Skills" and the subtitle updated to "Business Startup · Professional Sprint Portfolio". The Standard5 subtitle about daily habits is actually working fine as is. I'm also checking the sidebar labels, where Standard3 should shift from "Critical Thinking & Problem Solving" to "Career Exploration", while the DCS-specific sidebar labels can stay as they are. Now I'm thinking through whether Standard1 needs any similar adjustments to keep everything consistent across the portfolio.

Looking at the card titles on the portfolio page versus the actual standard page headers, I notice Standard1 and Standard5 are already aligned properly, but Standard3 and Standard4 have mismatches that need fixing. I'll make these updates in parallel to get everything standardized.

Now I'm realizing Standard3 is more complex since it was redesigned with a sidebar navigation structure. The page title says "Waukee APEX Career Launchpad" but the sidebar shows "Critical Thinking & Problem Solving" — and since I renamed it to "Career Exploration" for the portfolio, I need to update the page title and sidebar to reflect that change consistently.

Looking at the header structure across the standards, I notice Standard1 and Standard5 have a visible `<header>` block with an h1 at the top of the main content, while Standard4BSU has a styled header with a version tag, but Standard3 doesn't have one at all. I should add a matching header element to Standard3 so it's consistent with the others.

Now I'm identifying all the pages that need title updates: Standard3, Standard4BSU, Standard4DCS, Marketing Analytics, and Portfolio. I'll handle these in parallel.

For the artifact timestamps, I need to add a display span in each artifact zone across Video Production, Social Media, Marketing Analytics, Podcast Production, and Graphic Design, then update the save and load functions to manage these timestamps.

I also need to add search and filter functionality above the grids on Standard1 and Standard5, then work through the Photography Playbook updates. Let me start executing these changes systematically.


Clear picture. Here's the full fix list:
- `Standard3` title/sidebar: still says "Critical Thinking & Problem Solving", should be "Career Exploration"
- `Standard4BSU`: emoji + version tag in h1, non-standard title
- `Standard4DCS` title: backwards order
- `Marketing Analytics Playbook` title: missing "DCS Playbook |" prefix
- `APEX_Professional_Portfolio` title: spurious "| Dashboard"

Fixing all titles/headers in parallel, then timestamps, then search/filter, then Photography playbook.


sed -i '' 's|<title>Waukee APEX Career Launchpad</title>|<title>APEX Portfolio | Standard 3: Career Exploration</title>|' "/Users/russgoerend/Desktop/Portfolio HTMLs/Standard3.html"
sed -i '' 's|<title>BSU Portfolio v3 | Professional Sprint Log</title>|<title>APEX Portfolio | Standard 4: Technical Skills — BSU</title>|' "/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4BSU.html"
sed -i '' 's|<title>Personal Brand Studio | Waukee APEX DCS</title>|<title>APEX Portfolio | Standard 4: Technical Skills — DCS</title>|' "/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4DCS.html"
sed -i '' 's|<title>Marketing Analytics Playbook</title>|<title>DCS Playbook | Marketing Analytics</title>|' "/Users/russgoerend/Desktop/Portfolio HTMLs/Marketing Analytics Playbook.html"
sed -i '' 's|<title>APEX Professional Portfolio | Dashboard</title>|<title>APEX Professional Portfolio</title>|' "/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Portfolio.html"

Fix all browser tab titles in parallel


Error: Exit code 1
sed: 1: "s|<title>Waukee APEX Ca ...": bad flag in substitute command: 'S'
sed: 1: "s|<title>BSU Portfolio  ...": bad flag in substitute command: '<'
sed: 1: "s|<title>Personal Brand ...": bad flag in substitute command: '<'
sed: 1: "s|<title>Marketing Anal ...": bad flag in substitute command: 'M'
sed: 1: "s|<title>APEX Professio ...": bad flag in substitute command: '<'


265
266
267

268
269
🚀 BSU Professional Sprint Portfolio v3

270
A living showcase of high-stakes entrepreneurial analysis and execution. Choose your sprint, master the narrative, and link your evidence.

271
272

🚀 BSU Professional Sprint Portfolio v3

A living showcase of high-stakes entrepreneurial analysis and execution. Choose your sprint, master the narrative, and link your evidence.


Edit

<title>Waukee APEX Career Launchpad</title>

<title>APEX Portfolio | Standard 3: Career Exploration</title>


The file /Users/russgoerend/Desktop/Portfolio HTMLs/Standard3.html has been updated successfully. (file state is current in your context — no need to Read it back)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

-    <title>Waukee APEX Career Launchpad</title>

+    <title>APEX Portfolio | Standard 3: Career Exploration</title>


<tool_use_error>String to replace not found in file.
String:
Critical Thinking & Problem Solving
</tool_use_error>

Error: String to replace not found in file.
String:
Critical Thinking & Problem Solving


Build Graphic Design Playbook

Audit and normalize headers across all pages

Add artifact timestamp display to all playbooks

Add search and filter to Standard1 and Standard5 artifact cards


Bash

grep -n "sidebar-std-title\|Career\|Critical" "/Users/russgoerend/Desktop/Portfolio HTMLs/Standard3.html" | head -10

Find exact sidebar-std-title text in Standard3


6:    <title>APEX Portfolio | Standard 3: Career Exploration</title>
86:        .sidebar-std-title { font-size: 1rem; font-weight: 800; color: var(--primary); line-height: 1.3; margin-bottom: 14px; }
285:
Critical Thinking & Problem Solving

304:                🎯 Career Thesis
336:

3. Career Deep Dive

Validate your ideas by researching "Day-in-the-Life" profiles and macro industry trends for your top choices.

363:
Next Step: We will take your values, skills, and reflections above and put them into a Career Consultation AI prompt in Phase 2. This turns your personal data into a list of real-world career matches.

372:
Phase 2: Career Thesis

376:
Ready to Synthesize: Your selections and reflections from Phase 1 are ready to be added to the AI Career Consultant prompt below.

478:            { name: "Critical Thinking", desc: "Analyzing info for reasoned judgments." },
640:            const desc = h3.nextElementSibling?.textContent.trim() || 'Career development activity';


283

284
Waukee APEX · Standard 3

285
Critical Thinking & Problem Solving

286

287

Waukee APEX · Standard 3

Critical Thinking & Problem Solving


Now fix the remaining titles and Standard4BSU's h1 all in parallel:


Edit

<title>BSU Portfolio v3 | Professional Sprint Log</title>

<title>APEX Portfolio | Standard 4: Technical Skills — BSU</title>


<title>Personal Brand Studio | Waukee APEX DCS</title>

<title>APEX Portfolio | Standard 4: Technical Skills — DCS</title>


The file /Users/russgoerend/Desktop/Portfolio HTMLs/Standard4BSU.html has been updated successfully. (file state is current in your context — no need to Read it back)

-    <title>BSU Portfolio v3 | Professional Sprint Log</title>

+    <title>APEX Portfolio | Standard 4: Technical Skills — BSU</title>

--primary: #500778;    /* APEX Purple */


/Users/russgoerend/Desktop/Portfolio HTMLs/Marketing Analytics Playbook.html

<title>DCS Playbook | Marketing Analytics</title>


The file /Users/russgoerend/Desktop/Portfolio HTMLs/Standard4DCS.html has been updated successfully. (file state is current in your context — no need to Read it back)

-    <title>Personal Brand Studio | Waukee APEX DCS</title>

+    <title>APEX Portfolio | Standard 4: Technical Skills — DCS</title>


<title>APEX Professional Portfolio | Dashboard</title>


The file /Users/russgoerend/Desktop/Portfolio HTMLs/Marketing Analytics Playbook.html has been updated successfully. (file state is current in your context — no need to Read it back)

-    <title>Marketing Analytics Playbook</title>

+    <title>DCS Playbook | Marketing Analytics</title>


The file /Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Portfolio.html has been updated successfully. (file state is current in your context — no need to Read it back)

-    <title>APEX Professional Portfolio | Dashboard</title>

+    <title>APEX Professional Portfolio</title>


Now fix Standard4BSU's h1 and subtitle:


🚀 BSU Professional Sprint Portfolio v3

A living showcase of high-stakes entrepreneurial analysis and execution. Choose your sprint, master the narrative, and link your evidence.

Standard 4: Technical Skills

Business Startup · Professional Sprint Portfolio. Choose your sprint, master the narrative, and link your evidence.


🚀 BSU Professional Sprint Portfolio v3

A living showcase of high-stakes entrepreneurial analysis and execution. Choose your sprint, master the narrative, and link your evidence.

Standard 4: Technical Skills

Business Startup · Professional Sprint Portfolio. Choose your sprint, master the narrative, and link your evidence.

-
🚀 BSU Professional Sprint Portfolio v3

-
A living showcase of high-stakes entrepreneurial analysis and execution. Choose your sprint, master the narrative, and link your evidence.

+
Business Startup · Professional Sprint Portfolio. Choose your sprint, master the narrative, and link your evidence.


Build Graphic Design Playbook

Add queue button and sidebar to Standard3

Add Podcast and Graphic Design Playbook cards to Dashboard


TodoWrite

Build Graphic Design Playbook

Add queue button and sidebar to Standard3

Adding queue button and sidebar to Standard3

Add Podcast and Graphic Design Playbook cards to Dashboard

Audit and normalize headers across all pages

Add artifact timestamp display to all playbooks

Add search and filter to Standard1 and Standard5 artifact cards

Adding search and filter to Standard pages

Build Photography Playbook


Todos have been modified successfully. Ensure that you continue to use the todo list to track your progress. Please proceed with the current tasks if applicable

Build Graphic Design Playbook

Build Graphic Design Playbook

Build Photography Playbook


Now timestamps. The artifact zones already save `savedAt` in state — I need to display it. I'll add a timestamp span to each artifact zone and update `saveArtifact()` and `loadStateIntoUI()` in all five playbooks. The cleanest approach is a shared CSS class and a JS helper that formats the date. Let me check which artifact step IDs each playbook uses, then make targeted edits.


Bash

grep -n "artifact-saved-msg\|art-.*-saved\b" "/Users/russgoerend/Desktop/Portfolio HTMLs/Video Production Playbook.html" | head -20

Find artifact step IDs in Video Production playbook


513:        .artifact-saved-msg {
1169:
✓ Artifact saved

1244:
✓ Artifact saved

1623:
✓ Artifact saved

1810:
✓ Artifact saved

1862:
✓ Artifact saved

1972:
✓ Artifact saved

2308:        const msg = document.getElementById('art-' + stepId + '-saved');


grep -n "artifact-saved-msg\|art-.*-saved\b" "/Users/russgoerend/Desktop/Portfolio HTMLs/Social Media Playbook.html" | head -20
grep -n "artifact-saved-msg\|art-.*-saved\b" "/Users/russgoerend/Desktop/Portfolio HTMLs/Marketing Analytics Playbook.html" | head -20
grep -n "artifact-saved-msg\|art-.*-saved\b" "/Users/russgoerend/Desktop/Portfolio HTMLs/Podcast Production Playbook.html" | head -20
grep -n "artifact-saved-msg\|art-.*-saved\b" "/Users/russgoerend/Desktop/Portfolio HTMLs/Graphic Design Playbook.html" | head -20

Find artifact step IDs in all other playbooks


423:        .artifact-saved-msg {
941:
✓ Artifact saved

999:
✓ Artifact saved

1067:
✓ Artifact saved

1103:
✓ Artifact saved

1407:
✓ Artifact saved

1741:            const msg = document.getElementById('art-' + stepId + '-saved');
130:        .artifact-saved-msg { display: none; color: var(--success); margin-top: 10px; }
341:
✓ Artifact saved

372:
✓ Artifact saved

487:
✓ Artifact saved

536:
✓ Artifact saved

603:
✓ Artifact saved

627:
✓ Artifact saved

945:        const msg = document.getElementById('art-' + stepId + '-saved');
141:        .artifact-saved-msg { font-size: 0.78rem; color: var(--pub); font-weight: 700; display: none; margin-top: 6px; }
590:
✓ Artifact saved

638:
✓ Artifact saved

795:
✓ Artifact saved

948:
✓ Artifact saved

1003:
✓ Artifact saved

1084:
✓ Artifact saved

1396:        const msg = document.getElementById('art-' + stepId + '-saved');
163:        .artifact-saved-msg { font-size: 0.78rem; color: var(--del); font-weight: 700; display: none; margin-top: 6px; }
565:
✓ Artifact saved

622:
✓ Artifact saved

710:
✓ Artifact saved

751:
✓ Artifact saved

872:
✓ Artifact saved

952:
✓ Artifact saved

1028:
✓ Artifact saved

1075:
✓ Artifact saved

1281:        const msg = document.getElementById('art-'+stepId+'-saved');


The pattern is consistent across all playbooks: each artifact zone has `<div class="artifact-saved-msg" id="art-{stepId}-saved">✓ Artifact saved</div>`.

The approach for timestamps:
1. Add a CSS class `.artifact-timestamp` to each playbook's stylesheet
2. Add `<div class="artifact-timestamp" id="art-{stepId}-timestamp"></div>` alongside each `.artifact-saved-msg`
3. Update `saveArtifact()` to also update the timestamp element
4. Update `loadStateIntoUI()` to restore timestamps from saved state

5. Create a helper function to format ISO timestamps into human-readable strings

Since the save timestamp is already being stored in the state, I can leverage that existing data and just add the display layer by modifying the `saveArtifact()` function to update the timestamp element whenever an artifact is saved, then refresh those timestamps when loading the UI. the msg visible persistently (not `display: none`). Actually, I think the cleanest approach is to keep the flash behavior but make the message persist as a timestamp afterward. So instead of hiding the `.artifact-saved-msg` element after 2.5 seconds, I'll update it to show "Last saved: [time]" and leave it visible. I'm modifying the `saveArtifact()` function to capture the current timestamp and update the message element accordingly.

Updating the save function... Writing the timestamp refresh logic... I'm modifying the `saveArtifact()` function to show the timestamp immediately after saving, then switch to displaying the formatted last-saved time after a brief delay. I also need to add the helper functions for formatting and refreshing timestamps across all five playbooks. I need to check how Marketing Analytics handles the save feedback since it doesn't use `showToast` like the other files do—it looks like it displays a message element directly and then hides it after a delay, so I'll need to adapt the timestamp refresh logic to work with that pattern.


Let me check the exact `saveArtifact` function signature across all playbooks before editing them:


for f in "Video Production Playbook.html" "Social Media Playbook.html" "Marketing Analytics Playbook.html" "Podcast Production Playbook.html" "Graphic Design Playbook.html"; do
  echo "=== $f ==="
  grep -A6 "function saveArtifact" "/Users/russgoerend/Desktop/Portfolio HTMLs/$f"
  echo ""
done

Get exact saveArtifact function from all playbooks


=== Video Production Playbook.html ===
    function saveArtifact(stepId) {
        if (!state.artifacts[stepId]) state.artifacts[stepId] = {};
        state.artifacts[stepId].link = getVal('art-' + stepId + '-link');
        state.artifacts[stepId].note = getVal('art-' + stepId + '-note');
        state.artifacts[stepId].savedAt = new Date().toISOString();
        saveState();
        const msg = document.getElementById('art-' + stepId + '-saved');

=== Social Media Playbook.html ===
        function saveArtifact(stepId) {
            if (!state.artifacts[stepId]) state.artifacts[stepId] = {};
            state.artifacts[stepId].link = getVal('art-' + stepId + '-link');
            state.artifacts[stepId].note = getVal('art-' + stepId + '-note');
            state.artifacts[stepId].savedAt = new Date().toISOString();
            saveState();
            const msg = document.getElementById('art-' + stepId + '-saved');

=== Marketing Analytics Playbook.html ===
    function saveArtifact(stepId) {
        if (!state.artifacts[stepId]) state.artifacts[stepId] = {};
        state.artifacts[stepId].link = getVal('art-' + stepId + '-link');
        state.artifacts[stepId].note = getVal('art-' + stepId + '-note');
        saveState();
        const msg = document.getElementById('art-' + stepId + '-saved');
        if (msg) { msg.style.display = 'block'; setTimeout(() => msg.style.display = 'none', 2500); }

=== Podcast Production Playbook.html ===
    function saveArtifact(stepId) {
        if (!state.artifacts[stepId]) state.artifacts[stepId] = {};
        state.artifacts[stepId].link = getVal('art-' + stepId + '-link');
        state.artifacts[stepId].note = getVal('art-' + stepId + '-note');
        state.artifacts[stepId].savedAt = new Date().toISOString();
        saveState();
        const msg = document.getElementById('art-' + stepId + '-saved');

=== Graphic Design Playbook.html ===
    function saveArtifact(stepId) {
        if (!state.artifacts[stepId]) state.artifacts[stepId] = {};
        state.artifacts[stepId].link = getVal('art-'+stepId+'-link');
        state.artifacts[stepId].note = getVal('art-'+stepId+'-note');
        state.artifacts[stepId].savedAt = new Date().toISOString();
        saveState();
        const msg = document.getElementById('art-'+stepId+'-saved');


for f in "Video Production Playbook.html" "Social Media Playbook.html" "Marketing Analytics Playbook.html" "Podcast Production Playbook.html" "Graphic Design Playbook.html"; do
  echo "=== $f ==="
  grep -A3 "msg.style.display = 'block'" "/Users/russgoerend/Desktop/Portfolio HTMLs/$f" | head -6
  echo ""
done

Check msg display block lines in each playbook


=== Video Production Playbook.html ===
        if (msg) { msg.style.display = 'block'; setTimeout(() => msg.style.display = 'none', 2500); }
        showToast('Artifact saved ✓');
    }

=== Social Media Playbook.html ===
            if (msg) { msg.style.display = 'block'; setTimeout(() => msg.style.display = 'none', 2500); }
            showToast('Artifact saved ✓');
        }

=== Marketing Analytics Playbook.html ===
        if (msg) { msg.style.display = 'block'; setTimeout(() => msg.style.display = 'none', 2500); }
    }

    function openTaskBoard() { document.getElementById('task-modal-overlay').classList.add('open'); }

=== Podcast Production Playbook.html ===
        if (msg) { msg.style.display = 'block'; setTimeout(() => msg.style.display = 'none', 2500); }
        showToast('Artifact saved ✓');
    }

=== Graphic Design Playbook.html ===
        if (msg) { msg.style.display = 'block'; setTimeout(() => msg.style.display = 'none', 2500); }
        showToast('Artifact saved ✓');
    }


[Request interrupted by user]


I goofed on these two:

Add artifact timestamp display to all playbooks

Add search and filter to Standard1 and Standard5 artifact cards

Don't do those. I didn't describe them well enough.


The user wants to cancel those two tasks. Let me update the todo list to remove them and move on to the Photography playbook.


No problem — pulling those off the list.


TodoWrite

Build Graphic Design Playbook

Add queue button and sidebar to Standard3

Adding queue button and sidebar to Standard3

Add Podcast and Graphic Design Playbook cards to Dashboard

Audit and normalize headers across all pages

Build Photography Playbook


Build Graphic Design Playbook

Audit and normalize headers across all pages

Add artifact timestamp display to all playbooks

Add search and filter to Standard1 and Standard5 artifact cards

Build Photography Playbook

Build Graphic Design Playbook

Build Photography Playbook


On to the Photography playbook. Client projects: event coverage and custom stock photos for businesses. Planning the workflow now — writing it out.

**Phase structure:**
- Phase 0: Orientation (what professional photography means, key terms, gear overview, file formats)
- Phase 1: Pre-Production (setup, client discovery, shot list, location/logistics)
- Phase 2: The Shoot (pre-shoot checklist, shooting fundamentals, day-of execution)
- Phase 3: Post-Production (culling, editing, export)
- Phase 4: Delivery (file organization, delivery, final review)

Two checkpoint types: Russ for strategy/brief reviews, and a client review before delivery.