Portfolio App Development (Photographer, Designer)
Portfolio app — storefront. Loading first image in 3 seconds kills impression. Clunky gallery with identical square previews kills author's style. Task — show work fast, beautifully and with correct proportions.
Gallery with Aspect Ratio Preservation
Square grid for portfolio — bad choice: photographer shoots in 3:2 and 16:9, illustrator — in 4:5 and 1:1. Use waterfall layout (Pinterest-style) or adaptive grid with aspect preservation.
iOS: UICollectionViewFlowLayout with estimatedItemSize poorly handles waterfall. Right choice — custom UICollectionViewLayout where cells distributed per column greedily with minimal height difference. Or UICollectionViewCompositionalLayout with .fractionalWidth and groups of different sizes for editorial grids.
Android/Compose: StaggeredVerticalGrid from Material3 or LazyStaggeredVerticalGrid. Cell height computed from image aspect ratio before load — if API returns width/height in metadata, skeleton will be correct size without jumps.
Flutter: flutter_staggered_grid_view with StaggeredGrid.count.
Image Loading: Progressive JPEG and Blurhash
First impression — placeholder before load. Blurhash (20-30 byte string encoding image colors) gives colored blurred preview instantly. Gray rectangle — no.
On iOS: SDWebImage or Kingfisher with blurhash placeholder. On Android: Coil with placeholder(blurhashDrawable). On Flutter: cached_network_image + flutter_blurhash.
Progressive JPEG: browsers render gradually, mobiles — no (show empty field until full load). For large JPEG > 1 MB use tiling via CATiledLayer (iOS) or SubsamplingScaleImageView (Android) — image displays in pieces.
Detail View and Gestures
Photo fullscreen view: UIPinchGestureRecognizer + UIPanGestureRecognizer on iOS with CALayer.transform (not frame — causes lag). Right zoom: double-tap magnifies to 2x at tap point, repeat returns. On Android: PhotoView library or TransformationLayout. Flutter: photo_view package.
Transition from gallery to detail: shared element transition. On iOS — UIViewControllerTransitioningDelegate with animateTransition, cell "flies" to place on detail screen. On Android Compose — sharedBounds Modifier with Compose Navigation.
Portfolio Organization
Structure: projects → series → photos. Photographer creates series (Ivanov wedding, portrait shoot), client sees neat albums. Or tags for flat navigation.
Drag & drop for reordering: UICollectionView with UICollectionViewDragDelegate (iOS 11+). Android Compose: ReorderablelazyGrid from reorderable library.
Contact and Privacy
Photographer doesn't want personal phone shown to all — use feedback form via API (Resend, SendGrid). Watermark on images: CoreGraphics / Canvas / CustomPainter — overlay transparent logo on image when sharing, not in storage.
Timeline: portfolio app with gallery, detail view and contact form — 2-3 weeks. With CMS for content management and push notifications about new work — 4-5 weeks.