Rename Standard 2 to 'Beyond GPA' everywhere (nav, title, h1, Portfolio card, Standard2.html itself)

Rename Mock Client display name to 'DCS Onboarding Project' everywhere

Renaming Mock Client to DCS Onboarding Project

Rename Business Startup display name to 'BSU Onboarding Project' everywhere

Renaming Business Startup to BSU Onboarding Project

Fix Dashboard: repair broken Mock Client card + add Business Startup card (with new names)


I feel like it's time for some cleanup. Go through all the files in the folder and:  - make sure all pages are linked in all appropriate spots - make sure all links work - make sure all headers are fo…


Clean up business startup HTML portfolio


Renaming Standard 2 to "Beyond GPA" across all files, then doing the playbook renames:


Bash

cd "/Users/russgoerend/Desktop/Portfolio HTMLs"

# Update S2 nav label from "Professionalism & Ethics" to "Beyond GPA" in all files
ALL_FILES=(
  "APEX_Professional_Dashboard.html"
  "APEX_Professional_Portfolio.html"
  "APEX_Review_Prep.html"
  "Project Task Boards.html"
  "Standard1.html"
  "Standard2.html"
  "Standard3.html"
  "Standard4.html"
  "Standard4BSU.html"
  "Standard4DCS.html"
  "Standard5.html"
  "Mock Client Project Playbook.html"
  "Business Startup Mock Client Playbook.html"
  "Video Production Playbook.html"
  "Social Media Playbook.html"
  "Marketing Analytics Playbook.html"
  "Podcast Production Playbook.html"
  "Graphic Design Playbook.html"
  "Photography Playbook.html"
)

for f in "${ALL_FILES[@]}"; do
  sed -i '' 's|S2 · Professionalism \& Ethics|S2 · Beyond GPA|g' "$f"
done

echo "Nav label updated"

Update S2 nav label from Professionalism & Ethics to Beyond GPA in all files


Nav label updated


