An open-source, open-to-contribution project that categorizes websites, not by general design or topic but by specific elements.
You can either contribute by improving the code or adding sites to the database. Before that, make sure to read the Codes of Conduct.
If there's a feature you'd like to see, open an issue or send a pull request.
We add sites and categories mainly to database.js.
There are up to 5 properties you can specify for each site:
{
name: "Site/Project/Design Name",
url: "https://example.com",
code: "link to code implementation of the design (if existing, preferrably on Codepen)",
image: "/images/{category}-{number}.webp",
gif: "/images/{category}-{image-number}.webp",
},
- The
name,url, andimageare mandatory.codeandgifare optional. - You can add it if there is an existing implementation of the design on CodePen or similar sites. If you're making one yourself, you can add the link there too.
- You can add the images to
public/images. - There is a naming convention for images too: {category}-{number}.webp The number follows the last existing image number. If you're adding the first site in a category, e.g., grainy, then it'd be grainy-1.webp, followed by grainy-2.webp, and so on.
- A GIF is added when it's helpful to show a preview animation of the element. It must have the same number as the image followed by letter 'g', e.g., image-1g.webp. This GIF will show in the modal only.
- Image should perfectly capture the element (200x344).
- GIF should be as short as possible, only capturing the main effect/animation, so the file should not exceed 10MB.
Thank you for checking the project out!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent