Add website content pages to workspace, pin harness 25e7e15

Copy raw HTML templates into workspace/website/ for the model
to reference. No transformation — the model reads HTML as-is.
Updated harness handles .html extensions and subdirectory lookup.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

requirements.txt

@@ -1,6 +1,6 @@
 click>=8.1
 litellm @ git+https://github.com/BerriAI/litellm.git
-a-simple-llm-harness @ git+https://github.com/chuckfinca/a-simple-llm-harness.git@6327854
+a-simple-llm-harness @ git+https://github.com/chuckfinca/a-simple-llm-harness.git@25e7e15
 e2b-code-interpreter>=2.5
 huggingface-hub
 python-dotenv

workspace/website/a-simple-auth-kit.html

@@ -0,0 +1,267 @@
+{% extends "base.html" %}
+
+{% block title %}ASimpleAuthKit Case Study - Charles Feinn // AppSimple{% endblock %}
+
+{% block content %}
+<div class="back-navigation">
+    <a href="/portfolio" class="back-link">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="back-arrow">
+        <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      <span>Back to Portfolio</span>
+    </a>
+</div>
+
+<!-- Case Study Header -->
+<div class="case-study-header">
+    <h1 class="page-title mb-md">Case Study: ASimpleAuthKit</h1>
+
+    <!-- Title and description at the top -->
+    <div class="app-description">
+        <h2 class="app-title mb-sm">Production-Ready iOS Authentication Library</h2>
+        <p class="page-intro">A comprehensive Swift Package that simplifies Firebase Authentication integration for iOS apps, providing SwiftUI-friendly APIs, biometric authentication, account linking, and enterprise-grade security features.</p>
+    </div>
+
+    <!-- Package/Library Icon and Metadata -->
+    <div class="metadata-container">
+        <!-- Library icon -->
+        <div class="app-icon-container">
+            <div class="placeholder-icon" style="font-size: 1.5rem; font-weight: 600; background-color: var(--primary-light); color: var(--primary);">Auth</div>
+        </div>
+
+        <!-- Compact metadata grid -->
+        <div class="project-metadata-grid">
+            <div class="metadata-column">
+                <div class="metadata-label">Project Type:</div>
+                <div class="metadata-value">iOS Framework / Swift Package</div>
+            </div>
+            <div class="metadata-column">
+                <div class="metadata-label">Platform:</div>
+                <div class="metadata-value">iOS 16.0+</div>
+            </div>
+            <div class="metadata-column">
+                <div class="metadata-label">Technology Stack:</div>
+                <div class="metadata-value">Swift, Firebase SDK, SwiftUI</div>
+            </div>
+            <div class="metadata-column">
+                <div class="metadata-label">Timeline:</div>
+                <div class="metadata-value">1 month (iterative development)</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- The Challenge -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
+            </div>
+            <h3>The Challenge</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>Firebase Authentication is powerful but was designed in an era before SwiftUI and modern Swift concurrency. This creates a significant architectural mismatch for modern iOS apps. After building several applications with it, I repeatedly encountered the same pain points:</p>
+            
+            <ul class="service-list">
+                <li><strong>Architectural Mismatch with SwiftUI</strong>: Firebase's imperative, singleton-based APIs are fundamentally incompatible with SwiftUI's declarative, state-driven nature. This forces developers to write complex, bug-prone bridging code.</li>
+                <li><strong>"Callback Hell"</strong>: The SDK relies heavily on nested completion handlers (callbacks), which are difficult to reason about and lead to unmaintainable code, a problem that modern <code>async/await</code> is designed to solve.</li>
+                <li><strong>Account Linking Complexity</strong>: The multi-step account linking flow is managed through callbacks and global state, making it extremely difficult to represent cleanly in a SwiftUI view hierarchy.</li>
+                <li><strong>Untestable by Design</strong>: The heavy use of global singletons (<code>Auth.auth()</code>) makes the SDK nearly impossible to mock, preventing isolated and reliable unit testing of an app's authentication logic.</li>
+                <li><strong>Generic Error UX</strong>: Firebase returns cryptic error codes (e.g., <code>invalid-credential</code>) that confuse users instead of guiding them toward a solution.</li>
+            </ul>
+            
+            <p>The goal was to create a modern <strong>adapter</strong> or <strong>bridge</strong>—a reusable library that translates Firebase's difficult APIs into a system that feels truly native to SwiftUI and Swift Concurrency.</p>
+        </div>
+    </div>
+</div>
+
+<!-- My Approach -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
+            </div>
+            <h3>My Approach</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>I designed ASimpleAuthKit to act as a sophisticated <strong>bridge between two worlds</strong>: the imperative Firebase SDK and the declarative SwiftUI framework. The approach was centered on developer experience, production readiness, and comprehensive testability.</p>
+            
+            <h4 class="mt-md mb-sm">Architecture Strategy:</h4>
+            <ul class="service-list">
+                <li><strong>The SwiftUI Bridge</strong>: The library's primary role is to serve as an adapter. It consumes Firebase's complex, callback-based operations and exposes them through a clean, state-driven <code>ObservableObject</code>, which is the cornerstone of state management in SwiftUI.</li>
+                <li><strong>State-Driven by Default</strong>: Instead of forcing developers to track scattered boolean flags (<code>isAuthenticating</code>, <code>isSignedIn</code>, <code>showError</code>), the library models everything as a single, comprehensive <code>AuthState</code> enum. This allows the entire UI to be driven by a simple <code>switch</code> statement.</li>
+                <li><strong>Protocol-Oriented Decoupling</strong>: Used dependency injection and protocols (<code>FirebaseAuthClientProtocol</code>, etc.) to completely isolate the core logic from Firebase singletons. This was the key to making the system 100% testable.</li>
+                <li><strong>Modern Concurrency Transformation</strong>: Aggressively wrapped all of Firebase's legacy completion handlers in modern <code>async/await</code> functions. This eliminates callback hell, simplifies error handling, and makes the asynchronous code vastly more readable and maintainable.</li>
+            </ul>
+
+            <h4 class="mt-md mb-sm">Production Features:</h4>
+            <ul class="service-list">
+                <li><strong>Biometric Authentication</strong>: Complete Face ID/Touch ID implementation with secure keychain storage.</li>
+                <li><strong>Account Linking Automation</strong>: Handles complex Firebase account linking flows transparently.</li>
+                <li><strong>Keychain Access Groups</strong>: Support for sharing authentication state between multiple apps.</li>
+                <li><strong>User-Centric Error Handling</strong>: Translates cryptic Firebase codes into helpful, actionable messages for end-users.</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- Technical Implementation -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                 <svg class="icon expertise-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+            </div>
+            <h3>Technical Implementation</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>The library's architecture balances simplicity for the consumer with sophisticated internal functionality. The core is the <code>AuthService</code>, which manages a state machine driven by the <code>AuthState</code> enum.</p>
+            
+            <h4 class="mt-md mb-sm">The State Machine Core:</h4>
+            <p>By defining every possible state, UI development becomes a simple matter of responding to the current state, which is published automatically.</p>
+            <pre style="background-color: var(--neutral-50); padding: var(--space-sm); border-radius: var(--radius-sm); font-size: 0.85rem; overflow-x: auto;">
+public enum AuthState: Equatable, Sendable {
+    case signedOut
+    case authenticating(String?)
+    case signedIn(AuthUser)
+    case requiresBiometrics
+    case requiresAccountLinking(email: String, attemptedProviderId: String?)
+    case emailInUseSuggestSignIn(email: String)
+    case requiresMergeConflictResolution
+}</pre>
+            
+            <h4 class="mt-md mb-sm">Automated Account Linking:</h4>
+            <p>This flow is one of the most complex parts of Firebase Auth, and the library fully automates it:</p>
+            <ul class="service-list">
+                <li>When a sign-in fails with <code>account-exists-with-different-credential</code>, the library catches the error and stores the pending credential.</li>
+                <li>It transitions the state to <code>.requiresAccountLinking</code>, providing the UI with the necessary context (email and provider).</li>
+                <li>The app's UI prompts the user to sign in with their existing method (e.g., Google).</li>
+                <li>Upon successful re-authentication, <code>AuthService</code> automatically retrieves the stored credential and calls Firebase's <code>link(with:)</code> function.</li>
+                <li>The final state is <code>.signedIn</code>, with the user's account now linked to both providers, all handled transparently.</li>
+            </ul>
+            
+            <h4 class="mt-md mb-sm">Secure Biometric Authentication:</h4>
+            <ul class="service-list">
+                <li><strong><code>BiometricController</code></strong>: A dedicated controller that manages user preferences for biometrics.</li>
+                <li><strong><code>SecureStorageProtocol</code></strong>: An abstraction over <code>KeychainStorage</code> that securely stores the last authenticated user's ID, associating the biometric preference with a specific account on the device.</li>
+                <li><strong>Client-Controlled Policy</strong>: The library provides the <em>capability</em> but lets the consuming app decide <em>when</em> to require biometrics (e.g., on app launch), giving developers full control over the user experience.</li>
+            </ul>
+            
+            <h4 class="mt-md mb-sm">Test-Driven Architecture:</h4>
+            <ul class="service-list">
+                <li><strong><code>MockFirebaseAuthenticator</code> & <code>MockFirebaseAuthClient</code></strong>: Complete mock implementations of all Firebase-interacting protocols.</li>
+                <li><strong>Behavioral Simulation</strong>: Mocks can be configured to return specific users or errors, allowing for testing of every path, including complex ones like account linking and merge conflicts.</li>
+                <li><strong>State Transition Verification</strong>: Tests (<code>AuthServiceTests.swift</code>) verify every state transition, ensuring the UI will always behave predictably. For example, <code>testCreateAccountWithEmail_Failure_EmailAlreadyInUse_setsStateToEmailInUseSuggestSignIn</code>.</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- Results & Impact -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
+            </div>
+            <h3>Results & Impact</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>ASimpleAuthKit successfully transforms Firebase authentication from a major integration hurdle into a streamlined, plug-and-play experience.</p>
+            
+            <!-- Key Metrics -->
+            <div class="about-stats mt-md">
+                <div class="stat-item">
+                    <div class="stat-number">95%+</div>
+                    <div class="stat-label">Test Coverage</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number">2-3 Weeks</div>
+                    <div class="stat-label">Avg. Dev Time Saved Per Project</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number">7</div>
+                    <div class="stat-label">Critical Auth States Managed</div>
+                </div>
+            </div>
+            
+            <p class="mt-md">The library's impact is significant:</p>
+            <ul class="service-list">
+                <li><strong>Drastically Simplified Integration</strong>: Reduced Firebase auth setup from weeks of complex, error-prone work to just a few hours of configuration.</li>
+                <li><strong>Enhanced Security</strong>: Provides a robust biometric authentication layer with secure keychain management, a feature not offered natively by Firebase.</li>
+                <li><strong>Superior User Experience</strong>: Replaces confusing technical errors with clear, actionable guidance, reducing user frustration and support requests.</li>
+                <li><strong>Unprecedented Reliability</strong>: The protocol-based architecture and comprehensive test suite ensure robust, predictable behavior across all authentication scenarios.</li>
+                <li><strong>Increased Developer Productivity</strong>: The SwiftUI-native API and automated complex flows allow developers to focus on building features, not authentication boilerplate.</li>
+            </ul>
+            
+            <div class="testimonial">
+                <div class="testimonial-content">The decision to extract authentication logic into this reusable library has paid dividends. What once required weeks of careful Firebase integration now takes an afternoon to implement, with better security and a more polished user experience than our previous custom implementations.</div>
+                <div class="testimonial-author">— Internal Project Assessment</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Usage Example -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
+            </div>
+            <h3>Usage Example</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>The result of this architecture is code that is clean, declarative, and idiomatic to SwiftUI. ASimpleAuthKit completely hides the underlying complexity, boilerplate, and architectural mismatch of the Firebase SDK.</p>
+            
+            <h4 class="mt-md mb-sm">Declarative UI Driven by State:</h4>
+            <pre style="background-color: var(--neutral-50); padding: var(--space-md); border-radius: var(--radius-sm); font-size: 0.8rem; overflow-x: auto;">
+// The 'authService' object handles all the complex Firebase logic internally.
+// The view only needs to react to its simple '.state' property.
+
+struct LoginView: View {
+    @StateObject private var authService = AuthService(config: AuthConfig())
+    
+    var body: some View {
+        switch authService.state {
+        case .signedOut:
+            // Show the login form
+            loginForm
+        case .authenticating(let message):
+            // Show a loading indicator
+            ProgressView(message ?? "Authenticating...")
+        case .signedIn(let user):
+            // Show the main app content
+            Text("Welcome, \(user.displayName ?? "User")!")
+        case .requiresAccountLinking(let email, _):
+            // Show a dedicated UI to handle linking
+            accountLinkingPrompt(email: email)
+        // ... other states
+        }
+    }
+    // ... (form implementation)
+}</pre>
+        </div>
+    </div>
+</div>
+
+
+<!-- GitHub Link -->
+<div class="index-cta mt-xl">
+    <h3 class="mb-sm">Explore the Implementation</h3>
+    <p class="mb-md">ASimpleAuthKit is a powerful example of how thoughtful architecture can solve complex, recurring problems in mobile development.</p>
+    <a href="https://github.com/chuckfinca/ASimpleAuthKit" class="cta-button" target="_blank" rel="noopener">
+        View Project on GitHub
+    </a>
+</div>
+
+<!-- CTA for services -->
+<div class="process-cta">
+    <h3>Need a robust, secure mobile application?</h3>
+    <p>My experience building production-grade systems like ASimpleAuthKit enables me to architect and implement secure, user-friendly, and highly testable mobile applications. Whether you need sophisticated Firebase integration, custom security flows, or a scalable app architecture, I can build a solution that prioritizes quality and long-term maintainability.</p>
+    <a href="/contact" class="process-cta-button">Discuss Your Project</a>
+</div>
+{% endblock %}

workspace/website/about.html

