Johannes Bertram

Image Assets

This directory contains all image assets for the website. Please add the following images:

Required Images:

Profile and Hero Section:

• profile.jpg - Professional headshot (recommended: 400x400px, high quality)
• hero-landscape.jpg - Hero background landscape image (recommended: 1920x1080px, high quality)
• favicon-32x32.png - Website favicon (32x32px)
• favicon-16x16.png - Website favicon (16x16px)

Project Screenshots:

• project1.jpg - AutoML Pipeline Framework screenshot
• project2.jpg - Vision Transformer project screenshot
• project3.jpg - NLP Analysis Tool screenshot
• project4.jpg - Reinforcement Learning Environment screenshot

Blog Post Images:

• blog1.jpg - Neural Architecture Search blog post image
• blog2.jpg - Interpretable AI blog post image
• blog3.jpg - Federated Learning blog post image

Image Guidelines:

Profile Photo:

• Format: JPG or PNG
• Size: 400x400px (square ratio)
• Quality: High resolution, professional appearance
• Background: Clean, preferably neutral
• Lighting: Well-lit, clear facial features

Hero Landscape:

• Format: JPG recommended
• Size: 1920x1080px (16:9 ratio) or larger
• Content: Professional landscape, nature scene, or abstract background
• Quality: High resolution, visually appealing
• Style: Should complement the green color theme

Project Images:

• Format: JPG recommended
• Size: 800x600px (4:3 ratio)
• Content: Screenshots, diagrams, or representative visuals
• Quality: Clear, readable text and interface elements

Blog Images:

• Format: JPG recommended
• Size: 800x600px (4:3 ratio)
• Content: Relevant technical illustrations, charts, or concept images
• Style: Professional, consistent with overall design

Favicons:

• Format: PNG with transparency
• Sizes: 16x16px and 32x32px
• Design: Simple, recognizable at small sizes
• Colors: Match website color scheme

Optimization Tips:

• Compress images for web (aim for <200KB for large images)
• Use appropriate formats (JPG for photos, PNG for graphics with transparency)
• Consider creating WebP versions for better performance
• Add alt text descriptions in HTML for accessibility

Placeholder Replacement:

Until you add real images, the website will show broken image icons. You can:

1. Add your own images following the guidelines above
2. Use placeholder services like https://picsum.photos/ temporarily
3. Use stock photos from Unsplash, Pexels, or similar services

Example placeholder URLs you can use temporarily:

• Profile: https://picsum.photos/400/400?random=1
• Projects: https://picsum.photos/800/600?random=2
• Blog: https://picsum.photos/800/600?random=3