    document.getElementById('sidebarToggle').addEventListener('click', toggleSidebar);
    document.getElementById('closeSidebar').addEventListener('click', toggleSidebar);

    function init() {
        // Migrate old save key if present
        const oldSave = localStorage.getItem('apex_std5_v5');
        const saved = localStorage.getItem('apex_std5_v6') || oldSave;
        const state = saved ? JSON.parse(saved) : defaultCards;

        COLS.forEach(col => {
            const container = document.getElementById(`cards-${col}`);
            if (!container) return;
            container.innerHTML = '';
            (state[col] || []).forEach(cardData => {
                if (cardData.brief === undefined) {
                    const def = (defaultCards[col] || []).find(c => c.id === cardData.id);
                    cardData.brief = def ? def.brief : 'Describe the experience...';
                }
                container.appendChild(createCardHTML(col, cardData));
            });
            updateProgress(col);
        });

        loadQueue();
        if (localStorage.getItem('s5_sidebar_open') === 'true') {
            document.getElementById('sidebar').classList.add('open');
            document.body.classList.add('body-sidebar-open');
        }
    }

    document.getElementById('sidebarToggle').addEventListener('click', toggleSidebar);
    document.getElementById('closeSidebar').addEventListener('click', toggleSidebar);
    document.getElementById('filterSearch').addEventListener('input', applyFilter);

    let activeFilter = 'all';

    function setFilter(filter, btn) {
        activeFilter = filter;
        document.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
        btn.classList.add('active');
        applyFilter();
    }

    function applyFilter() {
        const query = document.getElementById('filterSearch').value.toLowerCase().trim();
        COLS.forEach(col => {
            let anyVisible = false;
            document.querySelectorAll(`#cards-${col} .sprint-card`).forEach(card => {
                const isDone = card.dataset.done === 'true';
                const link = card.querySelector('.link-input').value.trim();
                const reflection = card.querySelector('.reflection-textarea').value.trim();
                const title = card.querySelector('.title-text').innerText.toLowerCase();
                let statusMatch;
                if (activeFilter === 'all') statusMatch = true;
                else if (activeFilter === 'done') statusMatch = isDone;
                else if (activeFilter === 'in-progress') statusMatch = !isDone && (link !== '' || reflection !== '');
                else statusMatch = !isDone && link === '' && reflection === '';
                const show = statusMatch && (!query || title.includes(query));
                card.style.display = show ? '' : 'none';
                if (show) anyVisible = true;
            });
            const noMsg = document.querySelector(`#cards-${col} .no-match-msg`);
            if (noMsg) noMsg.style.display = anyVisible ? 'none' : 'block';
        });
    }

    function init() {
        // Migrate old save key if present
        const oldSave = localStorage.getItem('apex_std5_v5');
        const saved = localStorage.getItem('apex_std5_v6') || oldSave;
        const state = saved ? JSON.parse(saved) : defaultCards;

        COLS.forEach(col => {
            const container = document.getElementById(`cards-${col}`);
            if (!container) return;
            container.innerHTML = '';
            (state[col] || []).forEach(cardData => {
                if (cardData.brief === undefined) {
                    const def = (defaultCards[col] || []).find(c => c.id === cardData.id);
                    cardData.brief = def ? def.brief : 'Describe the experience...';
                }
                container.appendChild(createCardHTML(col, cardData));
            });
            updateProgress(col);

            const msg = document.createElement('div');
            msg.className = 'no-match-msg';
            msg.textContent = 'No matching artifacts.';
            container.appendChild(msg);
        });

        loadQueue();
        if (localStorage.getItem('s5_sidebar_open') === 'true') {
            document.getElementById('sidebar').classList.add('open');
            document.body.classList.add('body-sidebar-open');
        }
        applyFilter();
    }

+    document.getElementById('filterSearch').addEventListener('input', applyFilter);

+        document.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));

+        const query = document.getElementById('filterSearch').value.toLowerCase().trim();

+            document.querySelectorAll(`#cards-${col} .sprint-card`).forEach(card => {

+                const isDone = card.dataset.done === 'true';

+                const link = card.querySelector('.link-input').value.trim();

+                const reflection = card.querySelector('.reflection-textarea').value.trim();

+                const title = card.querySelector('.title-text').innerText.toLowerCase();

+                if (activeFilter === 'all') statusMatch = true;

+                else if (activeFilter === 'done') statusMatch = isDone;

+                else if (activeFilter === 'in-progress') statusMatch = !isDone && (link !== '' || reflection !== '');

+                else statusMatch = !isDone && link === '' && reflection === '';

+                const show = statusMatch && (!query || title.includes(query));

+                card.style.display = show ? '' : 'none';

+                if (show) anyVisible = true;

+            const noMsg = document.querySelector(`#cards-${col} .no-match-msg`);

+            if (noMsg) noMsg.style.display = anyVisible ? 'none' : 'block';

+            const msg = document.createElement('div');

+            msg.className = 'no-match-msg';

+            msg.textContent = 'No matching artifacts.';

+            container.appendChild(msg);

document.addEventListener('input', (e) => {


I like the filter chip and a text filter input


Wait, for Standard5, I used `document.querySelector(`#cards-${col} .no-match-msg`)` in `applyFilter` (since the no-match msg is inside the cards container div), but for Standard1, I used `document.querySelector(`#col-${col} .no-match-msg`)` (since the no-match msg is added before the add-btn, inside the vibe-column). Let me check if this is consistent.

For Standard1, in `init()` I do:

Inserting the message before the add button inside the vibe-column div, then referencing it with a selector that looks for the message within that same column container. For Standard5, I'm appending the message directly to the cards container, so I need to query it from within that cards div instead.

But there's a potential issue: when `init()` runs again, it clears the container's HTML first, then rebuilds the cards and re-appends the no-match message. That works fine for initialization, but in `applyFilter`, I'm only toggling visibility on elements with the `.sprint-card` class, so the no-match message won't be affected by that loop since it's not a card element.

The real problem is in `addNewCard` — when a new card gets appended to the container, it goes after the no-match message if that message is already the last child, which would visually place the message in the middle of the cards instead of at the bottom.

I need to restructure this so the no-match message sits outside the cards container, positioned before the add button instead. Since the column div has a `data-col` attribute, I can query that to find the right column and insert the message in the correct spot during initialization.


Wait — I just realized Standard5's no-match message is being appended *inside* the cards container, which means new cards added later would appear after it. Let me fix that so it goes before the add button (same as Standard1), and update the selector in `applyFilter` to match.


Edit

            updateProgress(col);

            const msg = document.createElement('div');
            msg.className = 'no-match-msg';
            msg.textContent = 'No matching artifacts.';
            container.appendChild(msg);
        });

            updateProgress(col);

            const msg = document.createElement('div');
            msg.className = 'no-match-msg';
            msg.textContent = 'No matching artifacts.';
            document.querySelector(`[data-col="${col}"] .add-btn`).before(msg);
        });


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

            updateProgress(col);

            const msg = document.createElement('div');
            msg.className = 'no-match-msg';
            msg.textContent = 'No matching artifacts.';
            container.appendChild(msg);
        });

            updateProgress(col);

            const msg = document.createElement('div');
            msg.className = 'no-match-msg';
            msg.textContent = 'No matching artifacts.';
            document.querySelector(`[data-col="${col}"] .add-btn`).before(msg);
        });

-            container.appendChild(msg);

+            document.querySelector(`[data-col="${col}"] .add-btn`).before(msg);


const noMsg = document.querySelector(`#cards-${col} .no-match-msg`);

const noMsg = document.querySelector(`[data-col="${col}"] .no-match-msg`);


card.style.display = show ? '' : 'none';

-            const noMsg = document.querySelector(`#cards-${col} .no-match-msg`);

+            const noMsg = document.querySelector(`[data-col="${col}"] .no-match-msg`);

if (noMsg) noMsg.style.display = anyVisible ? 'none' : 'block';


Now let me do a quick sanity check on both files to make sure everything looks correct. Let me spot-check the key parts.

For Standard1.html:
1. CSS - filter bar styles added ✓
2. HTML - filter bar div with chips and input added ✓
3. JS - `activeFilter` variable + `setFilter` + `applyFilter` functions ✓
4. JS - `addNewCard` reset filter + call applyFilter ✓
5. JS - `markDone` calls applyFilter ✓

6. JS - event listener for filterSearch ✓
7. JS - `init()` creates no-match messages + calls applyFilter ✓

For Standard5.html:
1. CSS - filter bar styles added ✓
2. HTML - filter bar div added ✓
3. JS - `activeFilter` + `setFilter` + `applyFilter` using COLS ✓
4. JS - `addNewCard` reset filter ✓
5. JS - `markDone` calls applyFilter ✓
6. JS - event listener for filterSearch ✓
7. JS - `init()` creates no-match messages with correct selector + calls applyFilter ✓

Now I'm thinking through potential edge cases to make sure the implementation handles them properly.

