feat: moves frontend > colors to renamed design > design color tools

database/data.ts

@@ -16,7 +16,6 @@ export const sidebarData: ISidebar[] = [
       },
       { name: 'images', url: '/images', resources: DB.images },
       { name: 'fonts', url: '/fonts', resources: DB.fonts },
-      { name: 'colors', url: '/colors', resources: DB.colors },
       { name: 'css games', url: '/css_games', resources: DB.cssGames },
       { name: 'react', url: '/react', resources: DB.react },
       {
@@ -168,9 +167,9 @@ export const sidebarData: ISidebar[] = [
       resources: DB.designInspirations,
     },
     {
-      name: 'design tools',
-      url: '/design_tools',
-      resources: DB.designTools,
+      name: 'design color tools',
+      url: '/design_color_tools',
+      resources: DB.designColorTools,
     },
     {
       name: 'design tutorials',

database/frontend/colors.json → database/design/design_color_tools.json

@@ -3,203 +3,203 @@
     "name": "huetiful-js",
     "description": "This is a JavaScript library for simple color manipulations based on the Culori API. With over 50 utilities, Huetiful allows you to filter and sort color collections and query different properties of color as well as generate different palettes.",
     "url": "https://github.com/prjctimg/huetiful",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "Color Hunt",
     "description": "Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.",
     "url": "https://colorhunt.co/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "Open Color",
     "description": "An open-source color scheme, optimized for UI. My go-to resource to choose colors from scratch. ",
     "url": "https://yeun.github.io/open-color/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "UI Gradients",
     "description": "Collection of beautiful color gradients for you to choose from and export to your project. ",
     "url": "https://uigradients.com/#MoonlitAsteroid",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "Tailwind Colors",
     "description": "This an excellent and popular set of color palettes by TailwindCSS. Get beautiful colors of all shades ",
     "url": "https://tailwindcss.com/docs/customizing-colors",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "Color Contract Checker",
     "description": "This an excellent site to check whether the contrast of two colors is good or not ",
     "url": "https://coolors.co/contrast-checker",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "0to255",
     "description": "0to255 is a color tool that makes it easy to find lighter and darker colors, or tints and shades, based on any color. ",
     "url": "https://0to255.com/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "Coolors",
     "description": "Coolors is the essential tool for creating color palettes. It generates perfect matching colors in seconds.",
     "url": "https://coolors.co/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "HTML Color Picker",
     "description": "This is a color picker by w3schools which provides different shades of colors based on your requirements. It also gives Hex and RGB values of color.",
     "url": "https://w3schools.com/colors/colors_picker.asp",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "FlatUI Colors",
     "description": "FlatUIColors is a color palette designed for user interface design.",
     "url": "https://flatuicolors.com/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "MaterialUI",
     "description": "On this website, you can find different shades of color palettes. It also provides Hex and RGB value of color.",
     "url": "https://materialui.co/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "ColorMagic",
     "description": "ColorMagic is an AI color palette generator. Generate colors by entering the keyword into the textbox.",
     "url": "https://colormagic.app/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "ColorPick Eyedropper",
     "description": "ColorPick Eyedropper is an eyedropper & color picker that allows you to select hex codes of the colors from webpages.",
     "url": "http://surl.li/hgipv",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "Colorion",
     "description": "Colorion is an immersive color palette generator and exploration tool that inspires creativity. With a wide range of beautiful combinations, it offers endless possibilities for designers and artists. Discover stunning palettes and elevate your designs with Colorion.",
     "url": "https://www.colorion.co/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "Happy Hues",
     "description": "Not sure what colors to use in your designs or where to use them? Happy Hues is a color palette inspiration site that acts as a real-world example of how the colors could be used in your projects.",
     "url": "https://www.happyhues.co/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "Khroma",
     "description": "This is an innovative color palette generator that simplifies the process of choosing harmonious colors for your design projects.",
     "url": "https://www.khroma.co/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "AI Colors",
     "description": "Generate stunning, validated color palettes  based on text prompts and witness their practical application as they dynamically come to life on a generated user interface, allowing you to visualize and explore the impact of colors in real-time.",
     "url": "https://aicolors.co/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "ColorClaim",
     "description": "ColorClaim is a library of colors that helps developers, designers, photographers, and others to create beautiful and effective color palettes.",
     "url": "https://vanschneider.com/colors",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "Muzli Colors",
     "description": "This is a vibrant hub for endless inspiration, showcasing curated color palettes for your creative projects. Explore, discover, and elevate your projects with ease.",
     "url": "https://colors.muz.li/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "ColorPalettes",
     "description": "Color Palettes provides a free collection of color palette ideas for professional and commercial use.",
     "url": "https://colorpalettes.net/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "FarbVélo",
     "description": "A playful color-picking tool that can generate the most pleasing color combinations.",
     "url": "https://farbvelo.elastiq.ch/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "Culrs",
     "description": "A resource to get beautiful and well-curated color palettes that you can use in your work.",
     "url": "https://culrs.com/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "Eva Colors",
     "description": "Unleash the power of deep learning to generate captivating color palettes and effortlessly discover complementary shades.",
     "url": "https://colors.eva.design/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "Pigment",
     "description": "A unique way to generate fresh and vibrant colors.",
     "url": "https://pigment.shapefactory.co/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "Paletton",
     "description": "This is the go-to platform for developers and designers, offering an intuitive interface to effortlessly explore, generate, and visualize stunning color schemes for your projects.",
     "url": "https://paletton.com/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "ColorSpace",
     "description": " An intuitive color palette generator for web designers and creatives. It offers a curated collection of palettes and gradients, allowing users to fine-tune and experiment with a variety of color schemes.",
     "url": "https://mycolor.space/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "Picular",
     "description": " Picular is a color search engine that generates color palettes based on keywords. You can enter a specific term, and it will generate a set of colors associated with that keyword, offering a creative way to explore color possibilities.",
     "url": "https://picular.co/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "Realtime Colors",
     "description": " RealtimeColors is a web-based tool that allows you to visualize and test color palettes for your websites and applications. It also provides a variety of features, such as live previews, color contrast checking, and code export.",
     "url": "https://www.realtimecolors.com/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   },
   {
     "name": "UIColors",
     "description": "UIColors is a interactive Tailwind CSS color palette UI with real examples. Create your own palette or edit anything from the library. It also allows you to import the palette directly to Figma file and more.",
     "url": "https://uicolors.app/",
-    "category": "frontend",
-    "subcategory": "colors"
+    "category": "design",
+    "subcategory": "design_color_tools"
   }
-]
+]

database/index.ts

@@ -2,7 +2,6 @@
 export { default as accessibility } from './frontend/accessibility.json'
 export { default as angular } from './frontend/angular.json'
 export { default as animations } from './frontend/animations.json'
-export { default as colors } from './frontend/colors.json'
 export { default as cssGames } from './frontend/css_games.json'
 export { default as fonts } from './frontend/fonts.json'
 export { default as icons } from './frontend/icons.json'
@@ -30,7 +29,7 @@ export { default as emailProviders } from './backend/email_providers.json'
 
 //design
 export { default as designInspirations } from './design/design_inspiration.json'
-export { default as designTools } from './design/design_tools.json'
+export { default as designColorTools } from './design/design_color_tools.json'
 export { default as designTutorials } from './design/design_tutorials.json'
 
 //devops