{"id":26935861,"url":"https://github.com/hmarzban/notion-avatar-generator","last_synced_at":"2026-04-29T18:31:14.416Z","repository":{"id":285505733,"uuid":"958365786","full_name":"HMarzban/notion-avatar-generator","owner":"HMarzban","description":"Create customizable Notion-style avatars with this simple web app. Features easy personalization options, modern UI, and fast rendering. Perfect for personal branding, team profiles, and digital personas.","archived":false,"fork":false,"pushed_at":"2025-04-01T04:59:12.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-01T05:29:04.426Z","etag":null,"topics":["avatar-generator","notion","notion-avatar","vibe-coding"],"latest_commit_sha":null,"homepage":"https://hmarzban.github.io/notion-avatar-generator/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HMarzban.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-04-01T04:41:55.000Z","updated_at":"2025-04-01T04:59:16.000Z","dependencies_parsed_at":"2025-04-01T05:39:18.535Z","dependency_job_id":null,"html_url":"https://github.com/HMarzban/notion-avatar-generator","commit_stats":null,"previous_names":["hmarzban/notion-avatar-generator"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HMarzban%2Fnotion-avatar-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HMarzban%2Fnotion-avatar-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HMarzban%2Fnotion-avatar-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HMarzban%2Fnotion-avatar-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HMarzban","download_url":"https://codeload.github.com/HMarzban/notion-avatar-generator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246811311,"owners_count":20837753,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["avatar-generator","notion","notion-avatar","vibe-coding"],"created_at":"2025-04-02T12:19:45.661Z","updated_at":"2026-04-29T18:31:14.411Z","avatar_url":"https://github.com/HMarzban.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Notion-Style Avatar Creator\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"public/banner.png\" alt=\"Notion-Style Avatar Creator\"  /\u003e\n\u003c/div\u003e\n\nA fun, customizable avatar generator inspired by Notion's minimalist aesthetic. Create your personal profile picture with a variety of face shapes, hairstyles, eyes, mouths, accessories, outfits, and backgrounds.\n\n## Live Demo\n\nCheck out the live demo: [Notion Avatar Generator](https://hmarzban.github.io/notion-avatar-generator/)\n\n## Features\n\n- 🧑 Face options - Choose from different face shapes\n- 💇 Hair styles - Select from various hairstyles\n- 👁️ Eyes - Customize the look with different eye styles\n- 👄 Mouth - Add personality with various mouth expressions\n- 👓 Accessories - Enhance your avatar with glasses, earrings, and more\n- 👕 Outfits - Dress your avatar with different clothing options\n- 🎨 Backgrounds - Set solid colors or add background elements\n- 💾 Export as PNG or SVG - Download your creation in your preferred format\n- 🌗 Dark/Light mode - Switch between themes for comfortable editing\n- 🔄 Randomize - Generate random avatars with one click\n- 📱 PWA Support - Install as a standalone app on your device\n- 🔌 Complete Offline Support - Create avatars even without an internet connection with automatic asset caching\n\n## Getting Started\n\n## Requirements\n\nThis project requires [Bun](https://bun.sh) as the package manager.\n\n```bash\n# Install Bun if you don't have it yet\ncurl -fsSL https://bun.sh/install | bash\n\n# Install dependencies\nbun install\n\n# Start development server\nbun dev\n\n# Build for production\nbun run build\n```\n\nThis project uses Bun exclusively and is not compatible with npm or yarn.\n\n## Development\n\n- `bun dev` - Start development server\n- `bun run build` - Build for production\n- `bun run lint` - Run linter\n- `bun run preview` - Preview production build locally\n\nVisit `http://localhost:3000` in your browser to start creating your avatar.\n\n## Deployment\n\nThe project is automatically deployed to GitHub Pages when changes are pushed to the main branch. The deployment workflow is managed through GitHub Actions.\n\nTo deploy manually:\n\n```bash\n# Build the project\nbun run build\n\n# Preview the build locally\nbun run preview\n```\n\n## PWA Features\n\nThis app supports Progressive Web App (PWA) functionality, which means you can:\n\n- Install it on your home screen on mobile devices\n- Use it offline without an internet connection\n- Get automatic updates when new versions are available\n\n### Enhanced Offline Support\n\nThe app intelligently caches all avatar assets for offline use, providing a complete experience even without internet connection:\n\n- **Automatic Asset Caching**: When you first install the PWA, all avatar elements are automatically cached\n- **Smart Caching Strategy**: Assets are cached using an efficient strategy that preserves storage space\n- **Network Status Indicators**: Clear UI indicators show when you're offline\n- **Manual Cache Control**: Options to manually refresh the cache when online\n- **Persistent Usage**: Create and download avatars even when completely offline\n\n### Easy Installation\n\nInstalling the app is simple:\n\n1. Look for the \"Install for Offline Use\" button that appears at the bottom right of the app\n2. Click the button and follow the browser's installation prompts\n3. The app will be installed on your device and available even when offline\n4. On iOS devices, use Safari's \"Add to Home Screen\" option from the share menu\n\nOnce installed, the app will run like a native application with these benefits:\n\n- Fast loading times\n- No internet connection required\n- All avatar assets available offline\n- Full functionality without a browser\n\n## Built With\n\n- React\n- TypeScript\n- Vite\n- Tailwind CSS\n- Shadcn UI components\n- Vite PWA Plugin\n- Workbox (for advanced PWA caching)\n\n## Credits\n\nSpecial thanks to [DrawKit](https://www.drawkit.com/illustrations/notion-style-avatar-creator) for the amazing illustrations. Checkout the [Figma](https://www.figma.com/community/file/1159777445438667306) for more details.  \n\n## License\n\nThis project is open-source and available under the MIT License.\n\n## Contributing\n\nContributions are welcome! Feel free to open issues or submit pull requests.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmarzban%2Fnotion-avatar-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhmarzban%2Fnotion-avatar-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmarzban%2Fnotion-avatar-generator/lists"}