chore: add "Design" category and due subcategories

components/TopBar/CategoryDescriptions.ts

@@ -10,8 +10,6 @@ const categoryDescriptions: CategoryDescriptions = {
     'Animation is the state of being full of life and energy, like a room full of excited kids at a birthday party. It is a method of photographing successive drawings, models, or even puppets, to create an illusion of movement in a sequence.',
   colors:
     'Colors mean the aspects of the appearance of objects and light sources that may be described in terms of hue, lightness, and saturation',
-  design_inspiration:
-    'The right kind of inspiration will always help you come up with creative and unique ideas for your projects but sometimes you need some help getting inspired. Luckily, there are a TON of great resources for design inspiration.',
   css_games:
     'CSS games are a fun way to learn and practice CSS. They are a great way to learn new CSS properties and techniques, and they can help you improve your skills in a fun and interactive way.',
   fonts:
@@ -88,7 +86,15 @@ const categoryDescriptions: CategoryDescriptions = {
   swift:
     'Swift is a powerful and intuitive programming language developed by Apple. It is used to create apps for iOS, macOS, watchOS, and so on. Swift code is concise yet expressive (easier to understand and write).',
 
-  // Open-source
+  //Design
+  design_tools:
+    'Applications used to create, prototype, and manage user interface designs and visual elements.',
+  design_tutorials:
+    'Instructional resources that teach users how to create and apply design concepts, techniques, and tools effectively.',
+  design_inspiration:
+    'The right kind of inspiration will always help you come up with creative and unique ideas for your projects but sometimes you need some help getting inspired. Luckily, there are a TON of great resources for design inspiration.',
+
+    // Open-source
   articles:
     'There are many open source blogging platforms available for developers. Some of the most popular ones include WordPress, Joomla, and Drupal1. Other open source blogging platforms include Ghost, Serendipity, SilverStripe, and Jekyll',
   projects:

database/data.ts

@@ -26,11 +26,6 @@ export const sidebarData: ISidebar[] = [
       },
       { name: 'animations', url: '/animations', resources: DB.animations },
       { name: 'icons', url: '/icons', resources: DB.icons },
-      {
-        name: 'design inspiration',
-        url: '/design_inspiration',
-        resources: DB.designInspirations,
-      },
       {
         name: 'themes & templates',
         url: '/themes_and_templates',
@@ -152,6 +147,26 @@ export const sidebarData: ISidebar[] = [
       },
     ],
   },
+  {
+    category: 'design',
+    subcategory: [
+    {
+      name: 'design inspiration',
+      url: '/design_inspiration',
+      resources: DB.designInspirations,
+    },
+    {
+      name: 'design tools',
+      url: '/design_tools',
+      resources: DB.designTools,
+    },
+    {
+      name: 'design tutorials',
+      url: '/design_tutorials',
+      resources: DB.designTutorials,
+    }
+  ]
+  },
   {
     category: 'devops',
     subcategory: [

database/design/design_tools.json

@@ -0,0 +1,9 @@
+[
+    {
+      "name": "RealTime Colors",
+      "description": "Visualize your colors & fonts on a real site.",
+      "url": "https://www.realtimecolors.com",
+      "category": "design",
+      "subcategory": "design_tools"
+    }
+  ]  

database/youtube/ui-ux.json → database/design/design_tutorials.json

@@ -1,26 +1,34 @@
 [
+    {
+        "name": "DesignCourse",
+        "description": "This channel will take you from zero to a fullstack developer. You will also learn UI/UX and Frontend Dev languages",
+        "url": "https://www.youtube.com/@DesignCourse/featured",
+        "category": "design",
+        "subcategory": "design_tutorials",
+        "language": "english"
+    },
     {
         "name": "UI/UX Design Course For Beginners",
         "description": "The UI/UX Design Specialization brings a design-centric approach to user interface and user experience design, and offers practical, skill-based instruction centered around a visual communications perspective, rather than on one focused on marketing or programming alone",
         "url": "https://www.youtube.com/watch?v=pyQAiRuqUSM",
-        "category": "youtube",
-        "subcategory": "ux-designing",
+        "category": "design",
+        "subcategory": "design_tutorials",
         "language": "English"
     },
     {
         "name": "Step by Step Roadmap for how to become a UX Designer",
         "description": "In this video, Ansh Mehra provides a step-by-step method to becoming a UX designer. If you want to become a UX designer and need a roadmap to achieve this goal, this video is a perfect fit for you!",
         "url": "https://www.youtube.com/watch?v=cwPU547bCDs",
-        "category": "youtube",
-        "subcategory": "ux-designing",
+        "category": "design",
+        "subcategory": "design_tutorials",
         "language": "Hindi"
     },
     {
         "name": "UI / UX Design Tutorial: Wireframe, Mockup and Design in Figma",
         "description": "In this video, you will learn how a professional designer builds a full website design from scratch following the process of user experience and user interface. The tutorial also covers wireframing, prototyping, and designing in Figma.",
         "url": "https://www.youtube.com/watch?v=c9Wg6Cb_YlU&t=4094s",
-        "category": "youtube",
-        "subcategory": "ux-designing",
+        "category": "design",
+        "subcategory": "design_tutorials",
         "language": "English"
     }
-]
+  ]  

database/index.ts

@@ -4,7 +4,6 @@ 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 designInspirations } from './frontend/design_inspiration.json'
 export { default as fonts } from './frontend/fonts.json'
 export { default as icons } from './frontend/icons.json'
 export { default as illustrations } from './frontend/illustrations.json'
@@ -29,6 +28,11 @@ export { default as database } from './backend/database.json'
 export { default as api } from './backend/api.json'
 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 designTutorials } from './design/design_tutorials.json'
+
 //devops
 export { default as automationTools } from './devops/automation_tools.json'
 export { default as cicd } from './devops/cicd.json'

database/youtube/web_development.json

@@ -71,14 +71,6 @@
     "subcategory": "web_development",
     "language": "english"
   },
-  {
-    "name": "DesignCourse",
-    "description": "This channel will take you from zero to a fullstack developer. You will also learn UI/UX and Frontend Dev languages",
-    "url": "https://www.youtube.com/@DesignCourse/featured",
-    "category": "youtube",
-    "subcategory": "web_development",
-    "language": "english"
-  },
   {
     "name": "CodeWithHarry",
     "description": "This channel provides free Web Development course for beginners.",

types/index.ts

@@ -53,6 +53,7 @@ export type Category =
   | 'Placement-Prep'
   | 'data-structures'
   | 'BlockChain'
+  | 'design'
 
 export type SubCategories = {
   name: string