diff --git a/components/TopBar/CategoryDescriptions.ts b/components/TopBar/CategoryDescriptions.ts index 716a8f818..997495dd7 100644 --- a/components/TopBar/CategoryDescriptions.ts +++ b/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: diff --git a/database/data.ts b/database/data.ts index f2b3d80ec..c60b80a5e 100644 --- a/database/data.ts +++ b/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: [ diff --git a/database/frontend/design_inspiration.json b/database/design/design_inspiration.json similarity index 100% rename from database/frontend/design_inspiration.json rename to database/design/design_inspiration.json diff --git a/database/design/design_tools.json b/database/design/design_tools.json new file mode 100644 index 000000000..8a03d1d2a --- /dev/null +++ b/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" + } + ] \ No newline at end of file diff --git a/database/youtube/ui-ux.json b/database/design/design_tutorials.json similarity index 69% rename from database/youtube/ui-ux.json rename to database/design/design_tutorials.json index a3dec3f01..206b49ea9 100644 --- a/database/youtube/ui-ux.json +++ b/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" } -] + ] \ No newline at end of file diff --git a/database/index.ts b/database/index.ts index fa04775e9..26666aa5f 100644 --- a/database/index.ts +++ b/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' diff --git a/database/youtube/web_development.json b/database/youtube/web_development.json index 66e931563..489cb9788 100644 --- a/database/youtube/web_development.json +++ b/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.", diff --git a/types/index.ts b/types/index.ts index df8066fd8..8271c1f80 100644 --- a/types/index.ts +++ b/types/index.ts @@ -53,6 +53,7 @@ export type Category = | 'Placement-Prep' | 'data-structures' | 'BlockChain' + | 'design' export type SubCategories = { name: string