feat: add 3 new blog posts and Callout/ProcessFlow MDX components

Add blog posts for MCPX (CLI vs MCP), SPARC methodology, and Tessl
spec-driven development. Create Callout and ProcessFlow MDX components
following the Neo-Brutalist design system. Update featured posts to
highlight the new content.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Codestz

mdx-components.tsx

@@ -7,6 +7,8 @@ import {
   FileTree,
   TokenComparison,
   ToolCall,
+  Callout,
+  ProcessFlow,
 } from '@/components/mdx';
 import { Mermaid } from '@/components/mdx/Mermaid';
 
@@ -26,6 +28,8 @@ export const mdxComponents: MDXComponents = {
   FileTree,
   TokenComparison,
   ToolCall,
+  Callout,
+  ProcessFlow,
   // Headings
   h1: ({ children }) => (
     <h1 className="mb-4 sm:mb-6 mt-6 sm:mt-8 font-heading text-3xl sm:text-4xl font-bold uppercase text-foreground">

src/components/mdx/Callout/Callout.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { Quote, Info, AlertTriangle, Lightbulb } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { CalloutProps } from './Callout.types';
+
+const typeConfig = {
+  quote: { icon: Quote, label: 'Quote' },
+  info: { icon: Info, label: 'Info' },
+  warning: { icon: AlertTriangle, label: 'Warning' },
+  tip: { icon: Lightbulb, label: 'Tip' },
+};
+
+/**
+ * Callout Component - Styled Quote/Info Box
+ * Neo-Brutalist callout with secondary-colored header
+ * Uses bg-elevated for content, secondary for accents
+ * Supports author attribution for quote type
+ */
+export function Callout({ children, author, role, type = 'quote', className }: CalloutProps) {
+  const config = typeConfig[type];
+  const IconComponent = config.icon;
+
+  return (
+    <div
+      className={cn(
+        'my-8 overflow-hidden rounded-none border-[4px] border-foreground bg-bg-elevated shadow-[8px_8px_0px_0px] shadow-black',
+        className
+      )}
+    >
+      {/* Header bar */}
+      <div className="flex items-center gap-2 px-4 py-2 border-b-[4px] border-foreground bg-secondary">
+        <IconComponent size={14} className="text-secondary-text" strokeWidth={3} />
+        <span className="font-mono text-[10px] font-bold uppercase tracking-widest text-secondary-text">
+          {config.label}
+        </span>
+      </div>
+
+      {/* Content */}
+      <div className="border-l-[6px] border-l-secondary p-4 sm:p-6">
+        <p className="text-sm sm:text-base leading-relaxed text-foreground italic">
+          &ldquo;{children}&rdquo;
+        </p>
+
+        {author && (
+          <div className="mt-4 flex items-center gap-3 border-t-[2px] border-foreground pt-3">
+            <div className="h-8 w-8 flex items-center justify-center border-[2px] border-foreground bg-secondary font-mono text-xs font-black text-secondary-text">
+              {author.charAt(0).toUpperCase()}
+            </div>
+            <div>
+              <span className="font-mono text-xs font-bold uppercase tracking-wider text-foreground block">
+                {author}
+              </span>
+              {role && (
+                <span className="font-mono text-[10px] text-muted uppercase tracking-wider">
+                  {role}
+                </span>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/mdx/Callout/Callout.types.ts

@@ -0,0 +1,7 @@
+export interface CalloutProps {
+  children: string;
+  author?: string;
+  role?: string;
+  type?: 'quote' | 'info' | 'warning' | 'tip';
+  className?: string;
+}

src/components/mdx/Callout/index.ts

@@ -0,0 +1,2 @@
+export { Callout } from './Callout';
+export type { CalloutProps } from './Callout.types';

src/components/mdx/ProcessFlow/ProcessFlow.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { ArrowDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { ProcessFlowProps } from './ProcessFlow.types';
+
+/**
+ * ProcessFlow Component - Visual Step-by-Step Phases
+ * Neo-Brutalist numbered flow for showing methodologies and workflows
+ * Uses card pattern with secondary-colored header, thick borders, offset shadow
+ */
+export function ProcessFlow({ title, steps, className }: ProcessFlowProps) {
+  return (
+    <div
+      className={cn(
+        'my-8 overflow-hidden rounded-none border-[4px] border-foreground bg-bg-elevated shadow-[8px_8px_0px_0px] shadow-black',
+        className
+      )}
+    >
+      {/* Header */}
+      {title && (
+        <div className="border-b-[4px] border-foreground bg-secondary px-4 py-2">
+          <span className="font-mono text-[10px] font-bold text-secondary-text uppercase tracking-widest">
+            {title}
+          </span>
+        </div>
+      )}
+
+      {/* Steps */}
+      <div className="p-4 sm:p-6 space-y-0">
+        {steps.map((step, index) => (
+          <div key={index}>
+            <div className="flex items-start gap-4">
+              {/* Step number badge */}
+              <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center border-[3px] border-foreground bg-secondary font-mono text-base font-black text-secondary-text">
+                {index + 1}
+              </div>
+
+              {/* Step content */}
+              <div className="flex-1 min-w-0 pt-1">
+                <h4 className="font-mono text-sm sm:text-base font-bold uppercase tracking-wide text-foreground">
+                  {step.icon && <span className="mr-2">{step.icon}</span>}
+                  {step.title}
+                </h4>
+                <p className="mt-1 text-xs sm:text-sm leading-relaxed text-muted">
+                  {step.description}
+                </p>
+              </div>
+            </div>
+
+            {/* Connector */}
+            {index < steps.length - 1 && (
+              <div className="flex items-center justify-start pl-[18px] py-2">
+                <ArrowDown size={16} className="text-muted" strokeWidth={3} />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/mdx/ProcessFlow/ProcessFlow.types.ts

@@ -0,0 +1,11 @@
+export interface ProcessStep {
+  title: string;
+  description: string;
+  icon?: string;
+}
+
+export interface ProcessFlowProps {
+  title?: string;
+  steps: ProcessStep[];
+  className?: string;
+}

src/components/mdx/ProcessFlow/index.ts

@@ -0,0 +1,2 @@
+export { ProcessFlow } from './ProcessFlow';
+export type { ProcessFlowProps, ProcessStep } from './ProcessFlow.types';

src/components/mdx/index.ts

@@ -14,3 +14,7 @@ export { TokenComparison } from './TokenComparison';
 export type { TokenComparisonProps, TokenApproach, TokenStep } from './TokenComparison';
 export { ToolCall } from './ToolCall';
 export type { ToolCallProps, ToolCallResult } from './ToolCall';
+export { Callout } from './Callout';
+export type { CalloutProps } from './Callout';
+export { ProcessFlow } from './ProcessFlow';
+export type { ProcessFlowProps, ProcessStep } from './ProcessFlow';

src/content/blog/building-portfolio-with-ai.mdx

@@ -4,7 +4,7 @@ description: 'How I leveraged Claude Code, Gemini, and AI-driven development to
 publishedAt: '2026-02-08'
 category: 'ai'
 tags: ['ai', 'claude', 'gemini', 'portfolio', 'nextjs', 'development-workflow']
-featured: true
+featured: false
 type: 'experiment'
 author: 'Esteban Estrada'
 thumbnail: '/images/blog/portfolio-blog.png'