Implement elite B2B Tax case study with strategic narrative, metrics, and AI workflow design

- Added comprehensive B2B Tax case study with 7 structured sections (Problem, Users, Constraints, Process, AI Integration, Impact, Learnings)
- Highlighted measurable results: 77% fulfillment rate, 200+ file batch processing, audit-ready safeguards
- Emphasized AI workflow design expertise with human-in-the-loop review gates and confidence-guided interfaces
- Removed all hyphens from case study content per user preference
- Added arrows to workflow descriptions for visual clarity
- Updated B2B Audit metadata: changed to 2024, role to UI Designer, added FigmaMake to tools
- Reordered projects chronologically: B2B Audit (2024) first, B2B Tax (2025) second
- Removed Gallery/Prototype filter buttons from products page
- Set modal to open on Case Study tab by default
- Conditionally render modal tabs based on available content (hide tabs without data)
- Removed Case Study button from product tiles for cleaner UI

Author: teamconnoisseurww-lab

components/portfolio/PortfolioClient.tsx

@@ -13,15 +13,15 @@ import {
 } from '../../config/portfolio';
 import PortfolioModal from './PortfolioModal';
 
-type PortfolioView = 'gallery' | 'prototype';
+type ModalView = 'gallery' | 'prototype' | 'caseStudy';
 
 const PORTFOLIO_SESSION_KEY = 'portfolio_access_unlocked';
 const PORTFOLIO_TEMP_PASSWORD = 'Jaymes';
 
 export default function PortfolioClient() {
   const [activeCategory, setActiveCategory] = useState<PortfolioCategoryFilter>('All');
-  const [activeView, setActiveView] = useState<PortfolioView>('gallery');
   const [selected, setSelected] = useState<PortfolioProject | null>(null);
+  const [modalInitialView, setModalInitialView] = useState<ModalView>('caseStudy');
   const [mounted, setMounted] = useState(false);
   const [isUnlocked, setIsUnlocked] = useState(false);
   const [password, setPassword] = useState('');
@@ -37,20 +37,10 @@ export default function PortfolioClient() {
   }, []);
 
   const filtered = useMemo(() => {
-    const hasPrototype = (p: PortfolioProject) =>
-      (Boolean(p.prototypeId?.trim()) || Boolean(p.figmaEmbedUrl?.trim())) && !p.comingSoon;
-
-    const categoryFiltered =
-      activeCategory === 'All'
-        ? portfolioProjects
-        : portfolioProjects.filter((p) => p.categories.includes(activeCategory));
-
-    if (activeView === 'prototype') {
-      return categoryFiltered.filter(hasPrototype);
-    }
-
-    return categoryFiltered;
-  }, [activeCategory, activeView]);
+    return activeCategory === 'All'
+      ? portfolioProjects
+      : portfolioProjects.filter((p) => p.categories.includes(activeCategory));
+  }, [activeCategory]);
 
   if (!mounted) return null;
 
@@ -130,44 +120,26 @@ export default function PortfolioClient() {
         ))}
       </div>
 
-      <div className="max-w-4xl mx-auto flex items-center gap-4 mb-12">
-        <button
-          type="button"
-          onClick={() => setActiveView('gallery')}
-          className={clsx(
-            'cta-button flex-1 text-center',
-            activeView === 'gallery'
-              ? 'bg-cta-brass text-bg-primary'
-              : 'border-text-base/15 text-text-base/60 hover:border-cta-brass'
-          )}
-          aria-pressed={activeView === 'gallery'}
-        >
-          Gallery
-        </button>
-        <button
-          type="button"
-          onClick={() => setActiveView('prototype')}
-          className={clsx(
-            'cta-button flex-1 text-center',
-            activeView === 'prototype'
-              ? 'bg-cta-brass text-bg-primary'
-              : 'border-text-base/15 text-text-base/60 hover:border-cta-brass'
-          )}
-          aria-pressed={activeView === 'prototype'}
-        >
-          Prototype
-        </button>
-      </div>
 
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
         {filtered.map((project, index) => (
-          <motion.button
+          <motion.div
             key={project.id}
-            type="button"
             onClick={() => {
               if (project.comingSoon) return;
+              setModalInitialView('caseStudy');
               setSelected(project);
             }}
+            role={project.comingSoon ? undefined : 'button'}
+            tabIndex={project.comingSoon ? undefined : 0}
+            onKeyDown={(e) => {
+              if (project.comingSoon) return;
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                setModalInitialView('caseStudy');
+                setSelected(project);
+              }
+            }}
             initial={{ opacity: 0, y: 16 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.45, delay: index * 0.06, ease: 'easeOut' }}
@@ -229,21 +201,22 @@ export default function PortfolioClient() {
               <div className="mt-1 text-xs uppercase tracking-widest text-text-base/40 font-label">
                 {project.categories.join(' · ')}
               </div>
+
               {project.comingSoon && (
                 <div className="mt-2 text-xs uppercase tracking-widest text-text-base/50 font-label">
                   Coming soon
                 </div>
               )}
             </div>
-          </motion.button>
+          </motion.div>
         ))}
       </div>
 
       {selected && (
         <PortfolioModal
           project={selected}
           onClose={() => setSelected(null)}
-          initialView={activeView}
+          initialView={modalInitialView}
         />
       )}
     </div>

