←Back to Blogs
Building a Premium Bilingual Portfolio with Next.js 15

Building a Premium Bilingual Portfolio with Next.js 15

12/17/2025•8 min•
nextjsreacttailwinddockeri18nrtl

The Challenge

Building a developer portfolio that truly stands out requires more than just listing projects. It needs to reflect your technical capabilities while providing an exceptional user experience. For this portfolio, the goals were ambitious:

  • Bilingual support (English/Persian) with proper RTL handling

  • Premium glassmorphism UI that feels modern yet accessible

  • Production-ready infrastructure with Docker and automated deployments

  • Performance optimization without sacrificing visual appeal

    • Tech Stack

    Core Framework


  • Next.js 15 with App Router for server components and optimal performance

  • React 18 with concurrent features

  • Tailwind CSS for utility-first styling with custom design tokens

    • Internationalization


  • next-intl for type-safe translations

  • Custom RTL utilities for Persian layout

  • Locale-aware date formatting

    • Infrastructure


  • Docker multi-stage builds for minimal image size

  • Docker Compose for local development and production

  • GitHub Actions for CI/CD

    • Key Features Implemented

    1. Glassmorphism Design System

    The UI uses a carefully crafted glassmorphism aesthetic:

    .glass-card {
      background: rgba(17, 21, 44, 0.8);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(22, 242, 179, 0.1);
    }

    Hover states add depth with glow effects:

    .card:hover {
      border-color: rgba(22, 242, 179, 0.4);
      box-shadow: 0 0 30px rgba(22, 242, 179, 0.2);
      transform: translateY(-4px);
    }

    2. RTL-First Approach

    Instead of treating RTL as an afterthought, the design system was built with bidirectional support from the start:

  • Tailwind's rtl: variants for directional styles

  • Logical properties (ms-4, me-4) instead of physical (ml-4, mr-4)

  • Mirrored gradients and animations for Persian

    • 3. Performance Optimizations

  • Dynamic imports for heavy components (Lottie animations, Marquee)

  • Image optimization with Next.js Image component

  • Font subsetting for Persian typography

  • Staggered animations using CSS animation-delay

    • 4. Blog System

    The blog section features:

  • Responsive grid layout (1→2→3 columns)

  • Tag-based filtering with search

  • Reading time calculation

  • Locale-aware relative dates

    • Lessons Learned

  • Cache invalidation is hard - Next.js build cache required multiple full rebuilds during development

  • RTL is more than text direction - Shadows, gradients, and animations all need consideration

  • Accessibility matters - Focus states, keyboard navigation, and contrast ratios improve UX for everyone

    • What's Next

  • Blog post MDX support for rich content

  • Dark/light theme toggle

  • Performance monitoring with Web Vitals

  • Automated visual regression testing

    • ---

    This portfolio is open source. Feel free to explore the code and adapt it for your own use.