Visual Assets Directory

Visual Assets Directory

This directory contains all visual assets for the Wesley Matlock iOS Developer Portfolio.

Directory Structure

images/
├── profile.jpg              # Professional headshot (500x500px, <100KB)
├── og-image.png            # Open Graph social sharing (1200x630px)
├── projects/               # Project-specific assets
│   ├── heartmappro/
│   │   ├── icon.png        # App icon (1024x1024px, <50KB)
│   │   ├── screen1.png     # Hero screenshot (<200KB)
│   │   └── screen2.png     # Secondary screenshot (<200KB)
│   ├── scanscope/
│   │   ├── icon.png
│   │   ├── screen1.png
│   │   └── screen2.png
│   ├── visionflow/
│   │   ├── icon.png
│   │   ├── screen1.png
│   │   └── screen2.png
│   ├── streamlinetv/
│   │   ├── icon.png
│   │   ├── screen1.png
│   │   └── screen2.png
│   ├── beatsync/
│   │   ├── icon.png
│   │   ├── screen1.png
│   │   └── screen2.png
│   └── devtools/
│       ├── icon.png
│       ├── screen1.png
│       └── screen2.png
├── companies/              # Company logos for experience section
│   ├── nike.png           # Company 1 logo (~100px height, <20KB)
│   ├── company2.png       # Company 2 logo (update filename)
│   └── company3.png       # Company 3 logo (update filename)
├── favicon/               # Site branding assets
│   ├── favicon.ico       # Browser favicon
│   └── apple-touch-icon.png
└── ui/                   # UI elements and branding
    ├── swift-logo.svg    # Swift programming language logo
    └── swiftui-logo.svg  # SwiftUI framework logo

Asset Specifications

Profile Photo (profile.jpg)

  • Size: 500×500px (1:1 aspect ratio)
  • Format: JPEG
  • File Size: <100KB
  • Quality: Professional headshot with good lighting
  • Background: Clean, simple background
  • Usage: Homepage hero, about page, navigation

Project Icons (projects/*/icon.png)

  • Size: 1024×1024px
  • Format: PNG with transparency
  • File Size: <50KB each
  • Style: iOS app icon style with rounded corners
  • Quality: High-resolution, professional design
  • Usage: Project showcase, portfolio grid

Screenshots (projects/*/screen*.png)

  • Size: 1290×2796px (iPhone 15 Pro Max)
  • Format: PNG
  • File Size: <200KB each
  • Content:
    • screen1.png: Hero/main feature view
    • screen2.png: Secondary feature or results
  • Style: Device frames optional but recommended
  • Usage: Project detail pages, feature highlights

Company Logos (companies/*.png)

  • Height: ~100px (width auto-scaled)
  • Format: PNG with transparent background
  • File Size: <20KB each
  • Quality: Official company logos from press kits
  • Usage: Experience timeline, work history

Favicon Assets (favicon/)

  • Base Size: 512×512px design
  • Formats: ICO, PNG (multiple sizes)
  • Generation: Use favicon.io for complete package
  • Colors: Match site branding/personal brand
  • Usage: Browser tabs, bookmarks, PWA

Asset Sources

Icons & Screenshots

  1. App Store Connect - Download official app icons
  2. Xcode Projects - Export from Assets.xcassets
  3. Design Files - Sketch, Figma, or other design tools
  4. Mockup Tools - MockUPhone, Rotato, Shots for screenshots

Company Logos

  1. Official Websites - Press/media kit sections
  2. LinkedIn - Company pages
  3. Brandfetch - Logo database
  4. Clearbit Logo API - Programmatic access

Optimization Tools

  • ImageOptim (Mac) - Batch optimization
  • TinyPNG - Online compression
  • Squoosh - Google’s web optimizer
  • Preview (Mac) - Basic editing and resizing

Implementation Checklist

  • Profile photo added and optimized
  • All 6 project icons created with iOS styling
  • Screenshots captured for each project (2 per project)
  • Company logos gathered and resized consistently
  • Favicon package generated and installed
  • All images optimized for web performance
  • File sizes meet specifications
  • Images load quickly on mobile devices

Quality Standards

  • Professional Grade: All assets should look polished and production-ready
  • Consistent Style: Maintain visual consistency across all assets
  • Performance: Optimize for fast loading without sacrificing quality
  • Accessibility: Ensure good contrast and meaningful alt text
  • Responsive: Images should work well at different screen sizes

Update Notes

When replacing placeholder assets:

  1. Maintain exact filenames and paths
  2. Keep within specified size limits
  3. Test across different devices
  4. Update alt text in templates if needed
  5. Consider 2x retina versions for key assets

📝 Next Steps: Follow the Phase 3 Implementation Guide to systematically create all required assets.