Made by Human celebrates human creativity — not by rejecting AI, but by honoring the intention, judgement, and personal touch that humans bring to every creative project.
Created with heart, intent, and sometimes AI — but always by a human.
Made by Human celebrates human creativity and the meaningful choices we make in our creative work.
True value emerges when humans choose, shape, and curate their tools. Whether working entirely by hand or in collaboration with AI, the creative vision and decisions remain fundamentally human.
Our badges represent this philosophy. They're free to use on websites, products, music, apps, and art projects — each one acknowledging a different nuance in how humans and machines work together.
Example badges:
- Made by Human
- Co-created with AI
- Human in the Loop
- Crafted by Human
The project currently includes eight SVG badges — four in white and four in black — located in the public/badges directory.
- Made by Human - A general badge celebrating human creativity in all forms
- Co-created with AI - For projects created in collaboration with AI tools
- Crafted by Human - For projects created entirely by human hands
- Human in the Loop - For projects where humans guide and curate the creative process
| Preview | Filename | Description |
|---|---|---|
 |
made-white.svg |
General badge celebrating human creativity |
 |
co-created-white.svg |
For AI collaboration projects |
 |
crafted-white.svg |
For entirely human-made projects |
 |
loop-white.svg |
For human-guided creative processes |
 |
made-black.svg |
General badge celebrating human creativity |
 |
co-created-black.svg |
For AI collaboration projects |
 |
crafted-black.svg |
For entirely human-made projects |
 |
loop-black.svg |
For human-guided creative processes |
This repository is a Next.js project that serves as the foundation for:
- A single-page website that explains the project philosophy
- An interactive badge viewer where users can browse and preview all available badges
- Direct download functionality for SVG badges
- Embed code generation for badges (for use in GitHub README files, websites, or other projects)
- Next.js 16 - React framework with App Router
- Tailwind CSS v4 - Utility-first CSS framework (free and open source)
- TypeScript - Type-safe development
- React 19 - UI library
- Framer Motion - Animation library for smooth interactions
Badges can be embedded in multiple ways:
- GitHub README: Use the raw GitHub URL or inline SVG
- Websites: Use
<img>tags or inline SVG for better control - Markdown: Standard markdown image syntax works with hosted URLs
The website provides copy-paste embed code for each badge variant (Markdown, HTML, or direct URL).
All badges are hosted at: https://madebyhuman.iamjarl.com/badges/[filename]-[variant].svg
Examples:
https://madebyhuman.iamjarl.com/badges/made-white.svghttps://madebyhuman.iamjarl.com/badges/co-created-black.svg
To start the project locally:
npm run dev
# or
yarn devOpen http://localhost:3000 in your browser.
The main page is located in src/app/page.tsx and will auto-update during development.
The website is a fully responsive single-page application featuring:
- Hero Section - Large, impactful introduction with interactive grid pattern that responds to mouse movement
- Manifest - Brief explanation of the philosophy with side-by-side layout
- Select your badge - Interactive preview of all badges with download and embed functionality, smooth animations
- How to Use - Instructions for downloading and embedding badges
- Contributing - Information on how to contribute to the project
- Style: Minimalist and modern with subtle animations
- Color Palette: Zinc and black tones with accent color (#F59898) for badge previews
- Responsive: Fully responsive design for all devices (mobile, tablet, desktop)
- Interactive Elements:
- Grid pattern that brightens near mouse cursor (desktop only)
- Smooth scroll-triggered animations using Framer Motion
- Hover effects on interactive elements
- Touch device detection for optimal performance
- Layout: Side-by-side layout for headings and content on desktop for better visual alignment
- Badge Display: 2-column grid layout on desktop, 1-column on mobile
- Keyboard Navigation: Full keyboard support including ESC to close modals and Tab navigation
- Focus Management: Focus trap in modals for better accessibility
- ARIA Labels: Proper ARIA attributes for screen readers
- Error Handling: Graceful error handling for clipboard operations and downloads
- Touch Support: Optimized experience for touch devices with disabled mouse tracking
- Feedback: Clear visual feedback for user actions (copy, download, etc.)
The website is automatically deployed to GitHub Pages using GitHub Actions. Every push to the main branch triggers a build and deployment.
The website is available at: https://madebyhuman.iamjarl.com/
- Code is pushed to the
mainbranch (via pull request) - GitHub Actions workflow builds the Next.js static export
- The built site is deployed to GitHub Pages
- The site is available at the GitHub Pages URL
- Custom Domain:
madebyhuman.iamjarl.com - Output: Static export (
output: 'export') - Images: Unoptimized (required for static export)
The main branch is protected with the following rules:
- Pull requests required: All changes must be made through pull requests
- Status checks required: Build must pass before merging
- Force push blocked: Prevents accidental history rewriting
- Branch deletion blocked: Protects the main branch from accidental deletion
The website includes comprehensive SEO optimization:
- Open Graph tags for social media sharing
- Twitter Card metadata
- Structured metadata for search engines
- Canonical URLs for proper indexing
- Favicon and icon files for all platforms
- Accessibility features (ARIA labels, keyboard navigation)
Everyone is welcome to contribute — bring your badges, ideas, text, design, or code.
Our goal is to celebrate the human in every creative process, whether that process includes AI or not.
- Fork the repository and create a new branch for your changes
- Make your changes and test them locally
- Create a pull request to the
mainbranch - Wait for status checks to pass (build must succeed)
- Your PR will be reviewed and merged once approved
All contributions must go through pull requests — direct pushes to main are not allowed to ensure code quality and maintain project stability.
This project is open source under the MIT License.
Share, remix, and build upon it — but remember to credit the humans behind it.