Write

<!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 →


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

<!DOCTYPE html>

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

            Dashboard
            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 →

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

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

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

+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">

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

-            --secondary: #c4d600;  /* APEX Lime Gold */

-            --accent: #4b4f54;     /* APEX Dark Gray */

-        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); }

+        *, *::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); min-height: 100vh; display: flex; flex-direction: column; }

-        /* --- GLOBAL NAVIGATION --- */

-            background: var(--primary);

-            border-bottom: 4px solid var(--secondary);

-            justify-content: space-between;

-            height: calc(var(--nav-height) - 15px);

+        .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: 1400px; 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 { 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); }

-        .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; }

+        .page { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 20px; }

-        .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; }

+        .std-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-sub); margin-bottom: 10px; }

+        .page-title { font-size: 2.2rem; font-weight: 800; color: var(--primary); margin: 0 0 8px 0; text-align: center; }

+        .page-subtitle { font-size: 1rem; color: var(--text-sub); margin: 0 0 48px 0; text-align: center; line-height: 1.6; max-width: 480px; }

-        .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:hover { background: #92400E; color: white; }

-        /* --- COLLAPSIBLE CARDS --- */

+        .course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; max-width: 780px; }

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

-        .card-header:hover h4 { color: #3d0560; }

-            transition: transform 0.2s ease;

-        .card-header.open .card-chevron { transform: rotate(90deg); }

-        .card-body { display: none; margin-top: 12px; }

-        .card-body.open { display: block; }

-            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; }

+        .course-card.bsu::before { background: #3B82F6; }

+        .course-card.dcs::before { background: var(--primary); }

+        .course-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(80,7,120,0.12); }

-            background: var(--primary);

-            transition: background 0.2s;