@@ -0,0 +1,165 @@
+{% extends "base.html" %}
+
+{% block title %}About - About Charles Feinn // AppSimple{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="/assets/css/pages/about.css" />
+{% endblock %}
+
+{% block content %}
+<!-- About Section -->
+<h1 class="page-title">About</h1>
+                    
+<!-- Image and Intro Container -->
+<div class="about-intro-container">
+    <div class="about-personal-photo-container">
+        <img src="/assets/images/charles.jpeg" alt="Charles Feinn" class="about-personal-photo">
+    </div>
+    <div class="about-intro-text">
+        <p class="page-intro">Hi, I'm Charles Feinn, the engineer behind AppSimple. I specialize in building practical AI solutions and user-focused mobile applications.</p>
+    </div>
+</div>
+
+<!-- My Journey -->
+<h2 class="section-heading">My Path to Practical AI</h2>
+<p>My route to combining mobile development and applied AI wasn't conventional, but it was driven by a consistent theme: a fascination with how complex systems connect, interact, and learn. This started early, leading me to co-found a music technology company focused on online collaboration back in the MySpace era – essentially, a social network with embedded audio editing tools.</p>
+
+<p>When the iPhone arrived, I saw the next evolution of connection and interaction. I dove headfirst into mobile, teaching myself Objective-C and dedicating years to building native applications. This period wasn't just about coding; it was an intense education in creating technology that was intuitive, reliable, and genuinely solved problems for users. It ingrained a discipline of practical, user-centered implementation.</p>
+
+<p>Yet, that underlying fascination with learning systems never waned. As AI and Machine Learning matured, I recognized it as the culmination of my interests – a powerful way to build systems that could truly adapt and learn. It felt like the missing piece I'd been searching for since my earliest explorations into network dynamics.</p>
+
+<p>Today, AppSimple exists at the intersection of these experiences. I bring the practical discipline of building polished mobile applications to the potential of applied AI. My goal isn't just to implement the latest AI techniques, but to do so in a way that's grounded, effective, and delivers tangible value – informed by years of making technology work in the real world.</p>
+
+<!-- Expertise Stats Section -->
+<h2 class="section-heading">Experience Highlights</h2>
+
+<div class="about-stats">
+    <div class="stat-item">
+        <div class="stat-number">11+</div>
+        <div class="stat-label">Years of Mobile Development</div>
+    </div>
+    
+    <div class="stat-item">
+        <div class="stat-number">1.3M+</div>
+        <div class="stat-label">App Installations</div>
+    </div>
+    
+    <div class="stat-item">
+        <div class="stat-number">3+</div>
+        <div class="stat-label">Years of AI Focus & Development</div>
+    </div>
+</div>
+
+<!-- My Approach Section with Lucide Icons -->
+<h2 class="section-heading">My Approach</h2>
+<p class="section-intro">I believe in the power of technology to solve real business problems, but I'm also pragmatic about its limitations. My approach is built on three core principles that apply equally to mobile development and applied AI:</p>
+
+<div class="expertise-item">
+    <div class="expertise-icon-container">
+        <svg class="icon expertise-icon" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
+            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+            <polyline points="22 4 12 14.01 9 11.01"></polyline>
+        </svg>
+    </div>
+    <div class="expertise-content">
+        <h3>Practicality First</h3>
+        <p>I focus on solutions that deliver tangible results, not theoretical possibilities. Every implementation is designed to solve specific business problems efficiently, whether it's a mobile app or AI system.</p>
+    </div>
+</div>
+
+<div class="expertise-item">
+    <div class="expertise-icon-container">
+        <svg class="icon expertise-icon" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="12" y1="16" x2="12" y2="12"></line>
+            <line x1="12" y1="8" x2="12.01" y2="8"></line>
+        </svg>
+    </div>
+    <div class="expertise-content">
+        <h3>Clear Communication</h3>
+        <p>I translate complex technical concepts into plain language, ensuring you always understand what's possible, what's not, and why certain approaches are recommended. This is especially important when working with emerging AI technologies.</p>
+    </div>
+</div>
+
+<div class="expertise-item">
+    <div class="expertise-icon-container">
+        <svg class="icon expertise-icon" viewBox="0 0 24 24">
+            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+            <circle cx="9" cy="7" r="4"/>
+            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+        </svg>
+    </div>
+    <div class="expertise-content">
+        <h3>Long-term Partnership</h3>
+        <p>I don't just deliver and disappear. My goal is to build a lasting relationship where I can continue to support your technology journey as your needs evolve and new capabilities become available.</p>
+    </div>
+</div>
+
+<!-- Expertise Section with Lucide Icons -->
+<h2 class="section-heading">Technical Expertise</h2>
+<p class="section-intro">My technical background spans several key areas:</p>
+
+<div class="expertise-item">
+    <div class="expertise-icon-container">
+        <svg class="icon expertise-icon" viewBox="0 0 24 24">
+            <rect x="5" y="2" width="14" height="20" rx="2" ry="2"/>
+            <line x1="12" y1="18" x2="12.01" y2="18"/>
+        </svg>
+    </div>
+    <div class="expertise-content">
+        <h3>Mobile Development</h3>
+        <p>Native iOS and Android development, cross-platform solutions, user experience design, and integrating mobile applications with business systems.</p>
+    </div>
+</div>
+
+<div class="expertise-item">
+    <div class="expertise-icon-container">
+        <svg class="icon expertise-icon" viewBox="0 0 24 24">
+            <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
+            <path d="m2 12 3.76-3.76a1 1 0 0 1 1.41 0L12 13.17l4.83-4.83a1 1 0 0 1 1.41 0L22 12"/>
+        </svg>
+    </div>
+    <div class="expertise-content">
+        <h3>Machine Learning & AI</h3>
+        <p>LLM evaluation frameworks, prompt engineering, custom ML pipelines, AI integration strategies, and intelligent document processing systems.</p>
+    </div>
+</div>
+
+<div class="expertise-item">
+    <div class="expertise-icon-container">
+        <svg class="icon expertise-icon" viewBox="0 0 24 24">
+            <path d="M5 22h14"/>
+            <path d="M5 2h14"/>
+            <path d="M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22"/>
+            <path d="M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"/>
+        </svg>
+    </div>
+    <div class="expertise-content">
+        <h3>Workflow Automation</h3>
+        <p>Design and implementation of automated processes that reduce manual effort and increase accuracy using AI tools and mobile solutions.</p>
+    </div>
+</div>
+
+<div class="expertise-item">
+    <div class="expertise-icon-container">
+        <svg class="icon expertise-icon" viewBox="0 0 24 24">
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+            <line x1="12" y1="8" x2="12" y2="16"/>
+            <line x1="8" y1="12" x2="16" y2="12"/>
+        </svg>
+    </div>
+    <div class="expertise-content">
+        <h3>Hybrid Solutions</h3>
+        <p>Creating systems that combine mobile interfaces with AI backends, integrating on-device AI features with mobile UX, and developing cross-platform hybrid applications.</p>
+    </div>
+</div>
+
+<!-- CTA Section -->
+<div class="process-cta">
+    <h3>Let's work together</h3>
+    <p>Whether you need a mobile application, an AI-powered solution, or a solution that combines both technologies, I'm here to help bring your vision to life with practical, user-focused technology.</p>
+    <a href="/contact" class="process-cta-button">Get in Touch</a>
+</div>
+</div>
+{% endblock %}

workspace/website/bodhimind.html