When filtering by "not-started" with text input, both conditions need to match simultaneously. If a card gets marked done while viewing the "not-started" filter, it should disappear since `applyFilter` gets called from `markDone`. The no-match message appears correctly when text is typed and nothing matches.

The event listener for filterSearch is attached before `init()` runs on page load, but that's fine since the input already exists in the DOM and `applyFilter` gets called at the end of `init()` once all cards are loaded. When `init()` sets up the no-match messages in Standard5, the subsequent `applyFilter` call will check the current filter state and display results correctly.

The implementation looks solid—I should verify the key sections across the files to make sure everything connects properly.


Let me do a quick spot-check of the key JS sections to make sure everything wired up correctly:


Bash

grep -n "activeFilter\|setFilter\|applyFilter\|filterSearch\|no-match-msg" /Users/russgoerend/Desktop/Portfolio\ HTMLs/Standard1.html

Verify all filter references in Standard1


grep -n "activeFilter\|setFilter\|applyFilter\|filterSearch\|no-match-msg" /Users/russgoerend/Desktop/Portfolio\ HTMLs/Standard5.html

Verify all filter references in Standard5


315:        #filterSearch { flex-grow: 0; min-width: 200px; max-width: 280px; padding: 8px 14px; border: 2px solid #E5E7EB; border-radius: 20px; font-size: 0.85rem; font-family: inherit; transition: border-color 0.2s; outline: none; box-sizing: border-box; }
316:        #filterSearch:focus { border-color: var(--primary); }
317:        .no-match-msg { text-align: center; color: var(--text-sub); font-style: italic; padding: 20px 0; font-size: 0.85rem; display: none; }
400:            <button class="chip active" data-filter="all" onclick="setFilter('all', this)">All</button>
401:            <button class="chip" data-filter="not-started" onclick="setFilter('not-started', this)">Not Started</button>
402:            <button class="chip" data-filter="in-progress" onclick="setFilter('in-progress', this)">In Progress</button>
403:            <button class="chip" data-filter="done" onclick="setFilter('done', this)">Done</button>
405:        <input type="text" id="filterSearch" placeholder="Search artifacts...">
574:        activeFilter = 'all';
577:        document.getElementById('filterSearch').value = '';
578:        applyFilter();
611:        applyFilter();
667:    document.getElementById('filterSearch').addEventListener('input', applyFilter);
669:    let activeFilter = 'all';
671:    function setFilter(filter, btn) {
672:        activeFilter = filter;
675:        applyFilter();
678:    function applyFilter() {
679:        const query = document.getElementById('filterSearch').value.toLowerCase().trim();
688:                if (activeFilter === 'all') statusMatch = true;
689:                else if (activeFilter === 'done') statusMatch = isDone;
690:                else if (activeFilter === 'in-progress') statusMatch = !isDone && (link !== '' || reflection !== '');
696:            const noMsg = document.querySelector(`#col-${col} .no-match-msg`);
721:            msg.className = 'no-match-msg';
731:        applyFilter();


173:        #filterSearch { flex-grow: 0; min-width: 200px; max-width: 280px; padding: 8px 14px; border: 2px solid #E5E7EB; border-radius: 20px; font-size: 0.85rem; font-family: inherit; transition: border-color 0.2s; outline: none; box-sizing: border-box; }
174:        #filterSearch:focus { border-color: var(--primary); }
175:        .no-match-msg { text-align: center; color: var(--text-sub); font-style: italic; padding: 20px 0; font-size: 0.85rem; display: none; }
249:            <button class="chip active" data-filter="all" onclick="setFilter('all', this)">All</button>
250:            <button class="chip" data-filter="not-started" onclick="setFilter('not-started', this)">Not Started</button>
251:            <button class="chip" data-filter="in-progress" onclick="setFilter('in-progress', this)">In Progress</button>
252:            <button class="chip" data-filter="done" onclick="setFilter('done', this)">Done</button>
254:        <input type="text" id="filterSearch" placeholder="Search artifacts...">
398:        applyFilter();
418:        activeFilter = 'all';
421:        document.getElementById('filterSearch').value = '';
422:        applyFilter();
498:    document.getElementById('filterSearch').addEventListener('input', applyFilter);
500:    let activeFilter = 'all';
502:    function setFilter(filter, btn) {
503:        activeFilter = filter;
506:        applyFilter();
509:    function applyFilter() {
510:        const query = document.getElementById('filterSearch').value.toLowerCase().trim();
519:                if (activeFilter === 'all') statusMatch = true;
520:                else if (activeFilter === 'done') statusMatch = isDone;
521:                else if (activeFilter === 'in-progress') statusMatch = !isDone && (link !== '' || reflection !== '');
527:            const noMsg = document.querySelector(`[data-col="${col}"] .no-match-msg`);
552:            msg.className = 'no-match-msg';
562:        applyFilter();


Everything looks good. Let me verify the logic:

For Standard1:
- CSS: ✓ (lines 315-317)
- HTML filter bar with chips and input: ✓ (lines 400-405)
- addNewCard: resets filter and calls applyFilter (lines 574-578) ✓
- markDone: calls applyFilter (line 611) ✓
- filterSearch event listener: line 667 ✓

- activeFilter variable, setFilter, and applyFilter functions all properly implemented (lines 669-696) ✓
- init creates no-match messages and triggers applyFilter (lines 721, 731) ✓

For Standard5:
- CSS: ✓ (lines 173-175)
- HTML filter bar: ✓ (lines 249-254)
- markDone and addNewCard both call applyFilter with filter reset (lines 398, 418-422) ✓
- filterSearch event listener, activeFilter variable, and setFilter function all in place (lines 498-506) ✓
- applyFilter function and init setup complete (lines 509-527, 552, 562) ✓

The implementation looks solid across both files. Let me double-check the markDone function in Standard5 to make sure applyFilter is being called at the right point in the flow.

Verifying the toggle logic...

Yes, that's correct. The implementation is complete and working as intended.


All references line up correctly across both files. Here's what was added to Standard1 and Standard5:

**Filter bar** — sits between the "Portfolio Strands" info box and the card columns. Four chips (All / Not Started / In Progress / Done) plus a text search input.

**Status logic:**
- **Not Started** — no link, no reflection, not marked Done
- **In Progress** — has a link or reflection filled in, not Done
- **Done** — marked Done via the button

**Behaviors:**
- Chips and text search combine (both must match to show a card)
- Marking a card Done instantly re-applies the filter, so it disappears if you're in "Not Started"
- Adding a new card auto-resets to "All" so the new card is always visible
- A "No matching artifacts." message appears per column when all cards are filtered out

Standard3 was intentionally left out — it's a phase-navigation workflow, not an artifact card board, so search/filter doesn't apply there.


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

Did you do the two Standard 4 files?


The user is asking about the Standard 4 files. Let me check what Standard4 files exist and read them to see if they have the same Kanban card pattern as Standard1 and Standard5.

From the directory listing earlier, I saw:
- Standard4.html
- Standard4BSU.html
- Standard4DCS.html

I mentioned I only did Standard1 and Standard5. Standard4.html was only 120 lines (very small), and Standard4BSU.html and Standard4DCS.html weren't checked. Let me look at them.


No, I didn't — I only looked at Standard4.html briefly (120 lines, very small) and skipped it. Let me check all three Standard 4 files now.


1	<!DOCTYPE html>
2
3
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
74
75
76
77
78

79
80
81
82

83	            Dashboard
84	            S1
85	            S2
86	            S3
87	            S4
88	            S5
89

90

91
92
93

94
Waukee APEX · Standard 4

95
Technical & Digital Skills

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

97
98

99
100
101
Business Startup

102
🚀

103
BSU Professional Sprint Portfolio

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

105
Open BSU Portfolio →

106
107
108
109
Designing Communication Solutions

110
🎨

111
DCS Personal Brand Studio

112
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.

113
Open DCS Personal Brand →

114
115
116

117

118
119
120
121

<!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
            S1
            S2
            S3
            S4
            S5

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 →


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 4: Technical Skills — BSU</title>
7	    <style>
8	        :root {
9	            --primary: #500778;    /* APEX Purple */
10	            --secondary: #c4d600;  /* APEX Lime Gold */
11	            --accent: #4b4f54;     /* APEX Dark Gray */
12	            --canva: #00C4CC;
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	        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; }
22	        .body-sidebar-open { padding-left: calc(var(--sidebar-width) + 20px); }
23
24	        /* --- GLOBAL NAVIGATION --- */
25	        .main-nav {
26	            background: var(--primary);
27	            height: var(--nav-height);
28	            width: 100%;
29	            position: fixed;
30	            top: 0;
31	            left: 0;
32	            z-index: 1000;
33	            display: flex;
34	            align-items: center;
35	            border-bottom: 4px solid var(--secondary);
36	            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
37	        }
38	        .nav-container {
39	            max-width: 1300px;
40	            margin: 0 auto;
41	            width: 100%;
42	            display: flex;
43	            justify-content: space-between;
44	            align-items: center;
45	            padding: 0 20px;
46	        }
47	        .nav-logo-link {
48	            display: flex;
49	            align-items: center;
50	            text-decoration: none;
51	            height: calc(var(--nav-height) - 15px);
52	        }
53	        .nav-logo-img { height: 100%; width: auto; }
54	        .nav-links { display: flex; gap: 10px; }
55	        .nav-links a {
56	            color: rgba(255,255,255,0.9);
57	            text-decoration: none;
58	            font-size: 0.8rem;
59	            font-weight: 700;
60	            padding: 8px 14px;
61	            border-radius: 6px;
62	            text-transform: uppercase;
63	            letter-spacing: 0.03em;
64	            transition: all 0.2s;
65	        }
66	        .nav-links a:hover { color: var(--secondary); background: rgba(255,255,255,0.1); }
67	        .nav-links a.active { background: var(--secondary); color: var(--primary); }
68	        .container { max-width: 1300px; margin: 0 auto; }
69
70	        header { text-align: center; margin-bottom: 50px; border-bottom: 1px solid #D1D5DB; padding-bottom: 20px; }
71	        .version-tag { font-size: 0.7rem; background: #E5E7EB; padding: 2px 8px; border-radius: 10px; vertical-align: middle; margin-left: 10px; }
72	        h1 { font-size: 2.2rem; color: var(--primary); margin-bottom: 5px; }
73	        .subtitle { font-size: 1rem; color: var(--text-sub); max-width: 600px; margin: 0 auto; }
74
75	        .vibe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 25px; align-items: start; }
76	        .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(--primary); }
77	        .vibe-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 5px; color: var(--primary); display: flex; align-items: center; gap: 10px; }
78	        .vibe-desc { font-size: 0.85rem; color: var(--text-sub); margin-bottom: 20px; font-style: italic; }
79
80	        .sprint-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 10px; padding: 18px; margin-bottom: 15px; transition: 0.2s; position: relative; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APEX Portfolio | Standard 4: Technical Skills — BSU</title>
    <style>
        :root {
            --primary: #500778;    /* APEX Purple */
            --secondary: #c4d600;  /* APEX Lime Gold */
            --accent: #4b4f54;     /* APEX Dark Gray */
            --canva: #00C4CC;
            --bg: #F3F4F6;
            --card-bg: #FFFFFF;
            --text-main: #1F2937;
            --text-sub: #6B7280;
            --success: #10B981;
            --nav-height: 70px;
            --sidebar-width: 300px;
        }
        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; }
        .body-sidebar-open { padding-left: calc(var(--sidebar-width) + 20px); }

        /* --- GLOBAL NAVIGATION --- */
        .main-nav {
            background: var(--primary);
            height: var(--nav-height);
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
            display: flex;
            align-items: center;
            border-bottom: 4px solid var(--secondary);
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
        }
        .nav-container {
            max-width: 1300px;
            margin: 0 auto;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        .nav-logo-link {
            display: flex;
            align-items: center;
            text-decoration: none;
            height: calc(var(--nav-height) - 15px);
        }
        .nav-logo-img { height: 100%; width: auto; }
        .nav-links { display: flex; gap: 10px; }
        .nav-links a {
            color: rgba(255,255,255,0.9);
            text-decoration: none;
            font-size: 0.8rem;
            font-weight: 700;
            padding: 8px 14px;
            border-radius: 6px;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            transition: all 0.2s;
        }
        .nav-links a:hover { color: var(--secondary); background: rgba(255,255,255,0.1); }
        .nav-links a.active { background: var(--secondary); color: var(--primary); }
        .container { max-width: 1300px; margin: 0 auto; }

        header { text-align: center; margin-bottom: 50px; border-bottom: 1px solid #D1D5DB; padding-bottom: 20px; }
        .version-tag { font-size: 0.7rem; background: #E5E7EB; padding: 2px 8px; border-radius: 10px; vertical-align: middle; margin-left: 10px; }
        h1 { font-size: 2.2rem; color: var(--primary); margin-bottom: 5px; }
        .subtitle { font-size: 1rem; color: var(--text-sub); max-width: 600px; margin: 0 auto; }

        .vibe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 25px; align-items: start; }
        .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(--primary); }
        .vibe-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 5px; color: var(--primary); display: flex; align-items: center; gap: 10px; }
        .vibe-desc { font-size: 0.85rem; color: var(--text-sub); margin-bottom: 20px; font-style: italic; }

        .sprint-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 10px; padding: 18px; margin-bottom: 15px; transition: 0.2s; position: relative; }


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 4: Technical Skills — DCS</title>
7	    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;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	            --nav-height: 70px;
18	        }
19	        *, *::before, *::after { box-sizing: border-box; }
20	        body { font-family: 'Inter', 'Segoe UI', sans-serif; margin: 0; background: var(--bg); color: var(--text-main); padding-top: var(--nav-height); }
21
22	        /* ── NAV ── */
23	        .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); }
24	        .nav-container { max-width: 100%; margin: 0 auto; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
25	        .nav-logo-link { display: flex; align-items: center; text-decoration: none; height: calc(var(--nav-height) - 15px); }
26	        .nav-logo-img { height: 100%; width: auto; }
27	        .nav-links { display: flex; gap: 8px; align-items: center; }
28	        .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; }
29	        .nav-links a:hover { color: var(--secondary); background: rgba(255,255,255,0.1); }
30	        .nav-links a.active { background: var(--secondary); color: var(--primary); }
31
32	        /* ── APP SHELL ── */
33	        .app-shell { display: flex; min-height: calc(100vh - var(--nav-height)); }
34
35	        /* ── SIDEBAR ── */
36	        .sidebar { width: 280px; min-width: 280px; background: white; border-right: 1px solid #E5E7EB; position: sticky; top: var(--nav-height); height: calc(100vh - var(--nav-height)); overflow-y: auto; display: flex; flex-direction: column; flex-shrink: 0; }
37	        .sidebar-header { padding: 20px 18px 16px; border-bottom: 1px solid #E5E7EB; }
38	        .sidebar-std-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: #6B7280; margin-bottom: 4px; }
39	        .sidebar-std-title { font-size: 1rem; font-weight: 800; color: var(--primary); line-height: 1.3; margin-bottom: 14px; }
40	        .progress-bar-wrap { background: #E5E7EB; border-radius: 4px; height: 6px; overflow: hidden; margin-bottom: 6px; }
41	        .progress-bar-fill { height: 100%; background: var(--secondary); border-radius: 4px; transition: width 0.4s; }
42	        .progress-label { font-size: 0.72rem; color: #6B7280; }
43	        .phase-group { padding: 8px 0; border-bottom: 1px solid #F3F4F6; }
44	        .sidebar-phase-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 18px 4px; color: var(--primary); display: block; opacity: 0.6; }
45	        .step-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 18px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; font-size: 0.84rem; color: #374151; border-left: 3px solid transparent; transition: all 0.15s; font-weight: 500; }
46	        .step-btn:hover { background: #F9FAFB; }
47	        .step-btn.active { background: #FBF5FF; border-left-color: var(--primary); color: var(--primary); font-weight: 700; }
48	        .step-btn.done .step-check { background: #10B981; border-color: #10B981; }
49	        .step-btn.done .step-check::after { content: '✓'; }
50	        .step-check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #D1D5DB; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; color: white; transition: all 0.2s; }
51	        .step-name { flex: 1; line-height: 1.3; }
52	        .sidebar-footer { margin-top: auto; padding: 14px 16px; border-top: 1px solid #E5E7EB; }
53	        .btn-reset { width: 100%; padding: 9px; background: none; border: 1px solid #FCA5A5; color: #DC2626; border-radius: 8px; font-family: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: all 0.2s; }
54	        .btn-reset:hover { background: #FEE2E2; }
55
56	        /* ── MAIN ── */
57	        main { flex-grow: 1; padding: 40px 60px 80px; }
58	        .step-section { display: none; max-width: 860px; }
59	        .step-section.active { display: block; animation: fadeIn 0.25s ease-out; }
60	        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
61
62	        .phase-badge { display: inline-flex; align-items: center; padding: 4px 12px; background: #F5F3FF; color: var(--primary); border-radius: 20px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
63	        .step-title { font-size: 2rem; font-weight: 800; color: var(--primary); margin: 0 0 8px 0; line-height: 1.15; }
64	        .step-subtitle { font-size: 1rem; color: var(--text-sub); margin: 0 0 28px 0; line-height: 1.6; }
65
66	        /* ── CARDS ── */
67	        .card { background: white; border: 1px solid #E5E7EB; border-radius: 12px; padding: 24px 26px; margin-bottom: 20px; }
68	        .card-title { font-size: 1rem; font-weight: 800; color: var(--primary); margin: 0 0 12px 0; }
69	        .card p { font-size: 0.92rem; line-height: 1.65; color: #374151; margin: 0 0 12px 0; }
70	        .card p:last-child { margin-bottom: 0; }
71	        .card ul { font-size: 0.92rem; line-height: 1.7; color: #374151; padding-left: 20px; margin: 8px 0 0 0; }
72	        .card ul li { margin-bottom: 6px; }
73
74	        /* ── CALLOUTS ── */
75	        .callout { border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; display: flex; gap: 14px; align-items: flex-start; font-size: 0.92rem; line-height: 1.6; }
76	        .callout-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
77	        .callout-blue   { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E3A5F; }
78	        .callout-yellow { background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F; }
79	        .callout-green  { background: #DCFCE7; border: 1px solid #86EFAC; color: #14532D; }
80	        .callout-purple { background: #F5F3FF; border: 1px solid #DDD6FE; color: #3B0764; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APEX Portfolio | Standard 4: Technical Skills — DCS</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #500778;
            --secondary: #c4d600;
            --accent: #4b4f54;
            --bg: #F3F4F6;
            --card-bg: #FFFFFF;
            --text-main: #1F2937;
            --text-sub: #6B7280;
            --nav-height: 70px;
        }
        *, *::before, *::after { box-sizing: border-box; }
        body { font-family: 'Inter', 'Segoe UI', sans-serif; margin: 0; background: var(--bg); color: var(--text-main); padding-top: var(--nav-height); }

        /* ── NAV ── */
        .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); }
        .nav-container { max-width: 100%; margin: 0 auto; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
        .nav-logo-link { display: flex; align-items: center; text-decoration: none; height: calc(var(--nav-height) - 15px); }
        .nav-logo-img { height: 100%; width: auto; }
        .nav-links { display: flex; gap: 8px; align-items: center; }
        .nav-links a { color: rgba(255,255,255,0.9); text-decoration: none; font-size: 0.8rem; font-weight: 700; padding: 8px 14px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.03em; transition: all 0.2s; }
        .nav-links a:hover { color: var(--secondary); background: rgba(255,255,255,0.1); }
        .nav-links a.active { background: var(--secondary); color: var(--primary); }

        /* ── APP SHELL ── */
        .app-shell { display: flex; min-height: calc(100vh - var(--nav-height)); }

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

        /* ── MAIN ── */
        main { flex-grow: 1; padding: 40px 60px 80px; }
        .step-section { display: none; max-width: 860px; }
        .step-section.active { display: block; animation: fadeIn 0.25s ease-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

        .phase-badge { display: inline-flex; align-items: center; padding: 4px 12px; background: #F5F3FF; color: var(--primary); border-radius: 20px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
        .step-title { font-size: 2rem; font-weight: 800; color: var(--primary); margin: 0 0 8px 0; line-height: 1.15; }
        .step-subtitle { font-size: 1rem; color: var(--text-sub); margin: 0 0 28px 0; line-height: 1.6; }

        /* ── CARDS ── */
        .card { background: white; border: 1px solid #E5E7EB; border-radius: 12px; padding: 24px 26px; margin-bottom: 20px; }
        .card-title { font-size: 1rem; font-weight: 800; color: var(--primary); margin: 0 0 12px 0; }
        .card p { font-size: 0.92rem; line-height: 1.65; color: #374151; margin: 0 0 12px 0; }
        .card p:last-child { margin-bottom: 0; }
        .card ul { font-size: 0.92rem; line-height: 1.7; color: #374151; padding-left: 20px; margin: 8px 0 0 0; }
        .card ul li { margin-bottom: 6px; }

        /* ── CALLOUTS ── */
        .callout { border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; display: flex; gap: 14px; align-items: flex-start; font-size: 0.92rem; line-height: 1.6; }
        .callout-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
        .callout-blue   { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E3A5F; }
        .callout-yellow { background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F; }
        .callout-green  { background: #DCFCE7; border: 1px solid #86EFAC; color: #14532D; }
        .callout-purple { background: #F5F3FF; border: 1px solid #DDD6FE; color: #3B0764; }


Now I can see the Standard4 files:
- **Standard4.html** - Just a landing/redirect page with two course cards (BSU and DCS). No artifact cards at all. No filter needed.
- **Standard4BSU.html** - Has the same Kanban card pattern as Standard1/Standard5 (uses `.sprint-card`, `.vibe-column`, etc.)
- **Standard4DCS.html** - Has a sidebar navigation pattern similar to Standard3 (phase-based workflow with `.step-section`, sidebar with `.step-btn`, etc.)

I need to read the rest of Standard4BSU.html to understand its column structure and JS, then I can implement the filter there.

Standard4DCS doesn't need the filter since it uses the same phase-navigation workflow as Standard3. Let me continue examining Standard4BSU.html to see its full structure.


Standard4.html is just a routing page (no cards). Standard4DCS.html looks like the Standard3 sidebar-navigation pattern. Standard4BSU.html has the Kanban card pattern — let me read the rest of it.


80	        .sprint-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 10px; padding: 18px; margin-bottom: 15px; transition: 0.2s; position: relative; }
81	        .sprint-card:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(75, 46, 131, 0.1); }
82	        .sprint-card h4 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; color: var(--primary); flex: 1; }
83
84	        details { font-size: 0.85rem; color: #4B5563; background: #F9FAFB; padding: 10px; border-radius: 6px; border-left: 3px solid var(--primary); margin-top: 10px; }
85	        details.reflection-box { border-left: 4px solid var(--accent); }
86	        summary { cursor: pointer; font-weight: 700; color: var(--primary); outline: none; list-style: none; display: flex; align-items: center; gap: 5px; }
87	        summary::-webkit-details-marker { display: none; }
88	        summary::before { content: '▶'; font-size: 0.7rem; transition: 0.2s; }
89	        details[open] summary::before { transform: rotate(90deg); }
90	        .instruction-text { margin-top: 8px; line-height: 1.5; }
91	        .instruction-text p { margin: 5px 0; }
92
93	        .reflection-textarea { width: 100%; min-height: 80px; border: 1px solid #D1D5DB; border-radius: 6px; margin-top: 8px; padding: 10px; font-family: inherit; font-size: 0.85rem; resize: vertical; box-sizing: border-box; }
94	        .reflection-textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
95
96	        .action-area { margin-top: 15px; display: flex; flex-direction: column; gap: 8px; }
97	        .btn { padding: 10px; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 0.8rem; text-align: center; border: none; cursor: pointer; transition: 0.2s; }
98	        .btn-create { background: var(--primary); color: white; }
99	        .btn-create:hover { background: #372163; }
100	        .btn-canva { background: var(--canva); color: white; }
101	        .btn-canva:hover { background: #009ea3; }
102
103	        input[type="text"] { width: 100%; padding: 10px; border: 1px solid #D1D5DB; border-radius: 6px; font-size: 0.8rem; box-sizing: border-box; }
104	        input:focus { border-color: var(--secondary); outline: none; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }
105
106	        /* --- HOVER-ONLY CARD ACTIONS --- */
107	        .card-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 5px; z-index: 10; opacity: 0; transition: 0.2s; }
108	        .sprint-card:hover .card-actions { opacity: 1; }
109	        .bookmark-btn {
110	            background: #FEF3C7;
111	            color: #92400E;
112	            border: 1px solid #FDE68A;
113	            font-size: 0.7rem;
114	            padding: 2px 6px;
115	            border-radius: 4px;
116	            cursor: pointer;
117	            font-weight: 600;
118	            transition: 0.2s;
119	        }
120	        .bookmark-btn:hover { background: #92400E; color: white; }
121
122	        /* --- COLLAPSIBLE CARDS --- */
123	        .card-header {
124	            display: flex;
125	            align-items: flex-start;
126	            gap: 8px;
127	            cursor: pointer;
128	            user-select: none;
129	            padding: 2px 0;
130	        }
131	        .card-header:hover h4 { color: #3d0560; }
132	        .card-chevron {
133	            font-size: 0.6rem;
134	            color: var(--text-sub);
135	            margin-top: 6px;
136	            flex-shrink: 0;
137	            transition: transform 0.2s ease;
138	            display: inline-block;
139	        }
140	        .card-header.open .card-chevron { transform: rotate(90deg); }
141	        .card-body { display: none; margin-top: 12px; }
142	        .card-body.open { display: block; }
143
144	        /* --- PROGRESS TRACK --- */
145	        .progress-track {
146	            display: flex;
147	            gap: 5px;
148	            margin: 6px 0 18px 0;
149	        }
150	        .progress-pip {
151	            flex: 1;
152	            height: 5px;
153	            border-radius: 3px;
154	            background: #E5E7EB;
155	            transition: background 0.4s ease;
156	        }
157	        /* Column-specific pip colors */
158	        [data-col="0"] .progress-pip.lit { background: #10B981; }
159	        [data-col="1"] .progress-pip.lit { background: #3B82F6; }
160	        [data-col="2"] .progress-pip.lit { background: #8B5CF6; }
161	        [data-col="0"] { border-top-color: #10B981 !important; }
162	        [data-col="1"] { border-top-color: #3B82F6 !important; }
163	        [data-col="2"] { border-top-color: #8B5CF6 !important; }
164
165	        /* --- DONE BUTTON --- */
166	        .save-btn {
167	            width: 100%;
168	            padding: 10px;
169	            background: var(--primary);
170	            color: white;
171	            border: none;
172	            border-radius: 6px;
173	            font-weight: 700;
174	            font-size: 0.8rem;
175	            cursor: pointer;
176	            transition: background 0.2s;
177	            margin-top: 6px;
178	        }
179	        .save-btn:hover { background: #372163; }
180	        .save-btn.saved-done { background: #10B981; }
181	        .save-btn.saved-done:hover { background: #059669; }
182
183	        /* --- DUPLICATE BUTTON --- */
184	        .duplicate-btn {
185	            background: #E0F2FE;
186	            color: #0369A1;
187	            border: 1px solid #BAE6FD;
188	            font-size: 0.7rem;
189	            padding: 2px 6px;
190	            border-radius: 4px;
191	            font-weight: 600;
192	            cursor: pointer;
193	            transition: 0.2s;
194	        }
195	        .duplicate-btn:hover { background: #0369A1; color: white; }
196
197	        /* --- BOOKMARK QUEUE SIDEBAR --- */
198	        .sidebar {
199	            position: fixed;
200	            left: 0;
201	            top: var(--nav-height);
202	            bottom: 0;
203	            width: var(--sidebar-width);
204	            background: var(--card-bg);
205	            border-right: 1px solid #E5E7EB;
206	            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
207	            transform: translateX(-100%);
208	            transition: transform 0.3s ease;
209	            z-index: 998;
210	            overflow-y: auto;
211	        }
212	        .sidebar.open { transform: translateX(0); }
213	        .sidebar-header {
214	            display: flex;
215	            justify-content: space-between;
216	            align-items: center;
217	            padding: 20px;
218	            border-bottom: 1px solid #E5E7EB;
219	            background: var(--primary);
220	            color: white;
221	            position: sticky;
222	            top: 0;
223	            z-index: 1;
224	        }
225	        .sidebar-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
226	        #closeSidebar { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 5px; border-radius: 4px; transition: background 0.2s; }
227	        #closeSidebar:hover { background: rgba(255,255,255,0.1); }
228	        .queue-list { padding: 16px; }
229	        .queue-item { border: 1px solid #E5E7EB; border-radius: 8px; padding: 14px; margin-bottom: 10px; background: #F9FAFB; position: relative; }
230	        .queue-item a { text-decoration: none; color: var(--primary); font-weight: 600; display: block; margin-bottom: 4px; font-size: 0.95rem; }
231	        .queue-item a:hover { color: var(--accent); }
232	        .queue-item p { margin: 0; font-size: 0.82rem; color: var(--text-sub); line-height: 1.4; padding-right: 20px; }
233	        .queue-item .remove-btn { position: absolute; top: 10px; right: 10px; background: #EF4444; color: white; border: none; border-radius: 4px; width: 20px; height: 20px; cursor: pointer; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }
234	        .queue-item .remove-btn:hover { background: #DC2626; }
235	        .empty-queue { text-align: center; color: var(--text-sub); font-style: italic; padding: 40px 20px; font-size: 0.9rem; }
236	    </style>
237
238
239
240

241

242
📌 Work Queue

243	        <button id="closeSidebar">×</button>
244

245

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

247

248

249
250
251

252
253
254
255

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

264

265
266
267

268
269
Standard 4: Technical Skills

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

271
272
273

274
275

276
🏗🚀 The Builders

277
Best for associates actively developing or testing a business idea.

278
279

.sprint-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 10px; padding: 18px; margin-bottom: 15px; transition: 0.2s; position: relative; }
        .sprint-card:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(75, 46, 131, 0.1); }
        .sprint-card h4 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; color: var(--primary); flex: 1; }

        details { font-size: 0.85rem; color: #4B5563; background: #F9FAFB; padding: 10px; border-radius: 6px; border-left: 3px solid var(--primary); margin-top: 10px; }
        details.reflection-box { border-left: 4px solid var(--accent); }
        summary { cursor: pointer; font-weight: 700; color: var(--primary); outline: none; list-style: none; display: flex; align-items: center; gap: 5px; }
        summary::-webkit-details-marker { display: none; }
        summary::before { content: '▶'; font-size: 0.7rem; transition: 0.2s; }
        details[open] summary::before { transform: rotate(90deg); }
        .instruction-text { margin-top: 8px; line-height: 1.5; }
        .instruction-text p { margin: 5px 0; }

        .reflection-textarea { width: 100%; min-height: 80px; border: 1px solid #D1D5DB; border-radius: 6px; margin-top: 8px; padding: 10px; font-family: inherit; font-size: 0.85rem; resize: vertical; box-sizing: border-box; }
        .reflection-textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }

        .action-area { margin-top: 15px; display: flex; flex-direction: column; gap: 8px; }
        .btn { padding: 10px; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 0.8rem; text-align: center; border: none; cursor: pointer; transition: 0.2s; }
        .btn-create { background: var(--primary); color: white; }
        .btn-create:hover { background: #372163; }
        .btn-canva { background: var(--canva); color: white; }
        .btn-canva:hover { background: #009ea3; }

        input[type="text"] { width: 100%; padding: 10px; border: 1px solid #D1D5DB; border-radius: 6px; font-size: 0.8rem; box-sizing: border-box; }
        input:focus { border-color: var(--secondary); outline: none; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }

        /* --- HOVER-ONLY CARD ACTIONS --- */
        .card-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 5px; z-index: 10; opacity: 0; transition: 0.2s; }
        .sprint-card:hover .card-actions { opacity: 1; }
        .bookmark-btn {
            background: #FEF3C7;
            color: #92400E;
            border: 1px solid #FDE68A;
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
            transition: 0.2s;
        }
        .bookmark-btn:hover { background: #92400E; color: white; }

        /* --- COLLAPSIBLE CARDS --- */
        .card-header {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            cursor: pointer;
            user-select: none;
            padding: 2px 0;
        }
        .card-header:hover h4 { color: #3d0560; }
        .card-chevron {
            font-size: 0.6rem;
            color: var(--text-sub);
            margin-top: 6px;
            flex-shrink: 0;
            transition: transform 0.2s ease;
            display: inline-block;
        }
        .card-header.open .card-chevron { transform: rotate(90deg); }
        .card-body { display: none; margin-top: 12px; }
        .card-body.open { display: block; }

        /* --- PROGRESS TRACK --- */
        .progress-track {
            display: flex;
            gap: 5px;
            margin: 6px 0 18px 0;
        }
        .progress-pip {
            flex: 1;
            height: 5px;
            border-radius: 3px;
            background: #E5E7EB;
            transition: background 0.4s ease;
        }
        /* Column-specific pip colors */
        [data-col="0"] .progress-pip.lit { background: #10B981; }
        [data-col="1"] .progress-pip.lit { background: #3B82F6; }
        [data-col="2"] .progress-pip.lit { background: #8B5CF6; }
        [data-col="0"] { border-top-color: #10B981 !important; }
        [data-col="1"] { border-top-color: #3B82F6 !important; }
        [data-col="2"] { border-top-color: #8B5CF6 !important; }

        /* --- DONE BUTTON --- */
        .save-btn {
            width: 100%;
            padding: 10px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: 700;
            font-size: 0.8rem;
            cursor: pointer;
            transition: background 0.2s;
            margin-top: 6px;
        }
        .save-btn:hover { background: #372163; }
        .save-btn.saved-done { background: #10B981; }
        .save-btn.saved-done:hover { background: #059669; }

        /* --- DUPLICATE BUTTON --- */
        .duplicate-btn {
            background: #E0F2FE;
            color: #0369A1;
            border: 1px solid #BAE6FD;
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.2s;
        }
        .duplicate-btn:hover { background: #0369A1; color: white; }

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

📌 Work Queue

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

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

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

Standard 4: Technical Skills

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

🏗🚀 The Builders

Best for associates actively developing or testing a business idea.


Standard4BSU.html is getting interesting. It has the Kanban card pattern but it looks a bit different from Standard1/Standard5. The cards are hardcoded in HTML (not dynamically generated from JS), and it uses `data-col` attributes differently (numeric: "0", "1", "2"). Let me read more of the file to understand the full structure, especially the JS.


279

280
🏗🚀 The BMC Sprint <button class="bookmark-btn" onclick="bookmarkCard('bmc-sprint')">📌 Bookmark</button>

281
282	                    Sprint Brief
283

284	                        Your mission is to quickly brainstorm and pitch three completely different business ideas. For each, define:
285
Value Proposition: What specific problem are you solving, and how does your product/service create unique value?

286
Customer Segment: Who exactly is your ideal target customer? Be specific.

287
Revenue Streams: How will your business make money?

288
Sustainable Competitive Advantage: What is your unfair advantage that makes your business hard to copy?

289

290
291

292	                    Launch Google Slides
293	                    Launch Canva Deck
294	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('bmc-sprint', this.value)">
295

296

297
298

299
🕵💬 The Customer Discovery Sprint <button class="bookmark-btn" onclick="bookmarkCard('customer-discovery')">📌 Bookmark</button>

300
301	                    Sprint Brief
302

303	                        Prove or disprove a core assumption through direct user interviews.
304
Identify a Problem/Persona: Define the specific problem and the exact type of person you need to talk to.

305
Present Open-Ended Questions: Design 5-7 "ask" questions to uncover true pain points.

306
Reveal the Pivot: Based on your results, explain one major change or "pivot" you would make.

307

308
309

310	                    Launch Google Slides
311	                    Launch Canva Deck
312	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('customer-discovery', this.value)">
313

314

315
316

317
🧩💡 The Gap Analysis

318
319	                    Sprint Brief
320

321	                        Solve a local problem by defining the opportunity, a quick fix, and market size.
322
Identify a Friction Point: Pinpoint something in the Waukee community causing annoyance or inefficiency.

323
Low-Fi Solution: Propose a simple, easy-to-implement solution that could be built in a weekend.

324
Potential Market Size: Estimate how many people are affected and potential revenue/savings.

325

326
327

328	                    Launch Google Slides
329	                    Launch Canva Deck
330	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('gap-analysis', this.value)">
331

332

333
334

335
☕🔥 The 1MC Pressure Cooker

336
337	                    Sprint Brief
338

339	                        Practice high-stakes pitching in a fast-paced environment.
340
3-Minute Pitch: Deliver a concise, powerful pitch of your current business idea using your existing deck.

341
"Hot Seat" Q&A: Immediately follow with a challenging Q&A session designed to pressure-test your assumptions.

342

343
344

345	                    Launch Google Slides
346	                    Launch Canva Deck
347	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('one-mc-pressure', this.value)">
348

349

350
351

352
🛑📉 The Anti-Pitch

353
354	                    Sprint Brief
355

356	                        Identify and mitigate the biggest threats to your business.
357
"Pre-Mortem": Present the top 3 reasons your current business idea could fail in the next 12 months.

358
The One Move That Saves It: Propose the crucial strategic pivot you would take to save the business.

359

360
361

362	                    Launch Google Slides
363	                    Launch Canva Deck
364	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('anti-pitch', this.value)">
365

366

367
368

369
⭐🔄 The 1-Star Review Pivot

370
371	                    Sprint Brief
372

373	                        Use public feedback to find a hidden business opportunity.
374
Find a Recurring Complaint: Identify a common complaint in local 1-star Google/Yelp reviews.

375
Pitch a Fix: Propose an actionable fix for the business, or pitch a new competing service that solves it better.

376

377
378

379	                    Launch Google Slides
380	                    Launch Canva Deck
381	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('one-star-pivot', this.value)">
382

383

384

385
386

387
📊🔢 The Analysts

388
Best for associates who love deconstructing how things work.

389
390

391
💰🧐 The VC Reverse Pitch

392
393	                    Sprint Brief
394

395	                        Step into the role of a Venture Capitalist to analyze a real-world investment.
396
Analyze a Funding Round: Choose a startup that recently announced a major funding round.

397
Would You Invest?: Present a compelling argument for why it was a brilliant move or a costly mistake.

398

399
400

401	                    Launch Google Slides
402	                    Launch Canva Deck
403	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('vc-reverse', this.value)">
404

405

406
407

408
📊🔢 The Unit Economics Breakdown

409
410	                    Sprint Brief
411

412	                        Get into the detailed math of how a business generates profit.
413
Deconstruct a Sale: Select a consumer product/service and break down its financial components.

414
Calculate: Determine the COGS, Gross Margin, and estimate units needed to hit Breakeven.

415

416
417

418	                    Launch Google Slides
419	                    Launch Canva Deck
420	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('unit-economics', this.value)">
421

422

423
424

425
🤖⚡ The AI Efficiency Audit

426
427	                    Sprint Brief
428

429	                        Identify opportunities to streamline business processes using AI tools.
430
Identify a Manual Process: Choose a repetitive, time-consuming process in a common business setting.

431
Pitch an AI Workflow: Propose a specific AI tool/workflow to automate it, and calculate estimated savings.

432

433
434

435	                    Launch Google Slides
436	                    Launch Canva Deck
437	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('ai-audit', this.value)">
438

439

440
441

442
🦈✅ The Shark Tank Fact Check

443
444	                    Sprint Brief
445

446	                        Follow the real-world trajectory of a pitched company.
447
Research a Pitch (2+ Years Ago): Select a company that appeared on Shark Tank at least two years ago.

448
Where Are They Now?: Did the deal close? Track the company's progress and current status in the market.

449

450
451

452	                    Launch Google Slides
453	                    Launch Canva Deck
454	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('shark-tank', this.value)">
455

456

457
458

459
📱🛠 The UX Teardown

460
461	                    Sprint Brief
462

463	                        Practice critical analysis of digital product design and functionality.
464
Identify Friction: Find a local company's site and identify two moments where UX causes confusion.

465
Present a Fix: Propose one specific UI/UX fix and explain why it drastically improves the user journey.

466

467
468

469	                    Launch Google Slides
470	                    Launch Canva Deck
471	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('ux-teardown', this.value)">
472

473

474
475

476
💸⚙ The Revenue Model Breakdown

477
478	                    Sprint Brief
479

480	                        Understand how "free" products actually pay for themselves.
481
The "Hidden Engine": Pick a popular product/service that seems free or too cheap (TikTok, Spotify).

482
Detail the Model: Explain the non-obvious ways the company generates revenue (data licensing, ad exchanges).

483

484
485

486	                    Launch Google Slides
487	                    Launch Canva Deck
488	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('rev-model', this.value)">
489

490

491
492

493
💻🛠 The Tech Stack Audit

494
495	                    Sprint Brief
496

497	                        Design the foundational tools for an efficient project.
498
Pitch a "Stack": Select an APEX project and curate 3-5 software tools necessary to execute it.

499
10x Faster: Justify your choices by explaining how these tools maximize efficiency and speed.

500

501
502

503	                    Launch Google Slides
504	                    Launch Canva Deck
505	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('tech-stack', this.value)">
506

507

508

509
510

511
🤝🧠 The Networkers

512
Best for associates focused on career, community, and industry stories.

513
514

515
🎙🧠 The Podcast Breakdown

516
517	                    Sprint Brief
518

519	                        Analyze the mindset and critical moments of a successful entrepreneur.
520
Summarize a Founder's Journey: Listen to an episode of "How I Built This" and summarize their story.

521
Identify Their "Tipping Point": Pinpoint the single critical decision that propelled the business to success.

522

523
524

525	                    Launch Google Slides
526	                    Launch Canva Deck
527	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('podcast-breakdown', this.value)">
528

529

530
531

532
💎🔍 The Hidden Gem Brand

533
534	                    Sprint Brief
535

536	                        Identify and champion an underrated business.
537
Pitch an Obscure Brand: Find a small, niche brand you admire (under 50k followers).

538
Why It Works: Break down why their specific marketing strategy or community is so effective.

539

540
541

542	                    Launch Google Slides
543	                    Launch Canva Deck
544	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('hidden-gem', this.value)">
545

546

547
548

549
🎢🔄 The Founder Pivot Story

550
551	                    Sprint Brief
552

553	                        Learn from a story of entrepreneurial resilience.
554
The "Near-Death" Moment: Research a local Iowa entrepreneur when their business was nearly bankrupt.

555
Their Comeback: Detail the creative move they made to pivot, survive, and find success.

556

557
558

559	                    Launch Google Slides
560	                    Launch Canva Deck
561	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('founder-pivot', this.value)">
562

563

564
565

566
✉🤝 The Dream Mentor Outreach

567
568	                    Sprint Brief
569

570	                        Develop skills for making impactful professional connections.
571
Present Your Target Mentor: Identify a successful person in your desired field you want to connect with.

572
Your "Hook" Email & Offer: Draft the email. It must have a "hook" and state specific value you can offer them.

573

574
575

576	                    Launch Google Slides
577	                    Launch Canva Deck
578	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('dream-mentor', this.value)">
579

580

581
582

583
🌽🏛 The Local Legend Origin Story

584
585	                    Sprint Brief
586

587	                        Research the foundational growth of an Iowa institution.
588
Research the "Day 1": Choose a massive Iowa-based company (Casey’s, Hy-Vee, Vermeer) and research its beginning.

589
Their Scaling Secret: Identify the key strategy that allowed them to scale from a small venture to a major player.

590

591
592

593	                    Launch Google Slides
594	                    Launch Canva Deck
595	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('local-legend', this.value)">
596

597

598
599

600
🗺✨ Career Exploration 2.0

601
602	                    Sprint Brief
603

604	                        Synthesize your career learning and next steps.
605
Updated Career Thesis: Reflect on recent interviews and present a revised thesis about your desired role.

606
The "Reality Check": Share the most unexpected or surprising piece of information you discovered.

607

608
609

610	                    Launch Google Slides
611	                    Launch Canva Deck
612	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('career-exp-2', this.value)">
613

614

615
616

617
🌐🌲 The Ecosystem Scout

618
619	                    Sprint Brief
620

621	                        Research how to leverage local entrepreneurial resources.
622
Research a Resource: Choose an institution dedicated to supporting startups (Gravitate, IEDA, Techstars Iowa).

623
Pitch How to Use It: Present an actionable plan for how a startup could use their resources in the next 3 months.

624

625
626

627	                    Launch Google Slides
628	                    Launch Canva Deck
629	                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('ecosystem-scout', this.value)">
630

631

632

633
634

635

636
637
983
984
985

🏗🚀 The BMC Sprint <button class="bookmark-btn" onclick="bookmarkCard('bmc-sprint')">📌 Bookmark</button>

                    Sprint Brief

                        Your mission is to quickly brainstorm and pitch three completely different business ideas. For each, define:

Value Proposition: What specific problem are you solving, and how does your product/service create unique value?

Customer Segment: Who exactly is your ideal target customer? Be specific.

Revenue Streams: How will your business make money?

Sustainable Competitive Advantage: What is your unfair advantage that makes your business hard to copy?

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('bmc-sprint', this.value)">

🕵💬 The Customer Discovery Sprint <button class="bookmark-btn" onclick="bookmarkCard('customer-discovery')">📌 Bookmark</button>

                    Sprint Brief

                        Prove or disprove a core assumption through direct user interviews.

Identify a Problem/Persona: Define the specific problem and the exact type of person you need to talk to.

Present Open-Ended Questions: Design 5-7 "ask" questions to uncover true pain points.

Reveal the Pivot: Based on your results, explain one major change or "pivot" you would make.

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('customer-discovery', this.value)">

🧩💡 The Gap Analysis

                    Sprint Brief

                        Solve a local problem by defining the opportunity, a quick fix, and market size.

Identify a Friction Point: Pinpoint something in the Waukee community causing annoyance or inefficiency.

Low-Fi Solution: Propose a simple, easy-to-implement solution that could be built in a weekend.

Potential Market Size: Estimate how many people are affected and potential revenue/savings.

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('gap-analysis', this.value)">

☕🔥 The 1MC Pressure Cooker

                    Sprint Brief

                        Practice high-stakes pitching in a fast-paced environment.

3-Minute Pitch: Deliver a concise, powerful pitch of your current business idea using your existing deck.

"Hot Seat" Q&A: Immediately follow with a challenging Q&A session designed to pressure-test your assumptions.

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('one-mc-pressure', this.value)">

🛑📉 The Anti-Pitch

                    Sprint Brief

                        Identify and mitigate the biggest threats to your business.

"Pre-Mortem": Present the top 3 reasons your current business idea could fail in the next 12 months.

The One Move That Saves It: Propose the crucial strategic pivot you would take to save the business.

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('anti-pitch', this.value)">

⭐🔄 The 1-Star Review Pivot

                    Sprint Brief

                        Use public feedback to find a hidden business opportunity.

Find a Recurring Complaint: Identify a common complaint in local 1-star Google/Yelp reviews.

Pitch a Fix: Propose an actionable fix for the business, or pitch a new competing service that solves it better.

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('one-star-pivot', this.value)">

📊🔢 The Analysts

Best for associates who love deconstructing how things work.

💰🧐 The VC Reverse Pitch

                    Sprint Brief

                        Step into the role of a Venture Capitalist to analyze a real-world investment.

Analyze a Funding Round: Choose a startup that recently announced a major funding round.

Would You Invest?: Present a compelling argument for why it was a brilliant move or a costly mistake.

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('vc-reverse', this.value)">

📊🔢 The Unit Economics Breakdown

                    Sprint Brief

                        Get into the detailed math of how a business generates profit.

Deconstruct a Sale: Select a consumer product/service and break down its financial components.

Calculate: Determine the COGS, Gross Margin, and estimate units needed to hit Breakeven.

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('unit-economics', this.value)">

🤖⚡ The AI Efficiency Audit

                    Sprint Brief

                        Identify opportunities to streamline business processes using AI tools.

Identify a Manual Process: Choose a repetitive, time-consuming process in a common business setting.

Pitch an AI Workflow: Propose a specific AI tool/workflow to automate it, and calculate estimated savings.

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('ai-audit', this.value)">

🦈✅ The Shark Tank Fact Check

                    Sprint Brief

                        Follow the real-world trajectory of a pitched company.

Research a Pitch (2+ Years Ago): Select a company that appeared on Shark Tank at least two years ago.

Where Are They Now?: Did the deal close? Track the company's progress and current status in the market.

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('shark-tank', this.value)">

📱🛠 The UX Teardown

                    Sprint Brief

                        Practice critical analysis of digital product design and functionality.

Identify Friction: Find a local company's site and identify two moments where UX causes confusion.

Present a Fix: Propose one specific UI/UX fix and explain why it drastically improves the user journey.

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('ux-teardown', this.value)">

💸⚙ The Revenue Model Breakdown

                    Sprint Brief

                        Understand how "free" products actually pay for themselves.

The "Hidden Engine": Pick a popular product/service that seems free or too cheap (TikTok, Spotify).

Detail the Model: Explain the non-obvious ways the company generates revenue (data licensing, ad exchanges).

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('rev-model', this.value)">

💻🛠 The Tech Stack Audit

                    Sprint Brief

                        Design the foundational tools for an efficient project.

Pitch a "Stack": Select an APEX project and curate 3-5 software tools necessary to execute it.

10x Faster: Justify your choices by explaining how these tools maximize efficiency and speed.

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('tech-stack', this.value)">

🤝🧠 The Networkers

Best for associates focused on career, community, and industry stories.

🎙🧠 The Podcast Breakdown

                    Sprint Brief

                        Analyze the mindset and critical moments of a successful entrepreneur.

Summarize a Founder's Journey: Listen to an episode of "How I Built This" and summarize their story.

Identify Their "Tipping Point": Pinpoint the single critical decision that propelled the business to success.

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('podcast-breakdown', this.value)">

💎🔍 The Hidden Gem Brand

                    Sprint Brief

                        Identify and champion an underrated business.

Pitch an Obscure Brand: Find a small, niche brand you admire (under 50k followers).

Why It Works: Break down why their specific marketing strategy or community is so effective.

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('hidden-gem', this.value)">

🎢🔄 The Founder Pivot Story

                    Sprint Brief

                        Learn from a story of entrepreneurial resilience.

The "Near-Death" Moment: Research a local Iowa entrepreneur when their business was nearly bankrupt.

Their Comeback: Detail the creative move they made to pivot, survive, and find success.

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('founder-pivot', this.value)">

✉🤝 The Dream Mentor Outreach

                    Sprint Brief

                        Develop skills for making impactful professional connections.

Present Your Target Mentor: Identify a successful person in your desired field you want to connect with.

Your "Hook" Email & Offer: Draft the email. It must have a "hook" and state specific value you can offer them.

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('dream-mentor', this.value)">

🌽🏛 The Local Legend Origin Story

                    Sprint Brief

                        Research the foundational growth of an Iowa institution.

Research the "Day 1": Choose a massive Iowa-based company (Casey’s, Hy-Vee, Vermeer) and research its beginning.

Their Scaling Secret: Identify the key strategy that allowed them to scale from a small venture to a major player.

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('local-legend', this.value)">

🗺✨ Career Exploration 2.0

                    Sprint Brief

                        Synthesize your career learning and next steps.

Updated Career Thesis: Reflect on recent interviews and present a revised thesis about your desired role.

The "Reality Check": Share the most unexpected or surprising piece of information you discovered.

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('career-exp-2', this.value)">

🌐🌲 The Ecosystem Scout

                    Sprint Brief

                        Research how to leverage local entrepreneurial resources.

Research a Resource: Choose an institution dedicated to supporting startups (Gravitate, IEDA, Techstars Iowa).

Pitch How to Use It: Present an actionable plan for how a startup could use their resources in the next 3 months.

                    Launch Google Slides
                    Launch Canva Deck
                    <input type="text" placeholder="Paste presentation link here..." onchange="saveLink('ecosystem-scout', this.value)">


Now I understand Standard4BSU.html:

1. **Cards are hardcoded in HTML** (not dynamically generated) — 20 cards across 3 columns
2. **No `.title-text` class** — card titles are in `<h4>` elements, but the h4 gets moved into a `.card-header` during initialization
3. **Status** — tracked by `card.dataset.done === 'true'`
4. **Link** — `input[type="text"]` inside `.action-area`, but no consistent class like `.link-input`

5. **Reflection** — `.reflection-textarea` (same as Standard1/5)
6. **Columns** — 3 columns identified by numeric `data-col` attributes assigned during page load, queried via `.vibe-column` selector
7. **Title extraction** — pulls text from `<h4>` elements, accounting for appended bookmark buttons, and the link input is simply the text input within `.action-area` without a dedicated class

The filter bar needs to go between the `<header>` and `.vibe-grid`. When extracting titles for filtering, I'm looking at the `h4` inside `.card-header`, which sits within `.card-body` after the card gets rebuilt with the header appended last.

For the filter logic, I need to check the done status via `card.dataset.done`, grab the link input value, pull the reflection textarea content, and get the title text from the h4 element. Now I'm working through how to structure the column iteration for the filtering.

Since Standard4BSU doesn't have an add button like the other layouts, I'll append the no-match message directly to each column. The filter bar itself needs to sit between the header and the vibe-grid container.

Still working through the filtering approach... I need to call `applyFilter()` at the end of `markDone` so the filter updates when a card's done status changes. For the filter logic itself, I'm tracking an active filter state and building a function that checks both the filter type and search query to show or hide cards based on their done status and whether their content matches the search term.

Writing filter logic... I need to place the filter bar between the header and the grid, and I'm noticing the input styling uses `width: 100%` which should work fine with the existing CSS rather than needing a flex adjustment. I'm noticing that Standard1 and Standard5 use `flex-grow: 1` on text inputs while Standard4BSU uses `width: 100%`, so I need to add `width: auto` to the `#filterSearch` CSS in Standard4BSU to override that constraint. Let me check my existing `#filterSearch` styling...

Still writing styles... I'm working through how the flex container properties interact—`width: 100%` sets the initial size, `flex-grow: 0` prevents expansion, and `max-width: 280px` caps it, so the element ends up being constrained between 200px and 280px depending on the container width.

I think the clearest approach is to just set `width: 200px` explicitly on the `#filterSearch` input for Standard4BSU, which keeps it fixed and unambiguous in the flex layout.

Now I'm reconsidering the overall structure—the `.filter-bar` has both the filter chips and the search input, and I need to think through how they interact with flexbox.

Actually, I realize the simplest solution is to override the `width: 100%` with `width: auto` in Standard4BSU's specific `#filterSearch` rule, which will let the input size naturally without forcing it to fill the container.

Let me now apply these CSS changes and update the filter bar markup for Standard4BSU.

Checking the focus state styling...

the `input:focus` rule applies to all inputs with a box-shadow effect, and my `#filterSearch:focus` selector has higher specificity so it'll override the border color while keeping that nice shadow. Now I'm ready to implement the changes—I need to add the filter bar CSS with `width: auto` for the search input, then insert the HTML markup between the header and content sections.

For the JavaScript, I'm adding the filter functions before `window.onload`, then modifying `markDone` to trigger the filter, and setting up the search listener with no-match messaging.

Adding filter functions... I'm adding no-match messages to each column and setting up event listeners for the filter search input to trigger filtering whenever the user types.

Now I'm thinking through how the filter function queries for text inputs across cards—both the original hardcoded ones and the dynamically created duplicates should be found the same way since they're all positioned inside the card's action area with the same input type.

I'm ready to make the edits. Looking at Standard4BSU.html, there's no `.strand-info` anchor point, but I can use the `</header>` closing tag followed by the `<div class="vibe-grid">` as my insertion point for the filter bar. I'll execute the five sequential edits to that file now.


Standard4BSU.html has the same Kanban card pattern — needs the filter. Standard4DCS.html is the same sidebar-navigation pattern as Standard3 (no artifact cards) so it doesn't need it. Standard4.html is just a routing page.

Let me add the filter to Standard4BSU. It has a few differences from Standard1/5: cards are hardcoded in HTML (not JS-generated), columns are indexed numerically, and `input[type="text"]` uses `width: 100%` instead of `flex-grow`, so I need to add `width: auto` to override it.


Edit

        .empty-queue { text-align: center; color: var(--text-sub); font-style: italic; padding: 40px 20px; font-size: 0.9rem; }
    </style>

        .empty-queue { text-align: center; color: var(--text-sub); font-style: italic; padding: 40px 20px; font-size: 0.9rem; }

        /* --- FILTER BAR --- */
        .filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
        .filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
        .chip { padding: 6px 14px; border-radius: 20px; border: 2px solid #E5E7EB; background: white; color: var(--text-sub); font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s; font-family: inherit; }
        .chip:hover { border-color: var(--primary); color: var(--primary); }
        .chip.active { background: var(--primary); border-color: var(--primary); color: white; }
        .chip[data-filter="done"].active { background: #059669; border-color: #059669; }
        .chip[data-filter="in-progress"].active { background: #2563EB; border-color: #2563EB; }
        .chip[data-filter="not-started"].active { background: var(--text-sub); border-color: var(--text-sub); }
        #filterSearch { flex-grow: 0; width: auto; min-width: 200px; max-width: 280px; padding: 8px 14px; border: 2px solid #E5E7EB; border-radius: 20px; font-size: 0.85rem; font-family: inherit; transition: border-color 0.2s; outline: none; box-sizing: border-box; }
        #filterSearch:focus { border-color: var(--primary); }
        .no-match-msg { text-align: center; color: var(--text-sub); font-style: italic; padding: 20px 0; font-size: 0.85rem; display: none; }
    </style>


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

        .empty-queue { text-align: center; color: var(--text-sub); font-style: italic; padding: 40px 20px; font-size: 0.9rem; }
    </style>

        .empty-queue { text-align: center; color: var(--text-sub); font-style: italic; padding: 40px 20px; font-size: 0.9rem; }

        /* --- FILTER BAR --- */
        .filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
        .filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
        .chip { padding: 6px 14px; border-radius: 20px; border: 2px solid #E5E7EB; background: white; color: var(--text-sub); font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s; font-family: inherit; }
        .chip:hover { border-color: var(--primary); color: var(--primary); }
        .chip.active { background: var(--primary); border-color: var(--primary); color: white; }
        .chip[data-filter="done"].active { background: #059669; border-color: #059669; }
        .chip[data-filter="in-progress"].active { background: #2563EB; border-color: #2563EB; }
        .chip[data-filter="not-started"].active { background: var(--text-sub); border-color: var(--text-sub); }
        #filterSearch { flex-grow: 0; width: auto; min-width: 200px; max-width: 280px; padding: 8px 14px; border: 2px solid #E5E7EB; border-radius: 20px; font-size: 0.85rem; font-family: inherit; transition: border-color 0.2s; outline: none; box-sizing: border-box; }
        #filterSearch:focus { border-color: var(--primary); }
        .no-match-msg { text-align: center; color: var(--text-sub); font-style: italic; padding: 20px 0; font-size: 0.85rem; display: none; }
    </style>

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

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

+        .filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }

+        .filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }

+        .chip { padding: 6px 14px; border-radius: 20px; border: 2px solid #E5E7EB; background: white; color: var(--text-sub); font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s; font-family: inherit; }

+        .chip:hover { border-color: var(--primary); color: var(--primary); }

+        .chip.active { background: var(--primary); border-color: var(--primary); color: white; }

+        .chip[data-filter="done"].active { background: #059669; border-color: #059669; }

+        .chip[data-filter="in-progress"].active { background: #2563EB; border-color: #2563EB; }

+        .chip[data-filter="not-started"].active { background: var(--text-sub); border-color: var(--text-sub); }

+        #filterSearch { flex-grow: 0; width: auto; min-width: 200px; max-width: 280px; padding: 8px 14px; border: 2px solid #E5E7EB; border-radius: 20px; font-size: 0.85rem; font-family: inherit; transition: border-color 0.2s; outline: none; box-sizing: border-box; }

+        #filterSearch:focus { border-color: var(--primary); }

+        .no-match-msg { text-align: center; color: var(--text-sub); font-style: italic; padding: 20px 0; font-size: 0.85rem; display: none; }


    </header>

    <div class="vibe-grid">

            <button class="chip active" data-filter="all" onclick="setFilter('all', this)">All</button>
            <button class="chip" data-filter="not-started" onclick="setFilter('not-started', this)">Not Started</button>
            <button class="chip" data-filter="in-progress" onclick="setFilter('in-progress', this)">In Progress</button>
            <button class="chip" data-filter="done" onclick="setFilter('done', this)">Done</button>

        <input type="text" id="filterSearch" placeholder="Search sprints...">


    </header>

    <div class="vibe-grid">

            <button class="chip active" data-filter="all" onclick="setFilter('all', this)">All</button>
            <button class="chip" data-filter="not-started" onclick="setFilter('not-started', this)">Not Started</button>
            <button class="chip" data-filter="in-progress" onclick="setFilter('in-progress', this)">In Progress</button>
            <button class="chip" data-filter="done" onclick="setFilter('done', this)">Done</button>

        <input type="text" id="filterSearch" placeholder="Search sprints...">

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

+            <button class="chip active" data-filter="all" onclick="setFilter('all', this)">All</button>

+            <button class="chip" data-filter="not-started" onclick="setFilter('not-started', this)">Not Started</button>

+            <button class="chip" data-filter="in-progress" onclick="setFilter('in-progress', this)">In Progress</button>

+            <button class="chip" data-filter="done" onclick="setFilter('done', this)">Done</button>

+        <input type="text" id="filterSearch" placeholder="Search sprints...">