i18n Complete & Portfolio Launch – 9 Projects Live

After a productive session, Project Angmar now has full internationalization support and a complete portfolio showcasing 9 professional projects with detailed case studies.

This update focused on translation infrastructure, critical MDX rendering fixes, and building a comprehensive portfolio that demonstrates real-world development skills.

🎯 Overview#

Today's work combined three major goals:

1. i18n System – Complete translation support across all sections
2. Portfolio Development – 9 projects with full case studies
3. Critical Fixes – MDX rendering and component architecture improvements

The result: a fully bilingual site with a professional portfolio ready to showcase.

🌍 Internationalization Complete#

Translation Infrastructure#

Expanded translation files (no.ts and en.ts) with comprehensive keys for:

• Blog section – Index, post pages, navigation, post counts
• Portfolio section – Filters, cards, detail pages, testimonials
• Home components – All text now uses translation system
• Layout elements – Header, footer, navigation fully translated

✅ Result: Seamless language switching with persistent preference

Component Updates#

Every component now properly uses useI18n() hook:

• BlogIndexClient & BlogPostClient
• PortfolioClient & ProjectDetailClient
• ProjectFilters, ProjectCard, Testimonials
• FeaturedProjects, BlogTeaser, CTA

✅ Result: Zero hardcoded text in UI components

🐞 Critical Bug Fixes#

MDX Rendering Issue#

⚠️ Major Fix: "Functions cannot be passed to Client Components" error

Problem: MDX components were being passed as props to client components, causing build failures.

Solution: Implemented server-side MDX rendering with children pattern:

• Server components handle MDX import and rendering
• Client components receive rendered content as children
• Applied to both blog posts and portfolio case studies

✅ Result: Clean builds, proper SSR, no runtime errors

Consistent Styling#

Standardized h1 headers across all pages:

• Portfolio, About, Blog now use text-4xl font-bold
• Centered layout with consistent spacing
• Professional, cohesive appearance

✅ Result: Visual consistency across entire site

💼 Portfolio Development#

9 Complete Projects#

Built comprehensive portfolio with diverse project types:

1. Match-A-Gift – Angular gift finder with intelligent recommendations
2. Mystic Potion Brewery – Educational game with coding quizzes
3. ColorCraft – Professional color palette testing tool
4. Buster Block – Full-stack movie review platform (MongoDB, Clerk)
5. Card Duel – Interactive card game with animations
6. ToDo App – Productivity app with Angular Signals
7. Feriehjelper – Travel planning assistant with i18n
8. Trevl – Photo diary with 4-language support
9. MysteryCharmer – Compliment generator with TurboRepo

Case Studies#

Each project includes detailed MDX case study:

• Overview – Project description and goals
• Key Features – Comprehensive feature breakdown
• Technical Implementation – Architecture and tech stack
• Challenges & Solutions – Real development problems solved
• Results – Outcomes and achievements
• Future Enhancements – Planned improvements
• Lessons Learned – Development insights

✅ Result: Professional portfolio demonstrating full-stack capabilities

Project Metadata#

Configured projects.ts with:

• Stack technologies
• Project tags
• Live and repository links
• Screenshots
• Year and featured status

✅ Result: Filterable, searchable project showcase

🎨 UI/UX Improvements#

Featured Projects Section#

Optimized home page project display:

• Limited to 3 most recent projects
• Added "View all projects" CTA button
• Consistent with blog teaser pattern
• Smooth animations and hover effects

Portfolio Filters#

Redesigned filter interface:

• Organized sections for Stack and Tags
• Improved search bar with focus effects
• Modern chip design with rounded-full style
• Better spacing and visual hierarchy

✅ Result: Intuitive, professional filtering experience

Component Consistency#

Ensured all components follow same patterns:

• ProjectCard uses i18n for Live/Repo/Case links
• FeaturedProjects matches ProjectCard styling
• Testimonials have fallback translations
• All buttons use consistent hover effects

🧩 Technical Details#

Architecture Improvements#

Server/Client Split:

// Server Component (page.tsx)
const MDXContent = await import(`@/content/blog/${slug}.mdx`);

return (
  <ClientComponent>
    <MDXContent />
  </ClientComponent>
);

Translation Pattern:

const { t } = useI18n();
<span>{t("portfolio.card.live")}</span>;

File Structure#

content/
├── blog/
│   ├── 2025-10-15-i18n-portfolio.mdx
│   └── posts.ts
├── portfolio/
│   ├── match-a-gift/index.mdx
│   ├── mystic-potion-brewery/index.mdx
│   ├── colorcraft/index.mdx
│   └── ... (6 more)
└── i18n/
    ├── messages/
    │   ├── no.ts
    │   └── en.ts
    └── I18nProvider.tsx

📊 Results & Metrics#

i18n Coverage
Before: Partial (home only) → After: Complete (all sections)

Portfolio Projects
Before: 0 → After: 9 with full case studies

MDX Rendering
Before: Broken (build errors) → After: Working (server-side)

Featured Projects
Before: All projects shown → After: 3 most recent + CTA

Filter UI
Before: Basic → After: Organized sections, modern chips

🧠 Development Notes#

Key principles maintained:

• Type Safety: TypeScript throughout translation system
• Performance: Server-side MDX rendering for optimal load times
• Maintainability: Consistent patterns across all components
• User Experience: Persistent language preference, smooth transitions
• Documentation: Comprehensive case studies for each project

🚀 What's Next#

Priorities for upcoming sessions:

• Add project screenshots and images
• Expand testimonials section
• Build resume/CV page
• Add contact form
• Create more blog content
• Implement project search
• Add project categories

⏱️ Session Summary#

Date: October 15, 2025
Total Time: ~6 hours
Files Changed: 30+
Projects Added: 9
Case Studies Written: 9
Translation Keys Added: 50+
Critical Fixes: 1 (MDX rendering)

Project Angmar now has a complete portfolio and full internationalization —
ready to showcase real development work to the world.

This marks the completion of core infrastructure and content foundation.