https://github.com/hmarzban/notion-avatar-generator
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.
https://github.com/hmarzban/notion-avatar-generator
avatar-generator notion notion-avatar vibe-coding
Last synced: 7 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/hmarzban/notion-avatar-generator
- Owner: HMarzban
- License: mit
- Created: 2025-04-01T04:41:55.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-04-01T04:59:12.000Z (7 months ago)
- Last Synced: 2025-04-01T05:29:04.426Z (7 months ago)
- Topics: avatar-generator, notion, notion-avatar, vibe-coding
- Language: TypeScript
- Homepage: https://hmarzban.github.io/notion-avatar-generator/
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Notion-Style Avatar Creator
A 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.
## Live Demo
Check out the live demo: [Notion Avatar Generator](https://hmarzban.github.io/notion-avatar-generator/)
## Features
- 🧑 Face options - Choose from different face shapes
- 💇 Hair styles - Select from various hairstyles
- 👁️ Eyes - Customize the look with different eye styles
- 👄 Mouth - Add personality with various mouth expressions
- 👓 Accessories - Enhance your avatar with glasses, earrings, and more
- 👕 Outfits - Dress your avatar with different clothing options
- 🎨 Backgrounds - Set solid colors or add background elements
- 💾 Export as PNG or SVG - Download your creation in your preferred format
- 🌗 Dark/Light mode - Switch between themes for comfortable editing
- 🔄 Randomize - Generate random avatars with one click
## Getting Started
```bash
# Clone the repository
git clone https://github.com/HMarzban/notion-avatar-generator.git
# Navigate to project directory
cd notion-avatar-generator
# Install dependencies
npm install
# or with bun
bun install
# Start the development server
npm run dev
# or with bun
bun run dev
```
Visit `http://localhost:3000` in your browser to start creating your avatar.
## Deployment
The project is automatically deployed to GitHub Pages when changes are pushed to the main branch. The deployment workflow is managed through GitHub Actions.
To deploy manually:
```bash
# Build the project
npm run build
# Preview the build locally
npm run preview
```
## Built With
- React
- TypeScript
- Vite
- Tailwind CSS
- Shadcn UI components
## Credits
Special 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.
## License
This project is open-source and available under the MIT License.
## Contributing
Contributions are welcome! Feel free to open issues or submit pull requests.