Dynamic Social Previews & Launch

To ensure your portfolio looks professional when shared on LinkedIn or X (Twitter), we will use the Next.js ImageResponse API. This allows you to programmatically generate Open Graph (OG) images using JSX and CSS.

1. Dynamic OG Image Generation

Instead of manually creating images for every project, Next.js can generate them on the fly using a special file convention: opengraph-image.tsx.

Implementation (app/portfolio/[slug]/opengraph-image.tsx):

import { ImageResponse } from 'next/og';
 
export const runtime = 'edge'; // Use Edge for speed
export const alt = 'Project Preview';
export const size = { width: 1200, height: 630 }; // Recommended size
 
export default async function Image({ params }: { params: { slug: string } }) {
  // Fetch project data for the dynamic title
  const { slug } = params;
  
  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#0a0a0a', // Matches our $background-dark
          backgroundImage: 'radial-gradient(circle at 25% 25%, #e63946 0%, transparent 20%)',
        }}
      >
        <div style={{ color: 'white', fontSize: 64, fontWeight: 'bold' }}>
          {slug.replace(/-/g, ' ')}
        </div>
        <div style={{ color: '#e63946', fontSize: 32, marginTop: 20 }}>
          Case Study | Alex Portfolio
        </div>
      </div>
    ),
    { ...size }
  );
}

2. Pre-Launch Checklist (2026 Edition)

Before hitting "Deploy" on Vercel, run through this high-performance checklist to ensure your site is job-market ready:

• Performance: Check that all images use next/image with proper priority for LCP elements.
• Accessibility: Run a Lighthouse audit; ensure all buttons have labels and images have alt text.
• SEO: Verify that robots.txt and sitemap.xml are generated correctly using the Next.js Metadata API.
• Forms:* Test your Server Actions in a production-like environment to ensure emails are being sent via your provider (e.g., Resend).
• Theming: Check for "theme-flicker" during hydration by testing dark mode in multiple browsers.
• Analytics: Enable Vercel Speed Insights to monitor Real User Monitoring (RUM) metrics once live

Final Summary

You have built a modern, MDX-powered portfolio using SCSS Modules, Framer Motion, and Server Actions. This stack is highly optimized for the 2026 web, focusing on minimal client-side JavaScript and maximum SEO visibility.

Congratulations! Your portfolio is officially complete