-        .save-btn:hover { background: #372163; }

-        .save-btn.saved-done { background: #10B981; }

-        .save-btn.saved-done:hover { background: #059669; }

+        .course-tag { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; }

+        .course-card.bsu .course-tag { color: #3B82F6; }

+        .course-card.dcs .course-tag { color: var(--primary); }

-        .duplicate-btn:hover { background: #0369A1; color: white; }

+        .course-icon { font-size: 2.2rem; margin-bottom: 14px; }

+        .course-name { font-size: 1.3rem; font-weight: 800; color: var(--primary); margin-bottom: 8px; line-height: 1.2; }

+        .course-desc { font-size: 0.88rem; color: var(--text-sub); line-height: 1.6; flex: 1; }

+        .course-cta { margin-top: 24px; font-size: 0.82rem; font-weight: 800; color: var(--primary); display: flex; align-items: center; gap: 6px; }

-        /* --- BOOKMARK QUEUE SIDEBAR --- */

-            width: var(--sidebar-width);

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

-            border-right: 1px solid #E5E7EB;

-            transform: translateX(-100%);

-            transition: transform 0.3s ease;

-        .sidebar.open { transform: translateX(0); }

-            justify-content: space-between;

-            border-bottom: 1px solid #E5E7EB;

-            background: var(--primary);

-        .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-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; }

+        @media (max-width: 600px) { .course-grid { grid-template-columns: 1fr; } }

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

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

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

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

-
🚀 BSU Professional Sprint Portfolio v3

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

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

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

-            <div class="sprint-card" id="bmc-sprint">

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

-                    <summary>Sprint Brief</summary>

-                    <div class="instruction-text">

-                        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?

-                <div class="action-area">

-                    Launch Google Slides

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

-            <div class="sprint-card" id="customer-discovery">

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

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

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

+        <a href="Standard4BSU.html" class="course-card bsu">

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

-            <div class="sprint-card" id="gap-analysis">

-                <h4>🧩💡 The Gap Analysis</h4>

-                    <summary>Sprint Brief</summary>

-                    <div class="instruction-text">

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

-                <div class="action-area">

-                    Launch Google Slides

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

-            <div class="sprint-card" id="one-mc-pressure">

-                <h4>☕🔥 The 1MC Pressure Cooker</h4>

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

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

+        <a href="Standard4DCS.html" class="course-card dcs">

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

-            <div class="sprint-card" id="anti-pitch">

-                <h4>🛑📉 The Anti-Pitch</h4>

-                    <summary>Sprint Brief</summary>

-                    <div class="instruction-text">

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

-                <div class="action-area">

-                    Launch Google Slides

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

-            <div class="sprint-card" id="one-star-pivot">

-                <h4>⭐🔄 The 1-Star Review Pivot</h4>

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

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

-
Best for associates who love deconstructing how things work.

-            <div class="sprint-card" id="vc-reverse">

-                <h4>💰🧐 The VC Reverse Pitch</h4>

-                    <summary>Sprint Brief</summary>

-                    <div class="instruction-text">

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

-                <div class="action-area">

-                    Launch Google Slides

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

-            <div class="sprint-card" id="unit-economics">

-                <h4>📊🔢 The Unit Economics Breakdown</h4>

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

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

-            <div class="sprint-card" id="ai-audit">

-                <h4>🤖⚡ The AI Efficiency Audit</h4>

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

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

-            <div class="sprint-card" id="shark-tank">

-                <h4>🦈✅ The Shark Tank Fact Check</h4>

-                    <summary>Sprint Brief</summary>

-                    <div class="instruction-text">

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

-                <div class="action-area">

-                    Launch Google Slides

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

-            <div class="sprint-card" id="ux-teardown">

-                <h4>📱🛠 The UX Teardown</h4>

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

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

-            <div class="sprint-card" id="rev-model">

-                <h4>💸⚙ The Revenue Model Breakdown</h4>

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

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

-            <div class="sprint-card" id="tech-stack">

-                <h4>💻🛠 The Tech Stack Audit</h4>

-                    <summary>Sprint Brief</summary>

-                    <div class="instruction-text">

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

-                <div class="action-area">

-                    Launch Google Slides

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

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

-            <div class="sprint-card" id="podcast-breakdown">

-                <h4>🎙🧠 The Podcast Breakdown</h4>

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

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

-            <div class="sprint-card" id="hidden-gem">

-                <h4>💎🔍 The Hidden Gem Brand</h4>

-                    <summary>Sprint Brief</summary>

-                    <div class="instruction-text">

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

-                <div class="action-area">

-                    Launch Google Slides

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

-            <div class="sprint-card" id="founder-pivot">

-                <h4>🎢🔄 The Founder Pivot Story</h4>

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

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

-            <div class="sprint-card" id="dream-mentor">

-                <h4>✉🤝 The Dream Mentor Outreach</h4>

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

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

-            <div class="sprint-card" id="local-legend">

-                <h4>🌽🏛 The Local Legend Origin Story</h4>

-                    <summary>Sprint Brief</summary>

-                    <div class="instruction-text">

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

-                <div class="action-area">

-                    Launch Google Slides

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

-            <div class="sprint-card" id="career-exp-2">

-                <h4>🗺✨ Career Exploration 2.0</h4>

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

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

-            <div class="sprint-card" id="ecosystem-scout">

-                <h4>🌐🌲 The Ecosystem Scout</h4>

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

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

-        localStorage.setItem(id, value);

-        const card = document.getElementById(id);

-        const h4 = card.querySelector('h4');

-        const titleText = [...h4.childNodes]

-            .filter(n => n.nodeType === Node.TEXT_NODE)

-            .map(n => n.textContent).join('').trim();

-        const brief = card.querySelector('.instruction-text')?.textContent.trim() || 'Technical skill development sprint';

-        addToQueue(titleText, 'Standard4.html', brief);

-        const btn = h4.querySelector('.bookmark-btn');

-        btn.innerText = '✓ Bookmarked';

-        btn.style.background = '#10B981';

-            btn.innerText = '📌 Bookmark';

-            btn.style.background = '#FEF3C7';

-            btn.style.color = '#92400E';

-    function addToQueue(title, url, desc) {

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

-        const id = Date.now().toString();

-        queue.push({ id, title, url, desc, addedAt: new Date().toISOString() });

-        localStorage.setItem('apex_work_queue', JSON.stringify(queue));

-        const body = headerEl.closest('.sprint-card').querySelector('.card-body');

-        const isOpen = headerEl.classList.contains('open');

-        headerEl.classList.toggle('open', !isOpen);

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

-    function markDone(btn, cardId, colEl) {

-        const card = document.getElementById(cardId);

-        const isNowDone = card.dataset.done !== 'true';

-        card.dataset.done = isNowDone ? 'true' : 'false';

-        localStorage.setItem(cardId + '_done', isNowDone ? 'true' : 'false');

-        btn.innerText = isNowDone ? '✓ Done' : 'Done';

-        btn.classList.toggle('saved-done', isNowDone);

-        // Write a prep-page-readable summary of all S4 cards

-        document.querySelectorAll('.sprint-card').forEach(card => {

-            const h4 = card.querySelector('h4');

-            const titleText = [...h4.childNodes]

-                .filter(n => n.nodeType === Node.TEXT_NODE)

-                .map(n => n.textContent).join('').trim();

-            const reflTA = card.querySelector('.reflection-textarea');

-            const colEl = card.closest('.vibe-column');

-            const colTitle = colEl ? (colEl.querySelector('.vibe-title')?.textContent || '') : '';

-                reflection: reflTA ? reflTA.value : '',

-                done: card.dataset.done === 'true'

-        localStorage.setItem('apex_std4_state_v6', JSON.stringify({ sprints: allCards }));

-        const cards = colEl.querySelectorAll('.sprint-card');

-        const doneCount = [...cards].filter(c => c.dataset.done === 'true').length;

-        const pips = colEl.querySelectorAll('.progress-pip');

-        pips.forEach((pip, i) => pip.classList.toggle('lit', i < doneCount));

-    function saveReflection(cardId, value) {

-        localStorage.setItem(cardId + '_reflection', value);

-        const card = btn.closest('.sprint-card');

-        const colEl = card.closest('.vibe-column');

-        const newId = 'dup-' + Date.now();

-        // Capture title text (text nodes only, excluding the chevron span)

-        const h4 = card.querySelector('h4');

-        const titleText = [...h4.childNodes]

-            .filter(n => n.nodeType === Node.TEXT_NODE)

-            .map(n => n.textContent).join('').trim();

-        // Capture sprint brief content

-        const instructionEl = card.querySelector('.instruction-text');

-        const instructionHTML = instructionEl ? instructionEl.innerHTML : '';

-        const newCard = document.createElement('div');

-        newCard.className = 'sprint-card';

-        newCard.dataset.done = 'false';

-        const actions = document.createElement('div');

-        actions.className = 'card-actions';

-        const bmkBtn = document.createElement('button');

-        bmkBtn.className = 'bookmark-btn';

-        bmkBtn.innerText = '📌 Bookmark';

-        bmkBtn.onclick = e => { e.stopPropagation(); bookmarkCard(newId); };

-        const dupBtn = document.createElement('button');

-        dupBtn.className = 'duplicate-btn';

-        dupBtn.innerText = 'Duplicate';

-        dupBtn.onclick = () => duplicateCard(dupBtn);

-        const header = document.createElement('div');

-        header.className = 'card-header';

-        header.onclick = () => toggleCard(header);

-        const chevron = document.createElement('span');

-        chevron.className = 'card-chevron';

-        const newH4 = document.createElement('h4');

-        newH4.textContent = titleText + ' (copy)';

-        newH4.onclick = e => e.stopPropagation();

-        const body = document.createElement('div');

-        const briefDetails = document.createElement('details');

-        const briefSummary = document.createElement('summary');

-        briefSummary.textContent = 'Sprint Brief';

-        const instrDiv = document.createElement('div');

-        instrDiv.className = 'instruction-text';

-        instrDiv.innerHTML = instructionHTML;

-        briefDetails.appendChild(briefSummary);

-        briefDetails.appendChild(instrDiv);

-        const reflBox = document.createElement('details');

-        reflBox.className = 'reflection-box';

-        const reflSummary = document.createElement('summary');

-        reflSummary.textContent = '💭 Associate Reflection';

-        const reflTA = document.createElement('textarea');

-        reflTA.className = 'reflection-textarea';

-        reflTA.placeholder = 'How does this sprint demonstrate your growth?';

-        reflTA.onblur = () => saveReflection(newId, reflTA.value);

-        reflBox.appendChild(reflSummary);

-        const actionArea = document.createElement('div');

-        actionArea.className = 'action-area';

-        const createLink = document.createElement('a');

-        createLink.href = 'https://slides.google.com/create';

-        createLink.className = 'btn btn-create';

-        createLink.textContent = 'Launch Google Slides';

-        const canvaLink = document.createElement('a');

-        canvaLink.href = 'https://canva.me/presentation';

-        canvaLink.className = 'btn btn-canva';

-        canvaLink.textContent = 'Launch Canva Deck';

-        const linkInput = document.createElement('input');

-        linkInput.placeholder = 'Paste presentation link here...';

-        linkInput.onchange = () => saveLink(newId, linkInput.value);

-        const doneBtn = document.createElement('button');

-        doneBtn.className = 'save-btn';

-        doneBtn.onclick = () => markDone(doneBtn, newId, colEl);

-        actionArea.appendChild(createLink);

-        actionArea.appendChild(canvaLink);

-        actionArea.appendChild(linkInput);

-        actionArea.appendChild(doneBtn);

-        body.appendChild(briefDetails);

-        const sidebar = document.getElementById('sidebar');

-        const isOpen = sidebar.classList.contains('open');

-        sidebar.classList.toggle('open', !isOpen);

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

-        localStorage.setItem('s4_sidebar_open', !isOpen);

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

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

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

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

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

-        const updated = queue.filter(item => item.id !== id);

-        localStorage.setItem('apex_work_queue', JSON.stringify(updated));

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

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

-        document.querySelectorAll('input[type="text"]').forEach(input => {

-            const attr = input.getAttribute('onchange');

-                const match = attr.match(/'([^']+)'/);

-                    const saved = localStorage.getItem(match[1]);

-                    if (saved) input.value = saved;

-        // Assign data-col to each column and add progress tracks

-        document.querySelectorAll('.vibe-column').forEach((col, i) => {

-            const track = document.createElement('div');

-            track.className = 'progress-track';

-                const pip = document.createElement('div');

-                pip.className = 'progress-pip';

-                track.appendChild(pip);

-            const anchor = col.querySelector('.vibe-desc') || col.querySelector('.vibe-title');

-        document.querySelectorAll('.sprint-card').forEach(card => {

-            const h4 = card.querySelector('h4');

-            const details = card.querySelector('details');

-            const actionArea = card.querySelector('.action-area');

-            const colEl = card.closest('.vibe-column');

-            const isDone = localStorage.getItem(cardId + '_done') === 'true';

-            card.dataset.done = isDone ? 'true' : 'false';

-            const savedReflection = localStorage.getItem(cardId + '_reflection') || '';

-            // --- Build hover-only card-actions with bookmark ---

-            const actions = document.createElement('div');

-            actions.className = 'card-actions';

-            const bookmarkBtn = document.createElement('button');

-            bookmarkBtn.className = 'bookmark-btn';

-            bookmarkBtn.innerText = '📌 Bookmark';

-            bookmarkBtn.onclick = e => { e.stopPropagation(); bookmarkCard(cardId); };

-            const dupBtn2 = document.createElement('button');

-            dupBtn2.className = 'duplicate-btn';

-            dupBtn2.innerText = 'Duplicate';

-            dupBtn2.onclick = () => duplicateCard(dupBtn2);

-            actions.appendChild(bookmarkBtn);

-            actions.appendChild(dupBtn2);

-            // --- Build collapsible header ---

-            const header = document.createElement('div');

-            header.className = 'card-header';

-            header.onclick = () => toggleCard(header);

-            const chevron = document.createElement('span');

-            chevron.className = 'card-chevron';

-            // Strip any existing inline bookmark from h4, stop click propagation

-            const existingBmk = h4.querySelector('.bookmark-btn');

-            if (existingBmk) existingBmk.remove();

-            h4.onclick = e => e.stopPropagation();

-            header.appendChild(chevron);

-            // --- Build reflection box ---

-            const reflectionBox = document.createElement('details');

-            reflectionBox.className = 'reflection-box';

-            const reflectionSummary = document.createElement('summary');

-            reflectionSummary.textContent = '💭 Associate Reflection';

-            const reflectionTextarea = document.createElement('textarea');

-            reflectionTextarea.className = 'reflection-textarea';

-            reflectionTextarea.placeholder = 'How does this sprint demonstrate your growth?';

-            reflectionTextarea.value = savedReflection;

-            reflectionTextarea.onblur = () => saveReflection(cardId, reflectionTextarea.value);

-            reflectionBox.appendChild(reflectionSummary);

-            reflectionBox.appendChild(reflectionTextarea);

-            // --- Build collapsible body ---

-            const body = document.createElement('div');

-            body.className = 'card-body';

-            body.appendChild(reflectionBox);

-            body.appendChild(actionArea);

-            const doneBtn = document.createElement('button');

-            doneBtn.className = 'save-btn' + (isDone ? ' saved-done' : '');

-            doneBtn.innerText = isDone ? '✓ Done' : 'Done';

-            doneBtn.onclick = () => markDone(doneBtn, cardId, colEl);

-            actionArea.appendChild(doneBtn);

-        // Initialise all progress bars

-        document.querySelectorAll('.vibe-column').forEach(col => updateProgress(col));

-        // Load queue and restore sidebar state

-        if (localStorage.getItem('s4_sidebar_open') === 'true') {

-            document.getElementById('sidebar').classList.add('open');

-            document.body.classList.add('body-sidebar-open');


Yes please. I've turned on "Edit automatically" and I'm going to walk away and eat dinner. Have fun building!


Now let me verify all the links are consistent across the whole system:


Bash

echo "=== References to Standard4BSU.html ===" && grep -rn "Standard4BSU" "/Users/russgoerend/Desktop/Portfolio HTMLs/" --include="*.html"
echo ""
echo "=== References to Standard4DCS.html ===" && grep -rn "Standard4DCS" "/Users/russgoerend/Desktop/Portfolio HTMLs/" --include="*.html"
echo ""
echo "=== References to Standard4.html ===" && grep -rn "Standard4\.html" "/Users/russgoerend/Desktop/Portfolio HTMLs/" --include="*.html"

Verify all Standard4 links are correct across all files


=== References to Standard4BSU.html ===
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4.html:100:
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4BSU.html:260:            S4
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4BSU.html:649:        addToQueue(titleText, 'Standard4BSU.html', brief);

=== References to Standard4DCS.html ===
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4DCS.html:159:            Personal Brand
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4.html:108:

=== References to Standard4.html ===
/Users/russgoerend/Desktop/Portfolio HTMLs/APEX Professional Dashboard.html:483:
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard1.html:329:            S4
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4DCS.html:158:            S4 Portfolio
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard5.html:234:            S4
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard3.html:239:            S4
/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Portfolio.html:244:            S4
/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Portfolio.html:294:
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4.html:87:            S4


Everything is clean. Here's how it all connects:

- **Every `S4` nav link** across Standard1, Standard3, Standard5, Portfolio, and the old Dashboard → `Standard4.html` (the new landing page) ✓
- **Standard4DCS.html** "S4 Portfolio" link → `Standard4.html` (landing page) ✓
- **Landing page** → `Standard4BSU.html` and `Standard4DCS.html` ✓
- **Standard4BSU.html** self-nav and bookmark queue → `Standard4BSU.html` ✓
- **Standard4DCS.html** self-nav → `Standard4DCS.html` ✓

The flow: any student hitting S4 from anywhere lands on the chooser, picks their course, and goes directly to their portfolio. BSU and DCS are fully independent from that point with no shared state.


Love it!

Updates on the Professional Portfolio page:

Standard 1 is correct
Standard 2 is fine for now
Standard 3 should read: Career Exploration (build your own description for it)
Standard 4: Technical Skills
Standard 5: Professional Skills (build your own description for it)


[Image: original 2566x1072, displayed at 2000x836. Multiply coordinates by 1.28 to map to original image.]


Love it!   Updates on the Professional Portfolio page:  Standard 1 is correct Standard 2 is fine for now Standard 3 should read: Career Exploration (build your own description for it) Standard 4: Tech…


The user wants to update the standard card descriptions on the Professional Portfolio page. Let me find those cards in the APEX_Professional_Portfolio.html file.


grep -n "Standard 3\|Standard 4\|Standard 5\|std-title\|std-desc\|Critical Thinking\|Technical\|Communication\|Collaboration\|Career\|Mastering\|Effective" "/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Portfolio.html" | head -30

Find standard card titles and descriptions in Portfolio


176:        .std-title {
184:        .std-desc {
270:
Servant Leadership & Client Relationships

271:
Documenting community impact, professional communication, and project stewardship.

279:
Professionalism & Ethics

280:
Demonstrating integrity, punctuality, and professional workplace behaviors.

287:                Standard 3
288:
Critical Thinking & Problem Solving

289:
Applying analytical skills to complex projects and navigating roadblocks effectively.

296:                Standard 4
297:
Technical & Digital Skills

298:
Mastering industry-specific tools and platforms relevant to your APEX strand.

305:                Standard 5
306:
Communication & Collaboration

307:
Effective team dynamics and clear, concise communication across all channels.


Edit

Critical Thinking & Problem Solving

Applying analytical skills to complex projects and navigating roadblocks effectively.

Career Exploration

Researching career paths, building a personal brand, and connecting with professionals in your field.


<tool_use_error>File has not been read yet. Read it first before writing to it.</tool_use_error>

Error: File has not been read yet. Read it first before writing to it.


Technical & Digital Skills

Mastering industry-specific tools and platforms relevant to your APEX strand.

Technical Skills

Mastering industry-specific tools and platforms relevant to your APEX strand.


Communication & Collaboration

Effective team dynamics and clear, concise communication across all channels.

Professional Skills

Developing the communication, collaboration, and workplace habits that define a standout professional.


285
286

287	                Standard 3
288
Critical Thinking & Problem Solving

289
Applying analytical skills to complex projects and navigating roadblocks effectively.

290

291
In Progress

292
293
294
295

296	                Standard 4
297
Technical & Digital Skills

298
Mastering industry-specific tools and platforms relevant to your APEX strand.

299

300
In Progress

301
302
303
304

305	                Standard 5
306
Communication & Collaboration

307
Effective team dynamics and clear, concise communication across all channels.

308

309
In Progress

                Standard 3

Critical Thinking & Problem Solving

Applying analytical skills to complex projects and navigating roadblocks effectively.

In Progress

                Standard 4

Technical & Digital Skills

Mastering industry-specific tools and platforms relevant to your APEX strand.

In Progress

                Standard 5

Communication & Collaboration

Effective team dynamics and clear, concise communication across all channels.

In Progress


Critical Thinking & Problem Solving

Applying analytical skills to complex projects and navigating roadblocks effectively.

Career Exploration

Researching career paths, building a personal brand, and connecting with professionals in your field.


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

Critical Thinking & Problem Solving

Applying analytical skills to complex projects and navigating roadblocks effectively.

Career Exploration

Researching career paths, building a personal brand, and connecting with professionals in your field.

-
Applying analytical skills to complex projects and navigating roadblocks effectively.

+
Researching career paths, building a personal brand, and connecting with professionals in your field.


Technical & Digital Skills

Mastering industry-specific tools and platforms relevant to your APEX strand.

Technical Skills

Mastering industry-specific tools and platforms relevant to your APEX strand.


Technical & Digital Skills

Mastering industry-specific tools and platforms relevant to your APEX strand.

Technical Skills

Mastering industry-specific tools and platforms relevant to your APEX strand.


Communication & Collaboration

Effective team dynamics and clear, concise communication across all channels.

Professional Skills

Developing the communication, collaboration, and workplace habits that define a standout professional.


Communication & Collaboration

Effective team dynamics and clear, concise communication across all channels.

Professional Skills

Developing the communication, collaboration, and workplace habits that define a standout professional.

-
Effective team dynamics and clear, concise communication across all channels.

+
Developing the communication, collaboration, and workplace habits that define a standout professional.


Done. All three updated:

- **Standard 3** → "Career Exploration" — *Researching career paths, building a personal brand, and connecting with professionals in your field.*
- **Standard 4** → "Technical Skills" — description unchanged
- **Standard 5** → "Professional Skills" — *Developing the communication, collaboration, and workplace habits that define a standout professional.*


Can you make Standard5's artifact cards look like Standard1's? The progress indicators, collapsed cards...


[Image: original 2862x1092, displayed at 2000x763. Multiply coordinates by 1.43 to map to original image.]


The user wants to make Standard5's artifact cards look like Standard1's. They're showing a screenshot of Standard1's layout with collapsed expandable cards and progress indicators. Let me read both Standard1.html and Standard5.html to understand the difference.


Let me read both files to understand the structural differences before touching anything.


Bash

wc -l "/Users/russgoerend/Desktop/Portfolio HTMLs/Standard1.html" "/Users/russgoerend/Desktop/Portfolio HTMLs/Standard5.html"

Get line counts for both files


     673 /Users/russgoerend/Desktop/Portfolio HTMLs/Standard1.html
     474 /Users/russgoerend/Desktop/Portfolio HTMLs/Standard5.html
    1147 total


1	<!DOCTYPE html>
2
3
4	    <meta charset="UTF-8">
5	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6	    <title>APEX Portfolio | Standard 1: Servant Leadership</title>
7
306
307
308
309

310

311
📌 Work Queue

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

314

315
No items yet. Bookmark an artifact card to add it here.

316

317

318
319
320

321
322
323
324

325	            Dashboard
326	            S1
327	            S2
328	            S3
329	            S4
330	            S5
331	            <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>
332

333

334
335
336

337
338
Standard 1: Servant Leadership & Client Relationships

339
Documenting professional growth, client communication, and community impact.

340
341
342
343	        📊 S1 Servant Leadership Proficiency Indicators
344

345

346	                Exceeds
347	                Associate has displayed immense involvement throughout the semester, far beyond the expectations that have been laid out by the instructor.
348

349

350	                Secure
351	                Takes roles and responsibilities in project work seriously and is actively engaged. Clearly models AGILE methodologies.
352

353

354	                Developing
355	                Occasionally takes initiative on projects but is not always actively engaged. Doesn't always seek feedback.
356

357

358	                Beginning
359	                Does not participate in project work except for meetings. Cannot communicate project goals.
360

361

362
363
364

365

366
🏗 Portfolio Strands

367
The columns below represent the specific areas of focus for this standard. Collect evidence for each strand to build your overall proficiency rating.

368

369

370

371	                1. Choose
372	                Select a card that matches a recent task or experience.
373

374

375	                2. Link & Reflect
376	                Add your artifact link and write a brief growth reflection.
377

378

379	                3. Add Custom
380	                Use the "+ Add" button to document unique experiences.
381

382

383

384
385

386

387
🤲🌟 Servant Leadership

388

389

390

391

392	            <button class="add-btn" onclick="addNewCard('servant')">+ Add Artifact Card</button>
393

394
395

396
🤝💼 Client Relationships

397

398

399

400

<!DOCTYPE html>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APEX Portfolio | Standard 1: Servant Leadership</title>

📌 Work Queue

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

No items yet. Bookmark an artifact 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 1: Servant Leadership & Client Relationships

Documenting professional growth, client communication, and community impact.

        📊 S1 Servant Leadership Proficiency Indicators

                Exceeds
                Associate has displayed immense involvement throughout the semester, far beyond the expectations that have been laid out by the instructor.

                Secure
                Takes roles and responsibilities in project work seriously and is actively engaged. Clearly models AGILE methodologies.

                Developing
                Occasionally takes initiative on projects but is not always actively engaged. Doesn't always seek feedback.

                Beginning
                Does not participate in project work except for meetings. Cannot communicate project goals.

🏗 Portfolio Strands

The columns below represent the specific areas of focus for this standard. Collect evidence for each strand to build your overall proficiency rating.

                1. Choose
                Select a card that matches a recent task or experience.

                2. Link & Reflect
                Add your artifact link and write a brief growth reflection.

                3. Add Custom
                Use the "+ Add" button to document unique experiences.

🤲🌟 Servant Leadership

            <button class="add-btn" onclick="addNewCard('servant')">+ Add Artifact Card</button>

🤝💼 Client Relationships


400

401	            <button class="add-btn" onclick="addNewCard('client')">+ Add Artifact Card</button>
402

403
404

405
👥🏗 Team Building

406

407

408

409

410	            <button class="add-btn" onclick="addNewCard('team')">+ Add Artifact Card</button>
411

412
413

414
📣🎯 Brand Ambassador

415

416

417

418

419	            <button class="add-btn" onclick="addNewCard('brand')">+ Add Artifact Card</button>
420

421

422

423
424
672

            <button class="add-btn" onclick="addNewCard('client')">+ Add Artifact Card</button>

👥🏗 Team Building

            <button class="add-btn" onclick="addNewCard('team')">+ Add Artifact Card</button>

📣🎯 Brand Ambassador

            <button class="add-btn" onclick="addNewCard('brand')">+ Add Artifact Card</button>


Now let me read Standard5.html to understand its current structure.


Now let me read Standard5.html in full.


1	<!DOCTYPE html>
2
3
4	    <meta charset="UTF-8">
5	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6	    <title>APEX Portfolio | Standard 5: Professional Skills</title>
7
221
222
223
224
225

226
227
228
229

230	            Dashboard
231	            S1
232	            S2
233	            S3
234	            S4
235	            S5
236

237

238
239
240

241
242
Standard 5: Professional Skills

243
Mastering the day-to-day habits of an aspiring professional: communication, presence, time management, and networking.

244
245
246
247	        📊 S5 Professional Skills Proficiency Indicators
248

249

250	                Exceeds
251	                Consistently models high-level professional habits and acts as a mentor for peers in communication and management.
252

253

254	                Secure
255	                Reliably communicates through digital channels, maintains professional presence, and manages tasks effectively.
256

257

258	                Developing
259	                Professional skills are inconsistent. Requires reminders for communication etiquette or task management.
260

261

262	                Beginning
263	                Lacks basic professional habits. Communication is unprofessional or non-existent; presence does not meet APEX standards.
264

265

266
267
268

269

270
🏗 Portfolio Strands

271
Mastering professional skills requires consistent practice across these four areas. Use the cards below to document your habits and growth.

272

273

274

275	                1. Identify
276	                Select a habit card you've practiced this week.
277

278

279	                2. Link & Reflect
280	                Add evidence (screenshots/photos) and a reflection.
281

282

283	                3. Customize
284	                Add your own cards to document unique professional milestones.
285

286

287

288
289

290

291
📱💬 Digital Communication

292

293	            <button class="add-card-btn" onclick="addBlankCard('digital-comm')">+ Add Artifact Card</button>
294

295
296

297
👔✨ Professional Presence

298

299	            <button class="add-card-btn" onclick="addBlankCard('prof-presence')">+ Add Artifact Card</button>
300

301
302

303
⏳🗓 Task Management

304

305	            <button class="add-card-btn" onclick="addBlankCard('task-mgmt')">+ Add Artifact Card</button>
306

307
308

309
🤝🌱 Networking & Growth

310

311	            <button class="add-card-btn" onclick="addBlankCard('growth-net')">+ Add Artifact Card</button>
312

313

314

315
316
473
474
475

<!DOCTYPE html>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APEX Portfolio | Standard 5: Professional Skills</title>

            Dashboard
            S1
            S2
            S3
            S4
            S5

Standard 5: Professional Skills

Mastering the day-to-day habits of an aspiring professional: communication, presence, time management, and networking.

        📊 S5 Professional Skills Proficiency Indicators

                Exceeds
                Consistently models high-level professional habits and acts as a mentor for peers in communication and management.

                Secure
                Reliably communicates through digital channels, maintains professional presence, and manages tasks effectively.

                Developing
                Professional skills are inconsistent. Requires reminders for communication etiquette or task management.

                Beginning
                Lacks basic professional habits. Communication is unprofessional or non-existent; presence does not meet APEX standards.

🏗 Portfolio Strands

Mastering professional skills requires consistent practice across these four areas. Use the cards below to document your habits and growth.

                1. Identify
                Select a habit card you've practiced this week.

                2. Link & Reflect
                Add evidence (screenshots/photos) and a reflection.

                3. Customize
                Add your own cards to document unique professional milestones.

📱💬 Digital Communication

            <button class="add-card-btn" onclick="addBlankCard('digital-comm')">+ Add Artifact Card</button>

👔✨ Professional Presence

            <button class="add-card-btn" onclick="addBlankCard('prof-presence')">+ Add Artifact Card</button>

⏳🗓 Task Management

            <button class="add-card-btn" onclick="addBlankCard('task-mgmt')">+ Add Artifact Card</button>

🤝🌱 Networking & Growth

            <button class="add-card-btn" onclick="addBlankCard('growth-net')">+ Add Artifact Card</button>


Now I have a complete picture of both files. Let me identify exactly what Standard5 is missing compared to Standard1:

1. **Collapsible card header** (`.card-header`, `.card-chevron`, `toggleCard()`) — Standard5 cards don't have the chevron/collapse behavior. The title is just a `div.editable-title.title-text` not wrapped in a `.card-header`.

2. **Progress track** (`.progress-track`, `.progress-pip`, `updateProgress()`) — Standard5 columns don't have the 5-pip progress bars under the column titles.

3. **Persistent done state** — Standard5's "Done" button shows a temporary "✓ Saved" message but doesn't actually track completion like Standard1 does with its `markDone()` function and `card.dataset.done` attribute that drives the progress pips.
4. **Card body wrapper** — Standard1 uses a `.card-body` container to hide and show content below the header, whereas Standard5 lacks this structural layer.
5. **Sidebar/Queue** — Standard5 is missing the Work Queue sidebar entirely, though since the user specifically asked for progress indicators and collapsible cards, I'll focus on those features first.
6. **Layout variables** — Standard5 doesn't need the `--sidebar-width` variable or the `body.body-sidebar-open` state since there's no sidebar.
7. **Add button positioning** — Standard1 positions its add button absolutely at the bottom with padding adjustments, while Standard5 flows it naturally in the flex column. I'll align them to be consistent.

The core changes I need to make are adding the collapsible card mechanics with the header, chevron icon, and toggle function, plus implementing the progress track styling.

Looking at what the user actually requested, I should focus on just the collapsible cards and progress indicators. I'll add the CSS for the card header, chevron rotation states, and card body wrapper, then implement the JavaScript to handle collapsing and the progress tracking that persists to localStorage.

Adding CSS styles... I need to add id attributes to the columns using hyphenated keys for the progress tracks, update the vibe-column styling to accommodate the absolutely positioned add button, and then refactor the JavaScript to handle card collapsing, completion states, and progress tracking with functions for toggling cards, marking them done, and updating the progress display. I need to add padding to the column and update the button positioning to match Standard1's layout, plus add the custom arrow styling to the summary elements and the progress track IDs. Rather than rewriting the whole file, I'll make targeted edits to the CSS, HTML structure, and JavaScript functions to integrate the collapsible cards, progress tracking, and button positioning. I need to be careful with the `summary` styling since Standard5 already has some base styles — I'll add the flexbox properties, hide the default marker, and create a custom arrow with `::before`. Given the scope of JavaScript changes needed, rewriting the entire file is cleaner than targeted edits since the core data and structure remain the same. For the progress track, I'm mapping the column keys to `digital-comm`, `prof-presence`, `task-mgmt`, and `growth-net`, then updating the progress calculation logic accordingly. I need to handle hyphenated keys like `updateProgress('digital-comm')`. My plan is to preserve all the existing CSS—the root variables, nav, header, indicators, strand info, vibe grid, and card styling—while updating specific parts like the editable title margin and adding collapsible and progress styles. For the HTML, I'll keep the nav, header, indicators, and strand info intact, then add progress tracks to the vibe grid. I'll change the button class from `.add-card-btn` to `.add-btn` and update the card data and JS functions accordingly.

Looking at the user's screenshot, they specifically asked for progress indicators and collapsed cards like Standard1 has—not the sidebar, so I'll skip that to avoid scope creep. The main structural change is in how `createCardHTML` builds the card, so I'll use Write to handle the JS logic updates.

Updating the card structure... Now I need to handle the done state tracking by checking the dataset attribute, and I'll make sure the column key format works with both hyphenated and simple naming conventions. Let me write out the complete updated file with all the UI patterns aligned to Standard1's structure.


Now I have the full picture. Standard5 is missing:
1. Collapsible card headers with chevron (`.card-header`, `.card-body`, `toggleCard()`)
2. Progress pip tracks under each column title
3. Persistent `done` state on the save button that drives the pips
4. `updateProgress()` wired to `markDone()`

I'll write the updated file preserving all content and column data exactly, just upgrading the card pattern and adding the missing pieces.


Write

<!DOCTYPE html>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APEX Portfolio | Standard 5: Professional Skills</title>

📌 Work Queue

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

No items yet. Bookmark an artifact 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 5: Professional Skills

Mastering the day-to-day habits of an aspiring professional: communication, presence, time management, and networking.

        📊 S5 Professional Skills Proficiency Indicators

                Exceeds
                Consistently models high-level professional habits and acts as a mentor for peers in communication and management.

                Secure
                Reliably communicates through digital channels, maintains professional presence, and manages tasks effectively.

                Developing
                Professional skills are inconsistent. Requires reminders for communication etiquette or task management.

                Beginning
                Lacks basic professional habits. Communication is unprofessional or non-existent; presence does not meet APEX standards.

🏗 Portfolio Strands

Mastering professional skills requires consistent practice across these four areas. Use the cards below to document your habits and growth.

1. IdentifySelect a habit card you've practiced this week.

2. Link & ReflectAdd evidence (screenshots/photos) and a reflection.

3. CustomizeAdd your own cards to document unique professional milestones.

📱💬 Digital Communication

            <button class="add-btn" onclick="addNewCard('digital-comm')">+ Add Artifact Card</button>

👔✨ Professional Presence

            <button class="add-btn" onclick="addNewCard('prof-presence')">+ Add Artifact Card</button>

⏳🗓 Task Management

            <button class="add-btn" onclick="addNewCard('task-mgmt')">+ Add Artifact Card</button>

🤝🌱 Networking & Growth

            <button class="add-btn" onclick="addNewCard('growth-net')">+ Add Artifact Card</button>


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)

<!DOCTYPE html>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APEX Portfolio | Standard 5: Professional Skills</title>

📌 Work Queue

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

No items yet. Bookmark an artifact 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 5: Professional Skills

Mastering the day-to-day habits of an aspiring professional: communication, presence, time management, and networking.

        📊 S5 Professional Skills Proficiency Indicators

                Exceeds
                Consistently models high-level professional habits and acts as a mentor for peers in communication and management.

                Secure
                Reliably communicates through digital channels, maintains professional presence, and manages tasks effectively.

                Developing
                Professional skills are inconsistent. Requires reminders for communication etiquette or task management.

                Beginning
                Lacks basic professional habits. Communication is unprofessional or non-existent; presence does not meet APEX standards.

🏗 Portfolio Strands

Mastering professional skills requires consistent practice across these four areas. Use the cards below to document your habits and growth.

1. IdentifySelect a habit card you've practiced this week.

2. Link & ReflectAdd evidence (screenshots/photos) and a reflection.

3. CustomizeAdd your own cards to document unique professional milestones.

📱💬 Digital Communication

            <button class="add-btn" onclick="addNewCard('digital-comm')">+ Add Artifact Card</button>

👔✨ Professional Presence

            <button class="add-btn" onclick="addNewCard('prof-presence')">+ Add Artifact Card</button>

⏳🗓 Task Management

            <button class="add-btn" onclick="addNewCard('task-mgmt')">+ Add Artifact Card</button>

🤝🌱 Networking & Growth

            <button class="add-btn" onclick="addNewCard('growth-net')">+ Add Artifact Card</button>

<title>APEX Portfolio | Standard 5: Professional Skills</title>

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

-            --secondary: #c4d600;  /* APEX Lime Gold */

-            --accent: #4b4f54;     /* APEX Dark Gray */

-        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; }

+        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: 1200px; 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: 1400px; margin: 0 auto; }

-                /* --- GLOBAL NAVIGATION --- */

-            background: var(--primary);

-            border-bottom: 4px solid var(--secondary);

-            justify-content: space-between;

-            height: calc(var(--nav-height) - 15px);

-            background: var(--secondary);

-        .container { max-width: 1400px; margin: 0 auto; }

header { text-align: center; margin-bottom: 30px; border-bottom: 1px solid #D1D5DB; padding-bottom: 20px; }

h1 { font-size: 2.2rem; color: var(--primary); margin-bottom: 5px; font-weight: 800; }

.subtitle { font-size: 1rem; color: var(--text-sub); max-width: 600px; margin: 0 auto; }

-        /* Proficiency Indicators Styling */

.indicators-box { background: white; border: 2px solid var(--secondary); border-radius: 12px; margin-bottom: 25px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }

.indicators-box summary { padding: 15px 20px; background: #FFFBEB; cursor: pointer; font-weight: 800; color: var(--primary); display: flex; align-items: center; gap: 10px; }

.indicators-content { padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; font-size: 0.85rem; line-height: 1.5; }

.indicator-item { padding: 15px; border-radius: 8px; background: #F9FAFB; border-top: 4px solid #DDD; }

.indicator-item strong { display: block; font-size: 1rem; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }

-        .lvl-exceeds { border-top-color: var(--exceeds); }

-        .lvl-exceeds strong { color: var(--exceeds); }

-        .lvl-secure { border-top-color: var(--secure); }

-        .lvl-secure strong { color: var(--secure); }

-        .lvl-developing { border-top-color: var(--developing); }

-        .lvl-developing strong { color: var(--developing); }

-        .lvl-beginning { border-top-color: var(--beginning); }

-        .lvl-beginning strong { color: var(--beginning); }

+        .lvl-exceeds { border-top-color: var(--exceeds); } .lvl-exceeds strong { color: var(--exceeds); }

+        .lvl-secure { border-top-color: var(--secure); } .lvl-secure strong { color: var(--secure); }

+        .lvl-developing { border-top-color: var(--developing); } .lvl-developing strong { color: var(--developing); }

+        .lvl-beginning { border-top-color: var(--beginning); } .lvl-beginning strong { color: var(--beginning); }

-            background: var(--info-bg);

-            border: 1px solid var(--info-border);

+        .strand-info { background: var(--info-bg); border: 1px solid var(--info-border); border-radius: 12px; padding: 20px; margin-bottom: 40px; display: flex; flex-wrap: wrap; gap: 30px; align-items: center; }

.strand-info-text { flex: 2; min-width: 300px; }

.strand-info-text h2 { margin: 0 0 10px 0; font-size: 1.2rem; color: #0369A1; }

.strand-info-text p { margin: 0; font-size: 0.95rem; line-height: 1.4; color: #0C4A6E; }

.step { background: rgba(255,255,255,0.5); padding: 12px; border-radius: 8px; font-size: 0.85rem; border: 1px solid rgba(255,255,255,0.8); }

.step strong { color: var(--accent); display: block; margin-bottom: 4px; }

.vibe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 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(--accent); min-height: 400px; display: flex; flex-direction: column; position: relative; }

-        .col-1 { border-top-color: #06B6D4; }

-        .col-2 { border-top-color: #8B5CF6; }

-        .col-3 { border-top-color: #F59E0B; }

-        .col-4 { border-top-color: #10B981; }

+        .vibe-column { background: var(--card-bg); border-radius: 12px; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-top: 8px solid var(--accent); position: relative; padding-bottom: 80px; min-height: 400px; }

+        .col-1 { border-top-color: #06B6D4; }

+        .col-2 { border-top-color: #8B5CF6; }

+        .col-3 { border-top-color: #F59E0B; }

+        .col-4 { border-top-color: #10B981; }

.vibe-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 20px; color: var(--primary); display: flex; align-items: center; gap: 10px; }

+        .progress-track { display: flex; gap: 5px; margin: -8px 0 18px 0; }

+        .progress-pip { flex: 1; height: 5px; border-radius: 3px; background: #E5E7EB; transition: background 0.4s ease; }

+        .col-1 .progress-pip.lit { background: #06B6D4; }

+        .col-2 .progress-pip.lit { background: #8B5CF6; }

+        .col-3 .progress-pip.lit { background: #F59E0B; }

+        .col-4 .progress-pip.lit { background: #10B981; }

.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(--secondary); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

+        .card-header { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; user-select: none; padding: 2px 0; }

+        .card-header:hover .title-text { color: #3d0560; }

+        .card-chevron { font-size: 0.6rem; color: var(--text-sub); margin-top: 5px; 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: 10px; }

+        .card-body.open { display: block; }

+        .editable-title[contenteditable="true"]:focus { background: #FFFBEB; border-radius: 4px; }

details.brief-container, details.reflection-box { font-size: 0.85rem; color: #4B5563; background: #F9FAFB; padding: 10px; border-radius: 6px; margin-top: 10px; }

-        details.brief-container { border-left: 3px solid var(--secondary); }

-        details.reflection-box { border-left: 3px solid var(--accent); }

-        summary { cursor: pointer; font-weight: 700; color: var(--primary); outline: none; }

-        .instruction-text { padding-top: 8px; line-height: 1.5; outline: none; }

+        details.brief-container { border-left: 4px solid var(--secondary); }

+        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 { padding-top: 8px; min-height: 20px; outline: none; line-height: 1.4; }

+        .instruction-text[contenteditable="true"]:focus { background: white; padding: 5px; border-radius: 4px; }

.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; }

input[type="text"] { flex-grow: 1; padding: 10px; border: 1px solid #D1D5DB; border-radius: 6px; font-size: 0.8rem; box-sizing: border-box; }

.save-btn { padding: 0 15px; background: var(--primary); color: white; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: 0.2s; font-size: 0.8rem; min-width: 70px; }

.save-btn:hover { background: var(--accent); }

.save-btn.saved { background: var(--success); }

+        .save-btn.saved-done { background: #10B981; }

+        .save-btn.saved-done:hover { background: #059669; }

-        /* Card Action Buttons (Top Right) */

+        .add-btn { position: absolute; bottom: 20px; left: 20px; right: 20px; padding: 12px; background: #F3F4F6; border: 2px dashed #D1D5DB; border-radius: 8px; color: var(--text-sub); cursor: pointer; font-weight: 600; text-align: center; transition: 0.2s; }

+        .add-btn:hover { background: #E5E7EB; color: var(--primary); border-color: var(--primary); }

.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; }

-            border: 1px solid transparent;

+        .delete-btn, .duplicate-btn { cursor: pointer; font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; font-weight: 700; border: 1px solid transparent; transition: 0.2s; }

.duplicate-btn { background: #E0F2FE; color: #0369A1; border-color: #BAE6FD; }

.duplicate-btn:hover { background: #0369A1; color: white; }

.delete-btn { background: #FEE2E2; color: #DC2626; border-color: #FECACA; }

.delete-btn:hover { background: #DC2626; color: white; }

+        .bookmark-btn { background: #FEF3C7; color: #92400E; border-color: #FDE68A; font-size: 0.7rem; padding: 2px 6px; }

.bookmark-btn:hover { background: #92400E; color: white; }

-            border: 2px dashed #D1D5DB;

-        .add-card-btn:hover { background: #F3F4F6; border-color: var(--secondary); color: var(--primary); }

+        .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-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; }

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

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

+
No items yet. Bookmark an artifact card to add it here.

+            <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>

-                Select a habit card you've practiced this week.

-                Add evidence (screenshots/photos) and a reflection.

-                Add your own cards to document unique professional milestones.

+
1. IdentifySelect a habit card you've practiced this week.

+
2. Link & ReflectAdd evidence (screenshots/photos) and a reflection.

+
3. CustomizeAdd your own cards to document unique professional milestones.

<div class="vibe-column col-1" data-col="digital-comm">

+            <div class="progress-track" id="progress-digital-comm">

-            <button class="add-card-btn" onclick="addBlankCard('digital-comm')">+ Add Artifact Card</button>

+            <button class="add-btn" onclick="addNewCard('digital-comm')">+ Add Artifact Card</button>

<div class="vibe-column col-2" data-col="prof-presence">

+            <div class="progress-track" id="progress-prof-presence">

-            <button class="add-card-btn" onclick="addBlankCard('prof-presence')">+ Add Artifact Card</button>

+            <button class="add-btn" onclick="addNewCard('prof-presence')">+ Add Artifact Card</button>

<div class="vibe-column col-3" data-col="task-mgmt">

+            <div class="progress-track" id="progress-task-mgmt">

-            <button class="add-card-btn" onclick="addBlankCard('task-mgmt')">+ Add Artifact Card</button>

+            <button class="add-btn" onclick="addNewCard('task-mgmt')">+ Add Artifact Card</button>

<div class="vibe-column col-4" data-col="growth-net">

+            <div class="progress-track" id="progress-growth-net">

-            <button class="add-card-btn" onclick="addBlankCard('growth-net')">+ Add Artifact Card</button>

+            <button class="add-btn" onclick="addNewCard('growth-net')">+ Add Artifact Card</button>

+    const COLS = ['digital-comm', 'prof-presence', 'task-mgmt', 'growth-net'];

-            { id: 'slack-mastery', title: '✅💬 Slack Mastery', brief: 'Show evidence that you have configured your notifications to "Always" and actively use "Read & React" in team channels.', reflection: '', link: '', isCustom: false },

-            { id: 'cc-protocol', title: '📧👥 The "CC" Protocol', brief: 'Capture a screenshot of an email sent to a client where you successfully CC\'d your instructor and partners.', reflection: '', link: '', isCustom: false }

+            { id: 'slack-mastery', title: '✅💬 Slack Mastery', brief: 'Show evidence that you have configured your notifications to "Always" and actively use "Read & React" in team channels.', reflection: '', link: '', isCustom: false, done: false },

+            { id: 'cc-protocol', title: '📧👥 The "CC" Protocol', brief: 'Capture a screenshot of an email sent to a client where you successfully CC\'d your instructor and partners.', reflection: '', link: '', isCustom: false, done: false }

-            { id: 'handshake', title: '🤝👀 The First Impression', brief: 'Reflect on an interaction involving eye contact, body language, and a professional introduction.', reflection: '', link: '', isCustom: false },

-            { id: 'dress-code', title: '👗👔 APEX Dress Code', brief: 'Provide a photo of your Outfit of the Day (OOTD) modeling APEX business casual standards.', reflection: '', link: '', isCustom: false }

+            { id: 'handshake', title: '🤝👀 The First Impression', brief: 'Reflect on an interaction involving eye contact, body language, and a professional introduction.', reflection: '', link: '', isCustom: false, done: false },

+            { id: 'dress-code', title: '👗👔 APEX Dress Code', brief: 'Provide a photo of your Outfit of the Day (OOTD) modeling APEX business casual standards.', reflection: '', link: '', isCustom: false, done: false }

-            { id: 'agenda', title: '📝⏱ The Pre-Meeting Agenda', brief: 'Provide a link to an agenda shared with your team and client *before* a scheduled meeting.', reflection: '', link: '', isCustom: false },

-            { id: 'micro-deliverable', title: '🎯✅ Weekly Micro-Deliverable', brief: 'Evidence of moving a task from "Doing" to "Done" on your team\'s Trello board or Kanban.', reflection: '', link: '', isCustom: false }

+            { id: 'agenda', title: '📝⏱ The Pre-Meeting Agenda', brief: 'Provide a link to an agenda shared with your team and client *before* a scheduled meeting.', reflection: '', link: '', isCustom: false, done: false },

+            { id: 'micro-deliverable', title: '🎯✅ Weekly Micro-Deliverable', brief: 'Evidence of moving a task from "Doing" to "Done" on your team\'s Trello board or Kanban.', reflection: '', link: '', isCustom: false, done: false }

-            { id: 'linkedin', title: '🔗🌐 LinkedIn Optimization', brief: 'Update your profile with a headshot, APEX headline, and "About" section featuring your Career Thesis.', reflection: '', link: '', isCustom: false },

-            { id: 'feedback', title: '🔄📉 The Feedback Loop', brief: 'Show how you applied constructive criticism from a client or peer to improve a product.', reflection: '', link: '', isCustom: false }

+            { id: 'linkedin', title: '🔗🌐 LinkedIn Optimization', brief: 'Update your profile with a headshot, APEX headline, and "About" section featuring your Career Thesis.', reflection: '', link: '', isCustom: false, done: false },

+            { id: 'feedback', title: '🔄📉 The Feedback Loop', brief: 'Show how you applied constructive criticism from a client or peer to improve a product.', reflection: '', link: '', isCustom: false, done: false }

-            btn.classList.add('saved');

-                btn.innerText = 'Done';

-                btn.classList.remove('saved');

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

+                    id: card.dataset.id,

+                    title: card.querySelector('.title-text').innerText,

+                    brief: card.querySelector('.instruction-text').innerText,

+                    reflection: card.querySelector('.reflection-textarea').value,

+                    link: card.querySelector('.link-input').value,

+                    isCustom: card.dataset.custom === 'true',

+                    done: card.dataset.done === 'true'

+        localStorage.setItem('apex_std5_v6', JSON.stringify(state));

-    function createCardHTML(colKey, data) {

-        const isCustom = data.id.startsWith('custom-') || data.id.startsWith('dup-');

+    function createCardHTML(col, cardData) {

+        const isCustom = cardData.isCustom || String(cardData.id).startsWith('custom-') || String(cardData.id).startsWith('dup-');

+        const isDone = cardData.done === true;

const card = document.createElement('div');

+        card.dataset.custom = isCustom;

+        card.dataset.done = isDone ? 'true' : 'false';

<button class="bookmark-btn" onclick="bookmarkCard(this)">📌 Bookmark</button>

-                <button class="duplicate-btn" onclick="duplicateCard(this, '${colKey}')">Duplicate</button>

-                ${isCustom ? `<button class="delete-btn" onclick="deleteCard(this)">Delete</button>` : ''}

+                <button class="duplicate-btn" onclick="duplicateCard(this, '${col}')">Duplicate</button>

+                ${isCustom ? `<button class="delete-btn" onclick="if(confirm('Delete this artifact?')){this.closest('.sprint-card').remove(); saveToStorage(); updateProgress('${col}');}">✕ Delete</button>` : ''}

-            <details class="brief-container">

-                <summary>Experience Brief</summary>

-            <details class="reflection-box" ${data.reflection ? 'open' : ''}>

-                <summary>💭 Associate Reflection</summary>

-                <textarea class="reflection-textarea" placeholder="Describe your growth...">${data.reflection}</textarea>

-                    <input type="text" class="link-input" placeholder="Paste artifact link here..." value="${data.link}">

-                    <button class="save-btn" onclick="handleSave(this)">Done</button>

+            <div class="card-header" onclick="toggleCard(this)">

+                <div class="editable-title title-text"

+                     contenteditable="true"

+                     onclick="event.stopPropagation()"

+                     onblur="saveToStorage()">${cardData.title}</div>

+                <details class="brief-container">

+                    <summary>Experience Brief</summary>

+
${cardData.brief || 'Describe the experience...'}

+                <details class="reflection-box" ${cardData.reflection ? 'open' : ''}>

+                    <summary>💭 Associate Reflection</summary>

+                    <textarea class="reflection-textarea" placeholder="How does this demonstrate growth?" onblur="saveToStorage()">${cardData.reflection || ''}</textarea>

+                <div class="action-area">

+                    <div class="link-row">

+                        <input type="text" class="link-input" placeholder="Paste link here..." value="${cardData.link || ''}" onblur="saveToStorage()">

+                        <button class="save-btn ${isDone ? 'saved-done' : ''}" onclick="markDone(this, '${col}')">${isDone ? '✓ Done' : 'Done'}</button>

-        const container = document.getElementById(`cards-${colKey}`);

-            id: 'custom-' + Date.now(),

-            title: '✨ New Custom Artifact',

-            brief: 'Describe your professional experience here...',

-        container.appendChild(createCardHTML(colKey, data));

+        const body = headerEl.closest('.sprint-card').querySelector('.card-body');

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

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

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

-    function duplicateCard(btn, colKey) {

+        const card = btn.closest('.sprint-card');

+        const isNowDone = card.dataset.done !== 'true';

+        card.dataset.done = isNowDone ? 'true' : 'false';

+        btn.innerText = isNowDone ? '✓ Done' : 'Done';

+        btn.classList.toggle('saved-done', isNowDone);

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

+        const doneCount = [...cards].filter(c => c.dataset.done === 'true').length;

+        const pips = document.querySelectorAll(`#progress-${col} .progress-pip`);

+        pips.forEach((pip, i) => pip.classList.toggle('lit', i < doneCount));

+        const id = 'custom-' + Date.now();

+        const container = document.getElementById(`cards-${col}`);

+        const newCard = createCardHTML(col, {

+            id, title: '✨ Click to name your custom artifact',

+            brief: 'Describe the experience here...',

+            reflection: '', link: '', isCustom: true, done: false

+        container.appendChild(newCard);

const originalCard = btn.closest('.sprint-card');

-        const newCard = createCardHTML(colKey, data);

+        const newCard = createCardHTML(col, cardData);

-        if(confirm("Permanently delete this artifact card?")) {

-            btn.closest('.sprint-card').remove();

-        document.querySelectorAll('.vibe-column').forEach(col => {

-            const colKey = col.dataset.col;

-            col.querySelectorAll('.sprint-card').forEach(card => {

-                    id: card.dataset.id,

-                    title: card.querySelector('.title-text').innerText,

-                    brief: card.querySelector('.instruction-text').innerText,

-                    reflection: card.querySelector('.reflection-textarea').value,

-                    link: card.querySelector('.link-input').value

-        localStorage.setItem('apex_std5_v5', JSON.stringify(state));

const card = btn.closest('.sprint-card');

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

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

-        queue.push({id, title, url, desc, addedAt: new Date().toISOString()});

+        queue.push({ id, title, url, desc, addedAt: new Date().toISOString() });

-        const savedData = localStorage.getItem('apex_std5_v5');

-        const state = savedData ? JSON.parse(savedData) : defaultCards;

-        Object.keys(state).forEach(colKey => {

-            const container = document.getElementById(`cards-${colKey}`);

-                container.innerHTML = '';

-                state[colKey].forEach(data => {

-                    container.appendChild(createCardHTML(colKey, data));

+        const sidebar = document.getElementById('sidebar');

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

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

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

+        localStorage.setItem('s5_sidebar_open', !isOpen);

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

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

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

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

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

+        const updated = queue.filter(item => item.id !== id);

+        localStorage.setItem('apex_work_queue', JSON.stringify(updated));

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

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

+        // 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;

+            const container = document.getElementById(`cards-${col}`);

+            (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));

+        if (localStorage.getItem('s5_sidebar_open') === 'true') {

+            document.getElementById('sidebar').classList.add('open');

+            document.body.classList.add('body-sidebar-open');

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

if (e.target.classList.contains('reflection-textarea') || e.target.hasAttribute('contenteditable')) {


Quick verification that all the key pieces landed:


Bash

Verify all key additions are present


74:        .progress-track { display: flex; gap: 5px; margin: -8px 0 18px 0; }
86:        .card-header { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; user-select: none; padding: 2px 0; }
87:        .card-header:hover .title-text { color: #3d0560; }
89:        .card-header.open .card-chevron { transform: rotate(90deg); }
90:        .card-body { display: none; margin-top: 10px; }
91:        .card-body.open { display: block; }
131:        .save-btn.saved-done { background: #10B981; }
132:        .save-btn.saved-done:hover { background: #059669; }
189:            <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>
237:

246:

255:

264:

311:        localStorage.setItem('apex_std5_v6', JSON.stringify(state));
327:                ${isCustom ? `<button class="delete-btn" onclick="if(confirm('Delete this artifact?')){this.closest('.sprint-card').remove(); saveToStorage(); updateProgress('${col}');}">✕ Delete</button>` : ''}
330:

338:

352:                        <button class="save-btn ${isDone ? 'saved-done' : ''}" onclick="markDone(this, '${col}')">${isDone ? '✓ Done' : 'Done'}</button>
360:    function toggleCard(headerEl) {
361:        const body = headerEl.closest('.sprint-card').querySelector('.card-body');
367:    function markDone(btn, col) {
372:        btn.classList.toggle('saved-done', isNowDone);
374:        updateProgress(col);
377:    function updateProgress(col) {
467:    document.getElementById('sidebarToggle').addEventListener('click', toggleSidebar);
473:        const saved = localStorage.getItem('apex_std5_v6') || oldSave;
487:            updateProgress(col);


Everything's in. Here's what changed:

- **Collapsible cards** — each card now has a chevron header that toggles the body open/closed, matching Standard1 exactly
- **Progress pips** — 5-pip progress track under each column title, colored to match each column's accent (cyan, purple, amber, green)
- **Persistent done state** — the Done button now stays green and drives the pip count; state survives page reloads
- **Work Queue sidebar** — added the 📌 Queue button and sidebar panel to match Standard1 (it shares the same `apex_work_queue` localStorage key so bookmarks from either page appear in both)
- **localStorage migration** — on first load the new version (`apex_std5_v6`) falls back to the old save (`apex_std5_v5`) so no existing student data is lost