Skip to content
Astro Swiss Theme

Data Management

Learn how to add team members, portfolio projects, and manage your site’s content.

Quick Start

Section titled “Quick Start”

Adding an Employee

Section titled “Adding an Employee”

Employees are displayed in the Team Section using the EmployeeSection.astro component.

Step 1: Add Employee Data

Section titled “Step 1: Add Employee Data”

File: src/consts.ts

Add a new employee entry to the EMPLOYEES object:

src/consts.ts
export const EMPLOYEES: Record<string, EmployeeInfo> = {
    // ... existing employees ...


    // Add your new employee
    ABC: {  // Use a 3-letter trigram (e.g., initials)
        id: "ABC",
        name: "Anna Brown Carter",
        portrait: "/images/employees/anna-brown.jpg", // Optional
        email: "anna.brown@yourcompany.com",
        phone: "+41 89 123 45 70",
        socials: {
            linkedin: "https://www.linkedin.com/in/annabrown/",
            facebook: "",  // Leave empty if not used
            instagram: "",
            twitter: "",
            github: "https://github.com/annabrown/",
        },
    },
};

Step 2: Add Employee Translations

Section titled “Step 2: Add Employee Translations”

File: src/i18n/ui.ts

Add translations for the employee’s title and bio in all languages:

src/i18n/ui.ts
export const ui = {
    fr: {
        // ... existing translations ...


        // Add employee translations (French)
        'employee.ABC.title': 'Directrice Marketing',
        'employee.ABC.bio': 'Anna dirige notre stratégie marketing avec créativité et innovation.',
    },
    de: {
        // ... existing translations ...


        // Add employee translations (German)
        'employee.ABC.title': 'Marketing Direktorin',
        'employee.ABC.bio': 'Anna leitet unsere Marketingstrategie mit Kreativität und Innovation.',
    },
    en: {
        // ... existing translations ...


        // Add employee translations (English)
        'employee.ABC.title': 'Marketing Director',
        'employee.ABC.bio': 'Anna leads our marketing strategy with creativity and innovation.',
    },
} as const;

Translation Keys Format:

  • Title: employee.{ID}.title
  • Bio: employee.{ID}.bio

Step 3: Add Portrait Image (Optional)

Section titled “Step 3: Add Portrait Image (Optional)”

If you have a portrait image:

  1. Add the image to public/images/employees/
  2. Reference it in consts.ts as shown above
  3. Recommended size: 240x240px or larger (square)

If you leave the portrait field empty, the component will automatically generate an avatar using the employee’s name.

Step 4: Verify

Section titled “Step 4: Verify”
  1. Save all files
  2. The employee will automatically appear in the Team section
  3. Check all language versions to ensure translations are correct

Adding a Portfolio Project

Section titled “Adding a Portfolio Project”

Portfolio projects are displayed in the Portfolio Section with an interactive carousel and lightbox.

Portfolio carousel with lightbox

Step 1: Prepare Your Project Image

Section titled “Step 1: Prepare Your Project Image”

Option A: Use a local image

  1. Add your image to src/assets/portfolio/
  2. Recommended size: 800x600px or similar aspect ratio
  3. Supported formats: JPG, PNG, WebP

Option B: Use an external URL

  • You can use any image URL (e.g., placeholder services, CDN)

Step 2: Add Project to French Portfolio

Section titled “Step 2: Add Project to French Portfolio”

File: src/data/portfolio/fr.ts

src/data/portfolio/fr.ts
import { nanoid } from "nanoid";
import type { ImageMetadata } from "astro";


// If using local image, import it:
import myProjectImage from "../../assets/portfolio/my-project.jpg";


export const portfolioFr: PortfolioProject[] = [
    // ... existing projects ...


    // Add your new project
    {
        id: nanoid(),  // Auto-generates unique ID
        title: "Mon Nouveau Projet",
        description: "Description détaillée du projet en français.\n\nVous pouvez utiliser plusieurs lignes.",
        image: myProjectImage,  // Use imported image
        // OR use external URL:
        // image: "https://example.com/image.jpg",


        // Optional: Call-to-action buttons
        primaryCtaText: "Voir le projet →",
        primaryCtaLink: "https://example.com/project",
        secondaryCtaText: "En savoir plus",
        secondaryCtaLink: "https://example.com/about",
    },
];

Step 3: Add Project to German Portfolio

Section titled “Step 3: Add Project to German Portfolio”

File: src/data/portfolio/de.ts

Add the same project with German translations:

src/data/portfolio/de.ts
import { nanoid } from "nanoid";
import myProjectImage from "../../assets/portfolio/my-project.jpg";


