Edit

            right: 20px;
            background: var(--primary);
            color: white;
            padding: 12px 24px;
            border-radius: 30px;
            font-size: 0.85rem;
            font-weight: 600;
            display: none;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            z-index: 2000;
        }
    </style>

            right: 20px;
            background: var(--primary);
            color: white;
            padding: 12px 24px;
            border-radius: 30px;
            font-size: 0.85rem;
            font-weight: 600;
            display: none;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            z-index: 2000;
        }

        /* --- RECENT CHECK-INS --- */
        .section-heading {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--primary);
            margin: 40px 0 6px;
            display: flex;
            align-items: baseline;
            gap: 10px;
        }
        .section-heading a {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text-sub);
            text-decoration: none;
            letter-spacing: 0.03em;
        }
        .section-heading a:hover { color: var(--primary); }
        .section-sub {
            color: var(--text-sub);
            font-size: 0.88rem;
            margin: 0 0 18px;
        }
        .checkins-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 14px;
            margin-bottom: 32px;
        }
        .ci-card {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 18px 20px;
            border-left: 4px solid var(--secondary);
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .ci-card-date {
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--text-sub);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 4px;
        }
        .ci-card-project {
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--primary);
            margin-bottom: 10px;
        }
        .ci-card-label {
            font-size: 0.68rem;
            font-weight: 700;
            color: var(--text-sub);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 2px;
        }
        .ci-card-text {
            font-size: 0.85rem;
            color: var(--text-main);
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .ci-card-artifact {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: #F3E8FF;
            color: var(--primary);
            font-size: 0.72rem;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            text-decoration: none;
            margin-top: 10px;
            border: 1px solid #E9D5FF;
        }
        .ci-empty {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 28px 24px;
            color: var(--text-sub);
            font-size: 0.88rem;
            border: 2px dashed #E5E7EB;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }
        .ci-empty a {
            flex-shrink: 0;
            background: var(--primary);
            color: #fff;
            text-decoration: none;
            font-weight: 700;
            font-size: 0.8rem;
            padding: 8px 16px;
            border-radius: 8px;
            white-space: nowrap;
        }
    </style>


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)

            right: 20px;
            background: var(--primary);
            color: white;
            padding: 12px 24px;
            border-radius: 30px;
            font-size: 0.85rem;
            font-weight: 600;
            display: none;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            z-index: 2000;
        }
    </style>

            right: 20px;
            background: var(--primary);
            color: white;
            padding: 12px 24px;
            border-radius: 30px;
            font-size: 0.85rem;
            font-weight: 600;
            display: none;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            z-index: 2000;
        }

        /* --- RECENT CHECK-INS --- */
        .section-heading {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--primary);
            margin: 40px 0 6px;
            display: flex;
            align-items: baseline;
            gap: 10px;
        }
        .section-heading a {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text-sub);
            text-decoration: none;
            letter-spacing: 0.03em;
        }
        .section-heading a:hover { color: var(--primary); }
        .section-sub {
            color: var(--text-sub);
            font-size: 0.88rem;
            margin: 0 0 18px;
        }
        .checkins-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 14px;
            margin-bottom: 32px;
        }
        .ci-card {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 18px 20px;
            border-left: 4px solid var(--secondary);
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .ci-card-date {
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--text-sub);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 4px;
        }
        .ci-card-project {
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--primary);
            margin-bottom: 10px;
        }
        .ci-card-label {
            font-size: 0.68rem;
            font-weight: 700;
            color: var(--text-sub);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 2px;
        }
        .ci-card-text {
            font-size: 0.85rem;
            color: var(--text-main);
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .ci-card-artifact {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: #F3E8FF;
            color: var(--primary);
            font-size: 0.72rem;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
            text-decoration: none;
            margin-top: 10px;
            border: 1px solid #E9D5FF;
        }
        .ci-empty {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 28px 24px;
            color: var(--text-sub);
            font-size: 0.88rem;
            border: 2px dashed #E5E7EB;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }
        .ci-empty a {
            flex-shrink: 0;
            background: var(--primary);
            color: #fff;
            text-decoration: none;
            font-weight: 700;
            font-size: 0.8rem;
            padding: 8px 16px;
            border-radius: 8px;
            white-space: nowrap;
        }
    </style>

+        .section-heading a:hover { color: var(--primary); }

+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

+            background: var(--card-bg);

+            border-left: 4px solid var(--secondary);

+            -webkit-box-orient: vertical;

+            border: 2px dashed #E5E7EB;

+            justify-content: space-between;

+            background: var(--primary);


Now add the HTML section and the JS. First the HTML (before the footer):


    <footer>
        © 2026 Waukee APEX Aspiring Professional Portfolio | Built for Excellence
    </footer>
</div>

        Recent Check-Ins
        View all →

Your latest standups — a record of the work behind the artifacts.

        © 2026 Waukee APEX Aspiring Professional Portfolio | Built for Excellence


    <footer>
        © 2026 Waukee APEX Aspiring Professional Portfolio | Built for Excellence
    </footer>
</div>

        Recent Check-Ins
        View all →

Your latest standups — a record of the work behind the artifacts.

        © 2026 Waukee APEX Aspiring Professional Portfolio | Built for Excellence

+
Your latest standups — a record of the work behind the artifacts.


Now add the JS to render recent check-ins, inside the existing `loadProfile` function call:


    window.onload = loadProfile;
</script>

function formatCiDate(dateStr, isoStr) {
        const d = dateStr ? new Date(dateStr + 'T12:00:00') : new Date(isoStr);
        return d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
    }

    function esc(str) {
        return (str || '').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
    }

    const STD_URLS = { S1:'Standard1.html', S2:'Standard2.html', S3:'Standard3.html', S4:'Standard4BSU.html', S5:'Standard5.html' };

    function renderRecentCheckins() {
        const container = document.getElementById('recent-checkins');
        if (!container) return;
        let list = [];
        try { list = JSON.parse(localStorage.getItem('apex_checkins') || '[]'); } catch(e) {}
        const recent = list.slice(0, 3);

        if (recent.length === 0) {
            container.innerHTML = `

                No check-ins yet. Log your first daily standup to start building a process record.
                Open Check-In Log

`;
            return;
        }

        container.innerHTML = `
${recent.map(e => {
            const artifact = (e.artifactStd && e.artifactId && e.artifactTitle && STD_URLS[e.artifactStd])
                ? `<a href="${STD_URLS[e.artifactStd]}" class="ci-card-artifact">📎 ${esc(e.artifactStd)} · ${esc(e.artifactTitle)}</a>`
                : '';
            return `

${formatCiDate(e.date, e.timestamp)}

${esc(e.project)}

Worked On

${esc(e.worked)}

                ${artifact}

`;
        }).join('')}
`;
    }

    window.onload = function() { loadProfile(); renderRecentCheckins(); };
</script>


I think the screenshot I attached works as the cross-standard overview, right?  Feel free to build the reflection prompts into the playbooks.  Go ahead and build the check-in log as well. Build it lik…


Check memory persistence after extension restart


    window.onload = loadProfile;
</script>

function formatCiDate(dateStr, isoStr) {
        const d = dateStr ? new Date(dateStr + 'T12:00:00') : new Date(isoStr);
        return d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
    }

    function esc(str) {
        return (str || '').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
    }

    const STD_URLS = { S1:'Standard1.html', S2:'Standard2.html', S3:'Standard3.html', S4:'Standard4BSU.html', S5:'Standard5.html' };

    function renderRecentCheckins() {
        const container = document.getElementById('recent-checkins');
        if (!container) return;
        let list = [];
        try { list = JSON.parse(localStorage.getItem('apex_checkins') || '[]'); } catch(e) {}
        const recent = list.slice(0, 3);

        if (recent.length === 0) {
            container.innerHTML = `

                No check-ins yet. Log your first daily standup to start building a process record.
                Open Check-In Log

`;
            return;
        }

        container.innerHTML = `
${recent.map(e => {
            const artifact = (e.artifactStd && e.artifactId && e.artifactTitle && STD_URLS[e.artifactStd])
                ? `<a href="${STD_URLS[e.artifactStd]}" class="ci-card-artifact">📎 ${esc(e.artifactStd)} · ${esc(e.artifactTitle)}</a>`
                : '';
            return `

${formatCiDate(e.date, e.timestamp)}

${esc(e.project)}

Worked On

${esc(e.worked)}

                ${artifact}

`;
        }).join('')}
`;
    }

    window.onload = function() { loadProfile(); renderRecentCheckins(); };
</script>

+    function formatCiDate(dateStr, isoStr) {

+        const d = dateStr ? new Date(dateStr + 'T12:00:00') : new Date(isoStr);

+        return d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });

+    const STD_URLS = { S1:'Standard1.html', S2:'Standard2.html', S3:'Standard3.html', S4:'Standard4BSU.html', S5:'Standard5.html' };

+        const container = document.getElementById('recent-checkins');

+        try { list = JSON.parse(localStorage.getItem('apex_checkins') || '[]'); } catch(e) {}

+        const recent = list.slice(0, 3);

+            container.innerHTML = `<div class="ci-empty">

+                No check-ins yet. Log your first daily standup to start building a process record.

+        container.innerHTML = `<div class="checkins-grid">${recent.map(e => {

+            const artifact = (e.artifactStd && e.artifactId && e.artifactTitle && STD_URLS[e.artifactStd])

+                ? `<a href="${STD_URLS[e.artifactStd]}" class="ci-card-artifact">📎 ${esc(e.artifactStd)} · ${esc(e.artifactTitle)}</a>`

+            return `<div class="ci-card">

+    window.onload = function() { loadProfile(); renderRecentCheckins(); };


TodoWrite

Build APEX_Checkin_Log.html (new file)

Add check-in tile to APEX_Professional_Dashboard.html

Add Recent Check-ins section to APEX_Professional_Portfolio.html

Add reflection textareas to Marketing Analytics Playbook checkpoints

Adding reflection prompts to Marketing Analytics Playbook

Add reflection textareas to Social Media Playbook checkpoints

Adding reflection prompts to Social Media 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 APEX_Checkin_Log.html (new file)

Add check-in tile to APEX_Professional_Dashboard.html

Add Recent Check-ins section to APEX_Professional_Portfolio.html

Add reflection textareas to Marketing Analytics Playbook checkpoints

Adding reflection prompts to Marketing Analytics Playbook

Add reflection textareas to Social Media Playbook checkpoints

Adding reflection prompts to Social Media Playbook

Build APEX_Checkin_Log.html (new file)


Now for the Marketing Analytics Playbook reflection prompts. Let me read the checkpoint steps and the save/load functions fully.


Read

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


413
Checkpoint: Brief Review

414
Review the analytics brief with the mentor to confirm the project focus before data work begins.

415

416
Review Checklist

417

418
Is the business question clearly defined?

419
Are the priority metrics aligned with client goals?

420
Is the intended deliverable format clear?

421

422
Nick Berry is the industry mentor for this analytics track — confirm the brief with him before moving to data validation.

423

424

425	                <button class="btn-prev" onclick="goTo('brief')">← Back</button>
426	                <button class="btn-next" onclick="markCompleteAndNext('cp1a','data')">Checkpoint Complete →</button>
427

428

429
430

431
Data Inventory

432
List every source, tool, and report you can use for this analysis.

433

434
Data Checklist

435

436
Website analytics (GA4, Adobe, heatmaps)

437
Ad reporting (Meta, Google Ads, display networks)

438
CRM / email / CRM campaign data

439
Owned content performance and conversion tracking

440
Any existing dashboards or BI tools

441

442

443

444
Quality & Access

445

446
Do you have access to the source data?

447
Is the data complete for the analysis window?

448
Are the definitions consistent across sources?

449

450

451

452	                <button class="btn-prev" onclick="goTo('cp1a')">← Back</button>
453	                <button class="btn-next" onclick="markCompleteAndNext('data','cp1')">Mark Complete & Continue →</button>
454

455

456
457

458
Checkpoint: Data Readiness

459
Verify the data is usable and the project can proceed with confidence.

460

461
Checkpoint Actions

462

463
Confirm all required data sources are accessible.

464
Agree on the timeframe and key metrics.

465
Document any gaps or assumptions.

466

467
Nick Berry should sign off on the data plan before analysis starts.

468

469

470	                <button class="btn-prev" onclick="goTo('data')">← Back</button>
471	                <button class="btn-next" onclick="markCompleteAndNext('cp1','metrics')">Checkpoint Complete →</button>
472

473

474
475

476
Metrics Plan

477
Define the metrics that will answer the business question and support recommendations. Don't measure everything — pick the 2–3 metrics that directly answer the business question and make those your north star.

478
479

480	                💡
481
Pick your north-star metric first. Before you build a metrics plan, ask: if you could only show the client one number at the end of this project, what would it be? That's your primary metric. Everything else supports it or explains it.

482

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

Checkpoint: Brief Review

Review the analytics brief with the mentor to confirm the project focus before data work begins.

Review Checklist

Is the business question clearly defined?

Are the priority metrics aligned with client goals?

Is the intended deliverable format clear?

Nick Berry is the industry mentor for this analytics track — confirm the brief with him before moving to data validation.

                <button class="btn-prev" onclick="goTo('brief')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp1a','data')">Checkpoint Complete →</button>

Data Inventory

List every source, tool, and report you can use for this analysis.

Data Checklist

Website analytics (GA4, Adobe, heatmaps)

Ad reporting (Meta, Google Ads, display networks)

CRM / email / CRM campaign data

Owned content performance and conversion tracking

Any existing dashboards or BI tools

Quality & Access

Do you have access to the source data?

Is the data complete for the analysis window?

Are the definitions consistent across sources?

                <button class="btn-prev" onclick="goTo('cp1a')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('data','cp1')">Mark Complete & Continue →</button>

Checkpoint: Data Readiness

Verify the data is usable and the project can proceed with confidence.

Checkpoint Actions

Confirm all required data sources are accessible.

Agree on the timeframe and key metrics.

Document any gaps or assumptions.

Nick Berry should sign off on the data plan before analysis starts.

                <button class="btn-prev" onclick="goTo('data')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp1','metrics')">Checkpoint Complete →</button>

Metrics Plan

Define the metrics that will answer the business question and support recommendations. Don't measure everything — pick the 2–3 metrics that directly answer the business question and make those your north star.

                💡

Pick your north-star metric first. Before you build a metrics plan, ask: if you could only show the client one number at the end of this project, what would it be? That's your primary metric. Everything else supports it or explains it.


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


570

571	                <button class="btn-prev" onclick="goTo('metrics')">← Back</button>
572	                <button class="btn-next" onclick="markCompleteAndNext('analysis','cp2')">Mark Complete & Continue →</button>
573

574

575
576

577
Checkpoint: Insight Review

578
Share your early findings with the mentor or client and make sure the recommendations are on target.

579

580
Review Checklist

581

582
Are the insights aligned with the brief and business goals?

583
Do the recommendations flow from the data?

584
Have you identified the highest-impact next steps?

585

586
Nick Berry should review this checkpoint to confirm the strategy before reporting.

587

588

589	                <button class="btn-prev" onclick="goTo('analysis')">← Back</button>
590	                <button class="btn-next" onclick="markCompleteAndNext('cp2','insights')">Checkpoint Complete →</button>
591

592

593
594

595
Insights & Strategy

596
Turn your analysis into clear recommendations and a practical plan for the client.

597

598
Recommendations Framework

599

                <button class="btn-prev" onclick="goTo('metrics')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('analysis','cp2')">Mark Complete & Continue →</button>

Checkpoint: Insight Review

Share your early findings with the mentor or client and make sure the recommendations are on target.

Review Checklist

Are the insights aligned with the brief and business goals?

Do the recommendations flow from the data?

Have you identified the highest-impact next steps?

Nick Berry should review this checkpoint to confirm the strategy before reporting.

                <button class="btn-prev" onclick="goTo('analysis')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp2','insights')">Checkpoint Complete →</button>

Insights & Strategy

Turn your analysis into clear recommendations and a practical plan for the client.

Recommendations Framework


Now let me read the save/load state functions to understand exactly where to add new fields.


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


860	    }
861
862	    function loadStateIntoUI() {
863	        clearStepDoneStates();
864	        resetChecklistInputs();
865	        const p = state.project || {};
866	        setValue('proj-name', p.name);
867	        setValue('proj-client', p.client);
868	        setValue('proj-type', p.type);
869	        setValue('proj-deadline', p.deadline);
870	        setValue('proj-role', p.role);
871	        setValue('art-discovery-link', (state.artifacts.discovery||{}).link || '');
872	        setValue('art-discovery-note', (state.artifacts.discovery||{}).note || '');
873	        setValue('art-brief-link', (state.artifacts.brief||{}).link || '');
874	        setValue('art-brief-note', (state.artifacts.brief||{}).note || '');
875	        setValue('art-metrics-link', (state.artifacts.metrics||{}).link || '');
876	        setValue('art-metrics-note', (state.artifacts.metrics||{}).note || '');
877	        setValue('art-analysis-link', (state.artifacts.analysis||{}).link || '');
878	        setValue('art-analysis-note', (state.artifacts.analysis||{}).note || '');
879	        setValue('art-report-link', (state.artifacts.report||{}).link || '');
880	        setValue('art-report-note', (state.artifacts.report||{}).note || '');
881	        setValue('art-reflection-link', (state.artifacts.reflection||{}).link || '');
882	        setValue('art-reflection-note', (state.artifacts.reflection||{}).note || '');
883	        const cls = state.checklistStates || {};
884	        Object.keys(cls).forEach(id => {
885	            const el = document.getElementById(id);
886	            if (el) el.checked = cls[id];
887	        });
888	        (state.completed||[]).forEach(id => markStepDone(id));
889	        updateProgress();
890	        updateSidebarLabel();
891	        renderTasks();
892	    }
893
894	    function saveState() {
895	        state.project = {
896	            name: getVal('proj-name'),
897	            client: getVal('proj-client'),
898	            type: getVal('proj-type'),
899	            deadline: getVal('proj-deadline'),
900	            role: getVal('proj-role')
901	        };
902	        state.artifacts.discovery = state.artifacts.discovery || {};
903	        state.artifacts.discovery.link = getVal('art-discovery-link');
904	        state.artifacts.discovery.note = getVal('art-discovery-note');
905	        state.artifacts.brief = state.artifacts.brief || {};
906	        state.artifacts.brief.link = getVal('art-brief-link');
907	        state.artifacts.brief.note = getVal('art-brief-note');
908	        state.artifacts.metrics = state.artifacts.metrics || {};
909	        state.artifacts.metrics.link = getVal('art-metrics-link');
910	        state.artifacts.metrics.note = getVal('art-metrics-note');
911	        state.artifacts.analysis = state.artifacts.analysis || {};
912	        state.artifacts.analysis.link = getVal('art-analysis-link');
913	        state.artifacts.analysis.note = getVal('art-analysis-note');
914	        state.artifacts.report = state.artifacts.report || {};
915	        state.artifacts.report.link = getVal('art-report-link');
916	        state.artifacts.report.note = getVal('art-report-note');
917	        state.artifacts.reflection = state.artifacts.reflection || {};
918	        state.artifacts.reflection.link = getVal('art-reflection-link');
919	        state.artifacts.reflection.note = getVal('art-reflection-note');
920	        state.cpNotes = {
921	            cp1a: getVal('cp1a-notes') || state.cpNotes.cp1a || '',
922	            cp1: getVal('cp1-notes') || state.cpNotes.cp1 || '',
923	            cp2: getVal('cp2-notes') || state.cpNotes.cp2 || '',
924	            cp3: getVal('cp3-notes') || state.cpNotes.cp3 || ''
925	        };
926	        document.querySelectorAll('.checklist input[type="checkbox"]').forEach(el => {
927	            state.checklistStates[el.id] = el.checked;
928	        });
929	        projects[currentProjectId] = state;
930	        saveProjectStore();
931	        renderProjectOptions();
932	    }
933
934	    function getVal(id) { const el = document.getElementById(id); return el ? el.value : ''; }
935	    function setValue(id, val) { const el = document.getElementById(id); if (el) el.value = val !== undefined ? val : ''; }
936
937	    function goTo(id) {
938	        document.querySelector('.step-section.active')?.classList.remove('active');
939	        document.getElementById('step-' + id)?.classList.add('active');
940	        document.querySelector('.step-btn.active')?.classList.remove('active');
941	        document.getElementById('nav-' + id)?.classList.add('active');
942	        currentStep = id;
943	        window.scrollTo({ top: 0, behavior: 'smooth' });
944	    }
945
946	    function markCompleteAndNext(doneId, nextId) {
947	        if (!state.completed.includes(doneId)) state.completed.push(doneId);
948	        markStepDone(doneId);
949	        updateProgress();
950	        saveState();
951	        goTo(nextId);
952	    }
953
954	    function markStepDone(id) {
955	        const btn = document.getElementById('nav-' + id);
956	        if (btn) btn.classList.add('done');
957	    }
958
959	    function updateProgress() {

    }

    function loadStateIntoUI() {
        clearStepDoneStates();
        resetChecklistInputs();
        const p = state.project || {};
        setValue('proj-name', p.name);
        setValue('proj-client', p.client);
        setValue('proj-type', p.type);
        setValue('proj-deadline', p.deadline);
        setValue('proj-role', p.role);
        setValue('art-discovery-link', (state.artifacts.discovery||{}).link || '');
        setValue('art-discovery-note', (state.artifacts.discovery||{}).note || '');
        setValue('art-brief-link', (state.artifacts.brief||{}).link || '');
        setValue('art-brief-note', (state.artifacts.brief||{}).note || '');
        setValue('art-metrics-link', (state.artifacts.metrics||{}).link || '');
        setValue('art-metrics-note', (state.artifacts.metrics||{}).note || '');
        setValue('art-analysis-link', (state.artifacts.analysis||{}).link || '');
        setValue('art-analysis-note', (state.artifacts.analysis||{}).note || '');
        setValue('art-report-link', (state.artifacts.report||{}).link || '');
        setValue('art-report-note', (state.artifacts.report||{}).note || '');
        setValue('art-reflection-link', (state.artifacts.reflection||{}).link || '');
        setValue('art-reflection-note', (state.artifacts.reflection||{}).note || '');
        const cls = state.checklistStates || {};
        Object.keys(cls).forEach(id => {
            const el = document.getElementById(id);
            if (el) el.checked = cls[id];
        });
        (state.completed||[]).forEach(id => markStepDone(id));
        updateProgress();
        updateSidebarLabel();
        renderTasks();
    }

    function saveState() {
        state.project = {
            name: getVal('proj-name'),
            client: getVal('proj-client'),
            type: getVal('proj-type'),
            deadline: getVal('proj-deadline'),
            role: getVal('proj-role')
        };
        state.artifacts.discovery = state.artifacts.discovery || {};
        state.artifacts.discovery.link = getVal('art-discovery-link');
        state.artifacts.discovery.note = getVal('art-discovery-note');
        state.artifacts.brief = state.artifacts.brief || {};
        state.artifacts.brief.link = getVal('art-brief-link');
        state.artifacts.brief.note = getVal('art-brief-note');
        state.artifacts.metrics = state.artifacts.metrics || {};
        state.artifacts.metrics.link = getVal('art-metrics-link');
        state.artifacts.metrics.note = getVal('art-metrics-note');
        state.artifacts.analysis = state.artifacts.analysis || {};
        state.artifacts.analysis.link = getVal('art-analysis-link');
        state.artifacts.analysis.note = getVal('art-analysis-note');
        state.artifacts.report = state.artifacts.report || {};
        state.artifacts.report.link = getVal('art-report-link');
        state.artifacts.report.note = getVal('art-report-note');
        state.artifacts.reflection = state.artifacts.reflection || {};
        state.artifacts.reflection.link = getVal('art-reflection-link');
        state.artifacts.reflection.note = getVal('art-reflection-note');
        state.cpNotes = {
            cp1a: getVal('cp1a-notes') || state.cpNotes.cp1a || '',
            cp1: getVal('cp1-notes') || state.cpNotes.cp1 || '',
            cp2: getVal('cp2-notes') || state.cpNotes.cp2 || '',
            cp3: getVal('cp3-notes') || state.cpNotes.cp3 || ''
        };
        document.querySelectorAll('.checklist input[type="checkbox"]').forEach(el => {
            state.checklistStates[el.id] = el.checked;
        });
        projects[currentProjectId] = state;
        saveProjectStore();
        renderProjectOptions();
    }

    function getVal(id) { const el = document.getElementById(id); return el ? el.value : ''; }
    function setValue(id, val) { const el = document.getElementById(id); if (el) el.value = val !== undefined ? val : ''; }

    function goTo(id) {
        document.querySelector('.step-section.active')?.classList.remove('active');
        document.getElementById('step-' + id)?.classList.add('active');
        document.querySelector('.step-btn.active')?.classList.remove('active');
        document.getElementById('nav-' + id)?.classList.add('active');
        currentStep = id;
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    function markCompleteAndNext(doneId, nextId) {
        if (!state.completed.includes(doneId)) state.completed.push(doneId);
        markStepDone(doneId);
        updateProgress();
        saveState();
        goTo(nextId);
    }

    function markStepDone(id) {
        const btn = document.getElementById('nav-' + id);
        if (btn) btn.classList.add('done');
    }

    function updateProgress() {


Now I understand the save/load pattern. The state has `cpNotes` which already has `cp1a`, `cp1`, `cp2`, `cp3`. I need to:

1. Add reflection text areas to cp1a, cp1, cp2 checkpoints
2. Wire them up in the existing save/load pattern (using cpNotes or a new `reflections` object)

I'll use the existing `cpNotes` pattern since there's already a `cp1a-notes`, `cp1-notes`, `cp2-notes` pattern. Let me check if those elements exist in the HTML.

I'm looking at the save logic and seeing how it pulls values from the DOM elements and falls back to the state. But I notice the load function doesn't seem to have explicit handling for the cpNotes fields—I need to find where those are being restored to the UI.


Bash

grep -n "cp1a-notes\|cp1-notes\|cp2-notes\|cp3-notes" "/Users/russgoerend/Desktop/Portfolio HTMLs/Marketing Analytics Playbook.html"

Find existing cpNotes textarea elements


921:            cp1a: getVal('cp1a-notes') || state.cpNotes.cp1a || '',
922:            cp1: getVal('cp1-notes') || state.cpNotes.cp1 || '',
923:            cp2: getVal('cp2-notes') || state.cpNotes.cp2 || '',
924:            cp3: getVal('cp3-notes') || state.cpNotes.cp3 || ''


So the `cp1a-notes`, `cp1-notes`, `cp2-notes` fields are referenced in the save state but they don't exist as HTML elements yet. The `cp3-notes` presumably corresponds to the existing textarea in the cp3 step.

Let me check the load function for cpNotes.


grep -n "cpNotes\|cp1a\|cp1\b\|cp2\b\|cp3\b" "/Users/russgoerend/Desktop/Portfolio HTMLs/Marketing Analytics Playbook.html" | grep -v "nav-cp\|chk-cp\|goTo\|markComplete\|step-cp" | head -30

Find all cpNotes references in Marketing Analytics Playbook


708:    const STEPS = ['orientation','setup','discovery','brief','cp1a','data','cp1','metrics','analysis','cp2','insights','report','cp3'];
724:            cpNotes: {}
920:        state.cpNotes = {
921:            cp1a: getVal('cp1a-notes') || state.cpNotes.cp1a || '',
922:            cp1: getVal('cp1-notes') || state.cpNotes.cp1 || '',
923:            cp2: getVal('cp2-notes') || state.cpNotes.cp2 || '',
924:            cp3: getVal('cp3-notes') || state.cpNotes.cp3 || ''


Good - so the cpNotes IDs are already wired into the save/load state but there are no corresponding HTML textarea elements for cp1a, cp1, cp2. The cp3 one references `cp3-notes` which doesn't appear to exist as an element either (but the cp3 step has `art-reflection-note` which is different).

Wait, let me check if there's a load for cpNotes:


grep -n "cpNotes\|cp1a-notes\|cp1-notes\|cp2-notes\|cp3-notes" "/Users/russgoerend/Desktop/Portfolio HTMLs/Marketing Analytics Playbook.html"

Find all cpNotes and notes field references


724:            cpNotes: {}
920:        state.cpNotes = {
921:            cp1a: getVal('cp1a-notes') || state.cpNotes.cp1a || '',
922:            cp1: getVal('cp1-notes') || state.cpNotes.cp1 || '',
923:            cp2: getVal('cp2-notes') || state.cpNotes.cp2 || '',
924:            cp3: getVal('cp3-notes') || state.cpNotes.cp3 || ''


The cpNotes fields are saved in saveState() but never loaded back into the DOM in loadStateIntoUI(). The `getVal()` uses || fallback to state.cpNotes, which means when saving it first tries to get the textarea value, then falls back to what's already in state.

But there's no load of these values back into the UI. I need to:
1. Add the HTML textarea elements for cp1a-notes, cp1-notes, cp2-notes (and cp3-notes for the final reflection)
2. Add load calls in loadStateIntoUI()

Let me now design the reflection sections for each checkpoint. Each checkpoint should have:

- A "Your Reflection" section with specific phase-relevant questions
- 2-3 textarea inputs using the existing input-field/textarea-field classes
- These save via the existing `saveState()` call (which is already triggered by `oninput="saveState()"`)

I'll use the existing cpNotes structure since it already has cp1a, cp1, cp2, cp3 slots rather than creating a separate reflections object. Looking at cp3, it already has artifact reflection fields, so I should check if those are being handled properly or if I need to integrate them into the same pattern.

For cp1a, cp1, and cp2, I need to add reflection textareas with IDs like `cp1a-q1`, `cp1a-q2`, etc., and wire them into the state save/load cycle.

Setting up the reflections object in state...

Now I'm defining the specific reflection questions for each checkpoint. For cp1a at the end of discovery, I'm asking what surprised them most during client discovery and what's still unclear as they move forward.

For cp1 after the data phase, I want to capture what data gaps they hit and what assumptions might affect their analysis. For cp2 after insights, I'm focusing on whether any findings challenged their hypothesis and how confident they feel about their top recommendation.

For cp3, I notice the existing structure already has reflection prompts as bullets, so I'll convert those to actual text inputs and integrate them into the state management system.

Looking at the HTML structure, there's a card with the reflection title and a checklist, plus an artifact zone below. I need to replace those bullets with textarea fields while keeping the artifact zone intact for linking supporting materials.

I'll add styling for the reflection input blocks to match the existing card design, then wire up the state handlers so responses get captured properly.


grep -n "textarea-field\|input-field\|\.card\b\|reflection" "/Users/russgoerend/Desktop/Portfolio HTMLs/Marketing Analytics Playbook.html" | head -30

Find existing textarea and card CSS classes


128:        .card { background: #F9FAFB; border-radius: 16px; padding: 22px; margin-bottom: 20px; border: 1px solid #E5E7EB; }
129:        .card-title { font-size: 1rem; font-weight: 800; margin-bottom: 10px; color: var(--primary); }
133:        .input-field, .textarea-field { width: 100%; border: 1px solid #E5E7EB; border-radius: 12px; padding: 12px 14px; font-size: 1rem; color: var(--text-main); background: white; }
134:        .textarea-field { min-height: 120px; resize: vertical; }
174:        .card p { font-size: 0.92rem; line-height: 1.65; color: #374151; margin: 0 0 12px 0; }
175:        .card p:last-child { margin-bottom: 0; }
330:                <input class="input-field" type="text" id="proj-name" placeholder="e.g. Enrollment Analytics Audit" onblur="saveState()">
332:                <input class="input-field" type="text" id="proj-client" placeholder="e.g. Marketing Operations" onblur="saveState()">
334:                <input class="input-field" type="text" id="proj-type" placeholder="e.g. Analytics Strategy" onblur="saveState()">
336:                <input class="input-field" type="date" id="proj-deadline" onchange="saveState()">
338:                <input class="input-field" type="text" id="proj-role" placeholder="e.g. Analyst, Research Lead" onblur="saveState()">
370:                <input class="input-field" id="art-discovery-link" placeholder="Link to discovery notes or meeting summary..." oninput="saveState()">
371:                <textarea class="textarea-field" id="art-discovery-note" placeholder="What did the client say was most important?" oninput="saveState()"></textarea>
401:                <input class="input-field" id="art-brief-link" placeholder="Link to your analytics brief document..." oninput="saveState()">
402:                <textarea class="textarea-field" id="art-brief-note" placeholder="What did the brief confirm or change from discovery?" oninput="saveState()"></textarea>
516:                <input class="input-field" id="art-metrics-link" placeholder="Link to your metrics plan or dashboard mockup..." oninput="saveState()">
517:                <textarea class="textarea-field" id="art-metrics-note" placeholder="What metrics will drive your analysis?" oninput="saveState()"></textarea>
565:                <input class="input-field" id="art-analysis-link" placeholder="Link to your analysis workbook or visuals..." oninput="saveState()">
566:                <textarea class="textarea-field" id="art-analysis-note" placeholder="What was the most important pattern in the data?" oninput="saveState()"></textarea>
632:                <input class="input-field" id="art-report-link" placeholder="Link to your final report, slide deck, or dashboard..." oninput="saveState()">
633:                <textarea class="textarea-field" id="art-report-note" placeholder="What is the single most important conclusion from this project?" oninput="saveState()"></textarea>
656:                <input class="input-field" id="art-reflection-link" placeholder="Link to your reflection notes or project summary..." oninput="saveState()">
657:                <textarea class="textarea-field" id="art-reflection-note" placeholder="Capture your main learning and next step recommendations." oninput="saveState()"></textarea>
658:                <button class="btn-save-artifact" onclick="saveArtifact('reflection')">Save Artifact</button>
659:
✓ Artifact saved

692:                <input class="input-field" id="new-task-input" placeholder="Example: Export GA4 campaign report" onkeydown="if(event.key==='Enter'){addTask();}">
881:        setValue('art-reflection-link', (state.artifacts.reflection||{}).link || '');
882:        setValue('art-reflection-note', (state.artifacts.reflection||{}).note || '');
917:        state.artifacts.reflection = state.artifacts.reflection || {};
918:        state.artifacts.reflection.link = getVal('art-reflection-link');


I now have a complete picture. The existing pattern uses:
- `.card` wrapper
- `.card-title` heading
- `.textarea-field` with `oninput="saveState()"`

I need to:
1. Add reflection card sections at cp1a, cp1, cp2 checkpoints with specific textareas
2. Replace the bullet list at cp3 with actual textareas
3. Add these to the saveState() function
4. Add corresponding loads in loadStateIntoUI()
5. Initialize `state.reflections = {}` in the state default

6. For styling, I'll keep it minimal by reusing the existing `.card` class and just adding a simple label style for the reflection prompts above each textarea.

Adding CSS styles...


grep -n "analytics\|--analytics" "/Users/russgoerend/Desktop/Portfolio HTMLs/Marketing Analytics Playbook.html" | head -10

Find the analytics accent color variable


13:            --analytics: #0ea5e9;
112:        .progress-bar-fill { height: 100%; width: 0%; background: var(--analytics); transition: width 0.25s ease; }
115:        .phase-label { display: block; font-size: 0.78rem; font-weight: 800; color: var(--analytics); margin-bottom: 12px; }
118:        .step-btn.active { background: #F3F4F6; border-color: var(--analytics); }
119:        .step-btn.done { border: 1px solid var(--analytics); }
121:        .step-btn.done .step-check { background: var(--analytics); border-color: var(--analytics); }
140:        .btn-send-portfolio { background: var(--analytics); color: white; }
146:        .btn-next { background: var(--analytics); color: white; }
179:        .how-to-list li::before { content: counter(how-to); background: var(--analytics); color: white; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; flex-shrink: 0; margin-top: 1px; }
280:
What marketing analytics actually is. Marketing analytics is the practice of measuring and interpreting data from marketing activities to understand what's working, what's not, and what to do next. Your job is not to fill a spreadsheet with numbers — it's to answer a business question. Clients don't need raw data. They need decisions. "Should we keep spending on Instagram ads?" "Is this email campaign driving enrollment?" That's what you're here to answer.


Build APEX_Checkin_Log.html (new file)


Now I have the analytics color: `--analytics: #0ea5e9;` (a blue/sky color).

Now let me add the CSS for reflection labels, then add the HTML to cp1a, cp1, cp2, and modify cp3, then update saveState and loadStateIntoUI.

Let me find where to add the CSS in Marketing Analytics Playbook:


Good. Now I'll make all the Marketing Analytics Playbook changes: CSS, HTML for each checkpoint, and save/load state. Let me find the CSS insertion point first.


grep -n "btn-save-artifact\|status-done\|status-" "/Users/russgoerend/Desktop/Portfolio HTMLs/Marketing Analytics Playbook.html" | head -10

Find CSS insertion point near status styles


137:        .btn-save-artifact, .btn-send-portfolio { border: none; border-radius: 999px; padding: 12px 18px; font-weight: 700; cursor: pointer; transition: filter 0.2s ease; }
138:        .btn-save-artifact { background: var(--primary); color: white; }
139:        .btn-save-artifact:hover { filter: brightness(1.05); }
164:        .status-done { background: #ECFDF5; border-color: #D1FAE5; }
372:                <button class="btn-save-artifact" onclick="saveArtifact('discovery')">Save Artifact</button>
403:                <button class="btn-save-artifact" onclick="saveArtifact('brief')">Save Artifact</button>
518:                <button class="btn-save-artifact" onclick="saveArtifact('metrics')">Save Artifact</button>
567:                <button class="btn-save-artifact" onclick="saveArtifact('analysis')">Save Artifact</button>
634:                <button class="btn-save-artifact" onclick="saveArtifact('report')">Save Artifact</button>
658:                <button class="btn-save-artifact" onclick="saveArtifact('reflection')">Save Artifact</button>


Read

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


163	        .task-move-btn.del { color: #DC2626; }
164	        .status-done { background: #ECFDF5; border-color: #D1FAE5; }
165	        .toast { position: fixed; bottom: 24px; right: 24px; background: var(--primary); color: white; padding: 14px 22px; border-radius: 999px; opacity: 0; transform: translateY(10px); transition: opacity 0.2s, transform 0.2s; z-index: 3000; }
166	        .toast.show { opacity: 1; transform: translateY(0); }
167	        .callout { border-radius: 14px; padding: 18px 22px; margin-bottom: 20px; display: flex; gap: 14px; font-size: 0.92rem; line-height: 1.6; }
168	        .callout-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
169	        .callout-yellow { background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F; }
170	        .callout-blue   { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E3A5F; }
171	        .callout-green  { background: #DCFCE7; border: 1px solid #86EFAC; color: #14532D; }
172	        .callout-purple { background: #F5F3FF; border: 1px solid #DDD6FE; color: #3B0764; }

        .task-move-btn.del { color: #DC2626; }
        .status-done { background: #ECFDF5; border-color: #D1FAE5; }
        .toast { position: fixed; bottom: 24px; right: 24px; background: var(--primary); color: white; padding: 14px 22px; border-radius: 999px; opacity: 0; transform: translateY(10px); transition: opacity 0.2s, transform 0.2s; z-index: 3000; }
        .toast.show { opacity: 1; transform: translateY(0); }
        .callout { border-radius: 14px; padding: 18px 22px; margin-bottom: 20px; display: flex; gap: 14px; font-size: 0.92rem; line-height: 1.6; }
        .callout-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }
        .callout-yellow { background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F; }
        .callout-blue   { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E3A5F; }
        .callout-green  { background: #DCFCE7; border: 1px solid #86EFAC; color: #14532D; }
        .callout-purple { background: #F5F3FF; border: 1px solid #DDD6FE; color: #3B0764; }


Edit

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

.status-done { background: #ECFDF5; border-color: #D1FAE5; }

        .status-done { background: #ECFDF5; border-color: #D1FAE5; }
        .reflect-card { background: #F0F9FF; border: 1px solid #BAE6FD; border-radius: 16px; padding: 22px; margin-bottom: 20px; border-left: 4px solid var(--analytics); }
        .reflect-card .card-title { color: var(--analytics); }
        .reflect-label { font-size: 0.88rem; font-weight: 700; color: var(--text-main); margin: 14px 0 6px; display: block; }
        .reflect-label:first-of-type { margin-top: 0; }
        .reflect-textarea { width: 100%; border: 1px solid #BAE6FD; border-radius: 10px; padding: 10px 13px; font-size: 0.92rem; font-family: 'Inter', sans-serif; color: var(--text-main); background: white; min-height: 80px; resize: vertical; transition: border-color 0.2s; }
        .reflect-textarea:focus { outline: none; border-color: var(--analytics); }


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)

        .status-done { background: #ECFDF5; border-color: #D1FAE5; }
        .reflect-card { background: #F0F9FF; border: 1px solid #BAE6FD; border-radius: 16px; padding: 22px; margin-bottom: 20px; border-left: 4px solid var(--analytics); }
        .reflect-card .card-title { color: var(--analytics); }
        .reflect-label { font-size: 0.88rem; font-weight: 700; color: var(--text-main); margin: 14px 0 6px; display: block; }
        .reflect-label:first-of-type { margin-top: 0; }
        .reflect-textarea { width: 100%; border: 1px solid #BAE6FD; border-radius: 10px; padding: 10px 13px; font-size: 0.92rem; font-family: 'Inter', sans-serif; color: var(--text-main); background: white; min-height: 80px; resize: vertical; transition: border-color 0.2s; }
        .reflect-textarea:focus { outline: none; border-color: var(--analytics); }

.task-move-btn { border: 1px solid #E5E7EB; border-radius: 999px; background: white; color: var(--accent); padding: 8px 10px; cursor: pointer; }

+        .reflect-card { background: #F0F9FF; border: 1px solid #BAE6FD; border-radius: 16px; padding: 22px; margin-bottom: 20px; border-left: 4px solid var(--analytics); }

+        .reflect-card .card-title { color: var(--analytics); }

+        .reflect-label { font-size: 0.88rem; font-weight: 700; color: var(--text-main); margin: 14px 0 6px; display: block; }

+        .reflect-label:first-of-type { margin-top: 0; }

+        .reflect-textarea { width: 100%; border: 1px solid #BAE6FD; border-radius: 10px; padding: 10px 13px; font-size: 0.92rem; font-family: 'Inter', sans-serif; color: var(--text-main); background: white; min-height: 80px; resize: vertical; transition: border-color 0.2s; }

+        .reflect-textarea:focus { outline: none; border-color: var(--analytics); }

.toast { position: fixed; bottom: 24px; right: 24px; background: var(--primary); color: white; padding: 14px 22px; border-radius: 999px; opacity: 0; transform: translateY(10px); transition: opacity 0.2s, transform 0.2s; z-index: 3000; }

.toast.show { opacity: 1; transform: translateY(0); }

.callout { border-radius: 14px; padding: 18px 22px; margin-bottom: 20px; display: flex; gap: 14px; font-size: 0.92rem; line-height: 1.6; }


Now add reflection cards to cp1a, cp1, cp2, and update cp3. Starting with cp1a:


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

Review Checklist

Is the business question clearly defined?

Are the priority metrics aligned with client goals?

Is the intended deliverable format clear?

Nick Berry is the industry mentor for this analytics track — confirm the brief with him before moving to data validation.

                <button class="btn-prev" onclick="goTo('brief')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp1a','data')">Checkpoint Complete →</button>

Review Checklist

Is the business question clearly defined?

Are the priority metrics aligned with client goals?

Is the intended deliverable format clear?

Nick Berry is the industry mentor for this analytics track — confirm the brief with him before moving to data validation.

💭 Phase 1 Reflection

                What surprised you most during the client discovery process?
                <textarea class="reflect-textarea" id="cp1a-q1" placeholder="What did you learn that you didn't expect?" oninput="saveState()"></textarea>
                What's still unclear as you move into the data phase?
                <textarea class="reflect-textarea" id="cp1a-q2" placeholder="What assumptions are you carrying forward?" oninput="saveState()"></textarea>

                <button class="btn-prev" onclick="goTo('brief')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp1a','data')">Checkpoint Complete →</button>


Review Checklist

Is the business question clearly defined?

Are the priority metrics aligned with client goals?

Is the intended deliverable format clear?

Nick Berry is the industry mentor for this analytics track — confirm the brief with him before moving to data validation.

                <button class="btn-prev" onclick="goTo('brief')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp1a','data')">Checkpoint Complete →</button>

Review Checklist

Is the business question clearly defined?

Are the priority metrics aligned with client goals?

Is the intended deliverable format clear?

Nick Berry is the industry mentor for this analytics track — confirm the brief with him before moving to data validation.

💭 Phase 1 Reflection

                What surprised you most during the client discovery process?
                <textarea class="reflect-textarea" id="cp1a-q1" placeholder="What did you learn that you didn't expect?" oninput="saveState()"></textarea>
                What's still unclear as you move into the data phase?
                <textarea class="reflect-textarea" id="cp1a-q2" placeholder="What assumptions are you carrying forward?" oninput="saveState()"></textarea>

                <button class="btn-prev" onclick="goTo('brief')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp1a','data')">Checkpoint Complete →</button>

+                <label class="reflect-label" for="cp1a-q1">What surprised you most during the client discovery process?</label>

+                <textarea class="reflect-textarea" id="cp1a-q1" placeholder="What did you learn that you didn't expect?" oninput="saveState()"></textarea>

+                <label class="reflect-label" for="cp1a-q2">What's still unclear as you move into the data phase?</label>

+                <textarea class="reflect-textarea" id="cp1a-q2" placeholder="What assumptions are you carrying forward?" oninput="saveState()"></textarea>


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

Checkpoint Actions

Confirm all required data sources are accessible.

Agree on the timeframe and key metrics.

Document any gaps or assumptions.

Nick Berry should sign off on the data plan before analysis starts.

                <button class="btn-prev" onclick="goTo('data')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp1','metrics')">Checkpoint Complete →</button>

Checkpoint Actions

Confirm all required data sources are accessible.

Agree on the timeframe and key metrics.

Document any gaps or assumptions.

Nick Berry should sign off on the data plan before analysis starts.

💭 Phase 2 Reflection

                What data gaps did you encounter, and how did you work around them?
                <textarea class="reflect-textarea" id="cp1-q1" placeholder="Be specific — what was missing and what did you do instead?" oninput="saveState()"></textarea>
                What's one assumption you're making that could affect your analysis?
                <textarea class="reflect-textarea" id="cp1-q2" placeholder="What could be wrong about your data picture right now?" oninput="saveState()"></textarea>

                <button class="btn-prev" onclick="goTo('data')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp1','metrics')">Checkpoint Complete →</button>


Checkpoint Actions

Confirm all required data sources are accessible.

Agree on the timeframe and key metrics.

Document any gaps or assumptions.

Nick Berry should sign off on the data plan before analysis starts.

                <button class="btn-prev" onclick="goTo('data')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp1','metrics')">Checkpoint Complete →</button>

Checkpoint Actions

Confirm all required data sources are accessible.

Agree on the timeframe and key metrics.

Document any gaps or assumptions.

Nick Berry should sign off on the data plan before analysis starts.

💭 Phase 2 Reflection

                What data gaps did you encounter, and how did you work around them?
                <textarea class="reflect-textarea" id="cp1-q1" placeholder="Be specific — what was missing and what did you do instead?" oninput="saveState()"></textarea>
                What's one assumption you're making that could affect your analysis?
                <textarea class="reflect-textarea" id="cp1-q2" placeholder="What could be wrong about your data picture right now?" oninput="saveState()"></textarea>

                <button class="btn-prev" onclick="goTo('data')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp1','metrics')">Checkpoint Complete →</button>

+                <label class="reflect-label" for="cp1-q1">What data gaps did you encounter, and how did you work around them?</label>

+                <textarea class="reflect-textarea" id="cp1-q1" placeholder="Be specific — what was missing and what did you do instead?" oninput="saveState()"></textarea>

+                <label class="reflect-label" for="cp1-q2">What's one assumption you're making that could affect your analysis?</label>

+                <textarea class="reflect-textarea" id="cp1-q2" placeholder="What could be wrong about your data picture right now?" oninput="saveState()"></textarea>


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

Review Checklist

Are the insights aligned with the brief and business goals?

Do the recommendations flow from the data?

Have you identified the highest-impact next steps?

Nick Berry should review this checkpoint to confirm the strategy before reporting.

                <button class="btn-prev" onclick="goTo('analysis')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp2','insights')">Checkpoint Complete →</button>

Review Checklist

Are the insights aligned with the brief and business goals?

Do the recommendations flow from the data?

Have you identified the highest-impact next steps?

Nick Berry should review this checkpoint to confirm the strategy before reporting.

💭 Phase 3 Reflection

                What finding surprised you or challenged your initial hypothesis?
                <textarea class="reflect-textarea" id="cp2-q1" placeholder="What did the data tell you that you didn't expect?" oninput="saveState()"></textarea>
                How confident are you in your top recommendation, and why?
                <textarea class="reflect-textarea" id="cp2-q2" placeholder="What's the strongest evidence supporting it? What could undermine it?" oninput="saveState()"></textarea>

                <button class="btn-prev" onclick="goTo('analysis')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp2','insights')">Checkpoint Complete →</button>


Review Checklist

Are the insights aligned with the brief and business goals?

Do the recommendations flow from the data?

Have you identified the highest-impact next steps?

Nick Berry should review this checkpoint to confirm the strategy before reporting.

                <button class="btn-prev" onclick="goTo('analysis')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp2','insights')">Checkpoint Complete →</button>

Review Checklist

Are the insights aligned with the brief and business goals?

Do the recommendations flow from the data?

Have you identified the highest-impact next steps?

Nick Berry should review this checkpoint to confirm the strategy before reporting.

💭 Phase 3 Reflection

                What finding surprised you or challenged your initial hypothesis?
                <textarea class="reflect-textarea" id="cp2-q1" placeholder="What did the data tell you that you didn't expect?" oninput="saveState()"></textarea>
                How confident are you in your top recommendation, and why?
                <textarea class="reflect-textarea" id="cp2-q2" placeholder="What's the strongest evidence supporting it? What could undermine it?" oninput="saveState()"></textarea>

                <button class="btn-prev" onclick="goTo('analysis')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp2','insights')">Checkpoint Complete →</button>

+                <label class="reflect-label" for="cp2-q1">What finding surprised you or challenged your initial hypothesis?</label>

+                <textarea class="reflect-textarea" id="cp2-q1" placeholder="What did the data tell you that you didn't expect?" oninput="saveState()"></textarea>

+                <label class="reflect-label" for="cp2-q2">How confident are you in your top recommendation, and why?</label>

+                <textarea class="reflect-textarea" id="cp2-q2" placeholder="What's the strongest evidence supporting it? What could undermine it?" oninput="saveState()"></textarea>


Now update cp3 to replace the bullet list with real textareas:


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

Reflection Prompts

What did the data tell you that surprised you?

What was the biggest risk in the project and how did you manage it?

What would you do differently on the next analytics project?

💭 Project Reflection

                What did the data tell you that surprised you?
                <textarea class="reflect-textarea" id="cp3-q1" placeholder="What finding was most unexpected?" oninput="saveState()"></textarea>
                What was the biggest risk in this project and how did you manage it?
                <textarea class="reflect-textarea" id="cp3-q2" placeholder="What could have gone wrong, and what did you do about it?" oninput="saveState()"></textarea>
                What would you do differently on the next analytics project?
                <textarea class="reflect-textarea" id="cp3-q3" placeholder="If you started over tomorrow, what would change?" oninput="saveState()"></textarea>


Reflection Prompts

What did the data tell you that surprised you?

What was the biggest risk in the project and how did you manage it?

What would you do differently on the next analytics project?

💭 Project Reflection

                What did the data tell you that surprised you?
                <textarea class="reflect-textarea" id="cp3-q1" placeholder="What finding was most unexpected?" oninput="saveState()"></textarea>
                What was the biggest risk in this project and how did you manage it?
                <textarea class="reflect-textarea" id="cp3-q2" placeholder="What could have gone wrong, and what did you do about it?" oninput="saveState()"></textarea>
                What would you do differently on the next analytics project?
                <textarea class="reflect-textarea" id="cp3-q3" placeholder="If you started over tomorrow, what would change?" oninput="saveState()"></textarea>

Capture what worked, what you learned, and what you would improve next time.

-
What did the data tell you that surprised you?

-
What was the biggest risk in the project and how did you manage it?

-
What would you do differently on the next analytics project?

+                <label class="reflect-label" for="cp3-q1">What did the data tell you that surprised you?</label>

+                <textarea class="reflect-textarea" id="cp3-q1" placeholder="What finding was most unexpected?" oninput="saveState()"></textarea>

+                <label class="reflect-label" for="cp3-q2">What was the biggest risk in this project and how did you manage it?</label>

+                <textarea class="reflect-textarea" id="cp3-q2" placeholder="What could have gone wrong, and what did you do about it?" oninput="saveState()"></textarea>

+                <label class="reflect-label" for="cp3-q3">What would you do differently on the next analytics project?</label>

+                <textarea class="reflect-textarea" id="cp3-q3" placeholder="If you started over tomorrow, what would change?" oninput="saveState()"></textarea>


Build APEX_Checkin_Log.html (new file)

Add check-in tile to APEX_Professional_Dashboard.html

Add Recent Check-ins section to APEX_Professional_Portfolio.html

Add reflection textareas to Marketing Analytics Playbook checkpoints

Add reflection textareas to Social Media Playbook checkpoints


Now wire the new fields into saveState and loadStateIntoUI:


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

        state.cpNotes = {
            cp1a: getVal('cp1a-notes') || state.cpNotes.cp1a || '',
            cp1: getVal('cp1-notes') || state.cpNotes.cp1 || '',
            cp2: getVal('cp2-notes') || state.cpNotes.cp2 || '',
            cp3: getVal('cp3-notes') || state.cpNotes.cp3 || ''
        };

        state.cpNotes = {
            cp1a: getVal('cp1a-notes') || state.cpNotes.cp1a || '',
            cp1: getVal('cp1-notes') || state.cpNotes.cp1 || '',
            cp2: getVal('cp2-notes') || state.cpNotes.cp2 || '',
            cp3: getVal('cp3-notes') || state.cpNotes.cp3 || ''
        };
        state.reflections = {
            cp1a: { q1: getVal('cp1a-q1'), q2: getVal('cp1a-q2') },
            cp1:  { q1: getVal('cp1-q1'),  q2: getVal('cp1-q2')  },
            cp2:  { q1: getVal('cp2-q1'),  q2: getVal('cp2-q2')  },
            cp3:  { q1: getVal('cp3-q1'),  q2: getVal('cp3-q2'),  q3: getVal('cp3-q3') }
        };


        state.cpNotes = {
            cp1a: getVal('cp1a-notes') || state.cpNotes.cp1a || '',
            cp1: getVal('cp1-notes') || state.cpNotes.cp1 || '',
            cp2: getVal('cp2-notes') || state.cpNotes.cp2 || '',
            cp3: getVal('cp3-notes') || state.cpNotes.cp3 || ''
        };
        state.reflections = {
            cp1a: { q1: getVal('cp1a-q1'), q2: getVal('cp1a-q2') },
            cp1:  { q1: getVal('cp1-q1'),  q2: getVal('cp1-q2')  },
            cp2:  { q1: getVal('cp2-q1'),  q2: getVal('cp2-q2')  },
            cp3:  { q1: getVal('cp3-q1'),  q2: getVal('cp3-q2'),  q3: getVal('cp3-q3') }
        };

+            cp1a: { q1: getVal('cp1a-q1'), q2: getVal('cp1a-q2') },

document.querySelectorAll('.checklist input[type="checkbox"]').forEach(el => {


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

        setValue('art-reflection-link', (state.artifacts.reflection||{}).link || '');
        setValue('art-reflection-note', (state.artifacts.reflection||{}).note || '');


        setValue('art-reflection-link', (state.artifacts.reflection||{}).link || '');
        setValue('art-reflection-note', (state.artifacts.reflection||{}).note || '');

setValue('art-report-note', (state.artifacts.report||{}).note || '');

+        const r = state.reflections || {};

const cls = state.checklistStates || {};


TodoWrite

Build APEX_Checkin_Log.html (new file)

Add check-in tile to APEX_Professional_Dashboard.html

Add Recent Check-ins section to APEX_Professional_Portfolio.html

Add reflection textareas to Marketing Analytics Playbook checkpoints

Adding reflection prompts to Marketing Analytics Playbook

Add reflection textareas to Social Media Playbook checkpoints

Adding reflection prompts to Social Media 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 APEX_Checkin_Log.html (new file)

Build APEX_Checkin_Log.html (new file)


Now the Social Media Playbook. Let me find its checkpoint structure.


Bash

grep -n "phase\|checkpoint\|step-btn\|phase-label\|storageKey\|STORAGE_KEY\|localStorage\|cpNotes\|reflections\|step-section" "/Users/russgoerend/Desktop/Portfolio HTMLs/Social Media Playbook.html" | head -60

Find phase/checkpoint structure and storage in Social Media Playbook


184:        .phase-group {
187:        .phase-label {
196:        .phase-label.strat { background: var(--strat); }
197:        .phase-label.create { background: var(--create); }
198:        .phase-label.publish { background: var(--publish); }
199:        .step-btn {
216:        .step-btn:hover { background: #F3F4F6; }
217:        .step-btn.active { background: var(--primary); color: white; }
218:        .step-btn.done { background: var(--secondary); color: var(--primary); }
219:        .step-btn.checkpoint { font-weight: 700; }
228:        .step-btn.done .step-check::after {
235:        .step-btn.active .step-check {
271:        .step-section {
274:        .step-section.active {
277:        .phase-badge {
286:        .phase-badge.strat { background: var(--strat); }
287:        .phase-badge.create { background: var(--create); }
288:        .phase-badge.publish { background: var(--publish); }
464:        .checkpoint-mentor {
739:

740:
◆ Phase 0: Orientation

741:                <button class="step-btn active" id="nav-orientation" onclick="goTo('orientation')">
748:

749:
◆ Phase 1: Strategy & Planning

750:                <button class="step-btn" id="nav-setup" onclick="goTo('setup')">
754:                <button class="step-btn" id="nav-discovery" onclick="goTo('discovery')">
758:                <button class="step-btn" id="nav-brief" onclick="goTo('brief')">
762:                <button class="step-btn" id="nav-cp1a" onclick="goTo('cp1a')">
766:                <button class="step-btn" id="nav-audience" onclick="goTo('audience')">
770:                <button class="step-btn" id="nav-calendar" onclick="goTo('calendar')">
774:                <button class="step-btn checkpoint" id="nav-cp1" onclick="goTo('cp1')">
781:

782:
◆ Phase 2: Content Creation

783:                <button class="step-btn" id="nav-cp2a" onclick="goTo('cp2a')">
787:                <button class="step-btn" id="nav-content" onclick="goTo('content')">
791:                <button class="step-btn checkpoint" id="nav-cp2" onclick="goTo('cp2')">
798:

799:
◆ Phase 3: Publishing & Engagement

800:                <button class="step-btn" id="nav-publish" onclick="goTo('publish')">
804:                <button class="step-btn" id="nav-engage" onclick="goTo('engage')">
808:                <button class="step-btn checkpoint" id="nav-cp3" onclick="goTo('cp3')">
812:                <button class="step-btn" id="nav-review" onclick="goTo('review')">
830:

831:
◆ Phase 0 · Orientation

889:

890:
◆ Phase 1 · Strategy & Planning

927:

928:
◆ Phase 1 · Strategy & Planning

983:

984:
◆ Phase 1 · Strategy & Planning

1041:

1042:
◆ Phase 1 · Strategy & Planning

1046:

1073:

1074:
◆ Phase 1 · Strategy & Planning

1109:

1110:
◆ Phase 1 · Strategy & Planning

1145:

1146:
◆ Phase 1 · Strategy & Planning

1150:


grep -n "STORAGE_KEY\|localStorage\|cpNotes\|saveState\|reflections\|state\." "/Users/russgoerend/Desktop/Portfolio HTMLs/Social Media Playbook.html" | head -40

Find storage and state pattern in Social Media Playbook


897:                    <input class="field-input" id="proj-name" type="text" placeholder="e.g., APEX Alumni Social Media Campaign 2026" oninput="saveState(); updateSidebarLabel();">
899:                    <input class="field-input" id="proj-client" type="text" placeholder="e.g., Waukee APEX, Waukee Community Theatre" oninput="saveState();">
901:                    <select class="field-input" id="proj-type" onchange="saveState();">
910:                    <input class="field-input" id="proj-deadline" type="date" oninput="saveState();">
912:                    <input class="field-input" id="proj-role" type="text" placeholder="e.g., Social Media Manager, Content Creator" oninput="saveState();">
966:                        <input type="text" class="artifact-link-input" id="art-discovery-link" placeholder="Link to your discovery notes or client meeting doc..." oninput="saveState();">
968:                    <textarea class="artifact-note-input" id="art-discovery-note" placeholder="What did the client say? What are the agreed priorities and audience insights?" oninput="saveState();"></textarea>
1024:                        <input type="text" class="artifact-link-input" id="art-brief-link" placeholder="Link to your completed Creative Brief document..." oninput="saveState();">
1026:                    <textarea class="artifact-note-input" id="art-brief-note" placeholder="Any key decisions made? Anything that changed from discovery?" oninput="saveState();"></textarea>
1064:                <textarea class="field-input" id="cp1a-notes" placeholder="What did Maria & Kayt say? What should we adjust in the strategy?" oninput="saveState();"></textarea>
1081:
<input type="checkbox" id="aud1" onchange="saveState();">Defined primary audience demographics (age, location, interests)

1082:
<input type="checkbox" id="aud2" onchange="saveState();">Identified preferred social media platforms

1083:
<input type="checkbox" id="aud3" onchange="saveState();">Analyzed competitor social media presence

1084:
<input type="checkbox" id="aud4" onchange="saveState();">Researched trending topics in your niche

1085:
<input type="checkbox" id="aud5" onchange="saveState();">Documented audience pain points and interests

1092:                        <input type="text" class="artifact-link-input" id="art-audience-link" placeholder="Link to your audience research doc..." oninput="saveState();">
1094:                    <textarea class="artifact-note-input" id="art-audience-note" placeholder="What did you learn about the audience? How will this inform your content?" oninput="saveState();"></textarea>
1117:
<input type="checkbox" id="cal1" onchange="saveState();">Defined content pillars and themes

1118:
<input type="checkbox" id="cal2" onchange="saveState();">Scheduled posts for at least 4 weeks

1119:
<input type="checkbox" id="cal3" onchange="saveState();">Balanced mix of content types (images, videos, stories, etc.)

1120:
<input type="checkbox" id="cal4" onchange="saveState();">Included calls-to-action for each post

1121:
<input type="checkbox" id="cal5" onchange="saveState();">Coordinated with any events or promotions

1128:                        <input type="text" class="artifact-link-input" id="art-calendar-link" placeholder="Link to your content calendar..." oninput="saveState();">
1130:                    <textarea class="artifact-note-input" id="art-calendar-note" placeholder="Describe your content strategy and posting schedule." oninput="saveState();"></textarea>
1169:                <textarea class="field-input" id="cp1-notes" placeholder="What did Maria & Kayt confirm about the strategy, calendar, and next steps?" oninput="saveState();"></textarea>
1202:                <textarea class="field-input" id="cp2a-notes" placeholder="What did Maria & Kayt say? What are the confirmed content roles, formats, and review expectations?" oninput="saveState();"></textarea>
1253:
<input type="checkbox" id="con1" onchange="saveState();">Content aligns with brand voice and approved brief

1254:
<input type="checkbox" id="con2" onchange="saveState();">Visuals meet platform format and size requirements

1255:
<input type="checkbox" id="con3" onchange="saveState();">Captions have a hook, body, and specific CTA

1256:
<input type="checkbox" id="con4" onchange="saveState();">Hashtags researched and saved per content pillar

1257:
<input type="checkbox" id="con5" onchange="saveState();">Content batch-created and staged for scheduled posting

1292:                <textarea class="field-input" id="cp2-notes" placeholder="What did Maria & Kayt recommend? What needs editing, approval, or repost planning?" oninput="saveState();"></textarea>
1331:
<input type="checkbox" id="pub1" onchange="saveState();">Posted at an optimal time for the audience and platform

1332:
<input type="checkbox" id="pub2" onchange="saveState();">Hashtags and tags applied correctly

1333:
<input type="checkbox" id="pub3" onchange="saveState();">Shared to Stories (Instagram) or cross-promoted where relevant

1334:
<input type="checkbox" id="pub4" onchange="saveState();">Monitored and responded to first-hour comments

1335:
<input type="checkbox" id="pub5" onchange="saveState();">Analytics tracking confirmed active for this post

1354:
<input type="checkbox" id="eng1" onchange="saveState();">Responded to comments and messages promptly

1355:
<input type="checkbox" id="eng2" onchange="saveState();">Engaged with user-generated content

1356:
<input type="checkbox" id="eng3" onchange="saveState();">Participated in relevant conversations


Good - I can see the Social Media Playbook already has `cp1a-notes`, `cp1-notes`, `cp2-notes` as textareas that exist in the HTML. The structure is slightly different from Marketing Analytics - the cp notes are already in the HTML as text areas.

Let me find the checkpoints (cp1, cp2, cp3) to see what they look like and where to add reflection sections.

Looking at the Social Media Playbook structure:
- Phase 1: cp1a (brief review), cp1 (strategy/calendar sign-off)
- Phase 2: cp2a (content roles), cp2 (content review)

- Phase 3: cp3 (publishing review), review (performance review)

I notice the existing textareas are for mentor notes rather than personal reflections, so I need to add separate reflection sections to the main phase-ending checkpoints at cp1, cp2, and cp3. Let me examine the HTML structure of these checkpoints to see where to insert the reflection sections and how to wire up the save functionality.


Read

/Users/russgoerend/Desktop/Portfolio HTMLs/Social Media Playbook.html


1145

1146
◆ Phase 1 · Strategy & Planning

1147
Checkpoint: Content Plan

1148
Before starting content creation, review your audience research and calendar with Maria & Kayt. Ensure your plan is solid and aligned.

1149
1150

1151
👩💼

1152

1153
Maria & Kayt

1154
Social Media Mentors · Content Strategy & Brand Alignment

1155

1156

1157
1158

1159
🧭 Review Guidance

1160

1161
Have we confirmed the campaign goal, target audience, and messaging?

1162
Is the content calendar aligned with client events, deadlines, and promotion windows?

1163
Are platform priorities and post formats clearly defined?

1164
Does the team have the assets and production plan needed to hit the schedule?

1165
Are roles, approvals, and communication expectations agreed for Phase 2?

1166

1167

1168
1169	                <textarea class="field-input" id="cp1-notes" placeholder="What did Maria & Kayt confirm about the strategy, calendar, and next steps?" oninput="saveState();"></textarea>
1170
1171

1172	                    <button class="btn-prev" onclick="goTo('calendar')">← Back</button>
1173	                    <button class="btn-next" onclick="markCompleteAndNext('cp1', 'cp2a')">Checkpoint Complete — Content Kickoff →</button>
1174

1175

1176
1177
1178

1179
◆ Phase 2 · Content Creation

1180
Checkpoint: Content Kickoff

1181
Start content creation with a quick check-in. Confirm your tools, resources, and creative direction.

1182
1183

1184
👩💼

1185

1186
Maria & Kayt

1187
Social Media Mentors · Content Strategy & Brand Alignment

1188

1189

1190
1191

1192
🧭 What to check in about

1193

1194
Is the creative direction aligned with the approved audience profile and campaign goals?

1195
Which platforms and content formats are we prioritizing first?

1196
Do we have the visuals, copy, captions, hashtags, and brand voice ready?

1197
Who owns each step: content creation, review, editing, posting, and analytics?

1198
What metrics or quality standards will we use to decide if content is ready?

1199

1200

1201
1202	                <textarea class="field-input" id="cp2a-notes" placeholder="What did Maria & Kayt say? What are the confirmed content roles, formats, and review expectations?" oninput="saveState();"></textarea>
1203
1204

/Users/russgoerend/Desktop/Portfolio HTMLs/Social Media Playbook.html

◆ Phase 1 · Strategy & Planning

Checkpoint: Content Plan

Before starting content creation, review your audience research and calendar with Maria & Kayt. Ensure your plan is solid and aligned.

👩💼

Maria & Kayt

Social Media Mentors · Content Strategy & Brand Alignment

🧭 Review Guidance

Have we confirmed the campaign goal, target audience, and messaging?

Is the content calendar aligned with client events, deadlines, and promotion windows?

Are platform priorities and post formats clearly defined?

Does the team have the assets and production plan needed to hit the schedule?

Are roles, approvals, and communication expectations agreed for Phase 2?

                <textarea class="field-input" id="cp1-notes" placeholder="What did Maria & Kayt confirm about the strategy, calendar, and next steps?" oninput="saveState();"></textarea>

                    <button class="btn-prev" onclick="goTo('calendar')">← Back</button>
                    <button class="btn-next" onclick="markCompleteAndNext('cp1', 'cp2a')">Checkpoint Complete — Content Kickoff →</button>

◆ Phase 2 · Content Creation

Checkpoint: Content Kickoff

Start content creation with a quick check-in. Confirm your tools, resources, and creative direction.

👩💼

Maria & Kayt

Social Media Mentors · Content Strategy & Brand Alignment

🧭 What to check in about

Is the creative direction aligned with the approved audience profile and campaign goals?

Which platforms and content formats are we prioritizing first?

Do we have the visuals, copy, captions, hashtags, and brand voice ready?

Who owns each step: content creation, review, editing, posting, and analytics?

What metrics or quality standards will we use to decide if content is ready?

                <textarea class="field-input" id="cp2a-notes" placeholder="What did Maria & Kayt say? What are the confirmed content roles, formats, and review expectations?" oninput="saveState();"></textarea>


/Users/russgoerend/Desktop/Portfolio HTMLs/Social Media Playbook.html


1268

1269
◆ Phase 2 · Content Creation

1270
Checkpoint: Content Review

1271
Before publishing, review your content with Maria & Kayt. Ensure it meets quality standards and strategic goals.

1272
1273

1274
👩💼

1275

1276
Maria & Kayt

1277
Social Media Mentors · Content Strategy & Brand Alignment

1278

1279

1280
1281

1282
🧭 Review Guidance

1283

1284
Does each post match the approved audience, tone, and campaign message?

1285
Are captions clear, on-brand, and ready for the chosen platform?

1286
Do images, video clips, and text follow the brand style and quality standards?

1287
Are platform-specific requirements met (length, aspect ratio, caption format)?

1288
Is the publishing and engagement plan confirmed, including who posts, who monitors, and who responds?

1289

1290

1291
1292	                <textarea class="field-input" id="cp2-notes" placeholder="What did Maria & Kayt recommend? What needs editing, approval, or repost planning?" oninput="saveState();"></textarea>
1293
1294

1295	                    <button class="btn-prev" onclick="goTo('content')">← Back</button>
1296	                    <button class="btn-next" onclick="markCompleteAndNext('cp2', 'publish')">Checkpoint Complete — Publishing →</button>
1297

1298

1299
1300
1301

1302
◆ Phase 3 · Publishing & Engagement

1303
Publishing

1304
Launch your content according to the calendar. The first hour after posting matters more than most people realize — here's what to do.

1305
1306

1307
⏰ When to Post

1308
Posting time affects how much the algorithm distributes your content. General starting-point guidelines:

1309

1310
Instagram: Tuesday–Friday, 9–11am or 5–7pm in your audience's time zone. Avoid posting late at night or early Monday morning.

1311
TikTok: Tuesday–Thursday, 7–9am or 7–9pm. TikTok's algorithm is less sensitive to timing than Instagram's, but early engagement still matters.

1312
Facebook: Wednesday 11am–1pm and Thursday–Friday 1–3pm tend to perform well. Evenings (7–9pm) also work for community-type posts.

1313
The real answer: After a few weeks of posting, check the platform's native analytics for YOUR account's audience activity. Those numbers beat any general guideline.

1314

1315

1316
1317

1318
🚀 The First Hour After Posting

1319
Platforms measure early engagement to decide how broadly to distribute content. What you do in the first 60 minutes matters.

1320

1321
Reply to every comment immediately. Early comments signal to the algorithm that the post is generating conversation. Even a short, genuine reply helps.

1322
Don't edit the post. Editing after posting resets the algorithm's distribution — the post essentially starts over. Proofread before you publish.

1323
Share to Stories. On Instagram, sharing your new feed post to your Story immediately gives it a second push and puts it in front of followers who might have missed it.

1324
Engage with similar content. Spending 10–15 minutes engaging with posts in your niche right after publishing can improve your account's visibility signal on the platform.

1325

1326

1327
1328

1329
🚀 Publishing Checklist

1330

1331
<input type="checkbox" id="pub1" onchange="saveState();">Posted at an optimal time for the audience and platform

1332
<input type="checkbox" id="pub2" onchange="saveState();">Hashtags and tags applied correctly

1333
<input type="checkbox" id="pub3" onchange="saveState();">Shared to Stories (Instagram) or cross-promoted where relevant

1334
<input type="checkbox" id="pub4" onchange="saveState();">Monitored and responded to first-hour comments

1335
<input type="checkbox" id="pub5" onchange="saveState();">Analytics tracking confirmed active for this post

1336

1337

1338
1339

1340	                    <button class="btn-prev" onclick="goTo('cp2')">← Back</button>
1341	                    <button class="btn-next" onclick="markCompleteAndNext('publish', 'engage')">Mark Complete & Continue →</button>
1342

1343

1344
1345
1346

1347
◆ Phase 3 · Publishing & Engagement

◆ Phase 2 · Content Creation

Checkpoint: Content Review

Before publishing, review your content with Maria & Kayt. Ensure it meets quality standards and strategic goals.

👩💼

Maria & Kayt

Social Media Mentors · Content Strategy & Brand Alignment

🧭 Review Guidance

Does each post match the approved audience, tone, and campaign message?

Are captions clear, on-brand, and ready for the chosen platform?

Do images, video clips, and text follow the brand style and quality standards?

Are platform-specific requirements met (length, aspect ratio, caption format)?

Is the publishing and engagement plan confirmed, including who posts, who monitors, and who responds?

                <textarea class="field-input" id="cp2-notes" placeholder="What did Maria & Kayt recommend? What needs editing, approval, or repost planning?" oninput="saveState();"></textarea>

                    <button class="btn-prev" onclick="goTo('content')">← Back</button>
                    <button class="btn-next" onclick="markCompleteAndNext('cp2', 'publish')">Checkpoint Complete — Publishing →</button>

◆ Phase 3 · Publishing & Engagement

Publishing

Launch your content according to the calendar. The first hour after posting matters more than most people realize — here's what to do.

⏰ When to Post

Posting time affects how much the algorithm distributes your content. General starting-point guidelines:

Instagram: Tuesday–Friday, 9–11am or 5–7pm in your audience's time zone. Avoid posting late at night or early Monday morning.

TikTok: Tuesday–Thursday, 7–9am or 7–9pm. TikTok's algorithm is less sensitive to timing than Instagram's, but early engagement still matters.

Facebook: Wednesday 11am–1pm and Thursday–Friday 1–3pm tend to perform well. Evenings (7–9pm) also work for community-type posts.

The real answer: After a few weeks of posting, check the platform's native analytics for YOUR account's audience activity. Those numbers beat any general guideline.

🚀 The First Hour After Posting

Platforms measure early engagement to decide how broadly to distribute content. What you do in the first 60 minutes matters.

Reply to every comment immediately. Early comments signal to the algorithm that the post is generating conversation. Even a short, genuine reply helps.

Don't edit the post. Editing after posting resets the algorithm's distribution — the post essentially starts over. Proofread before you publish.

Share to Stories. On Instagram, sharing your new feed post to your Story immediately gives it a second push and puts it in front of followers who might have missed it.

Engage with similar content. Spending 10–15 minutes engaging with posts in your niche right after publishing can improve your account's visibility signal on the platform.

🚀 Publishing Checklist

<input type="checkbox" id="pub1" onchange="saveState();">Posted at an optimal time for the audience and platform

<input type="checkbox" id="pub2" onchange="saveState();">Hashtags and tags applied correctly

<input type="checkbox" id="pub3" onchange="saveState();">Shared to Stories (Instagram) or cross-promoted where relevant

<input type="checkbox" id="pub4" onchange="saveState();">Monitored and responded to first-hour comments

<input type="checkbox" id="pub5" onchange="saveState();">Analytics tracking confirmed active for this post

                    <button class="btn-prev" onclick="goTo('cp2')">← Back</button>
                    <button class="btn-next" onclick="markCompleteAndNext('publish', 'engage')">Mark Complete & Continue →</button>

◆ Phase 3 · Publishing & Engagement


Bash

grep -n "step-cp3\|step-review\|Performance Review\|Project Reflection\|Final Reflection" "/Users/russgoerend/Desktop/Portfolio HTMLs/Social Media Playbook.html" | head -10

Find cp3 and review step in Social Media Playbook


810:                    ✅ Checkpoint: Performance Review
1369:

1371:
Checkpoint: Performance Review

1413:


Read

/Users/russgoerend/Desktop/Portfolio HTMLs/Social Media Playbook.html


1369

1370
◆ Phase 3 · Publishing & Engagement

1371
Checkpoint: Performance Review

1372
Review campaign performance with Maria & Kayt. Before the meeting, pull your numbers and know what they mean — don't show up with a raw screenshot.

1373
1374

1375
📊 What to Measure — and What It Means

1376
Pull these metrics from each platform's native analytics before your checkpoint meeting.

1377
Reach — How many unique people saw the content? Compare to the previous campaign or the account's average. Growth here means you're expanding your audience.

1378
Engagement Rate — (Likes + Comments + Shares + Saves) ÷ Reach × 100. Above 3% is solid on Instagram. Below 1% is a signal that content isn't resonating. Saves are especially valuable — they mean someone found the content worth keeping.

1379
Top Performing Post — Which post got the most engagement or reach? What made it different — format, topic, caption style, timing? Document this so you can repeat it.

1380
Follower Growth — Did the campaign grow the account? Net new followers during the campaign period shows whether content attracted new people, not just engaged existing ones.

1381
Story Views / Completion Rate — For Stories, what percentage of viewers watched all the way through? High drop-off early usually means the hook wasn't strong enough.

1382
Link Clicks / Profile Visits — If the goal was to drive traffic (to a website, sign-up form, or event page), this is your most important metric. Engagement without clicks means people liked the content but didn't act on it.

1383

1384
1385

1386
👩💼

1387

1388
Maria & Kayt

1389
Social Media Mentors · Content Strategy & Brand Alignment

1390

1391

1392
1393

1394
🧭 Review Guidance

1395

1396
Which metrics show the campaign met its objectives, and which need improvement?

1397
Did the content perform best on the expected platforms?

1398
What lessons should be written into the next social media brief?

1399
Were there any unexpected audience responses or opportunities?

1400
Is the post-campaign follow-up plan ready for the next phase?

1401

1402

1403
1404	                <textarea class="field-input" id="cp3-notes" placeholder="What did Maria & Kayt say about campaign results, learning, and next steps?" oninput="saveState();"></textarea>
1405
1406

1407	                    <button class="btn-prev" onclick="goTo('engage')">← Back</button>
1408	                    <button class="btn-next" onclick="markCompleteAndNext('cp3', 'review')">Checkpoint Complete — Client Review →</button>
1409

1410

1411
1412
1413

1414
◆ Phase 3 · Publishing & Engagement

1415
Client Review

1416
Present your social media campaign results to the client. Gather feedback and document lessons learned.

1417
1418

1419
👀 Client Review Checklist

1420

1421
<input type="checkbox" id="rev1" onchange="saveState();">Compiled performance metrics and insights

1422
<input type="checkbox" id="rev2" onchange="saveState();">Prepared campaign summary report

1423
<input type="checkbox" id="rev3" onchange="saveState();">Scheduled and conducted client presentation

1424
<input type="checkbox" id="rev4" onchange="saveState();">Gathered client feedback and suggestions

1425
<input type="checkbox" id="rev5" onchange="saveState();">Documented lessons learned for future campaigns

1426

1427

1428
1429

1430
📎 Capture Your Final Artifact · Maps to S1: Client Relationships · S5: Professional Skills

1431

1432	                        <input type="text" class="artifact-link-input" id="art-review-link" placeholder="Link to campaign report or presentation..." oninput="saveState();">
1433

1434	                    <textarea class="artifact-note-input" id="art-review-note" placeholder="Describe the campaign results, client feedback, and what you learned." oninput="saveState();"></textarea>
1435

1436	                        <button class="btn-save-artifact" onclick="saveArtifact('review')">Save Artifact</button>
1437	                        <button class="btn-send-portfolio" onclick="openPortfolioModal('review', 'Social Media Campaign Review', 'S1')">Send to Portfolio →</button>
1438

1439
✓ Artifact saved

1440

1441
1442

1443	                    <button class="btn-prev" onclick="goTo('cp3')">← Back</button>
1444	                    <button class="btn-next" style="visibility:hidden;"></button>
1445

1446

1447
1448

◆ Phase 3 · Publishing & Engagement

Checkpoint: Performance Review

Review campaign performance with Maria & Kayt. Before the meeting, pull your numbers and know what they mean — don't show up with a raw screenshot.

📊 What to Measure — and What It Means

Pull these metrics from each platform's native analytics before your checkpoint meeting.

Reach — How many unique people saw the content? Compare to the previous campaign or the account's average. Growth here means you're expanding your audience.

Engagement Rate — (Likes + Comments + Shares + Saves) ÷ Reach × 100. Above 3% is solid on Instagram. Below 1% is a signal that content isn't resonating. Saves are especially valuable — they mean someone found the content worth keeping.

Top Performing Post — Which post got the most engagement or reach? What made it different — format, topic, caption style, timing? Document this so you can repeat it.

Follower Growth — Did the campaign grow the account? Net new followers during the campaign period shows whether content attracted new people, not just engaged existing ones.

Story Views / Completion Rate — For Stories, what percentage of viewers watched all the way through? High drop-off early usually means the hook wasn't strong enough.

Link Clicks / Profile Visits — If the goal was to drive traffic (to a website, sign-up form, or event page), this is your most important metric. Engagement without clicks means people liked the content but didn't act on it.

👩💼

Maria & Kayt

Social Media Mentors · Content Strategy & Brand Alignment

🧭 Review Guidance

Which metrics show the campaign met its objectives, and which need improvement?

Did the content perform best on the expected platforms?

What lessons should be written into the next social media brief?

Were there any unexpected audience responses or opportunities?

Is the post-campaign follow-up plan ready for the next phase?

                <textarea class="field-input" id="cp3-notes" placeholder="What did Maria & Kayt say about campaign results, learning, and next steps?" oninput="saveState();"></textarea>

                    <button class="btn-prev" onclick="goTo('engage')">← Back</button>
                    <button class="btn-next" onclick="markCompleteAndNext('cp3', 'review')">Checkpoint Complete — Client Review →</button>

◆ Phase 3 · Publishing & Engagement

Client Review

Present your social media campaign results to the client. Gather feedback and document lessons learned.

👀 Client Review Checklist

<input type="checkbox" id="rev1" onchange="saveState();">Compiled performance metrics and insights

<input type="checkbox" id="rev2" onchange="saveState();">Prepared campaign summary report

<input type="checkbox" id="rev3" onchange="saveState();">Scheduled and conducted client presentation

<input type="checkbox" id="rev4" onchange="saveState();">Gathered client feedback and suggestions

<input type="checkbox" id="rev5" onchange="saveState();">Documented lessons learned for future campaigns

📎 Capture Your Final Artifact · Maps to S1: Client Relationships · S5: Professional Skills

                        <input type="text" class="artifact-link-input" id="art-review-link" placeholder="Link to campaign report or presentation..." oninput="saveState();">

                    <textarea class="artifact-note-input" id="art-review-note" placeholder="Describe the campaign results, client feedback, and what you learned." oninput="saveState();"></textarea>

                        <button class="btn-save-artifact" onclick="saveArtifact('review')">Save Artifact</button>
                        <button class="btn-send-portfolio" onclick="openPortfolioModal('review', 'Social Media Campaign Review', 'S1')">Send to Portfolio →</button>

✓ Artifact saved

                    <button class="btn-prev" onclick="goTo('cp3')">← Back</button>
                    <button class="btn-next" style="visibility:hidden;"></button>