feat: themed avatars and branding updates #67

Merged
naomi merged 2 commits from feat/avatars into main 2026-02-20 21:11:13 -08:00
Owner

Summary

Added comprehensive avatar and branding updates across the library application:

๐ŸŒธ Updated Main Branding

  • New library-themed avatar (with playful "shh" gesture) for navigation icon
  • Updated favicon and all PWA icons (10 sizes from 72x72 to 512x512)
  • Added hero avatar to home page between title and subtitle
  • All branding uses consistent circular styling with elegant hover effects

๐ŸŽจ Media-Specific Avatars

Added unique themed avatars to each media list page:

  • ๐ŸŽฎ Games: Gaming setup with controller and LED lights (red #ff6b6b border)
  • ๐Ÿ“š Books: Reading in cozy library setting (brown #8b6f47 border)
  • ๐ŸŽต Music: Joyful with headphones and urban nightscape (blue #74b9ff border)
  • ๐Ÿ“บ Shows: Relaxing with remote and theater curtains (pink #e84393 border)
  • ๐Ÿ“– Manga: Reading manga with shelves background (teal #00b894 border)
  • ๐ŸŽจ Art: Art studio with paintbrush (yellow #fdcb6e border)

โœจ Features

  • 120x120px circular avatars with themed colour borders
  • Smooth hover animations (scale + shadow effects)
  • Centered hero sections at top of each list view
  • Consistent styling across all media types
  • Perfect integration with existing colour themes

๐Ÿ“Š Technical Details

  • All icons generated from source images at multiple resolutions
  • Static assets served with correct MIME types
  • Optimised image formats for performance
  • Responsive design with proper accessibility attributes

Test Plan

  • Verify navigation icon displays correctly in header
  • Check favicon appears in browser tabs
  • Test PWA icons on mobile devices
  • Confirm home page hero avatar renders properly
  • Verify all 6 media list avatars display with correct borders
  • Test hover animations on all avatars
  • Verify build succeeds
  • Check static assets serve with correct MIME types

๐ŸŒธ Created with love by Hikari ๐Ÿ’–

## Summary Added comprehensive avatar and branding updates across the library application: ### ๐ŸŒธ Updated Main Branding - New library-themed avatar (with playful "shh" gesture) for navigation icon - Updated favicon and all PWA icons (10 sizes from 72x72 to 512x512) - Added hero avatar to home page between title and subtitle - All branding uses consistent circular styling with elegant hover effects ### ๐ŸŽจ Media-Specific Avatars Added unique themed avatars to each media list page: - **๐ŸŽฎ Games**: Gaming setup with controller and LED lights (red #ff6b6b border) - **๐Ÿ“š Books**: Reading in cozy library setting (brown #8b6f47 border) - **๐ŸŽต Music**: Joyful with headphones and urban nightscape (blue #74b9ff border) - **๐Ÿ“บ Shows**: Relaxing with remote and theater curtains (pink #e84393 border) - **๐Ÿ“– Manga**: Reading manga with shelves background (teal #00b894 border) - **๐ŸŽจ Art**: Art studio with paintbrush (yellow #fdcb6e border) ### โœจ Features - 120x120px circular avatars with themed colour borders - Smooth hover animations (scale + shadow effects) - Centered hero sections at top of each list view - Consistent styling across all media types - Perfect integration with existing colour themes ### ๐Ÿ“Š Technical Details - All icons generated from source images at multiple resolutions - Static assets served with correct MIME types - Optimised image formats for performance - Responsive design with proper accessibility attributes ## Test Plan - [x] Verify navigation icon displays correctly in header - [x] Check favicon appears in browser tabs - [x] Test PWA icons on mobile devices - [x] Confirm home page hero avatar renders properly - [x] Verify all 6 media list avatars display with correct borders - [x] Test hover animations on all avatars - [x] Verify build succeeds - [x] Check static assets serve with correct MIME types ๐ŸŒธ Created with love by Hikari ๐Ÿ’–
hikari added 2 commits 2026-02-20 21:08:11 -08:00
Updated all branding assets to use Naomi's library avatar (with the playful "shh" gesture):
- Navigation icon in header
- Favicon for browser tabs
- All PWA icon sizes (72x72 through 512x512, including maskable icons)
- Hero avatar on home page between title and subtitle

The avatar features consistent styling across all uses:
- Circular display with elegant borders
- Hover animations for interactive elements
- Shadows for visual depth
- Perfectly integrated with the witch-purple theme

All icons generated from the source image at multiple resolutions for optimal display on all devices and contexts.
feat: add themed avatars to all media list views
Security Scan and Upload / Security & DefectDojo Upload (pull_request) Successful in 1m31s
Node.js CI / CI (pull_request) Successful in 1m35s
9023a8f200
Added custom avatars for each media type, appearing at the top of their respective list pages:
- Games: Gaming setup with controller and LED lights (red border)
- Books: Reading in the library with warm tones (brown border)
- Music: Joyful with headphones and urban nightscape (blue border)
- Shows: Relaxing on couch with remote and theater curtains (pink border)
- Manga: Reading manga surrounded by manga shelves (teal border)
- Art: Art studio with paintbrush and golden tones (yellow border)

Each avatar is:
- 120x120px circular display
- Themed border colour matching the media type
- Smooth hover animation with scale and shadow effects
- Positioned in a centered hero section above the header

All avatars showcase Naomi's personality and interests whilst maintaining consistent styling across the application.
naomi merged commit ff0ae73fa7 into main 2026-02-20 21:11:13 -08:00
naomi deleted branch feat/avatars 2026-02-20 21:11:14 -08:00
Sign in to join this conversation.
No Reviewers
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: nhcarrigan/library#67