export const portfolioDe: PortfolioProject[] = [
    // ... existing projects ...


    {
        id: nanoid(),  // Different ID is OK
        title: "Mein Neues Projekt",
        description: "Detaillierte Projektbeschreibung auf Deutsch.\n\nSie können mehrere Zeilen verwenden.",
        image: myProjectImage,  // Same image
        primaryCtaText: "Projekt ansehen →",
        primaryCtaLink: "https://example.com/project",
        secondaryCtaText: "Mehr erfahren",
        secondaryCtaLink: "https://example.com/about",
    },
];

Repeat for English (src/data/portfolio/en.ts) with English translations.

Project Properties Explained

Section titled “Project Properties Explained”
Property Required Description
id ✅ Yes Unique identifier (use nanoid())
title ✅ Yes Project title
description ✅ Yes Project description (supports multi-line with \n)
image ✅ Yes Imported image/video or URL string (supports MP4, WebM, MOV, OGG)
primaryCtaText ❌ No Text for primary button
primaryCtaLink ❌ No URL for primary button
secondaryCtaText ❌ No Text for secondary button
secondaryCtaLink ❌ No URL for secondary button

Step 4: Verify

Section titled “Step 4: Verify”
  1. Save all files
  2. The project will automatically appear in the portfolio carousel
  3. Test the lightbox by clicking on the project image
  4. Verify all language versions

Adding Videos to Portfolio

Section titled “Adding Videos to Portfolio”

The portfolio section supports both images and videos, providing a richer showcase for your projects. Videos are detected automatically and displayed with enhanced UX features.

Supported Video Formats

Section titled “Supported Video Formats”

The portfolio component supports the following video formats (case-insensitive):

  • MP4 (.mp4) - Recommended for best compatibility
  • WebM (.webm) - Good for web optimization
  • MOV (.mov) - Apple QuickTime format
  • OGG (.ogg) - Open format support

Adding a Video Project

Section titled “Adding a Video Project”

Adding a video works exactly like adding an image project. The component automatically detects video files and handles them appropriately.

Option A: Local Video File

Section titled “Option A: Local Video File”

  1. Add your video to src/assets/portfolio/

    src/assets/portfolio/
    ├── my-project.jpg
    └── my-demo-video.mp4  ← Add your video here

  2. Import and use in src/data/portfolio/fr.ts:

    src/data/portfolio/fr.ts
    import { nanoid } from "nanoid";
    import myDemoVideo from "../../assets/portfolio/my-demo-video.mp4";
    

    export const portfolioFr: PortfolioProject[] = [
        // ... existing projects ...
    

        {
            id: nanoid(),
            title: "Démonstration Vidéo",
            description: "Une présentation vidéo de notre projet.",
            image: myDemoVideo,  // Use video file just like an image
        },
    ];

  3. Add the same project to other language files with translated text

Option B: External Video URL

Section titled “Option B: External Video URL”
src/data/portfolio/fr.ts
{
    id: nanoid(),
    title: "Projet Vidéo Externe",
    description: "Vidéo hébergée sur un CDN ou service externe.",
    image: "https://example.com/videos/my-video.mp4",  // External URL
}

Video Display Features

Section titled “Video Display Features”

Videos in the portfolio have enhanced UX features:

Section titled “Carousel Thumbnail”
  • First frame display: Videos show their first frame as the thumbnail using #t=0.1 timestamp
  • Play icon overlay: Centered play button with hover animation
  • Visual feedback: Darker overlay on hover with scaling play button effect
Section titled “Lightbox Playback”
  • Auto-play: Videos attempt to play automatically when opened (with graceful fallback)
  • Native controls: Full video player controls (play, pause, seek, volume, fullscreen)
  • Loading indicator: Spinner shown while video is buffering
  • Responsive sizing: Videos scale to fit viewport (max-w-[90vw], max-h-[80vh])

Navigation & Cleanup

Section titled “Navigation & Cleanup”
  • Seamless navigation: Arrow keys and buttons work between images and videos
  • Auto-stop: Videos automatically pause when navigating away or closing lightbox
  • Memory efficient: Video sources are cleared to prevent background buffering

Video Best Practices

Section titled “Video Best Practices”

✅ Do:

  • Compress videos before adding (recommended: under 10MB for web)
  • Use MP4 with H.264 codec for best compatibility
  • Test on both desktop and mobile devices
  • Ensure the first frame is visually appealing (it becomes the thumbnail)
  • Keep videos short (30-60 seconds recommended for portfolio showcases)
  • Add descriptive titles and descriptions

❌ Don’t:

  • Use extremely large video files (slow loading, poor UX)
  • Rely solely on autoplay (some browsers/devices restrict it)
  • Forget to test video playback on mobile
  • Use proprietary formats without MP4 fallback

Testing Video Projects

Section titled “Testing Video Projects”