1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	    <meta charset="UTF-8">
5	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6	    <title>APEX Portfolio | Standard 2: Professionalism & Ethics</title>
7	    <style>
8	        :root {
9	            --primary: #500778;
10	            --secondary: #c4d600;
11	            --accent: #4b4f54;
12	            --bg: #F3F4F6;
13	            --card-bg: #FFFFFF;
14	            --text-main: #1F2937;
15	            --text-sub: #6B7280;
16	            --exceeds: #059669;
17	            --secure: #2563EB;
18	            --developing: #D97706;
19	            --beginning: #DC2626;
20	            --success: #10B981;
21	            --info-bg: #E0F2FE;
22	            --info-border: #7DD3FC;
23	            --nav-height: 70px;
24	            --sidebar-width: 300px;
25	        }
26	        body { font-family: 'Inter', 'Segoe UI', sans-serif; background-color: var(--bg); color: var(--text-main); margin: 0; padding-top: var(--nav-height); padding-bottom: 40px; padding-left: 20px; padding-right: 20px; transition: padding-left 0.3s; }
27	        .body-sidebar-open { padding-left: calc(var(--sidebar-width) + 20px); }
28
29	        /* --- GLOBAL NAVIGATION --- */
30	        .main-nav { background: var(--primary); height: var(--nav-height); width: 100%; position: fixed; top: 0; left: 0; z-index: 1000; display: flex; align-items: center; border-bottom: 4px solid var(--secondary); box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
31	        .nav-container { max-width: 1200px; margin: 0 auto; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
32	        .nav-logo-link { display: flex; align-items: center; text-decoration: none; height: calc(var(--nav-height) - 15px); }
33	        .nav-logo-img { height: 100%; width: auto; }
34	        .nav-links { display: flex; gap: 10px; }
35	        .nav-links a { color: rgba(255,255,255,0.9); text-decoration: none; font-size: 0.8rem; font-weight: 700; padding: 8px 14px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.03em; transition: all 0.2s; }
36	        .nav-links a:hover { color: var(--secondary); background: rgba(255,255,255,0.1); }
37	        .nav-links a.active { background: var(--secondary); color: var(--primary); }
38	        /* --- NAV DROPDOWNS --- */
39	        .nav-dropdown { position: relative; }
40	        .nav-drop-btn { color: rgba(255,255,255,0.9); background: none; border: none; font-size: 0.8rem; font-weight: 700; padding: 8px 14px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.03em; transition: all 0.2s; cursor: pointer; font-family: inherit; }
41	        .nav-dropdown:hover .nav-drop-btn { color: var(--secondary); background: rgba(255,255,255,0.1); }
42	        .nav-drop-btn.active { background: var(--secondary); color: var(--primary); }
43	        .nav-dropdown:hover .nav-drop-btn.active { background: var(--secondary); color: var(--primary); opacity: 0.85; }
44	        .nav-drop-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; background: white; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); min-width: 210px; z-index: 1001; padding: 6px 0; border: 1px solid #E5E7EB; }
45	        .nav-dropdown:hover .nav-drop-menu { display: block; }
46	        .nav-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 8px; }
47	        .nav-drop-menu a { display: block; padding: 9px 16px; color: #1F2937; text-decoration: none; font-size: 0.82rem; font-weight: 600; transition: background 0.15s; white-space: nowrap; }
48	        .nav-drop-menu a:hover { background: #F3F4F6; color: var(--primary); }
49	        .nav-drop-menu a.active { color: var(--primary); font-weight: 800; background: #F5F3FF; }
50
51	        .container { max-width: 1400px; margin: 0 auto; }
52	        header { text-align: center; margin-bottom: 30px; border-bottom: 1px solid #D1D5DB; padding-bottom: 20px; }
53	        h1 { font-size: 2.2rem; color: var(--primary); margin-bottom: 5px; font-weight: 800; }
54	        .subtitle { font-size: 1rem; color: var(--text-sub); max-width: 600px; margin: 0 auto; }
55
56	        /* Proficiency Indicators */
57	        .indicators-box { background: white; border: 2px solid var(--secondary); border-radius: 12px; margin-bottom: 25px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
58	        .indicators-box summary { padding: 15px 20px; background: #FFFBEB; cursor: pointer; font-weight: 800; color: var(--primary); display: flex; align-items: center; gap: 10px; }
59	        .indicators-content { padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; font-size: 0.85rem; line-height: 1.5; }
60	        .indicator-item { padding: 15px; border-radius: 8px; background: #F9FAFB; border-top: 4px solid #DDD; }
61	        .indicator-item strong { display: block; font-size: 1rem; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
62	        .lvl-exceeds { border-top-color: var(--exceeds); } .lvl-exceeds strong { color: var(--exceeds); }
63	        .lvl-secure { border-top-color: var(--secure); } .lvl-secure strong { color: var(--secure); }
64	        .lvl-developing { border-top-color: var(--developing); } .lvl-developing strong { color: var(--developing); }
65	        .lvl-beginning { border-top-color: var(--beginning); } .lvl-beginning strong { color: var(--beginning); }
66
67	        /* Strand Info */
68	        .strand-info { background: var(--info-bg); border: 1px solid var(--info-border); border-radius: 12px; padding: 20px; margin-bottom: 40px; display: flex; flex-wrap: wrap; gap: 30px; align-items: center; }
69	        .strand-info-text { flex: 2; min-width: 300px; }
70	        .strand-info-text h2 { margin: 0 0 10px 0; font-size: 1.2rem; color: #0369A1; }
71	        .strand-info-text p { margin: 0; font-size: 0.95rem; line-height: 1.4; color: #0C4A6E; }
72	        .strand-steps { flex: 3; min-width: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
73	        .step { background: rgba(255,255,255,0.5); padding: 12px; border-radius: 8px; font-size: 0.85rem; border: 1px solid rgba(255,255,255,0.8); }
74	        .step strong { color: var(--accent); display: block; margin-bottom: 4px; }
75
76	        /* Grid & Columns */
77	        .vibe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; align-items: start; }
78	        .vibe-column { background: var(--card-bg); border-radius: 12px; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-top: 8px solid var(--accent); position: relative; padding-bottom: 80px; min-height: 400px; }
79	        .col-1 { border-top-color: #06B6D4; }
80	        .col-2 { border-top-color: #8B5CF6; }
81	        .col-3 { border-top-color: #F59E0B; }
82	        .col-4 { border-top-color: #10B981; }
83	        .vibe-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 20px; color: var(--primary); display: flex; align-items: center; gap: 10px; }
84
85	        /* Progress Track */
86	        .progress-track { display: flex; gap: 5px; margin: -8px 0 18px 0; }
87	        .progress-pip { flex: 1; height: 5px; border-radius: 3px; background: #E5E7EB; transition: background 0.4s ease; }
88	        .col-1 .progress-pip.lit { background: #06B6D4; }
89	        .col-2 .progress-pip.lit { background: #8B5CF6; }
90	        .col-3 .progress-pip.lit { background: #F59E0B; }
91	        .col-4 .progress-pip.lit { background: #10B981; }
92
93	        /* Card */
94	        .sprint-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 10px; padding: 18px; margin-bottom: 15px; transition: 0.2s; position: relative; }
95	        .sprint-card:hover { border-color: var(--secondary); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
96
97	        /* Collapsible card header */
98	        .card-header { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; user-select: none; padding: 2px 0; }
99	        .card-header:hover .title-text { color: #3d0560; }

... [256 lines truncated] ...


The user has made changes to Standard2.html. Looking at the system-reminder, the linter seems to have normalized the HTML. Let me now update Standard2.html with the "Beyond GPA" name.

Actually wait - looking more carefully, the system reminder says "Note: /Users/russgoerend/Desktop/Portfolio HTMLs/Standard2.html was modified, either by the user or by a linter." But looking at the changes shown (line 6 title still says "Professionalism & Ethics"), these are the file contents BEFORE my sed command ran. The sed command already ran. Let me verify that Standard2.html has been updated correctly.

I need to update the Standard2.html file itself to replace "Professionalism & Ethics" with "Beyond GPA" throughout - the title, heading, indicators section, and anywhere else it appears - then make corresponding updates to the Portfolio page's card for Standard 2 and the Mock Client display names.


Now I need to update Standard2.html's own content — title, h1, indicators heading, and other references to "Professionalism & Ethics":


Edit

<title>APEX Portfolio | Standard 2: Professionalism & Ethics</title>

<title>APEX Portfolio | Standard 2: Beyond GPA</title>


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

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

-    <title>APEX Portfolio | Standard 2: Professionalism & Ethics</title>

+    <title>APEX Portfolio | Standard 2: Beyond GPA</title>


Standard 2: Professionalism & Ethics

Seeking feedback, maintaining a growth mindset, and persisting through challenges to grow as an aspiring professional.

Standard 2: Beyond GPA

Seeking feedback, embracing a growth mindset, and persisting through challenges — the habits that define a standout aspiring professional.


Standard 2: Professionalism & Ethics

Seeking feedback, maintaining a growth mindset, and persisting through challenges to grow as an aspiring professional.

Standard 2: Beyond GPA

Seeking feedback, embracing a growth mindset, and persisting through challenges — the habits that define a standout aspiring professional.

-
Seeking feedback, maintaining a growth mindset, and persisting through challenges to grow as an aspiring professional.

+
Seeking feedback, embracing a growth mindset, and persisting through challenges — the habits that define a standout aspiring professional.


<summary>📊 S2 Professionalism & Ethics Proficiency Indicators</summary>

<summary>📊 S2 Beyond GPA Proficiency Indicators</summary>


-        <summary>📊 S2 Professionalism & Ethics Proficiency Indicators</summary>

+        <summary>📊 S2 Beyond GPA Proficiency Indicators</summary>


Now update the Portfolio page's Standard 2 card to match:


Professionalism & Ethics

Demonstrating integrity, punctuality, and professional workplace behaviors.

Beyond GPA

Seeking feedback, building a growth mindset, and persisting through challenges as an aspiring professional.


<tool_use_error>File has been modified since read, either by the user or by a linter. Read it again before attempting to write it.</tool_use_error>

Error: File has been modified since read, either by the user or by a linter. Read it again before attempting to write it.


304
305
306
307

308	                Standard 2
309
Professionalism & Ethics

310
Demonstrating integrity, punctuality, and professional workplace behaviors.

311

312
In Progress

313
314
315

                Standard 2

Professionalism & Ethics

Demonstrating integrity, punctuality, and professional workplace behaviors.

In Progress


Professionalism & Ethics

Demonstrating integrity, punctuality, and professional workplace behaviors.

Beyond GPA

Seeking feedback, building a growth mindset, and persisting through challenges as an aspiring professional.


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)

Professionalism & Ethics

Demonstrating integrity, punctuality, and professional workplace behaviors.

Beyond GPA

Seeking feedback, building a growth mindset, and persisting through challenges as an aspiring professional.

-
Demonstrating integrity, punctuality, and professional workplace behaviors.

+
Seeking feedback, building a growth mindset, and persisting through challenges as an aspiring professional.


Create Standard2.html (Professionalism & Ethics) based on Standard5 template

Add Business Startup Mock Client to Playbooks nav in all files

Adding Business Startup to nav in all files

Update S2 nav label to 'S2 · Professionalism & Ethics' in all files

Fix Task Boards: add Mock Client and Business Startup to project list

Fix page titles and headers for consistency

Fix language: replace 'student' with 'associate' in APEX context


Now let me also check if APEX_Review_Prep.html references S2 by name anywhere:


Let me also check if the Review Prep page references S2 by name and then move on to the playbook renames:


Bash

grep -n "Professionalism\|Standard 2\|Beyond GPA" "/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Review_Prep.html" | head -10

Check Review Prep for S2 references


165:                    S2 · Beyond GPA
225:        { num: 2, label: 'S2', name: 'Professionalism & Ethics',                  cls: 's2', key: 'apex_std2_state_v6',  fmt: 'kanban' },


grep -n "Professionalism\|Standard 2\|S2 ·" "/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Dashboard.html" | head -10

Check Dashboard for S2 references


412:                    S2 · Beyond GPA
591:            { label: 'S2', name: 'Professionalism',       color: '#3B82F6', url: null,             key: null,                   fmt: null     },


The Review Prep and Dashboard have JavaScript data objects that reference "Professionalism & Ethics" and "Professionalism". I need to update those too. Let me check what these JS objects look like more fully.


Found JS data objects that also reference "Professionalism & Ethics." Let me fix those too:


220	</div>
221
222	<script>
223	    const STANDARDS = [
224	        { num: 1, label: 'S1', name: 'Servant Leadership & Client Relationships', cls: 's1', key: 'apex_std1_state_v6',  fmt: 'kanban' },
225	        { num: 2, label: 'S2', name: 'Professionalism & Ethics',                  cls: 's2', key: 'apex_std2_state_v6',  fmt: 'kanban' },
226	        { num: 3, label: 'S3', name: 'Career Exploration',                         cls: 's3', key: null,                  fmt: 'skip'   },
227	        { num: 4, label: 'S4', name: 'Technical & Digital Skills',                 cls: 's4', key: 'apex_std4bsu_v1',     fmt: 'bsu',   fallback: 'apex_std4_state_v6' },
228	        { num: 5, label: 'S5', name: 'Professional Skills',                        cls: 's5', key: 'apex_std5_v6',        fmt: 'kanban' }
229	    ];

</div>

<script>
    const STANDARDS = [
        { num: 1, label: 'S1', name: 'Servant Leadership & Client Relationships', cls: 's1', key: 'apex_std1_state_v6',  fmt: 'kanban' },
        { num: 2, label: 'S2', name: 'Professionalism & Ethics',                  cls: 's2', key: 'apex_std2_state_v6',  fmt: 'kanban' },
        { num: 3, label: 'S3', name: 'Career Exploration',                         cls: 's3', key: null,                  fmt: 'skip'   },
        { num: 4, label: 'S4', name: 'Technical & Digital Skills',                 cls: 's4', key: 'apex_std4bsu_v1',     fmt: 'bsu',   fallback: 'apex_std4_state_v6' },
        { num: 5, label: 'S5', name: 'Professional Skills',                        cls: 's5', key: 'apex_std5_v6',        fmt: 'kanban' }
    ];


586	    }
587
588	    function loadStandardsProgress() {
589	        const STDS = [
590	            { label: 'S1', name: 'Servant Leadership',    color: '#10B981', url: 'Standard1.html', key: 'apex_std1_state_v6',  fmt: 'kanban' },
591	            { label: 'S2', name: 'Professionalism',       color: '#3B82F6', url: null,             key: null,                   fmt: null     },
592	            { label: 'S3', name: 'Career Exploration',    color: '#8B5CF6', url: 'Standard3.html', key: 'apex_v37',             fmt: 'phase'  },
593	            { label: 'S4', name: 'Technical Skills',      color: '#F59E0B', url: 'Standard4.html', key: 'apex_std4bsu_v1',      fmt: 'bsu', fallback: 'apex_std4_state_v6' },
594	            { label: 'S5', name: 'Professional Skills',   color: '#EF4444', url: 'Standard5.html', key: 'apex_std5_v6',         fmt: 'kanban' }
595	        ];

    }

    function loadStandardsProgress() {
        const STDS = [
            { label: 'S1', name: 'Servant Leadership',    color: '#10B981', url: 'Standard1.html', key: 'apex_std1_state_v6',  fmt: 'kanban' },
            { label: 'S2', name: 'Professionalism',       color: '#3B82F6', url: null,             key: null,                   fmt: null     },
            { label: 'S3', name: 'Career Exploration',    color: '#8B5CF6', url: 'Standard3.html', key: 'apex_v37',             fmt: 'phase'  },
            { label: 'S4', name: 'Technical Skills',      color: '#F59E0B', url: 'Standard4.html', key: 'apex_std4bsu_v1',      fmt: 'bsu', fallback: 'apex_std4_state_v6' },
            { label: 'S5', name: 'Professional Skills',   color: '#EF4444', url: 'Standard5.html', key: 'apex_std5_v6',         fmt: 'kanban' }
        ];


I need to:
1. In APEX_Review_Prep.html: change `'Professionalism & Ethics'` to `'Beyond GPA'`
2. In APEX_Professional_Dashboard.html: change `'Professionalism'` to `'Beyond GPA'`
3. Also in Dashboard, change `url: null` to `url: 'Standard2.html'` and `key: null` to the storage key for Standard2

Actually wait - the Dashboard has `url: null` and `key: null` for S2, meaning it currently shows as "coming soon" (no link).

Now that Standard2.html exists, I need to update those values. I'm checking the storage key format - Standard5.html uses `'apex_std5_v6'` and Review Prep references the same key, so Standard2 should follow that pattern with `'apex_std2_v6'` rather than the `'apex_std2_v1'` I initially set. Standard2.html should match what Review Prep uses.

Review Prep uses `'apex_std2_state_v6'` but I used `'apex_std2_v1'` in the initKanban call. I should update Standard2.html to use `'apex_std2_state_v6'` to be consistent with Review Prep, OR update Review Prep to use `'apex_std2_v1'`.

Looking at the pattern, I notice S1 uses `apex_std1_state_v6` while S5 uses `apex_std5_v6` without the "state_" part—these naming conventions are inconsistent. Let me check Standard1.html to see which pattern is the canonical one.


Let me verify Standard1's storage key to pick the right one for Standard2:


grep -n "storageKey\|apex_std" "/Users/russgoerend/Desktop/Portfolio HTMLs/Standard1.html" | head -5

Check Standard1 storage key


481:        storageKey: 'apex_std1_state_v6',

481:        storageKey: 'apex_std1_state_v6',


Standard1 uses `apex_std1_state_v6`. Standard5 uses `apex_std5_v6`. The Review Prep expects Standard2 to use `apex_std2_state_v6`. Let me update Standard2.html to use `apex_std2_state_v6` to be consistent with what the Review Prep already expects.

Also, for the Dashboard's STDS array, S2 currently has `url: null` (no link). Now that Standard2 exists, I should update it to have `url: 'Standard2.html'` and add a key. But looking at the Dashboard data, the `key` and `fmt` are used to pull progress data. Since Standard2 uses kanban format, the key should be `apex_std2_state_v6`.

Now I need to check what `fmt: null` actually does in the loadStandardsProgress function to understand how to properly configure S2's dashboard entry.


595	        ];
596
597	        const grid = document.getElementById('progress-grid');
598	        if (!grid) return;
599
600	        STDS.forEach(std => {
601	            let total = 0, done = 0, unit = 'artifacts', hasData = false;
602
603	            if (std.key) {
604	                let raw = localStorage.getItem(std.key);
605	                if (!raw && std.fallback) raw = localStorage.getItem(std.fallback);
606	                if (raw) {
607	                    hasData = true;
608	                    try {
609	                        const state = JSON.parse(raw);
610	                        if (std.fmt === 'kanban') {
611	                            Object.values(state).forEach(col => {
612	                                if (!Array.isArray(col)) return;
613	                                total += col.length;
614	                                done += col.filter(c => c.done === true || c.done === 'true').length;
615	                            });
616	                        } else if (std.fmt === 'phase') {
617	                            total = 4; done = (state.visited || []).length; unit = 'phases';
618	                        } else if (std.fmt === 'bsu') {
619	                            const vals = Object.values(state);
620	                            if (vals.length && vals[0] && !Array.isArray(vals[0]) && 'done' in vals[0]) {
621	                                total = vals.length;
622	                                done = vals.filter(v => v.done).length;
623	                            } else if (state.sprints) {
624	                                total = state.sprints.length;
625	                                done = state.sprints.filter(c => c.done).length;
626	                            }
627	                        }
628	                    } catch(e) {}
629	                }
630	            }
631
632	            const pct = total > 0 ? Math.round((done / total) * 100) : 0;
633	            const isComingSoon = !std.url;
634
635	            const el = document.createElement(isComingSoon ? 'div' : 'a');
636	            if (!isComingSoon) el.href = std.url;
637	            el.className = 'progress-card' + (isComingSoon ? ' progress-coming-soon' : '');
638	            el.style.borderLeftColor = std.color;
639
640	            const countLabel = isComingSoon ? 'Coming soon'
641	                : !hasData ? 'Not started'
642	                : `${done} / ${total} ${unit}`;
643
644	            el.innerHTML = `
645

646

647
${std.label}

648
${std.name}

649

650
${countLabel}

651

652

653

654
`;

];

        const grid = document.getElementById('progress-grid');
        if (!grid) return;

        STDS.forEach(std => {
            let total = 0, done = 0, unit = 'artifacts', hasData = false;

            if (std.key) {
                let raw = localStorage.getItem(std.key);
                if (!raw && std.fallback) raw = localStorage.getItem(std.fallback);
                if (raw) {
                    hasData = true;
                    try {
                        const state = JSON.parse(raw);
                        if (std.fmt === 'kanban') {
                            Object.values(state).forEach(col => {
                                if (!Array.isArray(col)) return;
                                total += col.length;
                                done += col.filter(c => c.done === true || c.done === 'true').length;
                            });
                        } else if (std.fmt === 'phase') {
                            total = 4; done = (state.visited || []).length; unit = 'phases';
                        } else if (std.fmt === 'bsu') {
                            const vals = Object.values(state);
                            if (vals.length && vals[0] && !Array.isArray(vals[0]) && 'done' in vals[0]) {
                                total = vals.length;
                                done = vals.filter(v => v.done).length;
                            } else if (state.sprints) {
                                total = state.sprints.length;
                                done = state.sprints.filter(c => c.done).length;
                            }
                        }
                    } catch(e) {}
                }
            }

            const pct = total > 0 ? Math.round((done / total) * 100) : 0;
            const isComingSoon = !std.url;

            const el = document.createElement(isComingSoon ? 'div' : 'a');
            if (!isComingSoon) el.href = std.url;
            el.className = 'progress-card' + (isComingSoon ? ' progress-coming-soon' : '');
            el.style.borderLeftColor = std.color;

            const countLabel = isComingSoon ? 'Coming soon'
                : !hasData ? 'Not started'
                : `${done} / ${total} ${unit}`;

            el.innerHTML = `

${std.label}

${std.name}

${countLabel}

`;


I can see that when `std.url` is null, it renders as "Coming soon" and when `std.key` is null, there's no progress data. Now that Standard2.html exists, I should update the Dashboard to link to Standard2.html and use the kanban storage key.

Let me now make all the needed updates:

1. Standard2.html: Change `storageKey: 'apex_std2_v1'` to `'apex_std2_state_v6'`
2. APEX_Review_Prep.html: Change `'Professionalism & Ethics'` to `'Beyond GPA'`

3. APEX_Professional_Dashboard.html: Update the Beyond GPA card to point to Standard2.html with the correct storage key and kanban format instead of the null values.

Let me apply all these changes at once.


Now I'll fix the storage key in Standard2.html, update both JS data objects, and handle all renames in parallel:


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

cols: ['seeking-feedback', 'growth-mindset', 'overcoming-challenges', 'applied-growth'],

+        storageKey: 'apex_std2_state_v6',


Edit

{ num: 2, label: 'S2', name: 'Professionalism & Ethics',                  cls: 's2', key: 'apex_std2_state_v6',  fmt: 'kanban' },

{ num: 2, label: 'S2', name: 'Beyond GPA',                               cls: 's2', key: 'apex_std2_state_v6',  fmt: 'kanban' },


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

{ num: 1, label: 'S1', name: 'Servant Leadership & Client Relationships', cls: 's1', key: 'apex_std1_state_v6',  fmt: 'kanban' },

-        { num: 2, label: 'S2', name: 'Professionalism & Ethics',                  cls: 's2', key: 'apex_std2_state_v6',  fmt: 'kanban' },

+        { num: 2, label: 'S2', name: 'Beyond GPA',                               cls: 's2', key: 'apex_std2_state_v6',  fmt: 'kanban' },

{ num: 3, label: 'S3', name: 'Career Exploration',                         cls: 's3', key: null,                  fmt: 'skip'   },

{ num: 4, label: 'S4', name: 'Technical & Digital Skills',                 cls: 's4', key: 'apex_std4bsu_v1',     fmt: 'bsu',   fallback: 'apex_std4_state_v6' },

{ num: 5, label: 'S5', name: 'Professional Skills',                        cls: 's5', key: 'apex_std5_v6',        fmt: 'kanban' }


{ label: 'S2', name: 'Professionalism',       color: '#3B82F6', url: null,             key: null,                   fmt: null     },

{ label: 'S2', name: 'Beyond GPA',             color: '#3B82F6', url: 'Standard2.html', key: 'apex_std2_state_v6',   fmt: 'kanban' },


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

{ label: 'S1', name: 'Servant Leadership',    color: '#10B981', url: 'Standard1.html', key: 'apex_std1_state_v6',  fmt: 'kanban' },

-            { label: 'S2', name: 'Professionalism',       color: '#3B82F6', url: null,             key: null,                   fmt: null     },

+            { label: 'S2', name: 'Beyond GPA',             color: '#3B82F6', url: 'Standard2.html', key: 'apex_std2_state_v6',   fmt: 'kanban' },

{ label: 'S3', name: 'Career Exploration',    color: '#8B5CF6', url: 'Standard3.html', key: 'apex_v37',             fmt: 'phase'  },

{ label: 'S4', name: 'Technical Skills',      color: '#F59E0B', url: 'Standard4.html', key: 'apex_std4bsu_v1',      fmt: 'bsu', fallback: 'apex_std4_state_v6' },

{ label: 'S5', name: 'Professional Skills',   color: '#EF4444', url: 'Standard5.html', key: 'apex_std5_v6',         fmt: 'kanban' }


Create Standard2.html (Professionalism & Ethics) based on Standard5 template

Add Business Startup Mock Client to Playbooks nav in all files

Update S2 nav label to 'S2 · Professionalism & Ethics' in all files

Rename Standard 2 to 'Beyond GPA' everywhere (nav, title, h1, Portfolio card, Standard2.html itself)

Rename Mock Client display name to 'DCS Onboarding Project' everywhere

Rename Business Startup display name to 'BSU Onboarding Project' everywhere

Fix Dashboard: repair broken Mock Client card + add Business Startup card (with new names)

Fix Task Boards: add Mock Client and Business Startup to project list

Fix page titles and headers for consistency

Fix language: replace 'student' with 'associate' in APEX context


TodoWrite

Create Standard2.html (Beyond GPA) based on Standard5 template

Add Business Startup Mock Client to Playbooks nav in all files

Adding Business Startup to nav in all files

Update S2 nav label and rename to Beyond GPA everywhere

Rename Mock Client display name to 'DCS Onboarding Project' everywhere

Renaming Mock Client to DCS Onboarding Project

Rename Business Startup display name to 'BSU Onboarding Project' everywhere

Renaming Business Startup to BSU Onboarding Project

Fix Dashboard: repair broken cards and add BSU Onboarding Project card (with new names)

Fix Task Boards: add DCS Onboarding and BSU Onboarding to project list

Fix page titles and headers for consistency

Fix language: replace 'student' with 'associate' in APEX context


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

Create Standard2.html (Beyond GPA) based on Standard5 template

Update S2 nav label and rename to Beyond GPA everywhere

Fix Dashboard: repair broken cards and add BSU Onboarding Project card (with new names)

Fix Task Boards: add DCS Onboarding and BSU Onboarding to project list


Now rename "Mock Client Project" → "DCS Onboarding Project" and "Business Startup Mock Client" → "BSU Onboarding Project" in all nav menus across all files:


Bash

cd "/Users/russgoerend/Desktop/Portfolio HTMLs"

ALL_FILES=(
  "APEX_Professional_Dashboard.html"
  "APEX_Professional_Portfolio.html"
  "APEX_Review_Prep.html"
  "Project Task Boards.html"
  "Standard1.html"
  "Standard2.html"
  "Standard3.html"
  "Standard4.html"
  "Standard4BSU.html"
  "Standard4DCS.html"
  "Standard5.html"
  "Mock Client Project Playbook.html"
  "Business Startup Mock Client Playbook.html"
  "Video Production Playbook.html"
  "Social Media Playbook.html"
  "Marketing Analytics Playbook.html"
  "Podcast Production Playbook.html"
  "Graphic Design Playbook.html"
  "Photography Playbook.html"
)

# Rename in nav menus - nav link text only (inside TEXT)
for f in "${ALL_FILES[@]}"; do
  # Mock Client Project nav label (in nav dropdown)
  sed -i '' 's|href="Mock Client Project Playbook\.html">Mock Client Project|href="Mock Client Project Playbook.html">DCS Onboarding Project|g' "$f"
  # Business Startup nav label
  sed -i '' 's|href="Business Startup Mock Client Playbook\.html">Business Startup Mock Client|href="Business Startup Mock Client Playbook.html">BSU Onboarding Project|g' "$f"
done

echo "Display names updated in navs"

Rename Mock Client and Business Startup display names in all nav menus


Display names updated in navs


1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	    <meta charset="UTF-8">
5	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6	    <title>APEX Professional Dashboard</title>
7	    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
8	    <style>
9	        :root {
10	            --primary: #500778;
11	            --secondary: #c4d600;
12	            --accent: #4b4f54;
13	            --bg: #F3F4F6;
14	            --card-bg: #FFFFFF;
15	            --text-main: #1F2937;
16	            --text-sub: #6B7280;
17	            --success: #10B981;
18	            --nav-height: 70px;
19	            --sidebar-width: 300px;
20	        }
21
22	        * { box-sizing: border-box; }
23	        body {
24	            margin: 0;
25	            font-family: 'Inter', sans-serif;
26	            background: var(--bg);
27	            color: var(--text-main);
28	            padding-top: var(--nav-height);
29	            transition: padding-left 0.3s;
30	        }
31
32	        .body-sidebar-open {
33	            padding-left: var(--sidebar-width);
34	        }
35
36	        .main-nav {
37	            position: fixed;
38	            top: 0;
39	            left: 0;
40	            right: 0;
41	            height: var(--nav-height);
42	            background: var(--primary);
43	            border-bottom: 4px solid var(--secondary);
44	            display: flex;
45	            align-items: center;
46	            z-index: 1000;
47	            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
48	        }
49
50	        .nav-container {
51	            max-width: 1200px;
52	            margin: 0 auto;
53	            width: 100%;
54	            display: flex;
55	            justify-content: space-between;
56	            align-items: center;
57	            padding: 0 20px;
58	        }
59
60	        .nav-logo-link {
61	            display: flex;
62	            align-items: center;
63	            text-decoration: none;
64	            height: calc(var(--nav-height) - 15px);
65	        }
66
67	        .nav-logo-img {
68	            height: 100%;
69	            width: auto;
70	        }
71
72	        .nav-links {
73	            display: flex;
74	            gap: 10px;
75	        }
76
77	        .nav-links a {
78	            color: rgba(255,255,255,0.9);
79	            text-decoration: none;
80	            font-size: 0.8rem;
81	            font-weight: 700;
82	            padding: 8px 14px;
83	            border-radius: 6px;
84	            text-transform: uppercase;
85	            letter-spacing: 0.03em;
86	            transition: all 0.2s ease;
87	        }
88
89	        .nav-links a:hover { background: rgba(255,255,255,0.1); color: var(--secondary); }
90	        .nav-links a.active { background: var(--secondary); color: var(--primary); }
91	        /* --- NAV DROPDOWNS --- */
92	        .nav-dropdown { position: relative; }
93	        .nav-drop-btn { color: rgba(255,255,255,0.9); background: none; border: none; font-size: 0.8rem; font-weight: 700; padding: 8px 14px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.03em; transition: all 0.2s; cursor: pointer; font-family: inherit; }
94	        .nav-dropdown:hover .nav-drop-btn { color: var(--secondary); background: rgba(255,255,255,0.1); }
95	        .nav-drop-btn.active { background: var(--secondary); color: var(--primary); }
96	        .nav-dropdown:hover .nav-drop-btn.active { background: var(--secondary); color: var(--primary); opacity: 0.85; }
97	        .nav-drop-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; background: white; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); min-width: 210px; z-index: 1001; padding: 6px 0; border: 1px solid #E5E7EB; }
98	        .nav-dropdown:hover .nav-drop-menu { display: block; }
99	        .nav-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 8px; }
100	        .nav-drop-menu a { display: block; padding: 9px 16px; color: #1F2937; text-decoration: none; font-size: 0.82rem; font-weight: 600; transition: background 0.15s; white-space: nowrap; }
101	        .nav-drop-menu a:hover { background: #F3F4F6; color: var(--primary); }
102	        .nav-drop-menu a.active { color: var(--primary); font-weight: 800; background: #F5F3FF; }
103
104	        .container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
105
106	        header {
107	            background: white;
108	            border-bottom: 1px solid #EEE;
109	            text-align: center;
110	            padding: 60px 20px;
111	            margin-bottom: 30px;
112	        }
113
114	        header h1 {
115	            margin: 0;
116	            font-size: 2.8rem;
117	            font-weight: 800;
118	            color: var(--primary);
119	            letter-spacing: -0.03em;
120	        }
121
122	        header p {
123	            margin: 12px 0 0;
124	            color: var(--accent);
125	            font-weight: 600;
126	        }
127
128	        .profile-card {
129	            background: white;
130	            border: 1px solid #EEE;
131	            border-radius: 16px;
132	            box-shadow: 0 10px 25px rgba(80, 7, 120, 0.08);
133	            display: flex;
134	            align-items: center;
135	            gap: 20px;
136	            padding: 24px 28px;
137	            max-width: 760px;
138	            margin: -40px auto 30px;
139	            position: relative;
140	            z-index: 10;
141	        }
142
143	        .profile-card div:first-child { font-size: 2.4rem; }
144	        .profile-info { flex: 1; }
145	        .profile-info input {
146	            width: 100%;
147	            border: none;
148	            outline: none;
149	            font-family: inherit;
150	            background: transparent;
151	            color: var(--primary);
152	            padding: 4px 0;
153	        }
154
155	        .associate-name { font-size: 1.55rem; font-weight: 800; }
156	        .associate-strand { margin-top: 6px; color: var(--accent); font-weight: 500; border-top: 1px solid #EEE; padding-top: 8px; }
157
158	        .section-header {
159	            display: flex;
160	            justify-content: space-between;
161	            align-items: flex-end;
162	            gap: 20px;
163	            margin-bottom: 18px;
164	        }
165
166	        .section-tag {
167	            display: inline-flex;
168	            align-items: center;
169	            gap: 8px;
170	            background: #F8F0FF;
171	            color: var(--primary);
172	            font-size: 0.8rem;
173	            font-weight: 700;
174	            border-radius: 999px;
175	            padding: 8px 14px;
176	            border: 1px solid #EDE4FA;
177	        }
178
179	        .section-title {
180	            margin: 0;
181	            font-size: 1.45rem;
182	            font-weight: 800;
183	            color: var(--primary);
184	        }
185
186	        .section-copy { color: var(--text-sub); line-height: 1.7; margin: 0; }
187
188	        .category-label {
189	            font-size: 0.75rem;
190	            font-weight: 700;
191	            letter-spacing: 0.08em;
192	            text-transform: uppercase;
193	            color: var(--text-sub);
194	            margin: 28px 0 12px;
195	        }
196
197	        .dashboard-grid,
198	        .standards-grid {
199	            display: grid;
200	            gap: 25px;
201	        }
202
203	        .dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 40px; }
204	        .standards-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
205
206	        .standard-card {
207	            background: var(--card-bg);
208	            border-radius: 16px;
209	            border: 1px solid #E5E7EB;
210	            box-shadow: 0 10px 24px rgba(80, 7, 120, 0.06);
211	            padding: 24px;
212	            display: flex;
213	            flex-direction: column;
214	            justify-content: space-between;
215	            text-decoration: none;
216	            color: inherit;

... [527 lines truncated] ...


1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	    <meta charset="UTF-8">
5	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6	    <title>APEX | Performance Review Prep</title>
7	    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
8	    <style>
9	        :root {
10	            --primary: #500778;
11	            --secondary: #c4d600;
12	            --accent: #4b4f54;
13	            --bg: #F3F4F6;
14	            --text-main: #1F2937;
15	            --text-sub: #6B7280;
16	            --nav-height: 70px;
17	        }
18	        *, *::before, *::after { box-sizing: border-box; }
19	        body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text-main); margin: 0; padding-top: var(--nav-height); }
20
21	        /* NAV */
22	        .main-nav { background: var(--primary); height: var(--nav-height); width: 100%; position: fixed; top: 0; left: 0; z-index: 1000; display: flex; align-items: center; border-bottom: 4px solid var(--secondary); box-shadow: 0 2px 12px rgba(0,0,0,.15); }
23	        .nav-container { max-width: 1400px; margin: 0 auto; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; gap: 12px; }
24	        .nav-logo-link { display: flex; align-items: center; text-decoration: none; height: calc(var(--nav-height) - 15px); flex-shrink: 0; }
25	        .nav-logo-img { height: 100%; width: auto; }
26	        .nav-links { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
27	        .nav-links a { color: rgba(255,255,255,.9); text-decoration: none; font-size: .78rem; font-weight: 700; padding: 7px 12px; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; transition: all .2s; }
28	        .nav-links a:hover { color: var(--secondary); background: rgba(255,255,255,.1); }
29	        /* --- NAV DROPDOWNS --- */
30	        .nav-dropdown { position: relative; }
31	        .nav-drop-btn { color: rgba(255,255,255,0.9); background: none; border: none; font-size: 0.8rem; font-weight: 700; padding: 8px 14px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.03em; transition: all 0.2s; cursor: pointer; font-family: inherit; }
32	        .nav-dropdown:hover .nav-drop-btn { color: var(--secondary); background: rgba(255,255,255,0.1); }
33	        .nav-drop-btn.active { background: var(--secondary); color: var(--primary); }
34	        .nav-dropdown:hover .nav-drop-btn.active { background: var(--secondary); color: var(--primary); opacity: 0.85; }
35	        .nav-drop-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; background: white; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); min-width: 210px; z-index: 1001; padding: 6px 0; border: 1px solid #E5E7EB; }
36	        .nav-dropdown:hover .nav-drop-menu { display: block; }
37	        .nav-drop-menu a { display: block; padding: 9px 16px; color: #1F2937; text-decoration: none; font-size: 0.82rem; font-weight: 600; transition: background 0.15s; white-space: nowrap; }
38	        .nav-drop-menu a:hover { background: #F3F4F6; color: var(--primary); }
39	        .nav-drop-menu a.active { color: var(--primary); font-weight: 800; background: #F5F3FF; }
40	        .nav-title { color: var(--secondary); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; flex: 1; text-align: center; }
41	        .btn-print { background: var(--secondary); color: var(--primary); border: none; border-radius: 6px; font-family: inherit; font-size: .78rem; font-weight: 800; padding: 8px 16px; cursor: pointer; text-transform: uppercase; letter-spacing: .03em; transition: all .2s; }
42	        .btn-print:hover { background: #b5c500; }
43	        .btn-copy { background: rgba(255,255,255,.15); color: white; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; font-family: inherit; font-size: .78rem; font-weight: 700; padding: 8px 14px; cursor: pointer; text-transform: uppercase; letter-spacing: .03em; transition: all .2s; }
44	        .btn-copy:hover { background: rgba(255,255,255,.25); }
45
46	        /* PANELS */
47	        .panels { display: flex; height: calc(100vh - var(--nav-height)); overflow: hidden; }
48
49	        /* LEFT PANEL */
50	        .left-panel { width: 38%; min-width: 320px; background: white; border-right: 1px solid #E5E7EB; overflow-y: auto; display: flex; flex-direction: column; }
51	        .panel-header { padding: 20px 20px 14px; border-bottom: 1px solid #E5E7EB; position: sticky; top: 0; background: white; z-index: 10; }
52	        .panel-header h2 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: var(--primary); }
53	        .panel-header p { margin: 0; font-size: .82rem; color: var(--text-sub); line-height: 1.4; }
54
55	        .std-group { border-bottom: 1px solid #F3F4F6; }
56	        .std-group-header { padding: 12px 20px 8px; display: flex; align-items: center; justify-content: space-between; }
57	        .std-group-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
58	        .std-group-label.s1 { color: #10B981; }
59	        .std-group-label.s2 { color: #3B82F6; }
60	        .std-group-label.s3 { color: #8B5CF6; }
61	        .std-group-label.s4 { color: #F59E0B; }
62	        .std-group-label.s5 { color: #EF4444; }
63	        .std-group-name { font-size: .78rem; color: var(--text-sub); font-weight: 600; }
64
65	        .card-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 20px; cursor: pointer; border-left: 3px solid transparent; transition: all .15s; }
66	        .card-item:hover { background: #F9FAFB; }
67	        .card-item.selected { background: #F5F3FF; border-left-color: var(--primary); }
68	        .card-check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #D1D5DB; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; font-size: .6rem; color: white; transition: all .2s; }
69	        .card-item.selected .card-check { background: var(--primary); border-color: var(--primary); }
70	        .card-item.selected .card-check::after { content: '✓'; }
71	        .card-item-info { flex: 1; min-width: 0; }
72	        .card-item-title { font-size: .85rem; font-weight: 700; color: var(--text-main); line-height: 1.3; margin-bottom: 3px; }
73	        .card-item.selected .card-item-title { color: var(--primary); }
74	        .card-item-reflection { font-size: .75rem; color: var(--text-sub); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
75
76	        .empty-std { padding: 12px 20px 16px; }
77	        .gap-badge { display: inline-flex; align-items: center; gap: 6px; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 8px; padding: 8px 12px; font-size: .78rem; color: #92400E; font-weight: 600; line-height: 1.4; }
78
79	        /* RIGHT PANEL */
80	        .right-panel { flex: 1; overflow-y: auto; padding: 24px 28px 60px; background: var(--bg); }
81	        .review-header { background: white; border-radius: 12px; border: 1px solid #E5E7EB; padding: 20px 24px; margin-bottom: 22px; display: flex; align-items: center; gap: 16px; }
82	        .review-header-info { flex: 1; }
83	        .review-header-info h2 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 800; color: var(--primary); }
84	        .review-header-info p { margin: 0; font-size: .84rem; color: var(--text-sub); }
85	        .review-date { font-size: .78rem; color: var(--text-sub); font-weight: 600; }
86
87	        .std-section { background: white; border-radius: 12px; border: 1px solid #E5E7EB; margin-bottom: 18px; overflow: hidden; }
88	        .std-section-header { padding: 14px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #F3F4F6; }
89	        .std-pip { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
90	        .s1 .std-pip, .std-pip.s1 { background: #10B981; }
91	        .s2 .std-pip, .std-pip.s2 { background: #3B82F6; }
92	        .s3 .std-pip, .std-pip.s3 { background: #8B5CF6; }

... [475 lines truncated] ...


1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	    <meta charset="UTF-8">
5	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6	    <title>APEX Portfolio | Standard 2: Beyond GPA</title>
7	    <style>
8	        :root {
9	            --primary: #500778;
10	            --secondary: #c4d600;
11	            --accent: #4b4f54;
12	            --bg: #F3F4F6;
13	            --card-bg: #FFFFFF;
14	            --text-main: #1F2937;
15	            --text-sub: #6B7280;
16	            --exceeds: #059669;
17	            --secure: #2563EB;
18	            --developing: #D97706;
19	            --beginning: #DC2626;
20	            --success: #10B981;
21	            --info-bg: #E0F2FE;
22	            --info-border: #7DD3FC;
23	            --nav-height: 70px;
24	            --sidebar-width: 300px;
25	        }
26	        body { font-family: 'Inter', 'Segoe UI', sans-serif; background-color: var(--bg); color: var(--text-main); margin: 0; padding-top: var(--nav-height); padding-bottom: 40px; padding-left: 20px; padding-right: 20px; transition: padding-left 0.3s; }
27	        .body-sidebar-open { padding-left: calc(var(--sidebar-width) + 20px); }
28
29	        /* --- GLOBAL NAVIGATION --- */
30	        .main-nav { background: var(--primary); height: var(--nav-height); width: 100%; position: fixed; top: 0; left: 0; z-index: 1000; display: flex; align-items: center; border-bottom: 4px solid var(--secondary); box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
31	        .nav-container { max-width: 1200px; margin: 0 auto; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
32	        .nav-logo-link { display: flex; align-items: center; text-decoration: none; height: calc(var(--nav-height) - 15px); }
33	        .nav-logo-img { height: 100%; width: auto; }
34	        .nav-links { display: flex; gap: 10px; }
35	        .nav-links a { color: rgba(255,255,255,0.9); text-decoration: none; font-size: 0.8rem; font-weight: 700; padding: 8px 14px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.03em; transition: all 0.2s; }
36	        .nav-links a:hover { color: var(--secondary); background: rgba(255,255,255,0.1); }
37	        .nav-links a.active { background: var(--secondary); color: var(--primary); }
38	        /* --- NAV DROPDOWNS --- */
39	        .nav-dropdown { position: relative; }
40	        .nav-drop-btn { color: rgba(255,255,255,0.9); background: none; border: none; font-size: 0.8rem; font-weight: 700; padding: 8px 14px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.03em; transition: all 0.2s; cursor: pointer; font-family: inherit; }
41	        .nav-dropdown:hover .nav-drop-btn { color: var(--secondary); background: rgba(255,255,255,0.1); }
42	        .nav-drop-btn.active { background: var(--secondary); color: var(--primary); }
43	        .nav-dropdown:hover .nav-drop-btn.active { background: var(--secondary); color: var(--primary); opacity: 0.85; }
44	        .nav-drop-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; background: white; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); min-width: 210px; z-index: 1001; padding: 6px 0; border: 1px solid #E5E7EB; }
45	        .nav-dropdown:hover .nav-drop-menu { display: block; }
46	        .nav-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 8px; }
47	        .nav-drop-menu a { display: block; padding: 9px 16px; color: #1F2937; text-decoration: none; font-size: 0.82rem; font-weight: 600; transition: background 0.15s; white-space: nowrap; }
48	        .nav-drop-menu a:hover { background: #F3F4F6; color: var(--primary); }
49	        .nav-drop-menu a.active { color: var(--primary); font-weight: 800; background: #F5F3FF; }
50
51	        .container { max-width: 1400px; margin: 0 auto; }
52	        header { text-align: center; margin-bottom: 30px; border-bottom: 1px solid #D1D5DB; padding-bottom: 20px; }
53	        h1 { font-size: 2.2rem; color: var(--primary); margin-bottom: 5px; font-weight: 800; }
54	        .subtitle { font-size: 1rem; color: var(--text-sub); max-width: 600px; margin: 0 auto; }
55
56	        /* Proficiency Indicators */
57	        .indicators-box { background: white; border: 2px solid var(--secondary); border-radius: 12px; margin-bottom: 25px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
58	        .indicators-box summary { padding: 15px 20px; background: #FFFBEB; cursor: pointer; font-weight: 800; color: var(--primary); display: flex; align-items: center; gap: 10px; }
59	        .indicators-content { padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; font-size: 0.85rem; line-height: 1.5; }
60	        .indicator-item { padding: 15px; border-radius: 8px; background: #F9FAFB; border-top: 4px solid #DDD; }
61	        .indicator-item strong { display: block; font-size: 1rem; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
62	        .lvl-exceeds { border-top-color: var(--exceeds); } .lvl-exceeds strong { color: var(--exceeds); }
63	        .lvl-secure { border-top-color: var(--secure); } .lvl-secure strong { color: var(--secure); }
64	        .lvl-developing { border-top-color: var(--developing); } .lvl-developing strong { color: var(--developing); }
65	        .lvl-beginning { border-top-color: var(--beginning); } .lvl-beginning strong { color: var(--beginning); }
66
67	        /* Strand Info */
68	        .strand-info { background: var(--info-bg); border: 1px solid var(--info-border); border-radius: 12px; padding: 20px; margin-bottom: 40px; display: flex; flex-wrap: wrap; gap: 30px; align-items: center; }
69	        .strand-info-text { flex: 2; min-width: 300px; }
70	        .strand-info-text h2 { margin: 0 0 10px 0; font-size: 1.2rem; color: #0369A1; }
71	        .strand-info-text p { margin: 0; font-size: 0.95rem; line-height: 1.4; color: #0C4A6E; }
72	        .strand-steps { flex: 3; min-width: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
73	        .step { background: rgba(255,255,255,0.5); padding: 12px; border-radius: 8px; font-size: 0.85rem; border: 1px solid rgba(255,255,255,0.8); }
74	        .step strong { color: var(--accent); display: block; margin-bottom: 4px; }
75
76	        /* Grid & Columns */
77	        .vibe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; align-items: start; }
78	        .vibe-column { background: var(--card-bg); border-radius: 12px; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-top: 8px solid var(--accent); position: relative; padding-bottom: 80px; min-height: 400px; }
79	        .col-1 { border-top-color: #06B6D4; }
80	        .col-2 { border-top-color: #8B5CF6; }
81	        .col-3 { border-top-color: #F59E0B; }
82	        .col-4 { border-top-color: #10B981; }
83	        .vibe-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 20px; color: var(--primary); display: flex; align-items: center; gap: 10px; }
84
85	        /* Progress Track */
86	        .progress-track { display: flex; gap: 5px; margin: -8px 0 18px 0; }
87	        .progress-pip { flex: 1; height: 5px; border-radius: 3px; background: #E5E7EB; transition: background 0.4s ease; }
88	        .col-1 .progress-pip.lit { background: #06B6D4; }
89	        .col-2 .progress-pip.lit { background: #8B5CF6; }
90	        .col-3 .progress-pip.lit { background: #F59E0B; }
91	        .col-4 .progress-pip.lit { background: #10B981; }
92
93	        /* Card */
94	        .sprint-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 10px; padding: 18px; margin-bottom: 15px; transition: 0.2s; position: relative; }
95	        .sprint-card:hover { border-color: var(--secondary); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
96
97	        /* Collapsible card header */
98	        .card-header { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; user-select: none; padding: 2px 0; }
99	        .card-header:hover .title-text { color: #3d0560; }

... [256 lines truncated] ...


Good. Now I also need to update the page titles of the two playbooks themselves and their own active nav labels. Let me also fix the Dashboard broken card and add the BSU Onboarding Project card:


508
509
Playbooks

510

511	            DCS Onboarding Project
512	                    BSU Onboarding Project
513
514	                Playbook
515
Video Production Workflow

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

517
Open Playbook

Playbooks

            DCS Onboarding Project
                    BSU Onboarding Project

                Playbook

Video Production Workflow

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

Open Playbook


Edit

DCS Onboarding Project
                    BSU Onboarding Project

                Playbook

DCS Onboarding Project

Run the full mock client engagement — from discovery through strategy, content, and final presentation.

Open Playbook

                Playbook

BSU Onboarding Project

Build and pitch a business concept through market research, ideation, and a formal investor-style presentation.

Open Playbook


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

DCS Onboarding Project
                    BSU Onboarding Project

                Playbook

DCS Onboarding Project

Run the full mock client engagement — from discovery through strategy, content, and final presentation.

Open Playbook

                Playbook

BSU Onboarding Project

Build and pitch a business concept through market research, ideation, and a formal investor-style presentation.

Open Playbook

-                    BSU Onboarding Project

+            <a href="Mock Client Project Playbook.html" class="standard-card">

+
Run the full mock client engagement — from discovery through strategy, content, and final presentation.

+            <a href="Business Startup Mock Client Playbook.html" class="standard-card">

+
Build and pitch a business concept through market research, ideation, and a formal investor-style presentation.

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


TodoWrite

Create Standard2.html (Beyond GPA) based on Standard5 template

Add Business Startup Mock Client to Playbooks nav in all files

Adding Business Startup to nav in all files

Update S2 nav label and rename to Beyond GPA everywhere

Rename Mock Client display name to 'DCS Onboarding Project' everywhere

Renaming Mock Client to DCS Onboarding Project

Rename Business Startup display name to 'BSU Onboarding Project' everywhere

Renaming Business Startup to BSU Onboarding Project

Fix Dashboard: repair broken cards and add BSU Onboarding Project card (with new names)

Fix Task Boards: add DCS Onboarding and BSU Onboarding to project list

Fix page titles and headers for consistency (Standard4, BSU/DCS playbook titles)

Fix language: replace 'student' with 'associate' in APEX context


Add Business Startup Mock Client to Playbooks nav in all files

Fix page titles and headers for consistency (Standard4, BSU/DCS playbook titles)


Now fix the Task Boards — add DCS Onboarding and BSU Onboarding to the project store list, and update the description:


Read

/Users/russgoerend/Desktop/Portfolio HTMLs/Project Task Boards.html


148

149
150

151
152
Project Task Boards Dashboard

153
One place to view and manage every project task board across Video, Social Media, and Marketing Analytics projects.

154
155

156	        Task Management
157
All project boards in one place

158
Each project board is pulled from the playbook stores saved locally in your browser. Use this page to see tasks across all projects, update status, and jump back to the relevant playbook.

159

160

161

162
No project boards were found yet.

163
Open a playbook, create a project, and add a few tasks to populate this dashboard.

164

165	    © 2026 Waukee APEX Aspiring Professional Portfolio | Built for Excellence
166

167

/Users/russgoerend/Desktop/Portfolio HTMLs/Project Task Boards.html

Project Task Boards Dashboard

One place to view and manage every project task board across Video, Social Media, and Marketing Analytics projects.

        Task Management

All project boards in one place

Each project board is pulled from the playbook stores saved locally in your browser. Use this page to see tasks across all projects, update status, and jump back to the relevant playbook.

No project boards were found yet.

Open a playbook, create a project, and add a few tasks to populate this dashboard.

    © 2026 Waukee APEX Aspiring Professional Portfolio | Built for Excellence


Edit

/Users/russgoerend/Desktop/Portfolio HTMLs/Project Task Boards.html

One place to view and manage every project task board across Video, Social Media, and Marketing Analytics projects.

One place to view and manage every project task board across all of your APEX playbooks.


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

-
One place to view and manage every project task board across Video, Social Media, and Marketing Analytics projects.

+
One place to view and manage every project task board across all of your APEX playbooks.


/Users/russgoerend/Desktop/Portfolio HTMLs/Project Task Boards.html

    const PROJECT_STORES = [
        { label: 'Video Production', key: 'apex_dcs_video_projects_v1', page: 'Video Production Playbook.html', type: 'Video' },
        { label: 'Social Media', key: 'apex_dcs_social_projects_v1', page: 'Social Media Playbook.html', type: 'Social Media' },
        { label: 'Marketing Analytics', key: 'apex_dcs_marketing_projects_v1', page: 'Marketing Analytics Playbook.html', type: 'Analytics' }
    ];

    const PROJECT_STORES = [
        { label: 'DCS Onboarding Project', key: 'apex_dcs_mock_client_projects_v1', page: 'Mock Client Project Playbook.html', type: 'Mock Client' },
        { label: 'BSU Onboarding Project', key: 'apex_bsb_mock_client_projects_v1', page: 'Business Startup Mock Client Playbook.html', type: 'Business Startup' },
        { label: 'Video Production', key: 'apex_dcs_video_projects_v1', page: 'Video Production Playbook.html', type: 'Video' },
        { label: 'Social Media', key: 'apex_dcs_social_projects_v1', page: 'Social Media Playbook.html', type: 'Social Media' },
        { label: 'Marketing Analytics', key: 'apex_dcs_marketing_projects_v1', page: 'Marketing Analytics Playbook.html', type: 'Analytics' }
    ];


    const PROJECT_STORES = [
        { label: 'Video Production', key: 'apex_dcs_video_projects_v1', page: 'Video Production Playbook.html', type: 'Video' },
        { label: 'Social Media', key: 'apex_dcs_social_projects_v1', page: 'Social Media Playbook.html', type: 'Social Media' },
        { label: 'Marketing Analytics', key: 'apex_dcs_marketing_projects_v1', page: 'Marketing Analytics Playbook.html', type: 'Analytics' }
    ];

    const PROJECT_STORES = [
        { label: 'DCS Onboarding Project', key: 'apex_dcs_mock_client_projects_v1', page: 'Mock Client Project Playbook.html', type: 'Mock Client' },
        { label: 'BSU Onboarding Project', key: 'apex_bsb_mock_client_projects_v1', page: 'Business Startup Mock Client Playbook.html', type: 'Business Startup' },
        { label: 'Video Production', key: 'apex_dcs_video_projects_v1', page: 'Video Production Playbook.html', type: 'Video' },
        { label: 'Social Media', key: 'apex_dcs_social_projects_v1', page: 'Social Media Playbook.html', type: 'Social Media' },
        { label: 'Marketing Analytics', key: 'apex_dcs_marketing_projects_v1', page: 'Marketing Analytics Playbook.html', type: 'Analytics' }
    ];

+        { label: 'DCS Onboarding Project', key: 'apex_dcs_mock_client_projects_v1', page: 'Mock Client Project Playbook.html', type: 'Mock Client' },

+        { label: 'BSU Onboarding Project', key: 'apex_bsb_mock_client_projects_v1', page: 'Business Startup Mock Client Playbook.html', type: 'Business Startup' },


TodoWrite

Create Standard2.html (Beyond GPA) based on Standard5 template

Add Business Startup Mock Client to Playbooks nav in all files

Adding Business Startup to nav in all files

Update S2 nav label and rename to Beyond GPA everywhere

Rename Mock Client display name to 'DCS Onboarding Project' everywhere

Renaming Mock Client to DCS Onboarding Project

Rename Business Startup display name to 'BSU Onboarding Project' everywhere

Renaming Business Startup to BSU Onboarding Project

Fix Dashboard: repair broken cards and add BSU Onboarding Project card

Fix Task Boards: add DCS Onboarding and BSU Onboarding to project list

Fix page titles and headers for consistency (Standard4, BSU/DCS playbook titles)

Fix language: replace 'student' with 'associate' in APEX context


Rename Mock Client display name to 'DCS Onboarding Project' everywhere

Rename Business Startup display name to 'BSU Onboarding Project' everywhere

Fix Dashboard: repair broken cards and add BSU Onboarding Project card

Fix language: replace 'student' with 'associate' in APEX context


Now fix page title inconsistencies and update the playbooks' own page titles/headers:


Bash

grep -n "<title>\|<h1" "/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4.html" | head -5

Check Standard4 title and h1


6:    <title>Standard 4 | Waukee APEX</title>
124:
Technical & Digital Skills


grep -n "<title>" "/Users/russgoerend/Desktop/Portfolio HTMLs/Mock Client Project Playbook.html" "/Users/russgoerend/Desktop/Portfolio HTMLs/Business Startup Mock Client Playbook.html" "/Users/russgoerend/Desktop/Portfolio HTMLs/Project Task Boards.html" "/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Review_Prep.html"

Check titles for all files that need updating


/Users/russgoerend/Desktop/Portfolio HTMLs/Project Task Boards.html:6:    <title>Project Task Boards Dashboard</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Review_Prep.html:6:    <title>APEX | Performance Review Prep</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/Mock Client Project Playbook.html:6:    <title>DCS Playbook | Mock Client Project</title>
/Users/russgoerend/Desktop/Portfolio HTMLs/Business Startup Mock Client Playbook.html:6:    <title>BSB Playbook | Mock Client Project</title>


# Fix all page titles in one pass using sed
cd "/Users/russgoerend/Desktop/Portfolio HTMLs"

# Standard4 title
sed -i '' 's|<title>Standard 4 | Waukee APEX</title>|<title>APEX Portfolio | Standard 4: Technical Skills</title>|g' "Standard4.html"

# Mock Client - update to new name
sed -i '' 's|<title>DCS Playbook | Mock Client Project</title>|<title>APEX Playbook | DCS Onboarding Project</title>|g' "Mock Client Project Playbook.html"

# Business Startup - update to new name
sed -i '' 's|<title>BSB Playbook | Mock Client Project</title>|<title>APEX Playbook | BSU Onboarding Project</title>|g' "Business Startup Mock Client Playbook.html"

# Task Boards
sed -i '' 's|<title>Project Task Boards Dashboard</title>|<title>APEX | Project Task Boards</title>|g' "Project Task Boards.html"

# Review Prep - already "APEX | Performance Review Prep" which is fine
# Dashboard - "APEX Professional Dashboard" which is fine

echo "Titles updated"

# Verify
grep -n "<title>" "Standard4.html" "Mock Client Project Playbook.html" "Business Startup Mock Client Playbook.html" "Project Task Boards.html"

Fix page titles for Standard4, both playbooks, and Task Boards


sed: 1: "s|<title>Standard 4 | W ...": bad flag in substitute command: '<'
sed: 1: "s|<title>DCS Playbook | ...": bad flag in substitute command: '<'
sed: 1: "s|<title>BSB Playbook | ...": bad flag in substitute command: '<'
sed: 1: "s|<title>Project Task B ...": bad flag in substitute command: 'P'
Titles updated
Standard4.html:6:    <title>Standard 4 | Waukee APEX</title>
Project Task Boards.html:6:    <title>Project Task Boards Dashboard</title>
Mock Client Project Playbook.html:6:    <title>DCS Playbook | Mock Client Project</title>
Business Startup Mock Client Playbook.html:6:    <title>BSB Playbook | Mock Client Project</title>


The pipe character is causing issues in sed. I need to escape it differently or use a different approach.


The pipe characters in the titles are tripping up sed — I'll use Edit for these:


1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	    <meta charset="UTF-8">
5	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6	    <title>Standard 4 | Waukee APEX</title>
7	    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
8	    <style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Standard 4 | Waukee APEX</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
    <style>


Read

/Users/russgoerend/Desktop/Portfolio HTMLs/Mock Client Project Playbook.html


1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	    <meta charset="UTF-8">
5	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6	    <title>DCS Playbook | Mock Client Project</title>
7	    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
8	    <style>

/Users/russgoerend/Desktop/Portfolio HTMLs/Mock Client Project Playbook.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DCS Playbook | Mock Client Project</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
    <style>


/Users/russgoerend/Desktop/Portfolio HTMLs/Business Startup Mock Client Playbook.html


1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	    <meta charset="UTF-8">
5	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6	    <title>BSB Playbook | Mock Client Project</title>
7	    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
8	    <style>

/Users/russgoerend/Desktop/Portfolio HTMLs/Business Startup Mock Client Playbook.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BSB Playbook | Mock Client Project</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
    <style>


1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	    <meta charset="UTF-8">
5	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6	    <title>Project Task Boards Dashboard</title>
7	    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
8	    <style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Task Boards Dashboard</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
    <style>


/Users/russgoerend/Desktop/Portfolio HTMLs/Project Task Boards.html


Edit

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


/Users/russgoerend/Desktop/Portfolio HTMLs/Mock Client Project Playbook.html

<title>DCS Playbook | Mock Client Project</title>

<title>APEX Playbook | DCS Onboarding Project</title>


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

<!DOCTYPE html>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Standard 4 | Waukee APEX</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">

            Dashboard

                <button class="nav-drop-btn active">Portfolio ▾</button>

                    S1 · Servant Leadership
                    S2 · Beyond GPA
                    S3 · Career Exploration
                    S4 · Technical Skills
                    S5 · Professional Skills

                <button class="nav-drop-btn">Playbooks ▾</button>

                    DCS Onboarding Project
                    BSU Onboarding Project
                    Video Production
                    Social Media
                    Marketing Analytics
                    Podcast Production
                    Graphic Design
                    Photography

Waukee APEX · Standard 4

Technical & Digital Skills

Which course are you in? Open the portfolio for your track below.

Business Startup

🚀

BSU Professional Sprint Portfolio

Track your technical skill development sprints, log evidence across the BSU strands, and build your Standard 4 portfolio for the Business Startup course.

Open BSU Portfolio →

Designing Communication Solutions

🎨

DCS Personal Brand Studio

Build your personal brand from the ground up — learn what a brand is, reflect on your values, design your visual identity, and deliver a complete brand system.

Open DCS Personal Brand →

-    <title>Standard 4 | Waukee APEX</title>

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


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

-    <title>DCS Playbook | Mock Client Project</title>

+    <title>APEX Playbook | DCS Onboarding Project</title>


/Users/russgoerend/Desktop/Portfolio HTMLs/Business Startup Mock Client Playbook.html

<title>BSB Playbook | Mock Client Project</title>

<title>APEX Playbook | BSU Onboarding Project</title>


/Users/russgoerend/Desktop/Portfolio HTMLs/Project Task Boards.html

<title>Project Task Boards Dashboard</title>

<title>APEX | Project Task Boards</title>


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

-    <title>BSB Playbook | Mock Client Project</title>

+    <title>APEX Playbook | BSU Onboarding Project</title>


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

-    <title>Project Task Boards Dashboard</title>

+    <title>APEX | Project Task Boards</title>


Create Standard2.html (Beyond GPA) based on Standard5 template

Add Business Startup Mock Client to Playbooks nav in all files

Update S2 nav label and rename to Beyond GPA everywhere

Rename Mock Client display name to 'DCS Onboarding Project' everywhere

Rename Business Startup display name to 'BSU Onboarding Project' everywhere

Fix Dashboard: repair broken cards and add BSU Onboarding Project card

Fix Task Boards: add DCS Onboarding and BSU Onboarding to project list

Fix page titles and headers for consistency (Standard4, BSU/DCS playbook titles)

Fix language: replace 'student' with 'associate' in APEX context


Now fix the Standard4.html h1 to match the other standards' pattern, and also the playbook `active` nav class labels:


118

119

120
121
122

123
Waukee APEX · Standard 4

124
Technical & Digital Skills

125
Which course are you in? Open the portfolio for your track below.

126
127

128
129
130
Business Startup

131
🚀

132
BSU Professional Sprint Portfolio

Waukee APEX · Standard 4

Technical & Digital Skills

Which course are you in? Open the portfolio for your track below.

Business Startup

🚀

BSU Professional Sprint Portfolio


The Standard4.html page has a different structure - it's a landing page that shows two options (BSU and DCS). The h1 is "Technical & Digital Skills" which is actually fine as a standalone page with the `.std-label` above it for context. Let me leave this as is since it's a landing page style, not a kanban page like S1/S3/S5.

Actually wait, looking at the other standards:
- S1: `<h1>Standard 1: Servant Leadership & Client Relationships</h1>`
- S3: No explicit h1 in the nav grep (let me check)

- S5: `<h1>Standard 5: Professional Skills</h1>`
- S4: `<h1 class="page-title">Technical & Digital Skills</h1>`

The format for S4 is slightly different but it has the `.std-label` above it which says "Waukee APEX · Standard 4". I'll leave the h1 content as is since it works as a landing page. The title is already fixed to "APEX Portfolio | Standard 4: Technical Skills".

Now I need to check the active nav class in each playbook page - the Mock Client playbook's active nav says "Mock Client Project" so I should verify if that was updated.

Looking back at the sed command I ran earlier, it was replacing the href and text together, but I need to check if that pattern actually matched the active link in the Mock Client Playbook itself since the active link has a class attribute in between.

The active link structure has `class="active"` between the href and the closing `>Mock Client Project</a>`, so my sed pattern wouldn't have matched it. Same issue with the Business Startup playbook's active link. I need to update those active links to reflect the new names.


The active nav links in the playbooks have `class="active"` before the `>` so my sed didn't catch them. Let me check and fix:


Bash

grep -n "class=\"active\">Mock Client\|class=\"active\">Business Startup\|class=\"active\">BSU\|class=\"active\">DCS" \
  "/Users/russgoerend/Desktop/Portfolio HTMLs/Mock Client Project Playbook.html" \
  "/Users/russgoerend/Desktop/Portfolio HTMLs/Business Startup Mock Client Playbook.html"

Check active nav labels in both playbook files


/Users/russgoerend/Desktop/Portfolio HTMLs/Business Startup Mock Client Playbook.html:299:                    Business Startup Mock Client
/Users/russgoerend/Desktop/Portfolio HTMLs/Mock Client Project Playbook.html:382:                    Mock Client Project


Edit

/Users/russgoerend/Desktop/Portfolio HTMLs/Mock Client Project Playbook.html


<button class="nav-drop-btn active">Playbooks ▾</button>

-                    Mock Client Project

+                    DCS Onboarding Project


/Users/russgoerend/Desktop/Portfolio HTMLs/Business Startup Mock Client Playbook.html


-                    Business Startup Mock Client

+                    BSU Onboarding Project


TodoWrite

Create Standard2.html (Beyond GPA) based on Standard5 template

Add Business Startup Mock Client to Playbooks nav in all files

Adding Business Startup to nav in all files

Update S2 nav label and rename to Beyond GPA everywhere

Rename Mock Client display name to 'DCS Onboarding Project' everywhere

Renaming Mock Client to DCS Onboarding Project

Rename Business Startup display name to 'BSU Onboarding Project' everywhere

Renaming Business Startup to BSU Onboarding Project

Fix Dashboard: repair broken cards and add BSU Onboarding Project card

Fix Task Boards: add DCS Onboarding and BSU Onboarding to project list

Fix page titles and headers for consistency

Fix language: replace 'student' with 'associate' in APEX context


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

Fix page titles and headers for consistency


Now fix the language — replace "student" with "associate" where it refers to APEX participants:


Read

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


298
🛠 Tools You'll Likely Use

299
GA4 (Google Analytics 4) — Tracks website traffic, user behavior, and conversions. This is usually your primary data source. Ask for view access early — it sometimes takes time to set up.

300
Meta Ads Manager — The reporting dashboard for Facebook and Instagram ads. You can pull performance data at the campaign, ad set, and individual ad level.

301
Google Ads — Reporting for Google search and display advertising. The Campaigns tab and Search Terms report are where most student analysts start.

302
Google Sheets — Where you'll organize and clean data before analysis. You don't need to be an expert, but be comfortable with sorting, filtering, and basic formulas (SUM, AVERAGE, division).

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

🛠 Tools You'll Likely Use

GA4 (Google Analytics 4) — Tracks website traffic, user behavior, and conversions. This is usually your primary data source. Ask for view access early — it sometimes takes time to set up.

Meta Ads Manager — The reporting dashboard for Facebook and Instagram ads. You can pull performance data at the campaign, ad set, and individual ad level.

Google Ads — Reporting for Google search and display advertising. The Campaigns tab and Search Terms report are where most student analysts start.

Google Sheets — Where you'll organize and clean data before analysis. You don't need to be an expert, but be comfortable with sorting, filtering, and basic formulas (SUM, AVERAGE, division).


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


489
ROAS (Return on Ad Spend) — Revenue generated per dollar spent on ads. A 3x ROAS means $3 back for every $1 spent. Most businesses need at least 2–3x to be profitable after costs.

490
CTR (Click-Through Rate) — Percentage of people who saw an ad or link and clicked it. High CTR on a low-conversion page means the ad is working but the landing page isn't. Low CTR usually means the ad creative or targeting needs work.

491
Bounce Rate — Percentage of sessions where the user left without any further interaction. A bounce rate above 70% on a key landing page is usually a red flag worth investigating.

492
ROAS vs. ROI — ROAS only measures ad spend. ROI accounts for all costs (creative, labor, tools). For student projects, ROAS is usually the right metric — you likely won't have full cost data.

493

ROAS (Return on Ad Spend) — Revenue generated per dollar spent on ads. A 3x ROAS means $3 back for every $1 spent. Most businesses need at least 2–3x to be profitable after costs.

CTR (Click-Through Rate) — Percentage of people who saw an ad or link and clicked it. High CTR on a low-conversion page means the ad is working but the landing page isn't. Low CTR usually means the ad creative or targeting needs work.

Bounce Rate — Percentage of sessions where the user left without any further interaction. A bounce rate above 70% on a key landing page is usually a red flag worth investigating.

ROAS vs. ROI — ROAS only measures ad spend. ROI accounts for all costs (creative, labor, tools). For student projects, ROAS is usually the right metric — you likely won't have full cost data.


Edit

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

The Campaigns tab and Search Terms report are where most student analysts start.

The Campaigns tab and Search Terms report are where most associates start their analysis.


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)

GA4 (Google Analytics 4) — Tracks website traffic, user behavior, and conversions. This is usually your primary data source. Ask for view access early — it sometimes takes time to set up.

Meta Ads Manager — The reporting dashboard for Facebook and Instagram ads. You can pull performance data at the campaign, ad set, and individual ad level.

-
Google Ads — Reporting for Google search and display advertising. The Campaigns tab and Search Terms report are where most student analysts start.

+
Google Ads — Reporting for Google search and display advertising. The Campaigns tab and Search Terms report are where most associates start their analysis.

Google Sheets — Where you'll organize and clean data before analysis. You don't need to be an expert, but be comfortable with sorting, filtering, and basic formulas (SUM, AVERAGE, division).

Looker Studio — A free Google tool for building visual dashboards. Most clients prefer a visual deliverable over a raw spreadsheet — this is usually how you'll present your final report.

The client's existing dashboards — Always ask in discovery what reports the client already uses and trusts. Start there before building anything new.


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

For student projects, ROAS is usually the right metric — you likely won't have full cost data.

For APEX projects, ROAS is usually the right metric — you likely won't have full cost data.


ROAS (Return on Ad Spend) — Revenue generated per dollar spent on ads. A 3x ROAS means $3 back for every $1 spent. Most businesses need at least 2–3x to be profitable after costs.

CTR (Click-Through Rate) — Percentage of people who saw an ad or link and clicked it. High CTR on a low-conversion page means the ad is working but the landing page isn't. Low CTR usually means the ad creative or targeting needs work.

Bounce Rate — Percentage of sessions where the user left without any further interaction. A bounce rate above 70% on a key landing page is usually a red flag worth investigating.

-
ROAS vs. ROI — ROAS only measures ad spend. ROI accounts for all costs (creative, labor, tools). For student projects, ROAS is usually the right metric — you likely won't have full cost data.

+
ROAS vs. ROI — ROAS only measures ad spend. ROI accounts for all costs (creative, labor, tools). For APEX projects, ROAS is usually the right metric — you likely won't have full cost data.


Now fix the Mock Client Playbook language issues:


Read

/Users/russgoerend/Desktop/Portfolio HTMLs/Mock Client Project Playbook.html


887
Follower count

888
Post frequency

889
Content types: updates, student spotlights, articles

890
Avg. engagement per post

891
Top performing posts

892
Company page completeness

893
Professional tone consistent?

894
Alumni / partner content present?

895
Industry keywords in profile?

896

897

898

899

900
901

Follower count

Post frequency

Content types: updates, student spotlights, articles

Avg. engagement per post

Top performing posts

Company page completeness

Professional tone consistent?

Alumni / partner content present?

Industry keywords in profile?


/Users/russgoerend/Desktop/Portfolio HTMLs/Mock Client Project Playbook.html


969

970
✦ Student Work

971
Showcase actual projects, client deliverables, and finished work. The proof that APEX students do real things.

972

973

974
✦ Program Culture

975
Behind-the-scenes, team moments, class activities, and what it actually feels like to be an APEX student.

976

977

978
✦ Industry & Career

979
Industry partner spotlights, alumni updates, career paths, and professional skill highlights.

980

981

982
✦ Community Spotlight

983
Community clients, partner organizations, events, and ways APEX connects with Waukee beyond the classroom.

984

985

986
Your Finalized Content Pillars & Rationale

987	                <textarea class="field-input" id="strat-pillars" placeholder="List your 3–4 pillars with a 1-sentence rationale for each. Why these? What does each one accomplish for the client's goals?" oninput="saveState();"></textarea>
988

989
990

991
🎨 Visual Style & Brand Voice

992
Consistency in visual style and tone is what makes a brand feel like a brand — not just a feed of random posts. Define both before you build the content calendar.

993
Visual Direction

994	                <textarea class="field-input" id="strat-visual" placeholder="e.g., Bold typography using APEX purple and lime green. High-contrast photos. Consistent use of brand logo in corner. No stock photos — only real APEX student and client imagery." oninput="saveState();"></textarea>
995
Brand Voice & Tone

996	                <textarea class="field-input" id="strat-voice" placeholder="e.g., Confident and aspirational but not corporate. Conversational for Instagram. More formal for LinkedIn. Always student-centered — not institution-centered." oninput="saveState();"></textarea>
997
Recommended Posting Frequency

998	                <textarea class="field-input" id="strat-frequency" placeholder="e.g., Instagram: 3x/week (1 Reel, 1 carousel, 1 photo). LinkedIn: 2x/week. Facebook: 2x/week, mirroring top Instagram posts." oninput="saveState();"></textarea>

✦ Student Work

Showcase actual projects, client deliverables, and finished work. The proof that APEX students do real things.

✦ Program Culture

Behind-the-scenes, team moments, class activities, and what it actually feels like to be an APEX student.

✦ Industry & Career

Industry partner spotlights, alumni updates, career paths, and professional skill highlights.

✦ Community Spotlight

Community clients, partner organizations, events, and ways APEX connects with Waukee beyond the classroom.

Your Finalized Content Pillars & Rationale

                <textarea class="field-input" id="strat-pillars" placeholder="List your 3–4 pillars with a 1-sentence rationale for each. Why these? What does each one accomplish for the client's goals?" oninput="saveState();"></textarea>

🎨 Visual Style & Brand Voice

Consistency in visual style and tone is what makes a brand feel like a brand — not just a feed of random posts. Define both before you build the content calendar.

Visual Direction

                <textarea class="field-input" id="strat-visual" placeholder="e.g., Bold typography using APEX purple and lime green. High-contrast photos. Consistent use of brand logo in corner. No stock photos — only real APEX student and client imagery." oninput="saveState();"></textarea>

Brand Voice & Tone

                <textarea class="field-input" id="strat-voice" placeholder="e.g., Confident and aspirational but not corporate. Conversational for Instagram. More formal for LinkedIn. Always student-centered — not institution-centered." oninput="saveState();"></textarea>

Recommended Posting Frequency

                <textarea class="field-input" id="strat-frequency" placeholder="e.g., Instagram: 3x/week (1 Reel, 1 carousel, 1 photo). LinkedIn: 2x/week. Facebook: 2x/week, mirroring top Instagram posts." oninput="saveState();"></textarea>


Edit

/Users/russgoerend/Desktop/Portfolio HTMLs/Mock Client Project Playbook.html

Content types: updates, student spotlights, articles

Content types: updates, associate spotlights, articles


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

-
Content types: updates, student spotlights, articles

+
Content types: updates, associate spotlights, articles


/Users/russgoerend/Desktop/Portfolio HTMLs/Mock Client Project Playbook.html

✦ Student Work

Showcase actual projects, client deliverables, and finished work. The proof that APEX students do real things.

✦ Associate Work

Showcase actual projects, client deliverables, and finished work. The proof that APEX associates do real things.


/Users/russgoerend/Desktop/Portfolio HTMLs/Mock Client Project Playbook.html

Behind-the-scenes, team moments, class activities, and what it actually feels like to be an APEX student.

Behind-the-scenes, team moments, cohort activities, and what it actually feels like to be an APEX associate.


✦ Student Work

Showcase actual projects, client deliverables, and finished work. The proof that APEX students do real things.

✦ Associate Work

Showcase actual projects, client deliverables, and finished work. The proof that APEX associates do real things.

The pillars below are starting suggestions for APEX — adjust them based on what you learned in discovery and the audit. Document your final pillars in your strategy document.

-
Showcase actual projects, client deliverables, and finished work. The proof that APEX students do real things.

+
Showcase actual projects, client deliverables, and finished work. The proof that APEX associates do real things.


-
Behind-the-scenes, team moments, class activities, and what it actually feels like to be an APEX student.

+
Behind-the-scenes, team moments, cohort activities, and what it actually feels like to be an APEX associate.


Create Standard2.html (Beyond GPA) based on Standard5 template

Add Business Startup Mock Client to Playbooks nav in all files

Update S2 nav label and rename to Beyond GPA everywhere

Rename Mock Client display name to 'DCS Onboarding Project' everywhere

Rename Business Startup display name to 'BSU Onboarding Project' everywhere

Fix Dashboard: repair broken cards and add BSU Onboarding Project card

Fix Task Boards: add DCS Onboarding and BSU Onboarding to project list

Fix page titles and headers for consistency

Fix language: replace 'student' with 'associate' in APEX context


Now fix the remaining placeholder text and Standard4DCS language:


Read

/Users/russgoerend/Desktop/Portfolio HTMLs/Mock Client Project Playbook.html


1037
Are our content pillars actually connected to what the client told us in discovery — or are they just guesses?

1038
Does our visual direction align with APEX's actual brand? Can we show examples?

1039
Is our posting frequency recommendation realistic for a student team to maintain?

1040
Does the strategy address what the client said success looks like?

1041

1042

1043
Your Checkpoint Notes

1044	                <textarea class="field-input" id="cp2a-notes" placeholder="What did Russ say? What should change in the strategy before you build the calendar?" oninput="saveState();"></textarea>
1045

1046

Are our content pillars actually connected to what the client told us in discovery — or are they just guesses?

Does our visual direction align with APEX's actual brand? Can we show examples?

Is our posting frequency recommendation realistic for a student team to maintain?

Does the strategy address what the client said success looks like?

Your Checkpoint Notes

                <textarea class="field-input" id="cp2a-notes" placeholder="What did Russ say? What should change in the strategy before you build the calendar?" oninput="saveState();"></textarea>


/Users/russgoerend/Desktop/Portfolio HTMLs/Mock Client Project Playbook.html


1117
<input type="checkbox" id="cl-cc3" onchange="saveState();">Distribute pillars evenly — no single theme should dominate two consecutive weeks

1118
<input type="checkbox" id="cl-cc4" onchange="saveState();">Write caption themes as full sentences, not just topic labels

1119
<input type="checkbox" id="cl-cc5" onchange="saveState();">Leave room for reactive content (unplanned moments, events, student wins)

1120
<input type="checkbox" id="cl-cc6" onchange="saveState();">Include a "Posting Instructions" tab explaining the calendar to someone who wasn't on your team

1121

1122

1123
1124

<input type="checkbox" id="cl-cc3" onchange="saveState();">Distribute pillars evenly — no single theme should dominate two consecutive weeks

<input type="checkbox" id="cl-cc4" onchange="saveState();">Write caption themes as full sentences, not just topic labels

<input type="checkbox" id="cl-cc5" onchange="saveState();">Leave room for reactive content (unplanned moments, events, student wins)

<input type="checkbox" id="cl-cc6" onchange="saveState();">Include a "Posting Instructions" tab explaining the calendar to someone who wasn't on your team


Edit

/Users/russgoerend/Desktop/Portfolio HTMLs/Mock Client Project Playbook.html

Is our posting frequency recommendation realistic for a student team to maintain?

Is our posting frequency recommendation realistic for an associate team to maintain?


Are our content pillars actually connected to what the client told us in discovery — or are they just guesses?

Does our visual direction align with APEX's actual brand? Can we show examples?

-
Is our posting frequency recommendation realistic for a student team to maintain?

+
Is our posting frequency recommendation realistic for an associate team to maintain?

Does the strategy address what the client said success looks like?


/Users/russgoerend/Desktop/Portfolio HTMLs/Mock Client Project Playbook.html

<input type="checkbox" id="cl-cc5" onchange="saveState();">Leave room for reactive content (unplanned moments, events, student wins)

<input type="checkbox" id="cl-cc5" onchange="saveState();">Leave room for reactive content (unplanned moments, events, associate wins)


<input type="checkbox" id="cl-cc2" onchange="saveState();">Include a variety of post formats — don't make every post a static photo

<input type="checkbox" id="cl-cc3" onchange="saveState();">Distribute pillars evenly — no single theme should dominate two consecutive weeks

<input type="checkbox" id="cl-cc4" onchange="saveState();">Write caption themes as full sentences, not just topic labels

-
<input type="checkbox" id="cl-cc5" onchange="saveState();">Leave room for reactive content (unplanned moments, events, student wins)

+
<input type="checkbox" id="cl-cc5" onchange="saveState();">Leave room for reactive content (unplanned moments, events, associate wins)

<input type="checkbox" id="cl-cc6" onchange="saveState();">Include a "Posting Instructions" tab explaining the calendar to someone who wasn't on your team


Now fix the placeholder text and Standard4DCS language:


Read

/Users/russgoerend/Desktop/Portfolio HTMLs/Mock Client Project Playbook.html