components/portfolio/PortfolioModal.tsx

@@ -8,7 +8,9 @@ import clsx from 'clsx';
 import type { PortfolioProject } from '../../config/portfolio';
 import PrototypeRenderer from './prototypes/PrototypeRenderer';
 
-type ModalView = 'gallery' | 'prototype';
+type ModalView = 'gallery' | 'prototype' | 'caseStudy';
+
+type FullscreenView = 'gallery' | 'prototype';
 
 function toFigmaEmbedUrl(inputUrl: string): string {
   const url = inputUrl.trim();
@@ -40,7 +42,7 @@ export default function PortfolioModal({
   const [activeIndex, setActiveIndex] = useState(0);
   const [view, setView] = useState<ModalView>('gallery');
   const [mediaAspect, setMediaAspect] = useState<number>(16 / 9);
-  const [fullscreenView, setFullscreenView] = useState<ModalView | null>(null);
+  const [fullscreenView, setFullscreenView] = useState<FullscreenView | null>(null);
   const scrollRef = useRef<HTMLDivElement | null>(null);
   const [mounted, setMounted] = useState(false);
 
@@ -52,6 +54,8 @@ export default function PortfolioModal({
   const hasPrototype =
     (Boolean(project.prototypeId?.trim()) || Boolean(prototypeEmbedUrl)) && !project.comingSoon;
 
+  const hasCaseStudy = Boolean(project.caseStudy) || Boolean(project.description) || Boolean(project.caseStudyBullets?.length);
+
   const safeActiveIndex = useMemo(() => {
     if (project.imageSrcs.length === 0) return 0;
     return Math.min(Math.max(activeIndex, 0), project.imageSrcs.length - 1);
@@ -61,11 +65,17 @@ export default function PortfolioModal({
     setActiveIndex(0);
     setMediaAspect(16 / 9);
     const requestedView = initialView ?? 'gallery';
-    setView(requestedView === 'prototype' && !hasPrototype ? 'gallery' : requestedView);
+    if (requestedView === 'prototype' && !hasPrototype) {
+      setView('gallery');
+    } else if (requestedView === 'caseStudy' && !hasCaseStudy) {
+      setView('gallery');
+    } else {
+      setView(requestedView);
+    }
     requestAnimationFrame(() => {
       scrollRef.current?.scrollTo({ top: 0 });
     });
-  }, [hasPrototype, initialView, project.id]);
+  }, [hasCaseStudy, hasPrototype, initialView, project.id]);
 
   useEffect(() => {
     setMounted(true);
@@ -260,7 +270,56 @@ export default function PortfolioModal({
             className="px-6 pt-4 pb-6 overflow-y-auto flex-1 min-h-0 overscroll-contain"
           >
 
-            {(project.description || (project.caseStudyBullets && project.caseStudyBullets.length > 0)) && (
+            <div className="mb-6 flex items-center gap-3">
+              {hasCaseStudy && (
+                <button
+                  type="button"
+                  onClick={() => setView('caseStudy')}
+                  className={clsx(
+                    'cta-button flex-1 text-center',
+                    view === 'caseStudy'
+                      ? 'bg-cta-brass text-bg-primary'
+                      : 'border-text-base/15 text-text-base/60 hover:border-cta-brass'
+                  )}
+                  aria-pressed={view === 'caseStudy'}
+                >
+                  Case Study
+                </button>
+              )}
+
+              {hasPrototype && (
+                <button
+                  type="button"
+                  onClick={() => setView('prototype')}
+                  className={clsx(
+                    'cta-button flex-1 text-center',
+                    view === 'prototype'
+                      ? 'bg-cta-brass text-bg-primary'
+                      : 'border-text-base/15 text-text-base/60 hover:border-cta-brass'
+                  )}
+                  aria-pressed={view === 'prototype'}
+                >
+                  Prototype
+                </button>
+              )}
+
+              <button
+                type="button"
+                onClick={() => setView('gallery')}
+                className={clsx(
+                  'cta-button flex-1 text-center',
+                  view === 'gallery'
+                    ? 'bg-cta-brass text-bg-primary'
+                    : 'border-text-base/15 text-text-base/60 hover:border-cta-brass'
+                )}
+                aria-pressed={view === 'gallery'}
+              >
+                Gallery
+              </button>
+            </div>
+
+            {view !== 'caseStudy' &&
+              (project.description || (project.caseStudyBullets && project.caseStudyBullets.length > 0)) && (
               <div className="mb-4">
                 {project.description && (
                   <p className="text-sm text-text-base/70 leading-relaxed">
@@ -278,7 +337,82 @@ export default function PortfolioModal({
               </div>
             )}
 
-            {view === 'gallery' ? (
+            {view === 'caseStudy' ? (
+              <div className="space-y-8">
+                {(project.description || (project.caseStudyBullets && project.caseStudyBullets.length > 0)) && (
+                  <div className="rounded-2xl border border-text-base/10 bg-bg-primary/60 backdrop-blur p-6">
+                    {project.description && (
+                      <div className="text-base text-text-base/80 leading-relaxed">
+                        {project.description}
+                      </div>
+                    )}
+                    {project.caseStudyBullets && project.caseStudyBullets.length > 0 && (
+                      <ul className="mt-4 space-y-2 pl-5 list-disc text-sm text-text-base/70">
+                        {project.caseStudyBullets.map((item) => (
+                          <li key={item}>{item}</li>
+                        ))}
+                      </ul>
+                    )}
+                  </div>
+                )}
+
+                {project.caseStudy ? (
+                  <div className="grid gap-6">
+                    {(project.caseStudy.role || project.caseStudy.timeline || (project.caseStudy.tools && project.caseStudy.tools.length > 0)) && (
+                      <div className="rounded-2xl border border-text-base/10 bg-bg-primary p-6">
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                          <div>
+                            <div className="text-xs uppercase tracking-widest text-text-base/40 font-label">Role</div>
+                            <div className="mt-2 text-sm text-text-base/80">{project.caseStudy.role ?? '—'}</div>
+                          </div>
+                          <div>
+                            <div className="text-xs uppercase tracking-widest text-text-base/40 font-label">Timeline</div>
+                            <div className="mt-2 text-sm text-text-base/80">{project.caseStudy.timeline ?? '—'}</div>
+                          </div>
+                          <div>
+                            <div className="text-xs uppercase tracking-widest text-text-base/40 font-label">Tools</div>
+                            <div className="mt-2 text-sm text-text-base/80">
+                              {project.caseStudy.tools && project.caseStudy.tools.length > 0
+                                ? project.caseStudy.tools.join(', ')
+                                : '—'}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+
+                    {project.caseStudy.sections.map((section) => (
+                      <div
+                        key={section.title}
+                        className="rounded-2xl border border-text-base/10 bg-bg-primary p-6"
+                      >
+                        <div className="flex items-baseline justify-between gap-6">
+                          <div className="font-serif text-xl text-text-base">{section.title}</div>
+                        </div>
+
+                        {section.description && (
+                          <div className="mt-3 text-sm text-text-base/70 leading-relaxed">
+                            {section.description}
+                          </div>
+                        )}
+
+                        {section.bullets && section.bullets.length > 0 && (
+                          <ul className="mt-4 space-y-2 pl-5 list-disc text-sm text-text-base/70">
+                            {section.bullets.map((item) => (
+                              <li key={item}>{item}</li>
+                            ))}
+                          </ul>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="rounded-2xl border border-text-base/10 bg-bg-primary p-6 text-text-base/60">
+                    Case study coming soon.
+                  </div>
+                )}
+              </div>
+            ) : view === 'gallery' ? (
               <div>
                 <div
                   className="relative w-full rounded-xl overflow-hidden border border-text-base/10 bg-bg-primary"