@@ -0,0 +1,313 @@
+{% extends "base.html" %}
+
+{% block title %}Bodhi Mind Case Study - Charles Feinn // AppSimple{% endblock %}
+
+{# No extra_css needed as case-study styles should be in main.css #}
+
+{% block content %}
+<div class="back-navigation">
+    <a href="/portfolio" class="back-link">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="back-arrow">
+        <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      <span>Back to Portfolio</span>
+    </a>
+  </div>
+<!-- Case Study Header with compact metadata -->
+<div class="case-study-header">
+    <h1 class="page-title mb-md">Case Study: Bodhi Mind</h1> {# Use h1 for main page title #}
+
+    <!-- Title and description at the top -->
+    <div class="app-description">
+    <h2 class="app-title mb-sm">Meditation Content Platform</h2> {# Use h2 for subtitle #}
+    <p class="page-intro">Developing a subscription-based mobile app with intelligent content organization for a renowned meditation teacher.</p> {# Use page-intro class #}
+    </div>
+
+    <!-- App icon and compact metadata grid in a row -->
+    <div class="metadata-container">
+    <!-- App icon on the left -->
+    <div class="app-icon-container">
+        {# *** UPDATED IMAGE PATH *** #}
+        <img src="/assets/images/bodhiMind.png" alt="Bodhi Mind Icon" class="app-icon">
+    </div>
+
+    <!-- Compact metadata grid to the right -->
+    <div class="project-metadata-grid">
+        <div class="metadata-column">
+        <div class="metadata-label">Client:</div>
+        <div class="metadata-value">Bodhipaksa (meditation teacher)</div>
+        </div>
+        <div class="metadata-column">
+        <div class="metadata-label">Platform:</div>
+        <div class="metadata-value">iOS</div>
+        </div>
+        <div class="metadata-column">
+        <div class="metadata-label">Timeline:</div>
+        <div class="metadata-value">4 months</div>
+        </div>
+        <div class="metadata-column">
+        <div class="metadata-label">Role:</div>
+        <div class="metadata-value">Lead Developer</div>
+        </div>
+    </div>
+    </div>
+</div>
+
+<!-- App Screenshots -->
+<div class="mb-lg">
+    <h3 class="section-heading mb-md">Project Results</h3> {# Use section-heading class #}
+    <div class="screenshots-grid">
+    {# *** UPDATED IMAGE PATHS *** #}
+    <img src="/assets/images/iPhone_BM_1.png" alt="Bodhi Mind screenshot" class="app-screenshot">
+    <img src="/assets/images/iPhone_BM_2.png" alt="Bodhi Mind screenshot" class="app-screenshot">
+    <img src="/assets/images/iPhone_BM_3.png" alt="Bodhi Mind screenshot" class="app-screenshot">
+    <img src="/assets/images/iPhone_BM_4.png" alt="Bodhi Mind screenshot" class="app-screenshot">
+    </div>
+</div>
+
+<!-- The Challenge -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
+                    <line x1="12" y1="17" x2="12.01" y2="17"/>
+                </svg>
+            </div>
+            <h3>The Challenge</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>Bodhipaksa, an established meditation teacher with over 200 recorded guided meditations, needed a way to make his extensive content library accessible to students worldwide. The existing solution—manually emailing MP3 files to customers—was inefficient and provided a poor user experience. The client faced several challenges:</p>
+            <ul class="service-list">
+                <li>Content organization: Hundreds of meditation files needed to be categorized and made easily searchable</li>
+                <li>Discoverability: Users needed help finding the most relevant meditations for their specific needs</li>
+                <li>Monetization: A sustainable subscription model was needed to support ongoing content creation</li>
+                <li>User experience: Users needed a simple interface that wouldn't distract from meditation practice</li>
+                <li>Content management: The client needed an easy way to upload new content to the app</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- The Approach -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+                </svg>
+            </div>
+            <h3>My Approach</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>After thorough discovery sessions with the client, I developed a comprehensive strategy that would address all their needs while creating an exceptional user experience:</p>
+            <h4 class="mt-md mb-sm">Content Strategy:</h4>
+            <p>I implemented a multi-dimensional tagging system for all meditation content, allowing users to find meditations by:</p>
+            <ul class="service-list">
+                <li>Category (type of meditation content)</li>
+                <li>Duration (short sessions to extended practices)</li>
+                <li>Album & Course (related meditations in structured programs)</li>
+                <li>Series (ongoing meditation series)</li>
+            </ul>
+            <h4 class="mt-md mb-sm">Development Approach:</h4>
+            <p>I adopted a user-centered, iterative approach with regular client feedback sessions. This ensured I was building exactly what was needed while maintaining flexibility to adapt the implementation as I learned more.</p>
+        </div>
+    </div>
+</div>
+
+<!-- Technical Implementation -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M16 18l6-6-6-6"/>
+                    <path d="M8 6l-6 6 6 6"/>
+                </svg>
+            </div>
+            <h3>Technical Implementation</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>To create a seamless experience for both users and the content creator, I developed a solution with several key components:</p>
+            <h4 class="mt-md mb-sm">iOS Native App:</h4>
+            <p>I built a native iOS application in Objective-C (this was right when Swift was coming out) that provides an intuitive interface for browsing and playing meditation content. The app includes:</p>
+            <ul class="service-list">
+                <li>Custom audio player with background play</li>
+                <li>Offline playback capabilities for downloaded content</li>
+                <li>List-view browsing options</li>
+                <li>Usage tracking</li>
+                <li>Favorites for easy content revisiting</li>
+            </ul>
+            <h4 class="mt-md mb-sm">Backend Infrastructure:</h4>
+            <p>I implemented a backend using Firebase to manage content, user data, and subscription management:</p>
+            <ul class="service-list">
+                <li>Firebase Realtime Database for application data</li>
+                <li>Firebase Storage for secure audio file storage</li>
+                <li>Firebase Analytics for basic usage insights</li>
+            </ul>
+            <h4 class="mt-md mb-sm">Content Management System:</h4>
+            <p>I set up a streamlined content management workflow using Google Sheets that allows the client to:</p>
+            <ul class="service-list">
+                <li>Upload new meditation recordings</li>
+                <li>Add and edit metadata and tags</li>
+                <li>Create curated meditation collections</li>
+                <li>View basic analytics on content popularity</li>
+            </ul>
+            <h4 class="mt-md mb-sm">Technologies Used:</h4>
+            <ul class="service-list">
+                <li>Objective-C and UIKit for iOS development</li>
+                <li>Firebase (Realtime Database, Storage, Analytics)</li>
+                <li>Apple StoreKit for subscription management</li>
+                <li>Google Sheets for content management</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- Results & Impact - UPDATED SECTION -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+                    <polyline points="22 4 12 14.01 9 11.01"/>
+                </svg>
+            </div>
+            <h3>Results & Impact</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>The Bodhi Mind app launched successfully and has achieved significant user engagement:</p>
+            <!-- Key Metrics -->
+            <div class="about-stats mt-md">
+                <div class="stat-item">
+                    <div class="stat-number">100K+</div>
+                    <div class="stat-label">Total meditation sessions</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number">13K+</div>
+                    <div class="stat-label">First-time users</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number">4.6</div>
+                    <div class="stat-label">App Store rating</div>
+                </div>
+            </div>
+            <p class="mt-md">Key technical achievements included:</p>
+            <ul class="service-list">
+                <li><strong>Complex audio streaming</strong> with reliable playback across variable network conditions</li>
+                <li><strong>Efficient offline storage</strong> enabling users to download meditations for offline use</li>
+                <li><strong>Full product lifecycle management</strong> from initial design through App Store deployment</li>
+            </ul>
+            <p>For the content creator, the platform delivered substantial benefits:</p>
+            <ul class="service-list">
+                <li>Global digital distribution reaching thousands of new students</li>
+                <li>Significantly reduced content management overhead</li>
+                <li>Sustainable subscription revenue to support ongoing content creation</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- Key Learnings -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M18 8h1a4 4 0 0 1 0 8h-1"/>
+                    <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/>
+                    <line x1="6" y1="1" x2="6" y2="4"/>
+                    <line x1="10" y1="1" x2="10" y2="4"/>
+                    <line x1="14" y1="1" x2="14" y2="4"/>
+                </svg>
+            </div>
+            <h3>Key Learnings</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>This project reinforced several important principles about developing content platforms:</p>
+            <h4 class="mt-md mb-sm">Content Organization:</h4>
+            <p>Working with a large meditation library highlighted the importance of:</p>
+            <ul class="service-list">
+                <li>Developing a comprehensive taxonomy before implementing the tagging system</li>
+                <li>Creating multiple entry points to content (categories, collections)</li>
+                <li>Balancing discoverability with simplicity in the user interface</li>
+            </ul>
+            <h4 class="mt-md mb-sm">Technical Architecture:</h4>
+            <p>This project reinforced my approach to building content platforms:</p>
+            <ul class="service-list">
+                <li>Firebase provided a rapid development experience for mobile-focused projects</li>
+                <li>Investing in content metadata infrastructure pays dividends for discoverability</li>
+                <li>Simple content management workflows often outperform complex systems for individual creators</li>
+            </ul>
+            <p>These learnings have informed my approach to subsequent content platform projects, including how I structure content organization and management workflows.</p>
+        </div>
+    </div>
+</div>
+
+<!-- If I Were Building This Today Section -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <circle cx="12" cy="12" r="10"/>
+                    <line x1="12" y1="8" x2="12" y2="12"/>
+                    <line x1="12" y1="16" x2="12.01" y2="16"/>
+                </svg>
+            </div>
+            <h3>If I Were Building This Today</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>The Bodhi Mind project successfully addressed the client's needs with the technologies available at the time. If I were building a similar meditation platform today, I would incorporate several AI capabilities to significantly enhance both the user experience and content management:</p>
+            <h4 class="mt-md mb-sm">Content Enhancement:</h4>
+            <ul class="service-list">
+                <li><strong>Automated Transcriptions and Captioning</strong> - AI would generate accurate transcripts of all meditations, improving accessibility and enabling text search of spoken content</li>
+                <li><strong>Automated Content Tagging</strong> - NLP systems could analyze meditation audio to automatically tag and categorize content by themes, techniques, and tone</li>
+                <li><strong>Language Expansion</strong> - Using voice cloning technology to offer meditations in multiple languages while preserving the guide's voice characteristics</li>
+                <li><strong>Content Summarization</strong> - Generating concise descriptions of longer meditations to help users quickly find relevant content</li>
+            </ul>
+            <h4 class="mt-md mb-sm">Personalization:</h4>
+            <ul class="service-list">
+                <li><strong>Intelligent Recommendations</strong> - Machine learning algorithms could analyze usage patterns and feedback to suggest meditations tailored to individual needs</li>
+                <li><strong>Mood-Based Suggestions</strong> - Sentiment analysis could identify appropriate content based on optional user mood input</li>
+                <li><strong>Time-of-Day Optimization</strong> - Pattern recognition to identify when different types of meditations are most effective for each user</li>
+                <li><strong>Adaptive Session Lengths</strong> - Algorithmically determining optimal meditation durations for individual users</li>
+            </ul>
+            <h4 class="mt-md mb-sm">User Experience:</h4>
+            <ul class="service-list">
+                <li><strong>Voice-Controlled Navigation</strong> - Natural language processing for hands-free control, especially valuable during meditation</li>
+                <li><strong>Smart Notifications</strong> - Machine learning to determine optimal times for practice reminders based on user behavior</li>
+                <li><strong>Progress Insights</strong> - AI analysis of usage patterns to provide meaningful feedback on meditation progress</li>
+                <li><strong>Contextual Awareness</strong> - Using device sensors and calendar integration to suggest appropriate meditations for current situations</li>
+            </ul>
+            <p class="mt-md">These AI enhancements would transform a static content library into a dynamic, personalized meditation companion that adapts to each user's unique needs and practices. This represents the evolution I'm now bringing to new projects—combining strong content organization fundamentals with powerful AI capabilities to create more intelligent, responsive digital experiences.</p>
+        </div>
+    </div>
+</div>
+
+<!-- App Link -->
+<div class="index-cta mt-xl">
+    <h3 class="mb-sm">See the project in action</h3>
+    <p class="mb-md">Download Bodhi Mind and experience the results firsthand.</p>
+    {# *** Correct App Store Link *** #}
+    <a href="http://itunes.apple.com/app/id1260761658?uo=5&at=1l3vcSo" class="cta-button">
+        Download on App Store
+    </a>
+</div>
+
+<!-- CTA for services -->
+<div class="process-cta">
+    <h3>Need a content platform with advanced AI capabilities?</h3>
+    <p>My experience building content platforms like Bodhi Mind has shown me the immense potential for AI to transform these systems. Now I'm focused on implementing modern AI technologies to create even more intelligent, personalized content experiences. Let's discuss how I can help with your next project.</p>
+    <a href="/contact" class="process-cta-button">Get in Touch</a>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<!-- No page-specific JS needed for this case study -->
+{% endblock %}

workspace/website/contact.html

@@ -0,0 +1,66 @@
+{% extends "base.html" %}
+
+{% block title %}Contact - Charles Feinn // AppSimple{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="/assets/css/pages/contact.css" />
+{% endblock %}
+
+{% block content %}
+<!-- Contact Section -->
+<h1 class="page-title">Get in Touch</h1>
+<p class="page-intro">Ready to explore how AI can transform your business? Have questions about my services? I'd love to hear from you. Choose the method that works best for you.</p>
+
+<div class="contact-methods">
+    <div class="contact-method">
+        <div class="contact-icon-container">
+            <svg class="icon contact-icon" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
+                <rect x="2" y="4" width="20" height="16" rx="2"></rect>
+                <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
+            </svg>
+        </div>
+        <a href="mailto:charles@appsimple.io">charles@appsimple.io</a>
+    </div>
+
+    <div class="contact-method">
+        <div class="contact-icon-container">
+            <svg class="icon contact-icon" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
+                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
+                <rect x="2" y="9" width="4" height="12"></rect>
+                <circle cx="4" cy="4" r="2"></circle>
+            </svg>
+        </div>
+        <a href="https://linkedin.com/in/charlesfeinn" target="_blank">LinkedIn</a>
+    </div>
+</div>
+
+<h2 class="section-heading">Send a Message</h2>
+<p class="section-intro">Fill out the form below, and I'll get back to you within 24 hours.</p>
+
+<form id="contact-form" class="contact-form" action="https://formspree.io/f/xpwplpjw" method="POST">
+    <div class="form-group">
+        <label class="form-label" for="name">Name</label>
+        <input type="text" id="name" name="name" class="form-input" required>
+    </div>
+
+    <div class="form-group">
+        <label class="form-label" for="email">Email</label>
+        <input type="email" id="email" name="email" class="form-input" required>
+    </div>
+
+    <div class="form-group">
+        <label class="form-label" for="company">Company (Optional)</label>
+        <input type="text" id="company" name="company" class="form-input">
+    </div>
+
+    <div class="form-group">
+        <label class="form-label" for="message">How can I help?</label>
+        <textarea id="message" name="message" class="form-textarea" required></textarea>
+    </div>
+
+    <!-- Add a form status element that will be hidden by default -->
+    <div id="form-status" class="form-status" style="display: none;"></div>
+
+    <button type="submit" class="form-button">Send Message</button>
+</form>
+{% endblock %}

workspace/website/dspy-prompt-optimization.html

@@ -0,0 +1,269 @@
+{% extends "base.html" %}
+
+{% block title %}DSPy Prompt Optimization Case Study - Charles Feinn // AppSimple{% endblock %}
+
+{# No extra_css needed as case-study styles should be in main.css #}
+
+{% block content %}
+<div class="back-navigation">
+    <a href="/portfolio" class="back-link">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="back-arrow">
+        <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      <span>Back to Portfolio</span>
+    </a>
+</div>
+
+<!-- Case Study Header -->
+<div class="case-study-header">
+    <h1 class="page-title mb-md">Case Study: Automating LLM Prompt Optimization</h1>
+
+    <!-- Title and description at the top -->
+    <div class="app-description">
+        <h2 class="app-title mb-sm">Improving Benchmark Performance with DSPy</h2>
+        <p class="page-intro">An internal research project exploring programmatic prompt optimization using the DSPy framework to improve the performance of Llama 3.1 8B on the MMLU benchmark, surpassing manual prompt engineering efforts.</p>
+    </div>
+
+    <!-- Visual (Animation or Static Image) -->
+    <div class="mb-lg text-center"> {# Center the visual #}
+        <img src="/assets/images/dspy-mmlu-animation.svg" alt="DSPy Optimization Process Animation" style="max-width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-md);">
+    </div>
+
+    <!-- Metadata Grid -->
+    <div class="metadata-container">
+        <!-- Placeholder Icon (Optional - could use a generic AI/Optimization icon) -->
+        <div class="app-icon-container">
+            <img src="/assets/images/dspy_logo.png" alt="DSPy Logo" class="app-icon">
+        </div>
+
+        <!-- Compact metadata grid -->
+        <div class="project-metadata-grid">
+            <div class="metadata-column">
+                <div class="metadata-label">Project Type:</div>
+                <div class="metadata-value">Internal R&D / AI Engineering</div>
+            </div>
+            <div class="metadata-column">
+                <div class="metadata-label">Technology Focus:</div>
+                <div class="metadata-value">LLM Optimization, DSPy</div>
+            </div>
+            <div class="metadata-column">
+                <div class="metadata-label">Models Used:</div>
+                <div class="metadata-value">Llama 3.1 8B, GPT-4o-mini</div>
+            </div>
+             <div class="metadata-column">
+                <div class="metadata-label">Benchmark:</div>
+                <div class="metadata-value">MMLU</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- The Challenge -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                 <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
+                    <line x1="12" y1="17" x2="12.01" y2="17"/>
+                </svg>
+            </div>
+            <h3>The Challenge</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>Manually crafting effective prompts for Large Language Models (LLMs) is a time-consuming and often unreliable process. Subtle changes in wording can lead to significant variations in performance, making it difficult to consistently achieve optimal results.</p>
+            <p>In previous experiments (<a href="https://chuckfinca.github.io/machine_learnings/posts/24-10-03-challenges-in-reproducing-llm-evaluation-results/" target="_blank" rel="noopener noreferrer">see blog post</a>), manual attempts to reproduce Meta's published MMLU benchmark score (73.0 macro avg) for the Llama 3.1 8B model only yielded a score of 68.3. This significant gap highlighted the limitations of manual prompt engineering and the need for a more systematic, automated approach to unlock the model's full potential.</p>
+            <p>The core challenges were:</p>
+            <ul class="service-list">
+                <li>The inefficiency and inconsistency of manual prompt tuning.</li>
+                <li><!-- ADDITION: Time cost/scalability -->The significant time investment required for manual optimization, making it difficult to adapt quickly to new models or evolving requirements.</li>
+                <li>Difficulty in reaching state-of-the-art performance levels through trial-and-error.</li>
+                <li>The need for a reproducible and data-driven method for prompt optimization.</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- My Approach -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                 <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+                </svg>
+            </div>
+            <h3>My Approach</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>To address the limitations of manual prompting, I explored using DSPy, an open-source framework designed for programming LLMs rather than just prompting them. DSPy automates the process of finding effective prompts based on data.</p>
+            <p>My approach involved:</p>
+            <ul class="service-list">
+                <li><strong>Defining the Task Structure:</strong> Created a DSPy <code>Signature</code> to clearly define the inputs (subject, question, choices) and the desired constrained output (A, B, C, or D) for the MMLU task.</li>
+                <li><strong>Building a DSPy Program:</strong> Implemented a <code>ChainOfThought</code> module within DSPy to encourage reasoning, adding fallback logic to handle potential output formatting issues.</li>
+                <li><strong>Leveraging Data for Optimization:</strong> Utilized the MMLU development and validation datasets to train and evaluate different prompt candidates automatically.</li>
+                <li><strong>Automated Optimization:</strong> Employed the <code>MIPROv2</code> optimizer within DSPy. This involved using a powerful "teacher" model (GPT-4o-mini) to generate and refine instructions and few-shot examples for the target Llama 3.1 8B model.</li>
+                <li><strong>Objective Evaluation:</strong> Used <code>answer_exact_match</code> as the metric to guide the optimization process towards prompts that maximize accuracy.</li>
+            </ul>
+             <!-- REVISED GOAL STATEMENT -->
+             <p>The goal was not just to improve performance but also to validate DSPy as a tool for creating more efficient, systematic, and adaptable AI engineering workflows compared to manual trial-and-error.</p>
+        </div>
+    </div>
+</div>
+
+<!-- Technical Implementation -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M16 18l6-6-6-6"/>
+                    <path d="M8 6l-6 6 6 6"/>
+                </svg>
+            </div>
+            <h3>Technical Implementation</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>The implementation leveraged several key components within the Python ecosystem:</p>
+            <h4 class="mt-md mb-sm">Core Framework: DSPy</h4>
+             <ul class="service-list">
+                <li><strong><code>dspy.Signature</code> (<code>MMLUSignature</code>):</strong> Defined inputs (<code>subject</code>, <code>question</code>, <code>choices</code>) and a constrained <code>Literal['A', 'B', 'C', 'D']</code> output (<code>answer</code>) for clear task specification.</li>
+                <li><strong><code>dspy.Module</code> (<code>MMLUMultipleChoiceModule</code>):</strong> Wrapped a <code>dspy.ChainOfThought</code> predictor using the signature. Implemented temperature fallback logic to improve robustness against invalid model outputs.</li>
+                <li><strong><code>dspy.MIPROv2</code> Optimizer:</strong> Configured with <code>auto="medium"</code> settings, using GPT-4o-mini as both the <code>prompt_model</code> and <code>teacher_model</code> to generate optimized instructions and few-shot demonstrations.</li>
+                <li><strong><code>dspy.evaluate.answer_exact_match</code> Metric:</strong> Used to score prompt candidates during optimization based on accuracy.</li>
+                <li><strong><code>dspy.Evaluate</code>:</strong> Employed for the final evaluation on the held-out test set, running across all MMLU subjects.</li>
+            </ul>
+
+             <h4 class="mt-md mb-sm">Models & Data:</h4>
+             <ul class="service-list">
+                <li><strong>Target Model (<code>lm_task</code>):</strong> Meta's <code>meta-llama/Meta-Llama-3.1-8B-Instruct</code> accessed via Hugging Face (<code>dspy.HFModel</code>).</li>
+                <li><strong>Optimization Model (<code>lm_train</code>):</strong> OpenAI's <code>gpt-4o-mini</code> accessed via the OpenAI API (<code>dspy.OpenAI</code>).</li>
+                <li><strong>Dataset:</strong> <code>cais/mmlu</code> dataset loaded using Hugging Face <code>datasets</code> and formatted into <code>dspy.Example</code> objects using a custom preparation function (<code>prepare_mmlu_dataset</code>).</li>
+                <li><strong>Data Splits:</strong> MMLU 'dev' set used for training examples within optimization, 'validation' set used for scoring candidates during optimization, and 'test' set reserved for final, unbiased evaluation.</li>
+            </ul>
+
+             <h4 class="mt-md mb-sm">Environment:</h4>
+             <ul class="service-list">
+                 <li>Python environment with <code>dspy-ai</code>, <code>datasets</code>, and necessary dependencies.</li>
+                 <li>Execution primarily on Google Colab using GPU acceleration (A100).</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- Results & Impact -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                 <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+                    <polyline points="22 4 12 14.01 9 11.01"/>
+                </svg>
+            </div>
+            <h3>Results & Impact</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>The automated prompt optimization using DSPy yielded significant improvements over manual methods:</p>
+
+            <!-- Key Metrics -->
+            <div class="about-stats mt-md mb-lg">
+                <div class="stat-item">
+                    <div class="stat-number">68.3%</div>
+                    <div class="stat-label">Best Manual MMLU Score (Macro Avg)</div>
+                </div>
+                <div class="stat-item" style="background-color: var(--secondary-light);"> {# Use secondary color for emphasis #}
+                    <div class="stat-number" style="color: var(--secondary);">71.1%</div>
+                    <div class="stat-label">DSPy Optimized MMLU Score (Macro Avg)</div>
+                </div>
+                 <div class="stat-item">
+                    <div class="stat-number">+2.8 pts</div>
+                    <div class="stat-label">Improvement with DSPy</div>
+                </div>
+            </div>
+
+            <p>Key outcomes included:</p>
+            <ul class="service-list">
+                <li><strong>Performance Boost:</strong> Achieved a <strong>71.1% macro average</strong> MMLU score, a substantial <strong>+2.8 percentage point</strong> increase compared to the best manually engineered prompt (68.3%).</li>
+                <li><strong>Closing the Gap:</strong> The optimized score came significantly closer to Meta's published 73.0% score for the Llama 3.1 8B model.</li>
+                <li><!-- ADDITION: Efficiency --><strong>Efficiency Demonstrated:</strong> While not explicitly timed against the manual process in this project, the automated nature of DSPy inherently replaces hours of manual tuning with a programmatic, repeatable compilation step.</li>
+                 <li><strong>Validation of Technique:</strong> Confirmed the effectiveness of DSPy and programmatic prompting as a powerful tool for enhancing LLM performance on specific tasks.</li>
+            </ul>
+             <p>This internal project demonstrates the capability to leverage advanced frameworks like DSPy to systematically tune and optimize LLM behavior, leading to more effective and reliable AI solutions compared to relying solely on manual prompt adjustments.</p>
+        </div>
+    </div>
+</div>
+
+<!-- Key Learnings -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M18 8h1a4 4 0 0 1 0 8h-1"/>
+                    <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/>
+                    <line x1="6" y1="1" x2="6" y2="4"/>
+                    <line x1="10" y1="1" x2="10" y2="4"/>
+                    <line x1="14" y1="1" x2="14" y2="4"/>
+                </svg>
+            </div>
+            <h3>Key Learnings</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>This exploration into DSPy provided several valuable insights:</p>
+            <ul class="service-list">
+                <li><strong>DSPy's Power:</strong> Programmatic prompting frameworks like DSPy can significantly outperform manual prompt engineering, both in terms of final performance and efficiency.</li>
+                <li><strong>Letting Go:</strong> Effective use of DSPy involves defining the task structure (inputs/outputs) clearly and letting the framework optimize the details, rather than over-specifying instructions initially.</li>
+                 <li><strong>Importance of Data:</strong> High-quality training and validation data are crucial for guiding the optimization process effectively.</li>
+                <li><strong>Metric Alignment:</strong> Choosing the right evaluation metric (<code>answer_exact_match</code> in this case) directly impacts the quality of the optimized prompt.</li>
+                <li><!-- ADDITION: Adaptability/Future-proofing --><strong>Adaptability & Future-Proofing:</strong> DSPy's programmatic approach makes it significantly easier to re-optimize prompts when underlying models change (e.g., testing Llama 3.1 vs Llama 4). This modularity is crucial for staying current in the rapidly evolving LLM landscape and offers a more sustainable method than continuous manual re-tuning for each new model.</li>
+                <li><strong>Robustness Matters:</strong> Real-world LLM interactions require handling potential errors, such as invalid output formats, which necessitated adding fallback logic (like varying temperature).</li>
+                <li><strong>Community Value:</strong> Engaging with the DSPy community (like their Discord) proved invaluable for troubleshooting and understanding best practices.</li>
+            </ul>
+             <!-- REVISED CONCLUDING SENTENCE -->
+            <p>These learnings reinforce the value of systematic, data-driven approaches to LLM development and optimization, moving beyond simple prompt tweaking towards more robust and adaptable AI engineering.</p>
+        </div>
+    </div>
+</div>
+
+<!-- Applying This to Client Solutions -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+               <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <line x1="12" y1="5" x2="12" y2="19"></line>
+                    <polyline points="19 12 12 19 5 12"></polyline>
+                </svg>
+            </div>
+            <h3>Applying This to Client Solutions</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>While this project focused on a standard benchmark, the principles and techniques demonstrated are directly applicable to building high-performing, custom AI solutions for specific business problems. Leveraging DSPy allows for:</p>
+            <ul class="service-list">
+                 <!-- REVISED/ADDED BULLETS -->
+                <li><strong>Faster Development & Iteration:</strong> Automating prompt optimization significantly reduces the time spent on manual trial-and-error, allowing for quicker deployment, refinement, and adaptation of AI solutions.</li>
+                 <li><strong>Tailored Performance:</strong> Optimizing prompts specifically for a client's unique data and task ensures the AI solution performs optimally in their context.</li>
+                <li><strong>More Reliable Solutions:</strong> Building programs with clear signatures and metrics leads to more predictable and robust LLM behavior.</li>
+                 <li><strong>Model Agnosticism & Future-Proofing:</strong> Designing solutions with frameworks like DSPy facilitates easier swapping and testing of different underlying LLMs (from various providers like OpenAI, Anthropic, Meta, Mistral, or open-source models). Optimized prompts can be adapted or re-optimized for new, better, or more cost-effective models as they become available, protecting the client's investment.</li>
+                <li><strong>Focus on Value:</strong> By automating the tedious tuning process, engineering effort can be directed towards solving the core business problem and delivering tangible value.</li>
+            </ul>
+             <!-- REVISED CONCLUDING PARAGRAPH -->
+            <p>This modular and adaptable approach ensures clients aren't locked into a single provider and can benefit from the rapid advancements across the entire AI ecosystem.</p>
+        </div>
+    </div>
+</div>
+
+<!-- CTA for services -->
+<div class="process-cta">
+    <h3>Need to optimize AI performance for your business task?</h3>
+    <p>Getting the best results from LLMs requires more than just basic prompting. My expertise includes leveraging advanced frameworks like DSPy to systematically optimize AI performance for specific goals. Let's discuss how I can build a high-performing, reliable AI solution tailored to your unique challenges.</p>
+    <a href="/contact" class="process-cta-button">Discuss Your AI Project</a>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<!-- No additional JavaScript needed for this case study -->
+{% endblock %}

workspace/website/fot-recommender.html

@@ -0,0 +1,302 @@
+{% extends "base.html" %}
+
+{% block title %}FOT Intervention Recommender Case Study - Charles Feinn // AppSimple{% endblock %}
+
+{% block content %}
+<div class="back-navigation">
+    <a href="/portfolio" class="back-link">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="back-arrow">
+        <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      <span>Back to Portfolio</span>
+    </a>
+</div>
+
+<!-- Case Study Header -->
+<div class="case-study-header">
+    <h1 class="page-title mb-md">Case Study: Freshman On-Track Intervention Recommender</h1>
+
+    <!-- Title and description at the top -->
+    <div class="app-description">
+        <h2 class="app-title mb-sm">AI-Powered Educational Intervention System</h2>
+        <p class="page-intro">A production-grade RAG (Retrieval-Augmented Generation) system that transforms student narratives into evidence-based intervention recommendations, helping educators systematically support at-risk 9th graders.</p>
+    </div>
+
+    <!-- Visual (Animation or Demo Screenshot) -->
+    <div class="mb-lg text-center">
+        <img src="/assets/images/fot-demo.svg" alt="FOT Recommender Interface" style="max-width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-md);">
+    </div>
+
+    <!-- Metadata Grid -->
+    <div class="metadata-container">
+        <!-- Project Icon -->
+        <div class="app-icon-container">
+            <div class="placeholder-icon" style="font-size: 1.5rem; font-weight: 600; background-color: var(--primary-light); color: var(--primary);">FOT</div>
+        </div>
+
+        <!-- Compact metadata grid -->
+        <div class="project-metadata-grid">
+            <div class="metadata-column">
+                <div class="metadata-label">Project Type:</div>
+                <div class="metadata-value">AI Engineering / EdTech</div>
+            </div>
+            <div class="metadata-column">
+                <div class="metadata-label">Technology Stack:</div>
+                <div class="metadata-value">Python, RAG, FAISS, Gemini</div>
+            </div>
+            <div class="metadata-column">
+                <div class="metadata-label">Deployment:</div>
+                <div class="metadata-value">Hugging Face Spaces</div>
+            </div>
+            <div class="metadata-column">
+                <div class="metadata-label">Timeline:</div>
+                <div class="metadata-value">5 days (PoC)</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- The Challenge -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
+                    <line x1="12" y1="17" x2="12.01" y2="17"/>
+                </svg>
+            </div>
+            <h3>The Challenge</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>Freshman year performance is the strongest predictor of high school graduation, yet educators often lack systematic tools to match at-risk 9th graders with evidence-based interventions. The challenge was creating a system that could bridge the gap between educational research and practical classroom application.</p>
+            <ul class="service-list">
+                <li><strong>Inconsistent Intervention Selection</strong>: Educators relied on intuition rather than proven best practices, leading to varied and potentially ineffective support</li>
+                <li><strong>Information Overload</strong>: Educational research was scattered across numerous documents, making it difficult for busy educators to quickly find relevant strategies</li>
+                <li><strong>Time Constraints</strong>: Teachers needed immediate, actionable guidance but lacked the time for extensive research</li>
+                <li><strong>Communication Barriers</strong>: Different stakeholders (teachers, parents, administrators) required recommendations tailored to their specific roles and perspectives</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- My Approach -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+                </svg>
+            </div>
+            <h3>My Approach</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>I designed a sophisticated RAG system to transform educational research into an intelligent, conversational interface. The approach centered on making evidence-based interventions immediately accessible and actionable, augmenting rather than replacing educator expertise.</p>
+            
+            <h4 class="mt-md mb-sm">Strategic Design Decisions:</h4>
+            <ul class="service-list">
+                <li><strong>Quality-First Data Strategy</strong>: Instead of building a complex PDF extraction pipeline, I manually curated a high-quality knowledge base from authoritative sources to guarantee maximum accuracy</li>
+                <li><strong>Semantic Chunking</strong>: Developed a concept-based chunking strategy that groups related interventions together, creating more meaningful and contextually rich data</li>
+                <li><strong>Persona-Based Generation</strong>: Implemented distinct prompt templates for teachers, parents, and principals, ensuring recommendations were appropriately tailored for each audience</li>
+                <li><strong>Evidence-Based Foundation</strong>: Grounded all recommendations in peer-reviewed research from organizations like Network for College Success and IES</li>
+            </ul>
+
+            <h4 class="mt-md mb-sm">AI-Human Collaboration Methodology:</h4>
+            <p>This project leveraged AI as a strategic co-pilot throughout development. I engaged multiple models in iterative dialogue to refine architecture and implementation decisions, while carefully managing conversational context to maintain high standards and drastically reduce hallucination, leading to better, more consistent code quality.</p>
+        </div>
+    </div>
+</div>
+
+<!-- Technical Implementation -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M16 18l6-6-6-6"/>
+                    <path d="M8 6l-6 6 6 6"/>
+                </svg>
+            </div>
+            <h3>Technical Implementation</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>The system was built with a modern Python stack and deployed as a live, interactive application. The architecture prioritizes accuracy, maintainability, and a clear path to production scaling.</p>
+            
+            <h4 class="mt-md mb-sm">Core RAG Architecture:</h4>
+            <ul class="service-list">
+                <li><strong>Knowledge Base</strong>: Built from 6 authoritative educational sources, manually curated into 27 high-relevance intervention chunks using semantic clustering</li>
+                <li><strong>Retrieval Engine</strong>: Utilizes the all-MiniLM-L6-v2 sentence transformer with FAISS vector database for efficient semantic search</li>
+                <li><strong>Generation Engine</strong>: Integrates Google's Gemini 1.5 Flash model with three distinct, persona-optimized prompt templates</li>
+                <li><strong>Quality Controls</strong>: Implements similarity score filtering to ensure only the most relevant evidence is used in recommendations</li>
+            </ul>
+            
+            <h4 class="mt-md mb-sm">Production Features:</h4>
+            <ul class="service-list">
+                <li><strong>Live Interactive Demo</strong>: Deployed on Hugging Face Spaces with Gradio interface and example scenarios</li>
+                <li><strong>Modern Python Stack</strong>: Python 3.12 with fast dependency management via uv, formatted with black and ruff</li>
+                <li><strong>Source Attribution</strong>: Full transparency with page numbers and relevance scores for all recommendations</li>
+                <li><strong>Secure Access</strong>: Protected demo environment with access key authentication</li>
+            </ul>
+            
+            <h4 class="mt-md mb-sm">Technologies Used:</h4>
+            <ul class="service-list">
+                <li>Python 3.12 with sentence-transformers and FAISS for retrieval</li>
+                <li>Google Gemini 1.5 Flash for natural language generation</li>
+                <li>Gradio for interactive web interface</li>
+                <li>Hugging Face Spaces for deployment and hosting</li>
+                <li>Comprehensive testing suite with pytest and quality tooling</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- Results & Impact -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+                    <polyline points="22 4 12 14.01 9 11.01"/>
+                </svg>
+            </div>
+            <h3>Results & Impact</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>The FOT Intervention Recommender successfully transforms scattered educational research into an intelligent, accessible tool that empowers educators with evidence-based guidance.</p>
+            
+            <!-- Key Metrics -->
+            <div class="about-stats mt-md">
+                <div class="stat-item">
+                    <div class="stat-number">27</div>
+                    <div class="stat-label">Curated Intervention Strategies</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number">6</div>
+                    <div class="stat-label">Authoritative Source Documents</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number">3</div>
+                    <div class="stat-label">Persona-Specific Output Types</div>
+                </div>
+            </div>
+            
+            <p class="mt-md">The system delivers significant value to educational stakeholders:</p>
+            <ul class="service-list">
+                <li><strong>Immediate Access to Best Practices</strong>: Transforms hours of research into seconds of targeted recommendations based on student narratives</li>
+                <li><strong>Improved Intervention Quality</strong>: Grounds recommendations in peer-reviewed research, moving beyond intuition-based decisions</li>
+                <li><strong>Enhanced Stakeholder Communication</strong>: Tailored outputs ensure teachers, parents, and administrators receive relevant, actionable guidance</li>
+                <li><strong>Complete Transparency</strong>: Full source attribution with page numbers and relevance scores builds trust and enables verification</li>
+                <li><strong>Scalable Architecture</strong>: Production-ready codebase with comprehensive testing enables easy expansion and deployment</li>
+            </ul>
+            
+            <div class="testimonial">
+                <div class="testimonial-content">This PoC successfully de-risked our primary technical questions. It proved that a RAG-based approach could deliver accurate, evidence-based results on this specialized knowledge domain, establishing a clear path to a production-ready tool.</div>
+                <div class="testimonial-author">— Internal Project Assessment</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Key Learnings -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M18 8h1a4 4 0 0 1 0 8h-1"/>
+                    <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/>
+                    <line x1="6" y1="1" x2="6" y2="4"/>
+                    <line x1="10" y1="1" x2="10" y2="4"/>
+                    <line x1="14" y1="1" x2="14" y2="4"/>
+                </svg>
+            </div>
+            <h3>Key Learnings</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>This project reinforced several important principles for building domain-specific AI systems:</p>
+            <ul class="service-list">
+                <li><strong>Quality Over Quantity</strong>: Manual curation of high-quality knowledge significantly outperformed automated extraction in accuracy and relevance</li>
+                <li><strong>Domain Expertise Matters</strong>: Understanding the educational context was crucial for designing effective chunking strategies and prompt templates</li>
+                <li><strong>User-Centric Design</strong>: Different stakeholders need different types of information presented in different ways—one size doesn't fit all</li>
+                <li><strong>Transparency Builds Trust</strong>: Providing source attribution and confidence scores was essential for adoption in high-stakes educational contexts</li>
+                <li><strong>AI as Co-Pilot</strong>: Using AI strategically throughout development accelerated progress while maintaining quality through careful context management</li>
+            </ul>
+            <p>These insights directly inform how I approach building AI systems for other knowledge-intensive domains where accuracy and trust are paramount.</p>
+        </div>
+    </div>
+</div>
+
+<!-- REVISED: From PoC to Production -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="12" y1="19" x2="12" y2="5"></line>
+                    <polyline points="5 12 12 5 19 12"></polyline>
+                </svg>
+            </div>
+            <h3>From PoC to Production: Next Steps</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>This proof-of-concept establishes a strong foundation. To evolve this tool into a robust, production-grade system, I would focus on the following key areas:</p>
+
+            <h4 class="mt-md mb-sm">1. Containerization & API Deployment</h4>
+            <p>Package the application into a formal REST API using FastAPI and containerize it with Docker. This enables deployment to a scalable, serverless platform like Google Cloud Run, ensuring high availability and cost-effective operation.</p>
+
+            <h4 class="mt-md mb-sm">2. Building the "Data Flywheel" for Evaluation</h4>
+            <p>True long-term value comes from learning and improving. I would implement an observability layer to capture input/output pairs. This data would then be used to:</p>
+            <ul class="service-list">
+                <li>Create a system for subject-matter experts (educators) to label and rate the quality of recommendations.</li>
+                <li>Establish a continuous evaluation pipeline to measure model performance against this "golden dataset," creating a data flywheel that drives ongoing improvements.</li>
+            </ul>
+
+            <h4 class="mt-md mb-sm">3. Enhancing System Modularity & Scalability</h4>
+            <p>To ensure the system is adaptable and future-proof, I would refactor the core logic to be more modular. This includes:</p>
+            <ul class="service-list">
+                <li>Abstracting the core components to easily swap out embedding models, generative models (e.g., GPT, Claude), or vector databases (e.g., Pinecone, Weaviate) to leverage the best technology as it evolves.</li>
+                <li>Developing more advanced data preparation and semantic chunking strategies to handle a larger and more diverse knowledge base.</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+
+<!-- REVISED: CTA Section with Live Demo and Notebook Links -->
+<div class="index-cta mt-xl">
+    <h3 class="mb-sm">Explore the Project</h3>
+    <p class="mb-md">
+        Dive into the technical implementation on GitHub, interact with the live demo, or review the original proof-of-concept notebook.
+    </p>
+    <div class="cta-buttons">
+        <a href="https://huggingface.co/spaces/chuckfinca/fot-recommender-api" class="cta-button" target="_blank" rel="noopener">
+            Launch Live Demo
+        </a>
+        <a href="https://github.com/chuckfinca/fot-intervention-recommender" class="cta-button-outline" target="_blank" rel="noopener">
+            View on GitHub
+        </a>
+    </div>
+    <p class="mt-md">
+        For a step-by-step technical walkthrough of the core retrieval logic, you can <a href="https://colab.research.google.com/github/chuckfinca/fot-intervention-recommender/blob/main/notebooks/fot_recommender_poc.ipynb" target="_blank" rel="noopener">explore the original proof-of-concept notebook</a>.
+    </p>
+    <p class="mt-sm" style="font-size: var(--text-xs); color: var(--neutral-500);">
+        <em>Note: The live demo is access-key protected to ensure a dedicated review experience. Please feel free to request access via the project's GitHub repository or by reaching out on my <a href="/contact">contact page</a>, and I'll be happy to provide a key.</em>
+    </p>
+</div>
+
+
+<!-- CTA for services -->
+<div class="process-cta">
+    <h3>Need an intelligent knowledge management system?</h3>
+    <p>My experience building domain-specific RAG systems like this one enables me to create AI solutions that transform complex knowledge into accessible, actionable guidance. Whether for education, healthcare, or business intelligence, I build systems that enhance human expertise with AI-powered insights.</p>
+    <a href="/contact" class="process-cta-button">Discuss Your AI Project</a>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<!-- No additional JavaScript needed for this case study -->
+{% endblock %}

workspace/website/guidedmind.html

@@ -0,0 +1,352 @@
+{% extends "base.html" %}
+
+{% block title %}Guided Mind Case Study - Charles Feinn // AppSimple{% endblock %}
+
+{# No extra_css needed as case-study styles should be in main.css #}
+
+{% block content %}
+<div class="back-navigation">
+    <a href="/portfolio" class="back-link">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="back-arrow">
+        <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      <span>Back to Portfolio</span>
+    </a>
+</div>
+
+<!-- Case Study Header -->
+<div class="case-study-header">
+    <h1 class="page-title mb-md">Case Study: Guided Mind</h1>
+    
+    <!-- Title and description at the top -->
+    <div class="app-description">
+        <h2 class="app-title mb-sm">Meditation Content Marketplace</h2>
+        <p class="page-intro">Building a cross-platform marketplace connecting multiple meditation teachers with a global audience through a curated content experience.</p>
+    </div>
+    
+    <!-- App icon and compact metadata grid in a row -->
+    <div class="metadata-container">
+        <!-- App icon on the left -->
+        <div class="app-icon-container">
+            <img src="/assets/images/guidedMind.png" alt="Guided Mind Icon" class="app-icon">
+        </div>
+
+        <!-- Compact metadata grid to the right -->
+        <div class="project-metadata-grid">
+            <div class="metadata-column">
+                <div class="metadata-label">Platform:</div>
+                <div class="metadata-value">iOS & Android</div>
+            </div>
+            <div class="metadata-column">
+                <div class="metadata-label">Timeline:</div>
+                <div class="metadata-value">6 months initial development</div>
+            </div>
+            <div class="metadata-column">
+                <div class="metadata-label">Role:</div>
+                <div class="metadata-value">Founder & Lead Developer</div>
+            </div>
+            <div class="metadata-column">
+                <div class="metadata-label">Partners:</div>
+                <div class="metadata-value">9 professional meditation guides</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- App Screenshots -->
+<div class="mb-lg">
+    <h3 class="section-heading mb-md">Project Results</h3>
+    <div class="screenshots-grid">
+        <img src="/assets/images/iPhone.png" alt="Guided Mind screenshot" class="app-screenshot">
+        <img src="/assets/images/iPhone_2.png" alt="Guided Mind screenshot" class="app-screenshot">
+        <img src="/assets/images/iPhone_3.png" alt="Guided Mind screenshot" class="app-screenshot">
+        <img src="/assets/images/iPhone_4.png" alt="Guided Mind screenshot" class="app-screenshot">
+    </div>
+</div>
+
+<!-- The Challenge -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
+                    <line x1="12" y1="17" x2="12.01" y2="17"/>
+                </svg>
+            </div>
+            <h3>The Challenge</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>At the time of Guided Mind's creation, meditation content was divided into two categories: single-creator apps with limited content variety, and subscription platforms with no clear attribution to individual teachers. I saw an opportunity to create a marketplace that would:</p>
+            
+            <ul class="service-list">
+                <li><strong>Connect multiple content creators</strong> with audiences under a unified platform</li>
+                <li><strong>Preserve teacher identity</strong> while maintaining a consistent user experience</li>
+                <li><strong>Create a sustainable business model</strong> for independent meditation teachers</li>
+                <li><strong>Reach both iOS and Android users</strong> with a high-quality experience</li>
+                <li><strong>Offer topic-specific purchases</strong> rather than forcing all-or-nothing subscriptions</li>
+            </ul>
+            
+            <p>The technical challenges were significant, requiring a multi-platform solution that could scale with both content volume and user base while maintaining a seamless experience across devices.</p>
+        </div>
+    </div>
+</div>
+
+<!-- My Approach -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+                </svg>
+            </div>
+            <h3>My Approach</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>I approached Guided Mind as both a technical and business challenge, with several key strategies:</p>
+            
+            <h4 class="mt-md mb-sm">Marketplace Strategy:</h4>
+            <ul class="service-list">
+                <li><strong>Content quality standards</strong> to ensure consistent quality while allowing each guide's unique voice</li>
+                <li><strong>Topic-based purchasing model</strong> allowing users to buy precisely the content they needed</li>
+                <li><strong>Revenue sharing agreements</strong> with content creators based on their content's performance</li>
+                <li><strong>Freemium model</strong> with 20+ free meditations to encourage platform adoption</li>
+            </ul>
+            
+            <h4 class="mt-md mb-sm">Technical Strategy:</h4>
+            <ul class="service-list">
+                <li><strong>Cross-platform development</strong> to reach both iOS and Android users</li>
+                <li><strong>Scalable content management system</strong> designed to handle hundreds of audio files</li>
+                <li><strong>Unified taxonomy and categorization system</strong> across all content creators</li>
+                <li><strong>Progressive content loading</strong> to prevent overwhelming users with too many options</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- Technical Implementation -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M16 18l6-6-6-6"/>
+                    <path d="M8 6l-6 6 6 6"/>
+                </svg>
+            </div>
+            <h3>Technical Implementation</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>Building a cross-platform marketplace for audio content presented unique technical challenges that required thoughtful solutions:</p>
+            
+            <h4 class="mt-md mb-sm">Mobile Applications:</h4>
+            <p>I developed native applications for both major platforms to ensure optimal performance and user experience:</p>
+            
+            <ul class="service-list">
+                <li><strong>iOS App</strong> - Built with Objective-C to provide a responsive, native feel for Apple users</li>
+                <li><strong>Android App</strong> - Developed using Java to reach the global Android user base</li>
+                <li><strong>Custom Audio Player</strong> - Created a reliable playback system with background capabilities</li>
+                <li><strong>Offline Access</strong> - Implemented efficient content download and storage system</li>
+                <li><strong>Platform-Specific UX</strong> - Tailored interfaces to follow platform design conventions</li>
+            </ul>
+            
+            <h4 class="mt-md mb-sm">Backend Systems:</h4>
+            <p>I designed a scalable infrastructure to support content distribution and marketplace operations:</p>
+            
+            <ul class="service-list">
+                <li><strong>Content Delivery</strong> - Optimized for both streaming and download performance</li>
+                <li><strong>User Account Management</strong> - Cross-platform authentication and purchase history</li>
+                <li><strong>Analytics System</strong> - Tracking usage patterns to guide content strategy</li>
+                <li><strong>Creator Dashboards</strong> - Providing content performance metrics to creators</li>
+            </ul>
+            
+            <h4 class="mt-md mb-sm">Content Management:</h4>
+            <p>I developed streamlined workflows for managing the diverse content library:</p>
+            
+            <ul class="service-list">
+                <li><strong>Audio Processing Pipeline</strong> - Standardizing audio quality across submissions</li>
+                <li><strong>Metadata System</strong> - Creating consistent categorization across creators</li>
+                <li><strong>Approval Workflow</strong> - Ensuring all content met quality standards</li>
+                <li><strong>Versioning System</strong> - Managing content updates without disrupting users</li>
+            </ul>
+            
+            <h4 class="mt-md mb-sm">Technologies Used:</h4>
+            <ul class="service-list">
+                <li>Objective-C and Java for native mobile development</li>
+                <li>Node.js for backend services</li>
+                <li>MongoDB for flexible content storage</li>
+                <li>AWS S3 for audio file storage</li>
+                <li>In-app purchase systems for both iOS and Android</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- Results & Impact -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+                    <polyline points="22 4 12 14.01 9 11.01"/>
+                </svg>
+            </div>
+            <h3>Results & Impact</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>Guided Mind has achieved significant success as a meditation content marketplace:</p>
+            
+            <!-- Key Metrics -->
+            <div class="about-stats mt-md">
+                <div class="stat-item">
+                    <div class="stat-number">295K+</div>
+                    <div class="stat-label">Total app installations</div>
+                </div>
+                
+                <div class="stat-item">
+                    <div class="stat-number">9</div>
+                    <div class="stat-label">Content creators onboarded</div>
+                </div>
+                
+                <div class="stat-item">
+                    <div class="stat-number">4.7</div>
+                    <div class="stat-label">App Store rating</div>
+                </div>
+            </div>
+            
+            <p class="mt-md">For meditation teachers, the platform provided:</p>
+            
+            <ul class="service-list">
+                <li>A turnkey digital distribution solution without technical overhead</li>
+                <li>Access to a global audience of meditation enthusiasts</li>
+                <li>Ongoing revenue from their content without managing subscriptions</li>
+                <li>Professional presentation of their work alongside respected peers</li>
+            </ul>
+            
+            <p>For users, Guided Mind offered unique benefits:</p>
+            
+            <ul class="service-list">
+                <li>Access to multiple teaching styles within a single application</li>
+                <li>Flexibility to purchase only content relevant to their specific needs</li>
+                <li>A consistent, high-quality user experience across both iOS and Android</li>
+                <li>Free content to experience different teachers before purchasing</li>
+            </ul>
+            
+            <div class="testimonial">
+                <div class="testimonial-content">"Guided Mind revolutionized how I distribute my meditation content. Before this platform, I was struggling with hosting my own website and handling payments. Now I can focus on what I do best—creating helpful guided meditations—while reaching a much larger audience."</div>
+                <div class="testimonial-author">— Glenda Cedarleaf, Meditation Guide & Platform Partner</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Key Learnings -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M18 8h1a4 4 0 0 1 0 8h-1"/>
+                    <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/>
+                    <line x1="6" y1="1" x2="6" y2="4"/>
+                    <line x1="10" y1="1" x2="10" y2="4"/>
+                    <line x1="14" y1="1" x2="14" y2="4"/>
+                </svg>
+            </div>
+            <h3>Key Learnings</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>Building and scaling Guided Mind provided valuable insights into creating successful content marketplaces:</p>
+            
+            <h4 class="mt-md mb-sm">Marketplace Dynamics:</h4>
+            <ul class="service-list">
+                <li><strong>Quality over quantity</strong> - Curating fewer high-quality contributors created more value than onboarding many mediocre ones</li>
+                <li><strong>Transparent creator relationships</strong> - Clear communication about platform expectations and revenue sharing built trust</li>
+                <li><strong>User-driven features</strong> - Listening to user feedback revealed unexpected feature priorities</li>
+                <li><strong>Flexible purchasing model</strong> - Topic-based purchases outperformed subscription models for specialized content</li>
+            </ul>
+            
+            <h4 class="mt-md mb-sm">Technical Architecture:</h4>
+            <ul class="service-list">
+                <li><strong>Platform-specific development</strong> - Native apps provided better user experience than cross-platform shortcuts</li>
+                <li><strong>Scalable content delivery</strong> - Designing for growth from the start prevented major refactoring later</li>
+                <li><strong>Metadata importance</strong> - Investing in robust metadata systems significantly improved content discovery</li>
+                <li><strong>Progressive implementation</strong> - Starting with core features and expanding based on usage patterns optimized development resources</li>
+            </ul>
+            
+            <p>These lessons have informed my approach to all subsequent platform development projects, particularly in how I balance technical implementation with business model considerations.</p>
+        </div>
+    </div>
+</div>
+
+<!-- If I Were Building This Today -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <circle cx="12" cy="12" r="10"/>
+                    <line x1="12" y1="8" x2="12" y2="12"/>
+                    <line x1="12" y1="16" x2="12.01" y2="16"/>
+                </svg>
+            </div>
+            <h3>If I Were Building This Today</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>If I were building a meditation content marketplace today, I would leverage AI to enhance several aspects of the platform:</p>
+            
+            <h4 class="mt-md mb-sm">Creator Experience:</h4>
+            <ul class="service-list">
+                <li><strong>Automated Content Preparation</strong> - AI tools to help creators enhance audio quality, add appropriate music beds, and optimize their recordings</li>
+                <li><strong>Content Tagging Assistance</strong> - NLP systems to suggest appropriate tags and categories based on content analysis</li>
+                <li><strong>Performance Analytics</strong> - ML-powered analytics showing which content elements resonate most with users</li>
+                <li><strong>Voice Expansion</strong> - Tools to help creators offer their content in multiple languages using AI voice translation</li>
+            </ul>
+            
+            <h4 class="mt-md mb-sm">Marketplace Intelligence:</h4>
+            <ul class="service-list">
+                <li><strong>Cross-Creator Recommendations</strong> - Sophisticated ML models to suggest content across different creators based on user preferences</li>
+                <li><strong>Content Gap Analysis</strong> - AI identification of underserved meditation topics or styles to guide creator content strategy</li>
+                <li><strong>Dynamic Pricing Optimization</strong> - ML-based price testing to maximize both creator revenue and user purchases</li>
+                <li><strong>Content Quality Verification</strong> - Automated systems to ensure consistent audio quality across all submissions</li>
+            </ul>
+            
+            <h4 class="mt-md mb-sm">User Experience:</h4>
+            <ul class="service-list">
+                <li><strong>Personalized Content Bundles</strong> - AI-curated collections of content from multiple creators based on individual user needs</li>
+                <li><strong>Voice-Guided Exploration</strong> - Conversational AI to help users find exactly the right meditation through natural dialogue</li>
+                <li><strong>Effectiveness Tracking</strong> - Integration with health data to provide insights on how different meditations affect sleep, heart rate, etc.</li>
+                <li><strong>Adaptive Session Sequencing</strong> - AI-designed meditation programs that adapt based on user progress and feedback</li>
+            </ul>
+            
+            <p class="mt-md">These AI-powered enhancements would transform a content marketplace into an intelligent wellness platform, creating more value for both creators and users while maintaining the core marketplace model that made Guided Mind successful.</p>
+        </div>
+    </div>
+</div>
+
+<!-- App Link -->
+<div class="index-cta mt-xl">
+    <h3 class="mb-sm">See the project in action</h3>
+    <p class="mb-md">Download Guided Mind and experience the results firsthand.</p>
+    <div class="flex flex-wrap justify-center gap">
+        <a href="http://itunes.apple.com/app/id672076838?uo=5&at=1l3vcSo" class="cta-button">
+            Download on App Store
+        </a>
+    </div>
+</div>
+
+<!-- CTA for services -->
+<div class="process-cta">
+    <h3>Need a multi-sided marketplace with AI capabilities?</h3>
+    <p>My experience building content marketplaces like Guided Mind has given me deep insights into connecting content creators with audiences. Now I'm focused on implementing AI technologies to make these connections even more powerful and personalized. Let's discuss how I can help with your next marketplace project.</p>
+    <a href="/contact" class="process-cta-button">Get in Touch</a>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<!-- No additional JavaScript needed for this case study -->
+{% endblock %}

workspace/website/livewire.html

@@ -0,0 +1,325 @@
+{% extends "base.html" %}
+
+{% block title %}WWOZ Livewire Case Study - Charles Feinn // AppSimple{% endblock %}
+
+{# No extra_css needed as case-study styles should be in main.css #}
+
+{% block content %}
+<div class="back-navigation">
+    <a href="/portfolio" class="back-link">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="back-arrow">
+        <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      <span>Back to Portfolio</span>
+    </a>
+  </div>
+<!-- Case Study Header with compact metadata -->
+<div class="case-study-header">
+    <h1 class="page-title mb-md">Case Study: WWOZ Livewire</h1>
+
+    <!-- Title and description at the top -->
+    <div class="app-description">
+    <h2 class="app-title mb-sm">New Orleans Music Calendar</h2>
+    <p class="page-intro">Creating a mobile guide to live local music in and around New Orleans, featuring venue and artist information from WWOZ's music calendar.</p>
+    </div>
+
+    <!-- App icon and compact metadata grid in a row -->
+    <div class="metadata-container">
+    <!-- App icon on the left -->
+    <div class="app-icon-container">
+        <img src="/assets/images/livewire.png" alt="WWOZ Livewire Icon" class="app-icon">
+    </div>
+
+    <!-- Compact metadata grid to the right -->
+    <div class="project-metadata-grid">
+        <div class="metadata-column">
+        <div class="metadata-label">Client:</div>
+        <div class="metadata-value">WWOZ New Orleans</div>
+        </div>
+        <div class="metadata-column">
+        <div class="metadata-label">Platform:</div>
+        <div class="metadata-value">iOS</div>
+        </div>
+        <div class="metadata-column">
+        <div class="metadata-label">Timeline:</div>
+        <div class="metadata-value">3 months</div>
+        </div>
+        <div class="metadata-column">
+        <div class="metadata-label">Role:</div>
+        <div class="metadata-value">Lead Developer</div>
+        </div>
+    </div>
+    </div>
+</div>
+
+<!-- App Screenshots -->
+<div class="mb-lg">
+    <h3 class="section-heading mb-md">Project Results</h3>
+    <div class="screenshots-grid">
+    <img src="/assets/images/iPhone_L_1.png" alt="Livewire screenshot" class="app-screenshot">
+    <img src="/assets/images/iPhone_L_2.png" alt="Livewire screenshot" class="app-screenshot">
+    <img src="/assets/images/iPhone_L_3.png" alt="Livewire screenshot" class="app-screenshot">
+    <img src="/assets/images/iPhone_L_4.png" alt="Livewire screenshot" class="app-screenshot">
+    </div>
+</div>
+
+<!-- The Challenge -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
+                    <line x1="12" y1="17" x2="12.01" y2="17"/>
+                </svg>
+            </div>
+            <h3>The Challenge</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>WWOZ, a renowned community radio station in New Orleans, needed a mobile solution to share their extensive "Livewire Music Calendar" with local and visiting music enthusiasts. The project presented several key challenges:</p>
+            <ul class="service-list">
+                <li><strong>Dynamic data presentation</strong>: Finding intuitive ways to organize and display hundreds of daily music events across the city</li>
+                <li><strong>Complex information architecture</strong>: Creating relationships between venues, artists, and performances</li>
+                <li><strong>Local navigation needs</strong>: Helping users discover music in New Orleans' unique geography</li>
+                <li><strong>Offline functionality</strong>: Ensuring the app remained useful while tourists were exploring without reliable data connections</li>
+                <li><strong>Preserving the WWOZ brand</strong>: Maintaining the station's distinctive community-focused identity in a digital format</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- The Approach -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+                </svg>
+            </div>
+            <h3>My Approach</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>After collaborative discovery sessions with the WWOZ team, I developed a user-centered approach focused on both tourists and locals:</p>
+            <h4 class="mt-md mb-sm">Experience Design:</h4>
+            <ul class="service-list">
+                <li><strong>Time-based navigation</strong>: Prioritizing "today's music" as the primary entry point for users</li>
+                <li><strong>Dual discovery paths</strong>: Allowing users to browse both by venue and by performer</li>
+                <li><strong>User preference tracking</strong>: Enabling users to follow favorite acts and learn about upcoming performances</li>
+                <li><strong>Rich content integration</strong>: Incorporating videos, social media links, and artist information</li>
+            </ul>
+            <h4 class="mt-md mb-sm">Development Approach:</h4>
+            <p>I leveraged a rapid development methodology with frequent stakeholder feedback loops to ensure the app met both user and client expectations:</p>
+            <ul class="service-list">
+                <li><strong>API-first implementation</strong>: Building a robust communication layer with WWOZ's calendar system</li>
+                <li><strong>Offline caching strategy</strong>: Designing a system that would store recent queries for offline use</li>
+                <li><strong>Performance optimization</strong>: Ensuring smooth scrolling and transitions despite large dataset</li>
+                <li><strong>Collaborative UI design</strong>: Working with WWOZ's designer to create an interface that felt true to the brand</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- Technical Implementation -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M16 18l6-6-6-6"/>
+                    <path d="M8 6l-6 6 6 6"/>
+                </svg>
+            </div>
+            <h3>Technical Implementation</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>Developing the WWOZ Livewire app required several technical solutions to address the project's unique requirements:</p>
+            <h4 class="mt-md mb-sm">iOS Native Development:</h4>
+            <p>I built a native iOS application to ensure the best possible performance and user experience:</p>
+            <ul class="service-list">
+                <li><strong>Custom calendar interface</strong> optimized for music events</li>
+                <li><strong>Location-aware venue discovery</strong> using CoreLocation</li>
+                <li><strong>Efficient caching system</strong> for offline browsing</li>
+                <li><strong>Dynamic list management</strong> for handling large datasets smoothly</li>
+                <li><strong>Optimized image handling</strong> for artist and venue photos</li>
+            </ul>
+            <h4 class="mt-md mb-sm">High-Performance Map Clustering:</h4>
+            <p>Rendering hundreds of venue pins on a map presented a significant performance challenge that required a custom solution:</p>
+            <ul class="service-list">
+                <li><strong>QuadTree clustering algorithm</strong> implemented from scratch to efficiently manage dense pin rendering</li>
+                <li><strong>Dynamic annotation grouping</strong> that clusters nearby venues at higher zoom levels</li>
+                <li><strong>Performance optimization</strong> enabling smooth map interaction despite large dataset</li>
+                <li><strong>Intuitive zoom behavior</strong> providing clear visual feedback as users explore New Orleans</li>
+            </ul>
+            <h4 class="mt-md mb-sm">Data Architecture:</h4>
+            <p>The app's data structure was carefully designed to handle the complex relationships between events, venues, and artists:</p>
+            <ul class="service-list">
+                <li><strong>Real-time API integration</strong> with WWOZ's events database</li>
+                <li><strong>Intelligent caching layer</strong> for both performance and offline access</li>
+                <li><strong>Custom search indexing</strong> for quick lookup by various criteria</li>
+                <li><strong>Favorite synchronization</strong> across app sessions</li>
+            </ul>
+            <h4 class="mt-md mb-sm">Media Integration:</h4>
+            <p>A key feature was connecting users with artists' content beyond just event listings:</p>
+            <ul class="service-list">
+                <li><strong>YouTube video integration</strong> for artist performances</li>
+                <li><strong>Social media profile linking</strong> to connect with artists</li>
+                <li><strong>Website deep linking</strong> for venues and performers</li>
+            </ul>
+            <h4 class="mt-md mb-sm">Technologies Used:</h4>
+            <ul class="service-list">
+                <li>Objective-C and UIKit for iOS development</li>
+                <li>REST API integration with caching layer</li>
+                <li>CoreLocation for mapping and proximity features</li>
+                <li>YouTube Player integration</li>
+                <li>Custom persistence layer for favorites</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- Results & Impact -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+                    <polyline points="22 4 12 14.01 9 11.01"/>
+                </svg>
+            </div>
+            <h3>Results & Impact</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>The WWOZ Livewire app successfully transformed how people discover live music in New Orleans:</p>
+            
+            <!-- Key Metrics -->
+            <div class="about-stats mt-md">
+                <div class="stat-item">
+                    <div class="stat-number">18K+</div>
+                    <div class="stat-label">App installations</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number">100+</div>
+                    <div class="stat-label">Venues featured</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number">4.5</div>
+                    <div class="stat-label">App Store rating</div>
+                </div>
+            </div>
+            
+            <p class="mt-md">For music venues and artists, the platform provided significant benefits:</p>
+            <ul class="service-list">
+                <li><strong>Increased visibility</strong> for smaller venues and up-and-coming artists</li>
+                <li><strong>Greater attendance</strong> at local music events, particularly from tourists</li>
+                <li><strong>Direct connection</strong> between performers and new audiences</li>
+                <li><strong>Promotion of New Orleans' rich musical heritage</strong> through a digital medium</li>
+            </ul>
+            
+            <p>For WWOZ, the app represented a successful extension of their mission:</p>
+            <ul class="service-list">
+                <li>Modernized their brand while maintaining their community focus</li>
+                <li>Expanded their reach beyond radio listeners to app users</li>
+                <li>Strengthened their position as the definitive source for New Orleans music information</li>
+                <li>Created a new digital touchpoint with their audience</li>
+            </ul>
+            
+            <div class="testimonial">
+                <div class="testimonial-content">"The Livewire app has been a game-changer for how visitors and locals alike discover live music in New Orleans. It puts the entire scene at their fingertips in a way that's true to the spontaneous, vibrant nature of our musical culture."</div>
+                <div class="testimonial-author">— WWOZ Station Representative</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Key Learnings -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M18 8h1a4 4 0 0 1 0 8h-1"/>
+                    <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/>
+                    <line x1="6" y1="1" x2="6" y2="4"/>
+                    <line x1="10" y1="1" x2="10" y2="4"/>
+                    <line x1="14" y1="1" x2="14" y2="4"/>
+                </svg>
+            </div>
+            <h3>Key Learnings</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>This project provided valuable insights into developing location-based event apps:</p>
+            <h4 class="mt-md mb-sm">User Experience Insights:</h4>
+            <ul class="service-list">
+                <li><strong>Contextual relevance is crucial</strong> - Users primarily wanted to know "what's happening tonight near me"</li>
+                <li><strong>Multiple discovery paths</strong> - Different user groups (tourists vs. locals, venue-focused vs. artist-focused) needed different navigation options</li>
+                <li><strong>Offline functionality matters</strong> - Visitors with limited data plans or in areas with poor reception still needed access to information</li>
+                <li><strong>Simplicity wins</strong> - Despite the complex data relationships, the interface needed to remain straightforward</li>
+            </ul>
+            <h4 class="mt-md mb-sm">Technical Learnings:</h4>
+            <ul class="service-list">
+                <li><strong>Data optimization is essential</strong> - Event apps require careful consideration of how to structure and cache data</li>
+                <li><strong>Location services add complexity</strong> - Map integration and geolocation features required additional performance considerations</li>
+                <li><strong>Content freshness balance</strong> - Finding the right balance between real-time updates and cached content</li>
+                <li><strong>Media integration tradeoffs</strong> - Incorporating rich media while maintaining performance required careful implementation</li>
+            </ul>
+            <p>These learnings have informed my approach to subsequent event and location-based applications, particularly in how I structure data and create contextually relevant user experiences.</p>
+        </div>
+    </div>
+</div>
+
+<!-- If I Were Building This Today Section -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <circle cx="12" cy="12" r="10"/>
+                    <line x1="12" y1="8" x2="12" y2="12"/>
+                    <line x1="12" y1="16" x2="12.01" y2="16"/>
+                </svg>
+            </div>
+            <h3>If I Were Building This Today</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>If I were developing the WWOZ Livewire app today, I would leverage several AI capabilities to significantly enhance the user experience:</p>
+            <h4 class="mt-md mb-sm">Personalized Recommendations:</h4>
+            <ul class="service-list">
+                <li><strong>Music Taste Prediction</strong> - Using machine learning to analyze user behavior and suggest events based on their musical preferences</li>
+                <li><strong>Smart Itinerary Creation</strong> - AI-powered tools to build optimized music crawls based on location, timing, and preferences</li>
+                <li><strong>Sentiment Analysis</strong> - Processing reviews and social media to highlight events generating the most positive buzz</li>
+                <li><strong>Personalized Notifications</strong> - ML models that learn when and how often to notify users about relevant events</li>
+            </ul>
+            <h4 class="mt-md mb-sm">Enhanced Discovery:</h4>
+            <ul class="service-list">
+                <li><strong>Music Style Classification</strong> - Automatically categorizing artists by genre and style based on audio samples and descriptions</li>
+                <li><strong>Similar Artist Suggestions</strong> - "If you like this artist, you might also enjoy..." recommendations</li>
+                <li><strong>Natural Language Search</strong> - Conversational interfaces to find events (e.g., "Find me jazz near Frenchmen Street tomorrow night")</li>
+                <li><strong>Image Recognition</strong> - Using venue photos to understand the atmosphere and match to user preferences</li>
+            </ul>
+            <h4 class="mt-md mb-sm">Content Enrichment:</h4>
+            <ul class="service-list">
+                <li><strong>Automated Artist Profiles</strong> - Using AI to gather and synthesize information about performers from across the web</li>
+                <li><strong>Music Preview Generation</strong> - Creating brief audio previews of an artist's style using generative AI</li>
+                <li><strong>Automated Event Summaries</strong> - Generating concise descriptions of events based on venue, performer, and historical data</li>
+                <li><strong>Cross-Platform Content Aggregation</strong> - Automatically collecting and featuring artist videos, reviews, and social media content</li>
+            </ul>
+            <p class="mt-md">These AI enhancements would transform what was initially a digital event calendar into an intelligent music concierge that understands each user's unique preferences and helps them discover exactly the right musical experiences in New Orleans. The technology would amplify the human element rather than replace it—making it easier for people to connect with the authentic cultural experiences the city has to offer.</p>
+        </div>
+    </div>
+</div>
+
+<!-- CTA for services -->
+<div class="process-cta">
+    <h3>Need a location-based or event discovery application?</h3>
+    <p>My experience creating intuitive event discovery apps like WWOZ Livewire has given me deep insights into developing location-aware applications that connect users with local experiences. Now I'm focused on implementing AI technologies to make these connections even more personalized and intelligent. Let's discuss how I can help with your next project.</p>
+    <a href="/contact" class="process-cta-button">Get in Touch</a>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<!-- No additional JavaScript needed for this case study -->
+{% endblock %}

workspace/website/llm-evaluation-prompting.html

@@ -0,0 +1,237 @@
+{% extends "base.html" %}
+
+{% block title %}LLM Evaluation & Prompt Engineering Case Study - Charles Feinn // AppSimple{% endblock %}
+
+{# No extra_css needed as case-study styles should be in main.css #}
+
+{% block content %}
+<div class="back-navigation">
+    <a href="/portfolio" class="back-link">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="back-arrow">
+        <path d="M19 12H5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M12 19L5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      <span>Back to Portfolio</span>
+    </a>
+</div>
+
+<!-- Case Study Header -->
+<div class="case-study-header">
+    <h1 class="page-title mb-md">Case Study: Building and Refining an LLM Evaluation System</h1>
+
+    <!-- Title and description at the top -->
+    <div class="app-description">
+        <h2 class="app-title mb-sm">Navigating MMLU Benchmarking Challenges</h2>
+        <p class="page-intro">An internal R&D project focused on developing a custom framework for evaluating Large Language Models (LLMs) against the MMLU benchmark, and subsequently investigating the complexities of prompt engineering and results reproducibility.</p>
+    </div>
+
+    <!-- Visual (Placeholder or relevant chart/diagram) -->
+    <div class="mb-lg text-center"> {# Center the visual #}
+        <img src="/assets/images/prompt-programming.svg" alt="DSPy Optimization Process Animation" style="max-width: 100%; height: 15rem; margin: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-md);">
+        {# Consider adding a caption if needed #}
+    </div>
+
+    <!-- Metadata Grid -->
+    <div class="metadata-container">
+         <!-- Placeholder Icon -->
+        <div class="app-icon-container">
+            <img src="/assets/images/guage.svg" alt="Evaluation icon" class="app-icon">
+        </div>
+
+        <!-- Compact metadata grid -->
+        <div class="project-metadata-grid">
+            <div class="metadata-column">
+                <div class="metadata-label">Project Type:</div>
+                <div class="metadata-value">Internal R&D / AI Engineering</div>
+            </div>
+            <div class="metadata-column">
+                <div class="metadata-label">Technology Focus:</div>
+                <div class="metadata-value">LLM Evaluation, Prompt Engineering</div>
+            </div>
+             <div class="metadata-column">
+                <div class="metadata-label">Core Tools:</div>
+                <div class="metadata-value">Python, Hugging Face, PyTorch</div>
+            </div>
+            <div class="metadata-column">
+                <div class="metadata-label">Model/Benchmark:</div>
+                <div class="metadata-value">Llama 3.1 8B / MMLU</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- The Challenge -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                 <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
+                    <line x1="12" y1="17" x2="12.01" y2="17"/>
+                </svg>
+            </div>
+            <h3>The Challenge</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>Accurately evaluating and comparing Large Language Models (LLMs) is crucial for selecting the right tool for a given task, yet it presents significant practical challenges. Standard benchmarks like MMLU exist, but simply running a model isn't enough.</p>
+            <p>This project initially aimed to gain hands-on experience by building a functional evaluation framework capable of running models like Llama 3.1 8B against the MMLU benchmark. However, upon achieving initial results (67.0 macro average), a new challenge emerged: the score was substantially lower than Meta's published 73.0 score.</p>
+            <p>This discrepancy highlighted several key difficulties:</p>
+            <ul class="service-list">
+                <li>The need for a robust, flexible framework to conduct evaluations systematically.</li>
+                <li>The sensitivity of LLM performance to subtle variations in prompting and evaluation methodology.</li>
+                <li>The difficulty in exactly reproducing published benchmark scores due to potential differences in implementation details.</li>
+                 <li>Understanding the factors that influence benchmark results beyond the model itself.</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- My Approach / Solution -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                 <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+                </svg>
+            </div>
+            <h3>My Approach / Solution</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>The project proceeded in two main phases:</p>
+
+            <h4 class="mt-md mb-sm">Phase 1: Evaluation Framework Development</h4>
+            <ul class="service-list">
+                <li><strong>Design:</strong> Developed a Python-based evaluation framework using an orchestrator pattern to handle benchmark-specific logic (starting with MMLU).</li>
+                <li><strong>Technology Stack:</strong> Utilized Hugging Face Hub for model/tokenizer access, Transformers for inference, and PyTorch for calculations. Google Colab (A100/L4 GPU) was used for execution.</li>
+                <li><strong>Core Functionality:</strong> Implemented logic for loading benchmarks, formatting prompts (initially 0-shot), running model inference, extracting probabilities via logits (constrained decoding), and calculating accuracy scores.</li>
+                <li><strong>Initial Run:</strong> Successfully ran Llama 3.1 8B Instruct on MMLU, establishing a baseline score.</li>
+            </ul>
+
+            <h4 class="mt-md mb-sm">Phase 2: Discrepancy Investigation & Prompt Refinement</h4>
+             <ul class="service-list">
+                <li><strong>Framework Refinement:</strong> Refactored the framework to easily configure and test different prompt structures, moving away from hardcoded prompts.</li>
+                <li><strong>Systematic Prompt Testing:</strong> Evaluated several prompt variations:
+                    <ul>
+                        <li>A basic instructional prompt.</li>
+                        <li>A chat-template based prompt inspired by recent research.</li>
+                        <li>A prompt designed to mimic the "original MMLU prompt" structure.</li>
+                    </ul>
+                </li>
+                <li><strong>Evaluation Method Consideration:</strong> Investigated potential differences between constrained decoding (logit-based) and open-ended generation, based on descriptions in Meta's documentation.</li>
+                <li><strong>Analysis:</strong> Compared the scores produced by different prompts to understand sensitivity and identify more effective structures.</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+
+<!-- Results & Impact -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                 <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+                    <polyline points="22 4 12 14.01 9 11.01"/>
+                </svg>
+            </div>
+            <h3>Results & Impact</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>This two-phased project yielded both a functional tool and critical insights:</p>
+
+            <!-- Key Metrics/Findings -->
+            <div class="about-stats mt-md mb-lg">
+                 <div class="stat-item">
+                    <div class="stat-number">✓</div>
+                    <div class="stat-label">Functional Evaluation Framework Built</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-number">67.0%</div>
+                    <div class="stat-label">Initial MMLU Score (Macro Avg)</div>
+                </div>
+                <div class="stat-item" style="background-color: var(--secondary-light);">
+                     <div class="stat-number" style="color: var(--secondary);">68.3%</div>
+                    <div class="stat-label">Improved Score via Prompt Tuning</div>
+                </div>
+            </div>
+
+            <p>Key outcomes and impacts:</p>
+            <ul class="service-list">
+                <li><strong>Framework Capability:</strong> Successfully developed a reusable framework for benchmarking LLMs.</li>
+                <li><strong>Prompt Sensitivity Demonstrated:</strong> Testing revealed significant variations in MMLU scores based solely on prompt structure (ranging from 61.0% to 68.3%), underscoring the critical nature of prompt engineering.</li>
+                <li><strong>Improved Baseline:</strong> Identified a more effective prompt ("original MMLU" structure) that improved the score from 67.0% to 68.3%.</li>
+                <li><strong>Reproducibility Insights:</strong> While the published 73.0% score wasn't exactly matched, the investigation highlighted the likely role of subtle, undocumented implementation details (specific prompt nuances, exact generation strategy) in achieving top benchmark scores.</li>
+                <li><strong>Enhanced Expertise:</strong> Gained deep practical understanding of the complexities involved in LLM evaluation, going beyond surface-level execution.</li>
+            </ul>
+             <p>This project serves as a practical demonstration of the meticulous approach required for reliable LLM evaluation and the significant impact of careful prompt design.</p>
+        </div>
+    </div>
+</div>
+
+<!-- Key Learnings -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+                <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <path d="M18 8h1a4 4 0 0 1 0 8h-1"/>
+                    <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/>
+                    <line x1="6" y1="1" x2="6" y2="4"/>
+                    <line x1="10" y1="1" x2="10" y2="4"/>
+                    <line x1="14" y1="1" x2="14" y2="4"/>
+                </svg>
+            </div>
+            <h3>Key Learnings</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>This project reinforced several important principles for working with LLMs:</p>
+            <ul class="service-list">
+                <li><strong>Evaluation is Foundational:</strong> Building reliable systems requires the ability to measure performance systematically. Custom frameworks can provide necessary control and flexibility.</li>
+                <li><strong>Prompts Matter Immensely:</strong> LLM performance is highly sensitive to prompt structure and wording. Effective prompt engineering is crucial but can be complex.</li>
+                 <li><strong>Reproducibility is Hard:</strong> Exactly matching published benchmark scores can be challenging due to subtle, often undocumented, differences in evaluation setup and prompting strategies.</li>
+                 <li><strong>Look Under the Hood:</strong> Never blindly trust default templates or assumptions. Understanding the exact input being sent to the model is critical for debugging and optimization.</li>
+                 <li><strong>Focus on Relative Performance:</strong> While striving for accuracy is important, comparing models or prompts <em>within the same consistent evaluation framework</em> often provides more actionable insights than chasing exact published scores.</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- Applying This to Client Solutions -->
+<div class="process-step">
+    <div class="process-step-content">
+        <div class="process-step-header">
+            <div class="expertise-icon-container">
+               <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                    <line x1="12" y1="5" x2="12" y2="19"></line>
+                    <polyline points="19 12 12 19 5 12"></polyline>
+                </svg>
+            </div>
+            <h3>Applying This to Client Solutions</h3>
+        </div>
+        <div class="process-step-content-body">
+            <p>The experience gained from building this evaluation framework and investigating benchmark discrepancies directly translates into value for client projects:</p>
+            <ul class="service-list">
+                <li><strong>Rigorous Model Selection:</strong> Ability to set up custom evaluations to compare different models (commercial or open-source) specifically on data relevant to the <em>client's</em> task, not just generic benchmarks.</li>
+                 <li><strong>Informed Prompt Engineering:</strong> Deep understanding of how prompt structure impacts performance, leading to more effective and reliable prompts for client applications.</li>
+                <li><strong>Realistic Expectations:</strong> Ability to advise clients on the achievable performance and the inherent variability in LLM results, setting realistic project goals.</li>
+                 <li><strong>Troubleshooting Expertise:</strong> Experience in diagnosing performance issues related to prompts or evaluation setup.</li>
+                 <li><strong>Focus on Business Value:</strong> While benchmarks are useful, the ultimate goal is building solutions that solve real business problems. This experience reinforces the need to define and measure success based on client-specific metrics.</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<!-- CTA for services -->
+<div class="process-cta">
+    <h3>Need help evaluating or optimizing AI for your business?</h3>
+    <p>Choosing the right LLM and crafting effective prompts requires careful testing and a deep understanding of how these models work. My experience in building evaluation systems and navigating benchmarking complexities can help ensure your AI solution is built on a solid, well-understood foundation.</p>
+    <a href="/contact" class="process-cta-button">Discuss Your Evaluation Needs</a>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<!-- No additional JavaScript needed for this case study -->
+{% endblock %}

workspace/website/portfolio.html

@@ -0,0 +1,258 @@
+{% extends "base.html" %}
+
+{% block title %}Portfolio - Charles Feinn // AppSimple{% endblock %} {# Updated Title #}
+
+{% block extra_css %}
+<link rel="stylesheet" href="/assets/css/pages/portfolio.css" />
+{% endblock %}
+
+{% block content %}
+<!-- Portfolio Section -->
+<h1 class="page-title">Portfolio</h1>
+<p class="page-intro">My work spans across mobile application development and applied AI solutions. Below you'll find a collection of projects that showcase my technical expertise and problem-solving approach across different domains.</p>
+
+<!-- Portfolio Filter -->
+<div class="portfolio-filter">
+    <button class="filter-button active" data-filter="all">All Projects</button>
+    <button class="filter-button" data-filter="mobile">Mobile Apps</button>
+    <button class="filter-button" data-filter="ai">AI Engineering</button> {# Changed label slightly #}
+    <button class="filter-button" data-filter="hybrid">Hybrid Projects</button>
+</div>
+
+<!-- Portfolio Grid -->
+<div class="portfolio-grid">
+    
+    <!-- FOT Intervention Recommender -->
+    <div class="portfolio-item" data-categories="ai hybrid">
+        <div class="portfolio-card">
+            <div class="portfolio-image">
+                <div class="placeholder-icon" style="font-size: 1.5rem; font-weight: 600;">FOT</div>
+            </div>
+            <div class="portfolio-content">
+                <h3>Freshman On-Track Recommender</h3>
+                <p class="portfolio-type">AI Engineering / EdTech</p>
+                <p class="portfolio-description">
+                    A high-quality RAG system that transforms student narratives into evidence-based intervention recommendations for educators.
+                </p>
+                <div class="portfolio-tags">
+                    <span class="tag">RAG</span>
+                    <span class="tag">Python</span>
+                    <span class="tag">Gemini</span>
+                    <span class="tag">FAISS</span>
+                </div>
+                <a href="/portfolio/fot-recommender" class="portfolio-link">View Case Study</a>
+            </div>
+        </div>
+    </div>
+    
+    <!-- ASimpleAuthKit -->
+    <div class="portfolio-item" data-categories="mobile">
+        <div class="portfolio-card">
+            <div class="portfolio-image">
+                <div class="placeholder-icon" style="font-size: 1.5rem; font-weight: 600;">Auth</div>
+            </div>
+            <div class="portfolio-content">
+                <h3>ASimpleAuthKit</h3>
+                <p class="portfolio-type">Mobile App / Swift Package</p>
+                <p class="portfolio-description">
+                    A production-ready Swift Package to streamline Firebase Authentication in SwiftUI apps.
+                </p>
+                <div class="portfolio-tags">
+                    <span class="tag">Swift</span>
+                    <span class="tag">SwiftUI</span>
+                    <span class="tag">Firebase</span>
+                    <span class="tag">API Design</span>
+                </div>
+                <a href="/portfolio/a-simple-auth-kit" class="portfolio-link">View Case Study</a>
+            </div>
+            
+        </div>
+    </div>
+    
+    <!-- DSPy Prompt Optimization -->
+    <div class="portfolio-item" data-categories="ai hybrid">
+        <div class="portfolio-card">
+            <div class="app-icon-container">
+                <img src="/assets/images/dspy_logo.png" alt="DSPy Logo" class="app-icon">
+            </div>
+            <div class="portfolio-content">
+                <h3>Automating LLM Prompt Optimization</h3>
+                <p class="portfolio-type">AI Engineering / LLM Optimization</p>
+                <p class="portfolio-description">Using the DSPy framework to programmatically optimize prompts, significantly improving Llama 3.1 8B performance on the MMLU benchmark over manual methods.</p>
+                <div class="portfolio-tags">
+                    <span class="tag">DSPy</span>
+                    <span class="tag">Prompt Optimization</span>
+                    <span class="tag">LLM Evaluation</span>
+                    <span class="tag">Automation</span>
+                </div>
+                <a href="/portfolio/dspy-prompt-optimization" class="portfolio-link">View Case Study</a>
+            </div>
+        </div>
+    </div>
+
+    <!-- LLM Evaluation & Prompting -->
+    <div class="portfolio-item" data-categories="ai hybrid">
+        <div class="portfolio-card">
+            <div class="portfolio-image">
+                 <div class="placeholder-icon" style="font-size: 1.5rem; font-weight: 600;">Eval</div>
+            </div>
+            <div class="portfolio-content">
+                <h3>Building & Refining an LLM Evaluation System</h3>
+                <p class="portfolio-type">AI Engineering / LLM Evaluation</p>
+                <p class="portfolio-description">Developed a custom framework for MMLU benchmarking and investigated the critical impact of prompt engineering on LLM evaluation reproducibility.</p>
+                <div class="portfolio-tags">
+                    <span class="tag">LLM Evaluation</span>
+                    <span class="tag">Benchmarking</span>
+                    <span class="tag">Prompt Engineering</span>
+                    <span class="tag">Python</span>
+                </div>
+                <a href="/portfolio/llm-evaluation-prompting" class="portfolio-link">View Case Study</a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bodhi Mind -->
+    <div class="portfolio-item" data-categories="mobile">
+        <div class="portfolio-card">
+            <div class="portfolio-image">
+                <img src="/assets/images/bodhiMind.png" alt="Bodhi Mind App" class="portfolio-icon">
+            </div>
+            <div class="portfolio-content">
+                <h3>Bodhi Mind</h3>
+                <p class="portfolio-type">Mobile App Development</p>
+                <p class="portfolio-description">Subscription-based meditation content platform with intelligent content organization for iOS.</p>
+                <div class="portfolio-tags">
+                    <span class="tag">iOS</span>
+                    <span class="tag">Content Platform</span>
+                    <span class="tag">Subscription</span>
+                </div>
+                <a href="/portfolio/bodhimind" class="portfolio-link">View Case Study</a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Guided Mind -->
+    <div class="portfolio-item" data-categories="mobile">
+        <div class="portfolio-card">
+            <div class="portfolio-image">
+                <img src="/assets/images/guidedMind.png" alt="Guided Mind App" class="portfolio-icon">
+            </div>
+            <div class="portfolio-content">
+                <h3>Guided Mind</h3>
+                <p class="portfolio-type">Mobile App Development</p>
+                <p class="portfolio-description">Meditation content marketplace connecting multiple teachers with users across iOS and Android.</p>
+                <div class="portfolio-tags">
+                    <span class="tag">iOS</span>
+                    <span class="tag">Android</span>
+                    <span class="tag">Marketplace</span>
+                </div>
+                <a href="/portfolio/guidedmind" class="portfolio-link">View Case Study</a>
+            </div>
+        </div>
+    </div>
+
+    <!-- Livewire -->
+    <div class="portfolio-item" data-categories="mobile">
+        <div class="portfolio-card">
+            <div class="portfolio-image">
+                <img src="/assets/images/livewire.png" alt="WWOZ Livewire App" class="portfolio-icon">
+            </div>
+            <div class="portfolio-content">
+                <h3>WWOZ Livewire</h3>
+                <p class="portfolio-type">Mobile App Development</p>
+                <p class="portfolio-description">New Orleans music calendar app with custom QuadTree clustering to efficiently visualize hundreds of live music venues on an interactive map.</p>
+                <div class="portfolio-tags">
+                    <span class="tag">iOS</span>
+                    <span class="tag">Calendar</span>
+                    <span class="tag">Local Events</span>
+                </div>
+                <a href="/portfolio/livewire" class="portfolio-link">View Case Study</a>
+            </div>
+        </div>
+    </div>
+
+</div> <!-- End Portfolio Grid -->
+
+
+<!-- Hybrid Capabilities Section -->
+<h2 class="section-heading">Combining Mobile Development & Applied AI</h2>
+<p class="section-intro">My background in creating intuitive mobile applications combined with expertise in developing applied AI solutions allows me to deliver unique value through solutions that integrate both domains:</p>
+
+<div class="hybrid-capabilities">
+    <div class="hybrid-capability">
+        <div class="expertise-icon-container">
+            <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+                <line x1="8" y1="21" x2="16" y2="21"></line>
+                <line x1="12" y1="17" x2="12" y2="21"></line>
+            </svg>
+        </div>
+        <div class="hybrid-content">
+            <h4>Mobile Apps with AI Capabilities</h4>
+            <p>Designing and building mobile applications that leverage AI for enhanced personalization, content recommendations, and user experience.</p>
+        </div>
+    </div>
+
+    <div class="hybrid-capability">
+        <div class="expertise-icon-container">
+            <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+                <polyline points="22 4 12 14.01 9 11.01"></polyline>
+            </svg>
+        </div>
+        <div class="hybrid-content">
+            <h4>AI-Powered Business Tools</h4>
+            <p>Creating specialized business applications that combine intuitive mobile interfaces with powerful AI processing capabilities.</p>
+        </div>
+    </div>
+
+    <div class="hybrid-capability">
+        <div class="expertise-icon-container">
+            <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
+            </svg>
+        </div>
+        <div class="hybrid-content">
+            <h4>Enhanced User Experiences</h4>
+            <p>Developing solutions that use AI to create more intelligent, responsive, and personalized mobile experiences.</p>
+        </div>
+    </div>
+</div>
+
+<!-- Portfolio CTA -->
+<div class="process-cta">
+    <h3>Looking for mobile, AI, or hybrid solutions?</h3>
+    <p>Whether you need a mobile application, an AI-powered solution, or a solution that combines both, let's discuss how my experience can help bring your project to life.</p>
+    <a href="/contact" class="process-cta-button">Start a Conversation</a>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+  // Portfolio Filtering Logic
+  document.addEventListener('DOMContentLoaded', function() {
+    const filterButtons = document.querySelectorAll('.portfolio-filter .filter-button');
+    const portfolioItems = document.querySelectorAll('.portfolio-grid .portfolio-item');
+
+    filterButtons.forEach(button => {
+      button.addEventListener('click', function() {
+        // Update active button state
+        filterButtons.forEach(btn => btn.classList.remove('active'));
+        this.classList.add('active');
+
+        const filterValue = this.getAttribute('data-filter');
+
+        // Show/hide portfolio items
+        portfolioItems.forEach(item => {
+          const categories = item.getAttribute('data-categories');
+          if (filterValue === 'all' || (categories && categories.split(' ').includes(filterValue))) {
+            item.style.display = 'block'; // Or restore original display value
+          } else {
+            item.style.display = 'none';
+          }
+        });
+      });
+    });
+  });
+</script>
+{% endblock %}

workspace/website/process.html

@@ -0,0 +1,249 @@
+{% extends "base.html" %}
+
+{% block title %}Process - Charles Feinn // AppSimple{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="/assets/css/pages/process.css" />
+{% endblock %}
+
+{% block content %}
+<!-- Process Section -->
+<h1 class="page-title">My Process</h1>
+<p class="page-intro">I believe in a structured, transparent approach to implementing AI solutions. <strong>When you partner with AppSimple, you work directly with me, Charles Feinn, ensuring dedicated expertise on your project.</strong> Here's how we'll work together to bring AI capabilities to your business:</p>
+
+<!-- Process Steps with Lucide Icons -->
+<div class="process-steps">
+    <div class="process-step" data-step="1">
+        <div class="process-step-content">
+            <!-- New structure with icon and title in flex container -->
+            <div class="process-step-header">
+                <div class="expertise-icon-container">
+                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+                        <polyline points="9 22 9 12 15 12 15 22"/>
+                    </svg>
+                </div>
+                <h3>Discovery & Assessment</h3>
+            </div>
+            <div class="process-step-content-body">
+                <p>We begin by understanding your business goals, challenges, and current processes. Through conversations and analysis, I identify opportunities where AI can create the most value.</p>
+                <p>This phase includes:</p>
+                <ul class="service-list">
+                    <li>Initial consultation to discuss your needs</li>
+                    <li>Review of existing workflows and pain points</li>
+                    <li>Analysis of available data and systems</li>
+                    <li>Identification of high-impact AI opportunities</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    
+    <div class="process-step" data-step="2">
+        <div class="process-step-content">
+            <!-- New structure with icon and title in flex container -->
+            <div class="process-step-header">
+                <div class="expertise-icon-container">
+                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                        <path d="M2 3h20v14H2z"/>
+                        <path d="M8 21h8"/>
+                        <path d="M12 17v4"/>
+                    </svg>
+                </div>
+                <h3>Solution Design</h3>
+            </div>
+            <div class="process-step-content-body">
+                <p>Based on our findings, I design a tailored solution that addresses your specific needs. I focus on practical implementations that deliver clear ROI.</p>
+                <p>This phase includes:</p>
+                <ul class="service-list">
+                    <li>Selection of appropriate AI technologies</li>
+                    <li>Creation of solution architecture</li>
+                    <li>Development of implementation roadmap</li>
+                    <li>Project scope and timeline definition</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    
+    <div class="process-step" data-step="3">
+        <div class="process-step-content">
+            <!-- New structure with icon and title in flex container -->
+            <div class="process-step-header">
+                <div class="expertise-icon-container">
+                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                        <polyline points="16 18 22 12 16 6"/>
+                        <polyline points="8 6 2 12 8 18"/>
+                    </svg>
+                </div>
+                <h3>Implementation</h3>
+            </div>
+            <div class="process-step-content-body">
+                <p>This is where ideas become reality. I handle the technical heavy lifting, building and integrating the solution into your existing systems and workflows.</p>
+                <p>This phase includes:</p>
+                <ul class="service-list">
+                    <li>Development of custom AI solutions</li>
+                    <li>Integration with existing systems</li>
+                    <li>Testing and quality assurance</li>
+                    <li>Iterative refinement based on feedback</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    
+    <div class="process-step" data-step="4">
+        <div class="process-step-content">
+            <!-- New structure with icon and title in flex container -->
+            <div class="process-step-header">
+                <div class="expertise-icon-container">
+                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+                        <circle cx="9" cy="7" r="4"/>
+                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+                        <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+                    </svg>
+                </div>
+                <h3>Knowledge Transfer & Support</h3>
+            </div>
+            <div class="process-step-content-body">
+                <p>Once implemented, I ensure you and your team understand how to use and maintain the solution. Ongoing support ensures your AI solution continues to deliver value.</p>
+                <p>This phase includes:</p>
+                <ul class="service-list">
+                    <li>Training sessions for your team</li>
+                    <li>Documentation of the solution</li>
+                    <li>Handover of all relevant materials</li>
+                    <li>Optional ongoing support and maintenance</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<h2 class="section-heading">Project Timeline</h2>
+<p class="section-intro">While every project is unique, here's a typical timeline for implementing an AI solution:</p>
+
+<!-- Timeline with Updated Styling -->
+<div class="timeline">
+    <div class="timeline-item">
+        <div class="timeline-marker">
+            <span>1</span>
+        </div>
+        <div class="timeline-content">
+            <!-- Updated structure with icon and title in flex container -->
+            <div class="timeline-header">
+                <div class="expertise-icon-container">
+                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                        <circle cx="12" cy="12" r="10"/>
+                        <line x1="12" y1="8" x2="12" y2="16"/>
+                        <line x1="8" y1="12" x2="16" y2="12"/>
+                    </svg>
+                </div>
+                <div class="timeline-title">Discovery & Initial Assessment</div>
+            </div>
+            <p>Consultation, requirements gathering, and opportunity identification.</p>
+        </div>
+    </div>
+    
+    <div class="timeline-item">
+        <div class="timeline-marker">
+            <span>2</span>
+        </div>
+        <div class="timeline-content">
+            <!-- Updated structure with icon and title in flex container -->
+            <div class="timeline-header">
+                <div class="expertise-icon-container">
+                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                        <polygon points="14 2 18 6 7 17 3 17 3 13 14 2"/>
+                        <line x1="3" y1="22" x2="21" y2="22"/>
+                    </svg>
+                </div>
+                <div class="timeline-title">Solution Design</div>
+            </div>
+            <p>Technology selection, architecture development, and project planning.</p>
+        </div>
+    </div>
+    
+    <div class="timeline-item">
+        <div class="timeline-marker">
+            <span>3</span>
+        </div>
+        <div class="timeline-content">
+            <!-- Updated structure with icon and title in flex container -->
+            <div class="timeline-header">
+                <div class="expertise-icon-container">
+                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                        <polyline points="16 18 22 12 16 6"/>
+                        <polyline points="8 6 2 12 8 18"/>
+                    </svg>
+                </div>
+                <div class="timeline-title">Development & Implementation</div>
+            </div>
+            <p>Building the solution, integration, and initial testing.</p>
+        </div>
+    </div>
+    
+    <div class="timeline-item">
+        <div class="timeline-marker">
+            <span>4</span>
+        </div>
+        <div class="timeline-content">
+            <!-- Updated structure with icon and title in flex container -->
+            <div class="timeline-header">
+                <div class="expertise-icon-container">
+                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
+                        <path d="m9 12 2 2 4-4"/>
+                    </svg>
+                </div>
+                <div class="timeline-title">Testing & Refinement</div>
+            </div>
+            <p>QA testing, feedback collection, and solution optimization.</p>
+        </div>
+    </div>
+    
+    <div class="timeline-item">
+        <div class="timeline-marker">
+            <span>5</span>
+        </div>
+        <div class="timeline-content">
+            <!-- Updated structure with icon and title in flex container -->
+            <div class="timeline-header">
+                <div class="expertise-icon-container">
+                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                        <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/>
+                        <line x1="4" y1="22" x2="4" y2="15"/>
+                    </svg>
+                </div>
+                <div class="timeline-title">Deployment & Training</div>
+            </div>
+            <p>Final deployment, team training, and knowledge transfer.</p>
+        </div>
+    </div>
+    
+    <div class="timeline-item">
+        <div class="timeline-marker">
+            <span>6</span>
+        </div>
+        <div class="timeline-content">
+            <!-- Updated structure with icon and title in flex container -->
+            <div class="timeline-header">
+                <div class="expertise-icon-container">
+                    <svg class="icon expertise-icon" viewBox="0 0 24 24">
+                        <circle cx="12" cy="12" r="10"/>
+                        <polyline points="12 6 12 12 16 14"/>
+                    </svg>
+                </div>
+                <div class="timeline-title">Support & Iteration</div>
+            </div>
+            <p>Continuous improvement, updates, and maintenance as needed.</p>
+        </div>
+    </div>
+</div>
+
+<p>This timeline can be adjusted based on project complexity, your specific needs, and resource availability.</p>
+
+<!-- CTA Section -->
+<div class="process-cta">
+    <h3>Ready to start your Applied AI journey?</h3>
+    <p>Let's discuss your business goals and explore how AI can help you achieve them. The first step is a conversation to understand your needs.</p>
+    <a href="/contact" class="process-cta-button">Schedule a Consultation</a>
+</div>
+{% endblock %}

workspace/website/services.html

@@ -0,0 +1,192 @@
+{% extends "base.html" %}
+
+{% block title %}Services - Charles Feinn // AppSimple{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="/assets/css/pages/services.css" />
+{% endblock %}
+
+{% block content %}
+<!-- Services Introduction -->
+<h1 class="page-title">Services</h1>
+<p class="page-intro">I provide specialized technical services across mobile development and applied AI. My background in creating intuitive mobile experiences informs how I develop AI solutions that integrate seamlessly with how people work. Whether you need a mobile app, an AI-powered solution, or a solution that combines both, I focus on practical, user-centric technology that delivers real business value. <strong>When you partner with AppSimple, you work directly with me, Charles Feinn, ensuring dedicated expertise on your project.</strong></p>
+
+<!-- Mobile Development Services -->
+<h2 class="section-heading">Mobile Development</h2>
+
+<div class="service-item">
+    <h3>
+        <div class="icon-container">
+            <svg class="icon service-icon" viewBox="0 0 24 24">
+                <rect x="5" y="2" width="14" height="20" rx="2" ry="2"/>
+                <line x1="12" y1="18" x2="12.01" y2="18"/>
+            </svg>
+        </div>
+        Custom Mobile Applications
+    </h3>
+    <ul class="service-list">
+        <li>iOS and Android native app development</li>
+        <li>Cross-platform solutions using React Native</li>
+        <li>User-centered design and intuitive interfaces</li>
+        <li>Integration with existing business systems</li>
+    </ul>
+    <a href="/portfolio" class="service-link">See portfolio examples</a>
+</div>
+
+<div class="service-item">
+    <h3>
+        <div class="icon-container">
+            <svg class="icon service-icon" viewBox="0 0 24 24">
+                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
+                <circle cx="9" cy="7" r="4"/>
+                <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
+                <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+            </svg>
+        </div>
+        User Experience Design
+    </h3>
+    <ul class="service-list">
+        <li>Mobile-specific UX design for optimal usability</li>
+        <li>Streamlined user flows and interactions</li>
+        <li>Accessibility considerations</li>
+        <li>Usability testing and optimization</li>
+    </ul>
+    <a href="/contact" class="service-link">Discuss your needs</a>
+</div>
+
+<div class="service-item">
+    <h3>
+        <div class="icon-container">
+            <svg class="icon service-icon" viewBox="0 0 24 24">
+                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
+            </svg>
+        </div>
+        Content & Commerce Platforms
+    </h3>
+    <ul class="service-list">
+        <li>Content delivery applications</li>
+        <li>Subscription management systems</li>
+        <li>In-app purchase integration</li>
+        <li>Commercial content marketplaces</li>
+    </ul>
+    <a href="/portfolio" class="service-link">See examples</a>
+</div>
+
+<!-- Applied AI Services -->
+<h2 class="section-heading">Applied AI Solutions</h2>
+
+<div class="service-item">
+    <h3>
+        <div class="icon-container">
+            <svg class="icon service-icon" viewBox="0 0 24 24">
+                <path d="M15.5 2H8.6c-.4 0-.8.2-1.1.5-.3.3-.5.7-.5 1.1v16.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h12.8c.4 0 .8-.2 1.1-.5.3-.3.5-.7.5-1.1V7.5L15.5 2z"/>
+                <polyline points="15 2 15 8 21 8"/>
+                <line x1="10" y1="13" x2="18" y2="13"/>
+                <line x1="10" y1="17" x2="18" y2="17"/>
+            </svg>
+        </div>
+        Intelligent Document Processing
+    </h3>
+    <ul class="service-list">
+        <li>Extract structured data from unstructured documents</li>
+        <li>Automate document classification and routing</li>
+        <li>Implement OCR with AI verification</li>
+        <li>Create searchable document repositories</li>
+    </ul>
+    <a href="/contact" class="service-link">Discuss your needs</a>
+</div>
+
+<div class="service-item">
+    <h3>
+        <div class="icon-container">
+            <svg class="icon service-icon" viewBox="0 0 24 24">
+                <path d="M5 22h14"/>
+                <path d="M5 2h14"/>
+                <path d="M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22"/>
+                <path d="M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"/>
+            </svg>
+        </div>
+        Business Process Automation
+    </h3>
+    <ul class="service-list">
+        <li>Identify automation opportunities in your workflow</li>
+        <li>Implement AI-powered workflow solutions</li>
+        <li>Connect disparate systems with intelligent processes</li>
+        <li>Develop custom business rules and logic</li>
+    </ul>
+    <a href="/contact" class="service-link">Discuss your needs</a>
+</div>
+
+<div class="service-item">
+    <h3>
+        <div class="icon-container">
+            <svg class="icon service-icon" viewBox="0 0 24 24">
+                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+            </svg>
+        </div>
+        LLM & Chatbot Implementation
+    </h3>
+    <ul class="service-list">
+        <li>Design and implement custom AI assistants</li>
+        <li>Fine-tune models for specific business knowledge</li>
+        <li>Create secure, accurate chatbot systems</li>
+        <li>Implement retrieval-augmented generation (RAG)</li>
+    </ul>
+    <a href="/contact" class="service-link">Discuss your needs</a>
+</div>
+
+<!-- Hybrid Solutions -->
+<h2 class="section-heading">Hybrid Mobile & AI Solutions</h2>
+
+<div class="service-item">
+    <h3>
+        <div class="icon-container">
+            <svg class="icon service-icon" viewBox="0 0 24 24">
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                <line x1="12" y1="8" x2="12" y2="16"/>
+                <line x1="8" y1="12" x2="16" y2="12"/>
+            </svg>
+        </div>
+        AI-Enhanced Mobile Applications
+    </h3>
+    <ul class="service-list">
+        <li>Mobile apps with integrated AI capabilities</li>
+        <li>Personalized user experiences based on usage patterns</li>
+        <li>Intelligent content recommendation systems</li>
+        <li>On-device machine learning features</li>
+    </ul>
+    <a href="/contact" class="service-link">Discuss your needs</a>
+</div>
+
+<div class="service-item">
+    <h3>
+        <div class="icon-container">
+            <svg class="icon service-icon" viewBox="0 0 24 24">
+                <line x1="12" y1="2" x2="12" y2="6"/>
+                <line x1="12" y1="18" x2="12" y2="22"/>
+                <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/>
+                <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/>
+                <line x1="2" y1="12" x2="6" y2="12"/>
+                <line x1="18" y1="12" x2="22" y2="12"/>
+                <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/>
+                <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/>
+            </svg>
+        </div>
+        Smart Business Tools
+    </h3>
+    <ul class="service-list">
+        <li>Mobile interfaces for AI business systems</li>
+        <li>Real-time data analysis and visualization</li>
+        <li>Intelligent decision support systems</li>
+        <li>Field data collection with AI processing</li>
+    </ul>
+    <a href="/contact" class="service-link">Discuss your needs</a>
+</div>
+
+<!-- CTA Section -->
+<div class="process-cta">
+    <h3>Not sure which service you need?</h3>
+    <p>The best solutions often begin with a conversation. Let's discuss your business challenges and determine which approach—mobile, AI, or a hybrid solution—will deliver the most value for your specific situation.</p>
+    <a href="/contact" class="process-cta-button">Start a Conversation</a>
+</div>
+{% endblock %}