Building a Modern Multilingual Website: A Complete Development Journey

2025-06-24

Building a Modern Multilingual Website: A Complete Development Journey

The Vision and Planning Phase

When I first conceptualized this website, I had a clear vision: create a modern, multilingual personal website that would serve as both a portfolio and a blog platform. The goal was to build something that felt contemporary, performant, and accessible to users from different linguistic backgrounds.

Initial Requirements Analysis

Before writing a single line of code, I spent time defining the core requirements:

  1. Multilingual Support: The website needed to support multiple languages (English, Slovenian, German) with seamless switching
  2. Modern Design: Clean, minimalist aesthetic with smooth animations and excellent UX
  3. Blog Functionality: A content management system for blog posts with markdown support
  4. Responsive Design: Perfect experience across all device sizes
  5. Performance: Fast loading times and smooth interactions
  6. Accessibility: WCAG compliant with proper semantic HTML

Technology Stack Selection

After careful consideration, I chose the following technology stack:

  • Next.js 15: For its excellent performance, SEO capabilities, and App Router
  • TypeScript: For type safety and better developer experience
  • React 19: Latest version for modern React features
  • Framer Motion: For smooth, performant animations
  • Gray Matter + Remark: For markdown processing
  • Custom CSS: Instead of Tailwind for more control over the design system

Architecture and Design Decisions

File Structure Planning

I organized the project with a clear, scalable structure:

src/
├── app/
│   └── [locale]/          # Dynamic routing for languages
│       ├── about/
│       ├── blog/
│       ├── contact/
│       └── layout.tsx
├── components/            # Reusable UI components
├── lib/                   # Utility functions
└── locales/              # Translation files

Internationalization Strategy

The multilingual approach was implemented using Next.js dynamic routing with [locale] segments. This allows for clean URLs like /en/about, /sl/blog, etc. The translation system uses a simple but effective approach with locale files and a custom useTranslations hook.

Content Management

For the blog system, I chose markdown files with frontmatter for metadata. This approach provides:

  • Version control for content
  • Easy editing and previewing
  • No database dependencies
  • Excellent performance with static generation

Development Process

Phase 1: Foundation and Setup

The development began with setting up the Next.js project with TypeScript and configuring the basic routing structure. I implemented the locale-based routing system and created the basic layout components.

Phase 2: Design System Implementation

Instead of using Tailwind CSS, I opted for custom CSS with CSS variables for theming. This decision was driven by:

  • Better Control: More precise control over styling and animations
  • Smaller Bundle Size: No utility class overhead
  • Custom Animations: Easier implementation of complex animations
  • Dark Mode Support: Seamless theme switching with CSS variables

The design system includes:

  • Consistent color palette with light/dark mode support
  • Typography scale using the Lexend font family
  • Spacing and layout utilities
  • Animation presets for consistent motion design

Phase 3: Component Development

I built reusable components with a focus on accessibility and performance:

  • Header: Fixed navigation with smooth scrolling
  • Footer: Simple, clean footer design
  • Blog Components: Post list and individual post views
  • Contact Form: Interactive contact section

Phase 4: Animation and Interactions

Framer Motion was integrated to create smooth, performant animations:

  • Page Transitions: Smooth fade-in effects
  • Scroll Animations: Elements animate as they enter the viewport
  • Interactive Elements: Hover states and micro-interactions
  • Scroll Snap: Full-height sections with smooth navigation

Phase 5: Content Management System

The blog system was implemented with:

  • Markdown Processing: Gray Matter for frontmatter, Remark for HTML conversion
  • File-based Routing: Automatic route generation based on markdown files
  • Metadata Handling: SEO-friendly meta tags and structured data
  • Image Support: Optimized image handling with Next.js Image component

Key Technical Challenges and Solutions

1. Scroll Snap Navigation

One of the most challenging features was implementing the scroll snap navigation with dot indicators. The solution involved:

const [activeIndex, setActiveIndex] = useState(0);

useEffect(() => {
  const handleScroll = () => {
    const sections = sectionIds.map(id => document.getElementById(id));
    const scrollPos = containerRef.current?.scrollTop || 0;
    const offsets = sections.map(sec => sec?.offsetTop || 0);
    const index = offsets.findIndex((offset, i) => {
      const nextOffset = offsets[i + 1] ?? Infinity;
      return scrollPos >= offset - 10 && scrollPos < nextOffset - 10;
    });
    setActiveIndex(index === -1 ? 0 : index);
  };
  // Event listener setup...
}, []);

2. Multilingual Content Management

Managing content across multiple languages required a structured approach:

  • Separate markdown files for each language
  • Consistent frontmatter structure
  • Fallback to English for missing translations
  • URL structure that clearly indicates the language

3. Performance Optimization

Several techniques were employed to ensure optimal performance:

  • Static Generation: All pages are pre-rendered at build time
  • Image Optimization: Next.js Image component with proper sizing
  • Code Splitting: Automatic code splitting by Next.js
  • CSS Optimization: Minimal, efficient CSS with no unused styles

Design Philosophy and UX Decisions

Minimalist Approach

The design follows a minimalist philosophy with:

  • Clean typography and ample white space
  • Subtle animations that enhance rather than distract
  • Consistent visual hierarchy
  • Accessible color contrast ratios

Mobile-First Design

The website was designed mobile-first, ensuring excellent experience on all devices:

  • Responsive breakpoints at 600px, 768px, and 1024px
  • Touch-friendly interactive elements
  • Optimized navigation for mobile devices
  • Proper viewport handling

Accessibility Considerations

Accessibility was prioritized throughout development:

  • Semantic HTML structure
  • Proper ARIA labels and roles
  • Keyboard navigation support
  • Screen reader compatibility
  • High contrast ratios

Deployment and Launch

Build Process

The deployment process includes:

  • TypeScript compilation and type checking
  • ESLint for code quality
  • Static site generation
  • Image optimization
  • Performance auditing

Performance Metrics

The final website achieves excellent performance scores:

  • Lighthouse Performance: 95+
  • First Contentful Paint: < 1.5s
  • Largest Contentful Paint: < 2.5s
  • Cumulative Layout Shift: < 0.1

Lessons Learned and Future Improvements

What Worked Well

  1. Custom CSS Approach: Provided better control and smaller bundle size
  2. File-based Content: Simple, version-controlled content management
  3. TypeScript Integration: Caught many potential bugs early
  4. Component Architecture: Reusable, maintainable code structure

Areas for Enhancement

  1. Content Management: Could benefit from a headless CMS for non-technical users
  2. Analytics: Integration with privacy-focused analytics
  3. SEO: Enhanced structured data and meta tags
  4. Performance: Further optimization for Core Web Vitals

Future Roadmap

Planned improvements include:

  • CMS Integration: Strapi or similar headless CMS
  • Advanced Animations: More sophisticated motion design
  • PWA Features: Offline support and app-like experience
  • Enhanced Blog: Comments, search, and categorization
  • Portfolio Section: Showcase of projects and work

Conclusion

Building this website was an excellent exercise in modern web development. The combination of Next.js, TypeScript, and thoughtful design decisions resulted in a fast, accessible, and maintainable website. The multilingual support and blog functionality provide a solid foundation for future growth.

The development process reinforced the importance of:

  • Planning: Thorough requirements analysis saves time later
  • Performance: Modern tools make it easier to build fast websites
  • Accessibility: Building for everyone from the start
  • Maintainability: Clean code and good architecture pay dividends

This project serves as a testament to how modern web technologies can create exceptional user experiences while maintaining code quality and performance standards.

This website represents the culmination of modern web development best practices, combining performance, accessibility, and beautiful design into a cohesive digital experience.