Devcorp Website

// The goal: One file controls everything
content/projects/new-project/index.mdx
  ├── Homepage project card
  ├── Projects page entry
  ├── Blog page preview
  ├── Detailed blog post
  └── All metadata & relationships

// The challenge: 15+ fields, type safety, validation
export const projectSchema = z.object({
  title: z.string(),
  status: z.enum(["planned", "building", "shipped"]),
  techStack: z.array(z.string()).default([]),
  challenges: z.array(z.string()).default([]),
  keyFeatures: z.array(z.string()).default([]),
  highlights: z.array(z.string()).optional(),
  lessonsLearned: z.array(z.string()).optional(),
  // ... and 8 more fields
});

// Design constraints:
- 5 distinct page types (Home, About, Projects, Blog, Contact)
- Each needs unique layout but consistent branding
- Mobile-first responsive design
- Dark hero sections + light content sections
- Custom color palette that works in all contexts

// Our approach:
:root {
  --black: #000000;      // Headers, CTAs
  --davy-gray: #4a4a4a;  // Secondary text
  --silver: #b3b3b3;     // Muted elements
  --seasalt: #f8f7f5;    // Primary backgrounds
  --alabaster: #f5f2e9;  // Secondary backgrounds
}

// Performance goals:
- < 3s initial page load
- Smooth 60fps animations
- Optimized images with lazy loading
- Minimal JavaScript bundle

// Our strategy:
1. Server Components by default (smaller JS bundles)
2. Client components only for interactivity
3. Next.js Image optimization (WebP + lazy loading)
4. Framer Motion with GPU acceleration
5. Static site generation for instant loads

// Result: 95+ Lighthouse scores across all metrics

// The UX problem:
User journey: Home → Projects → Project Detail → Click TOC → Click Back
Expected: Goes back to Projects page
Actual: Goes to previous TOC section (confusing!)

// Our intelligent solution:
const SmartBackButton = () => {
  const referrer = document.referrer;
  const basePath = referrer.split('#')[0]; // Strip anchor links

  // Smart routing based on actual previous page
  if (basePath === "/") return "Back to Home";
  if (basePath === "/projects") return "Back to Projects";
  if (basePath === "/blog") return "Back to Blog";

  // Smooth scrolling without history pollution
  const handleTOCClick = () => {
    element.scrollIntoView({ behavior: 'smooth' });
    // No href="#" = no history entry
  };
};

// Scalability considerations:
- Dynamic sorting by status priority (shipped > building > planned)
- Flexible author system (single or multiple authors)
- Extensible content schema with optional fields
- Modular component architecture
- Type-safe refactoring (change schema = auto-update everywhere)

// Example: Adding a new project status
enum Status { shipped, building, planned, archived } // Just add here
// → All sorting, filtering, and UI updates automatically

// Example: Adding new content fields
blogExcerpt: z.string().optional(), // Just add to schema
// → TypeScript types generated, validation added, UI ready