After adding a video, verify the following:

  1. Carousel Display

    • ✅ Video thumbnail shows first frame
    • ✅ Play icon overlay appears centered
    • ✅ Hover effect works (darker overlay, larger play button)
    • ✅ Click opens lightbox

  2. Lightbox Playback

    • ✅ Video plays automatically or shows controls
    • ✅ Controls are visible and functional
    • ✅ Navigation counter shows correct position
    • ✅ Previous/Next buttons work

  3. Mixed Content Navigation

    • ✅ Arrow keys navigate between images and videos smoothly
    • ✅ Videos stop playing when navigating away
    • ✅ No console errors or buffering issues

  4. Cleanup

    • ✅ Escape key closes lightbox and stops video
    • ✅ Clicking outside lightbox closes it and stops video
    • ✅ No memory leaks (check browser task manager)

  5. Mobile Testing

    • ✅ Swipe gestures work for navigation
    • ✅ Video plays on mobile devices
    • ✅ Play button is touch-friendly
    • ✅ Responsive sizing works correctly

Accessibility

Section titled “Accessibility”

Video content maintains full accessibility:

  • ARIA labels: All interactive elements properly labeled
  • Keyboard navigation: Tab, Enter, Escape, Arrow keys fully functional
  • Semantic HTML: Proper <video> element with fallback text
  • Focus management: Lightbox traps focus appropriately

Updating Company Information

Section titled “Updating Company Information”

Company information is centralized in src/consts.ts.

Edit Company Details

Section titled “Edit Company Details”
src/consts.ts
export const COMPANY: CompanyInfo = {
    name: "Your Company Name",
    address: "Your Street Address",
    pobox: "P.O. Box 123",  // Leave empty if not used
    city: "CH-1000 Your City",
    phone: "+41 XX XXX XX XX",
    email: "contact@yourcompany.com",
    mapsUrl: "https://maps.google.com/?q=Your+Address",
    socials: {
        linkedin: "https://www.linkedin.com/company/yourcompany/",
        facebook: "https://facebook.com/yourcompany",
        instagram: "https://instagram.com/yourcompany",
        twitter: "https://twitter.com/yourcompany",
        github: "https://github.com/yourcompany",
    },
};

Update Company Translations

Section titled “Update Company Translations”

File: src/i18n/ui.ts

Update translatable company information:

src/i18n/ui.ts
export const ui = {
    fr: {
        'business.name': 'Votre Entreprise',
        'business.tagline': 'Votre slogan ici',
        'business.description': 'Description de votre entreprise...',
        // ... more translations
    },
    de: {
        'business.name': 'Ihr Unternehmen',
        'business.tagline': 'Ihr Slogan hier',
        'business.description': 'Beschreibung Ihres Unternehmens...',
        // ... more translations
    },
};

Best Practices

Section titled “Best Practices”

Employee Management

Section titled “Employee Management”

✅ Do:

  • Use consistent 3-letter trigrams (IDs)
  • Add translations for all languages
  • Optimize portrait images before adding
  • Leave social fields empty if not used

❌ Don’t:

  • Use duplicate IDs
  • Forget to add translations in all languages
  • Use overly large portrait images

Portfolio Management

Section titled “Portfolio Management”

✅ Do:

  • Use consistent image sizes (800x600 recommended)
  • Optimize images before importing
  • Compress videos before adding (recommended: under 10MB)
  • Use MP4 (H.264) format for videos for best compatibility
  • Add projects to all language files
  • Use nanoid() for unique IDs
  • Test the lightbox functionality with both images and videos
  • Ensure video first frames are visually appealing (they become thumbnails)
  • Test video playback on mobile devices

❌ Don’t:

  • Use different projects in different languages
  • Forget to import local images/videos
  • Use extremely large images or videos (slow loading, poor UX)
  • Rely solely on video autoplay (some browsers restrict it)
  • Use proprietary video formats without MP4 fallback

Translation Management

Section titled “Translation Management”

✅ Do:

  • Keep translation keys consistent across languages
  • Use dot notation for organization
  • Add comments for context
  • Test all language versions

❌ Don’t:

  • Hardcode text in components
  • Skip languages when adding new keys
  • Use inconsistent naming conventions

Quick Reference

Section titled “Quick Reference”

Adding an Employee

Section titled “Adding an Employee”
  1. Add to EMPLOYEES in src/consts.ts
  2. Add translations in src/i18n/ui.ts (all languages)
  3. Optionally add portrait image to public/images/employees/

Adding a Portfolio Project

Section titled “Adding a Portfolio Project”
  1. Add image/video to src/assets/portfolio/ (if local)
  2. Import image/video in src/data/portfolio/fr.ts
  3. Add project object to portfolioFr array
  4. Repeat for src/data/portfolio/de.ts (and other languages)
  5. For videos: Use MP4 format for best compatibility

Updating Company Info

Section titled “Updating Company Info”
  1. Edit COMPANY object in src/consts.ts
  2. Update translations in src/i18n/ui.ts

Next Steps

Section titled “Next Steps”