data.ts

import { IData, ISidebar } from '../types';

export const data: IData[] = [
  {
    id: '1',
    name: 'Unsplash',
    description:
      'Unsplash is a site to get free images, you can download all kind of HD images in here for free.',
    url: 'https://unsplash.com',
    category: 'frontend',
    subcategory: 'images',
  },
  {
    id: '2',
    name: 'Pixabay',
    description:
      'Pixabay have Over 2M free stock photos, vectors and art illustrations you can use anywhere.',
    url: 'https://pixabay.com/',
    category: 'frontend',
    subcategory: 'images',
  },
  {
    id: '3',
    name: 'Pexels',
    description:
      'A great resource for free stock photos and videos, created by photographers around the world.',
    url: 'https://pexels.com/',
    category: 'frontend',
    subcategory: 'images',
  },
  {
    id: '4',
    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',
  },
  {
    id: '5',
    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',
  },
  {
    id: '6',
    name: 'Tailwind Colors',
    description:
      'This an excellent and popular set of color pallettes by TailwindCSS. Get beautiful colors of all shades ',
    url: 'https://tailwindcss.com/docs/customizing-colors',
    category: 'frontend',
    subcategory: 'colors',
  },
  {
    id: '7',
    name: 'Color Contract Checker',
    description:
      'This an excellent site to check whether contrast of two colors is good or not ',
    url: 'https://coolors.co/contrast-checker',
    category: 'frontend',
    subcategory: 'colors',
  },
  {
    id: '8',
    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',
  },
  {
    id: '9',
    name: 'Google Fonts',
    description:
      'The No. 1 resource for free and easy-to-use webfonts by Google. It has a huge library of fonts. ',
    url: 'https://fonts.google.com/',
    category: 'frontend',
    subcategory: 'fonts',
  },
  {
    id: '10',
    name: 'Fonts Quirrel',
    description:
      "Fonts Quirrel is platform to get free commercial fonts for your project. It's another huge library for fonts ",
    url: 'https://fontsquirrel.com/',
    category: 'frontend',
    subcategory: 'fonts',
  },
  {
    id: '11',
    name: 'Glaze',
    description:
      'All in one resource to get free illustrations images for characters, backgrounds, avatar and more',
    url: 'https://glazestock.com/',
    category: 'frontend',
    subcategory: 'illustrations',
  },
  {
    id: '12',
    name: 'unDraw',
    description:
      'unDraw os another exccelent platform to get free illustration images with No color restrictions',
    url: 'https://undraw.co/illustrations',
    category: 'frontend',
    subcategory: 'illustrations',
  },
  {
    id: '13',
    name: 'DrawKit',
    description:
      'It is a collection of fully customisable PSD illustrations, in two styles, available to use on your next project.',
    url: 'https://drawkit.com/',
    category: 'frontend',
    subcategory: 'illustrations',
  },
  {
    id: '14',
    name: 'Font Awesome',
    description:
      'A highly popular icon font, consisting of 1000+ icons spread across countless categories.',
    url: 'https://fontawesome.com/',
    category: 'frontend',
    subcategory: 'icons',
  },
  {
    id: '15',
    name: 'Phosphor Icons',
    description:
      'Another beautiful, more boxy SVG collection of free icons. Customizable thickness and color.',
    url: 'https://phosphoricons.com/',
    category: 'frontend',
    subcategory: 'icons',
  },
  {
    id: '16',
    name: 'Flat Icon',
    description:
      'It is a collection of fully customisable PSD icons, in two styles, available to use on your next project.',
    url: 'https://flaticon.com/',
    category: 'frontend',
    subcategory: 'icons',
  },
  {
    id: '17',
    name: 'Line Awesome',
    description:
      'It is a collection of fully customisable PSD icons, in two styles, available to use on your next project.',
    url: 'https://icons8.com/line-awesome',
    category: 'frontend',
    subcategory: 'icons',
  },
  {
    id: '18',
    name: 'Font Joy',
    description:
      'Font Joy is a website that generates font pairings for designers and developers to use in their projects. ',
    url: 'https://fontjoy.com/',
    category: 'frontend',
    subcategory: 'fonts',
  },
  {
    id: '19',
    name: 'Icon Sets',
    description:
      'Icon-sets is a website that provides a collection of icons for designers and developers to use in their projects.',
    url: 'https://icon-sets.iconify.design/',
    category: 'frontend',
    subcategory: 'icons',
  },
  {
    id: '20',
    name: 'Kaboompics',
    description:
      'it allows to search pictures by color, and  it provides a complementary palette of colors in the photo.',
    url: 'https://kaboompics.com/',
    category: 'frontend',
    subcategory: 'images',
  },
  {
    id: "21",
    name: "1001 fonts",
    description:
      "1001 fonts is a platform that offers 42933 free fonts in 24214 families · Free licenses for commercial use·",
    url: "https://www.1001fonts.com/",
    category: "frontend",
    subcategory: "fonts",
  },
  {
    id: "22",
    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",
  },   
  {
    id: "23",
    name: "Lottie files",
    description:
      "LottieFiles takes away the complexity from Motion Design. It lets you Create, Edit, Test, Collaborate and Ship a Lottie in the easiest way possible.",
    url: "https://lottiefiles.com/",
    category: "frontend",
    subcategory: "animations",
  },
  {
    id: "24",
    name: "Type Scale",
    description:
      "A tool to create visual type scales - sets of font sizes that follow good-looking proportions.",
    url: "https://type-scale.com",
    category: "frontend",
    subcategory: "fonts",
  },
  {
    id: "25",
    name: "Dribbble",
    description:
      "Explore the world’s leading design portfolios.",
    url: "https://dribbble.com",
    category: "frontend",
    subcategory: "design-inspiration",
  },
  {
    id: "26",
    name: "Godly Website",
    description:
      "A curated collection of good web design from all over the web",
    url: "https://godly.website",
    category: "frontend",
    subcategory: "design-inspiration",
  },   
  {
    id: "27",
    name: "Cubic Bezier",
    description:
      "A tool for visualisation and creation of cubic-bezier curves for animation in CSS",
    url: "https://cubic-bezier.com/",
    category: "frontend",
    subcategory: "animations",
  },
  {
    id: "28",
    name: "Framer Motion",
    description:
      "Framer Motion is a production-ready motion library for React from Framer, It's simple yet powerful, allowing you to express complex user interactions with robust, semantic markup.",
    url: "https://www.framer.com/motion/",
    category: "frontend",
    subcategory: "animations",
  },
  {
    id: "29",
    name: "UI Faces",
    description:
      "UI Faces aggregates various free avatar placeholder sources that you can use in your design mockups by copy & paste, API, and plugins for Sketch, Adobe XD, and Figma.",
    url: "https://uifaces.co/browse-avatars/",
    category: "frontend",
    subcategory: "images",
  },
  {
    id: "30",
    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 value of color.",
    url: "https://w3schools.com/colors/colors_picker.asp",
    category: "frontend",
    subcategory: "colors",
  },
  {
    id: "31",
    name: "Neumorphism.io",
    description: "It's a platform where you can generate Soft-UI CSS elements for your webiste or app.",
    url: "https://neumorphism.io/#e0e0e0",
    category: "frontend",
    subcategory: "ui-generators",
  },
  {
    id: "32",
    name: "Hype4 Academy",
    description: "Another cool and excellent site to generate Glassmorphism CSS for your project.",
    url: "https://hype4.academy/tools/glassmorphism-generator",
    category: "frontend",
    subcategory: "ui-generators",
  },
  {
    id: "33",
    name: "Universe.io",
    description: "It provides tones of cool UI elements made with HTML & CSS.",
    url: "https://uiverse.io/all",
    category: "frontend",
    subcategory: "ui-generators",
  },
  {
    id: "34",
    name: "CSS Portal",
    description: "A bundle of amazing and UI CSS elements for you to use in your project.",
    url: "https://www.cssportal.com/ui-generators.php",
    category: "frontend",
    subcategory: "ui-generators",
  },
  {
    id: "35",
    name: "EnjoyCSS",
    description: "A platform to implement amazing CSS elements of your choice for your porject.",
    url: "https://enjoycss.com/",
    category: "frontend",
    subcategory: "ui-generators",
  },
  {
    id: "36",
    name: "CSS Generator",
    description: "A CSS generator that helps you demonstrate and quickly generate CSS declarations for your website.",
    url: "https://cssgenerator.org/",
    category: "frontend",
    subcategory: "ui-generators",
  },
  {
    id: "37",
    name: "Code Magic",
    description: "An amazing open source platform for generating ready to use CSS elements for your project. ",
    url: "https://code-magic.vercel.app/",
    category: "frontend",
    subcategory: "ui-generators",
  },
  {
    id: "38",
    name: "daisyUI",
    description: "A platform where you can generate UI components based on TailwindCSS. ",
    url: "https://daisyui.com/",
    category: "frontend",
    subcategory: "ui-generators",
  },
  {
    id: "39",
    name: "TailBlocks",
    description: "Another great platform where you can generate UI components based on TailwindCSS. ",
    url: "https://tailblocks.cc/",
    category: "frontend",
    subcategory: "ui-generators",
  },
  {
    id: "40",
    name: "Proton",
    description: "A JavaScript particle based animation engine. Which provides you tones of animated elements.",
    url: "https://drawcall.github.io/Proton/",
    category: "frontend",
    subcategory: "animations",
  },
  {
    id: "41",
    name: "Codepen",
    description: "An amazing online community for testing and showcasing HTML, CSS, JavaScript code snippets.",
    url: "https://codepen.io",
    category: "frontend",
    subcategory: "online-code-editors",
  },
  {
    id: "42",
    name: "Tryit",
    description: "Another online platform for testing codes written in HTML, CSS and JavaScript.",
    url: "https://w3schools.com/html/tryit.asp?filename=tryhtml_basic",
    category: "frontend",
    subcategory: "online-code-editors",
  },
  {
    id: "43",
    name: "OnlineGDB",
    description: "Another online platform for testing codes written in HTML, CSS and JavaScript.",
    url: "https://w3schools.com/html/tryit.asp?filename=tryhtml_basic",
    category: "frontend",
    subcategory: "online-code-editors",
  },
  {
    id: "44",
    name: "Sololearn",
    description: "It's multi-language online code editor test and share your code snippets.",
    url: "https://sololearn.com/compiler-playground/cVRUy2BwauK8",
    category: "frontend",
    subcategory: "online-code-editors",
  },
  {
    id: "45",
    name: "CodeChef",
    description: "An online IDE to practice you competitive programming skills. It allows you to code in multiple languages.",
    url: "https://www.codechef.com/ide",
    category: "frontend",
    subcategory: "online-code-editors",
  },
  {
    id: "46",
    name: "FreeCodeCamp",
    description: "This channel provides free multi programming language courses for Web-dev, android and more.",
    url: "https://www.youtube.com/watch?v=fis26HvvDII",
    category: "youtube",
    subcategory: "android",
  },
  {
    id: "47",
    name: "The Net Ninja",
    description: "The Net Ninja is a YouTube channel that teaches web development, including HTML, CSS, JavaScript, PHP, Python, C#, and more.",
    url: "https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg",
    category: "youtube",
    subcategory: "web-development",
  },
  {
    id: "48",
    name: "3Blue1Brown",
    description: "3Blue1Brown, by Grant Sanderson, is some combination of math and entertainment, depending on your disposition. The goal is for explanations to be driven by animations and for difficult problems to be made simple with changes in perspective.",
    url: "https://www.youtube.com/@3blue1brown",
    category: "youtube",
    subcategory: "machine-learning"
  },
  {
    id: "49",
    name: "UI Color Picker",
    description: "A color picker that contains different shades of solid colors & gradients. Which can be used in any kind of projects.",
    url: "https://uicolorpicker.com/",
    category: "frontend",
    subcategory: "colors"
  },
  {
    id: "50",
    name: "Traversy Media",
    description: "This channel is for all level of developers who want to start or continue their journey in tech.",
    url: "https://www.youtube.com/@TraversyMedia",
    category: "youtube",
    subcategory: "web-development",
  },
  {
    id: "51",
    name: "FreeCodeCamp",
    description: "This channel provide free courses related to web-dev, app-dev, projects and many more.",
    url: "https://www.youtube.com/@freecodecamp",
    category: "youtube",
    subcategory: "web-development",
  },
  {
    id: "52",
    name: "Fireship",
    description: "Fireship is a channel which provides short introuction videos and quick learning guides.",
    url: "https://www.youtube.com/@Fireship",
    category: "youtube",
    subcategory: "web-development",
  },
  {
    id: "53",
    name: "Programming with Mosh",
    description: "It's another great channel for starting you web development journey.",
    url: "https://www.youtube.com/@programmingwithmosh",
    category: "youtube",
    subcategory: "web-development",
  },
  {
    id: "54",
    name: "Jennys Lectures CSIT",
    description: "This channel provides free courses for DSA, C, C++, Python etc.",
    url: "https://www.youtube.com/@JennyslecturesCSIT",
    category: "youtube",
    subcategory: "dsa",
  },
  {
    id: "55",
    name: "Academind",
    description: "It's a great channel for web development. It's more focused on JavaScript and it's frameworks.",
    url: "https://www.youtube.com/@academind",
    category: "youtube",
    subcategory: "web-development",
  },
  {
    id: "56",
    name: "Devicon",
    description: "Set of icons representing programming languages, designing & development tools, all in one single font.",
    url: "https://devicon.dev",
    category: "frontend",
    subcategory: "icons"
  },
  {
    id: "57",
    name: "Medium",
    description: "Medium is a website that allows people to publish and share articles, stories, and ideas with a community of readers.",
    url: "https://medium.com",
    category: "resources",
    subcategory: "blogs"
  },
  {
    id: "58",
    name: "GeeksforGeeks",
    description: "GeeksforGeeks is a computer science portal for geeks offering coding and algorithm tutorials, interview questions and more.",
    url: "https://geeksforgeeks.org",
    category: "resources",
    subcategory: "blogs"
  },
  {
    id: "59",
    name: "Javatpoint",
    description: "A platform that provides free tutorials and interview questions about technologies related to computer science.",
    url: "https://www.javatpoint.com/",
    category: "resources",
    subcategory: "blogs"
  },
  {
    id: "60",
    name: "W3Schools",
    description: "W3Schools is a platform that offers tutorials, references, and courses covering all aspects of web development.",
    url: "https://www.w3schools.com",
    category: "resources",
    subcategory: "blogs"
  },
  {
    id: "61",
    name: "LogRocket",
    description: "It is a frontend monitoring tool that helps with debugging by providing insights into user behavior.",
    url: "https://logrocket.com",
    category: "resources",
    subcategory: "blogs"
  },
  {
    id: "62",
    name: "Tutorialspoint",
    description: "Tutorials Point is an Ed Tech platform that offers the best learning material for technical and non-technical subjects.",
    url: "https://tutorialspoint.com",
    category: "resources",
    subcategory: "blogs"
  },
  {
    id: "63",
    name: "Dev.to",
    description: "A constructive and inclusive social network for software developers where they share and discover great ideas.",
    url: "https://dev.to/",
    category: "resources",
    subcategory: "blogs"
  },
  {
    id: "64",
    name: "FreeCodeCamp",
    description: "A platform that has thousands of videos, articles, and coding lessons for helping people learn to code for free.",
    url: "https://freecodecamp.com",
    category: "resources",
    subcategory: "blogs"
  },
  {
    id: "65",
    name: "Hashnode",
    description: "A free blogging platform where people in tech, developers, and engineers share their ideas.",
    url: "https://hashnode.com",
    category: "resources",
    subcategory: "blogs"
  },
  {
		id: "66",
		name: "GitHub Pages",
		description: "A free hosting service provided by GitHub for hosting static websites from a GitHub repository. Simple to use but limited in customization options.",
		url: "https://pages.github.com/",
		category: "resources",
		subcategory: "hosting",
	},
	{
		id: "67",
		name: "Vercel",
		description: "A cloud platform for building and deploying web projects, including static websites. Known for its fast CDN and Git integration. Offers custom domains, environment variables, and free hosting.",
		url: "https://vercel.com/",
		category: "resources",
		subcategory: "hosting",
	},
	{
		id: "68",
		name: "Netlify",
		description: "A popular platform for deploying and managing web projects, including static websites. Offers easy setup and integration with popular front-end frameworks, as well as features such as continuous deployment, custom domains, SSL certificates, and free hosting.",
		url: "https://www.netlify.com/",
		category: "resources",
		subcategory: "hosting",
	},
	{
		id: "69",
		name: "Heroku",
		description: "Heroku is a cloud platform for deploying static as well dynamic websites, supporting multiple programming languages. It offers convenient management and scaling options, but with a cost based on usage",
		url: "https://www.heroku.com/",
		category: "resources",
		subcategory: "hosting",
	},
	{
		id: "70",
		name: "PythonAnywhere",
		description: "A platform for hosting Python based web apps with a cloud-based development environment. Offers free hosting with limited options and paid plans for additional features.",
		url: "https://www.pythonanywhere.com/",
		category: "resources",
		subcategory: "hosting",
	},
	{
		id: "71",
		name: "Render",
		description: "Render is a comprehensive solution for hosting web applications, both static and dynamic, with a simple and streamlined deployment process. It offers a range of plans, including a free option with limited resources, and paid plans with increased storage, bandwidth, and processing power.",
		url: "https://www.render.com/",
		category: "resources",
		subcategory: "hosting",
	},
	{
		id: "72",
		name: "Fly",
		description: "Fly is a serverless hosting platform that charges only for actual usage and provides automatic scaling and high availability for web applications. It offers a free plan with limited resources and paid plans with more processing power, storage, and bandwidth.",
		url: "https://www.fly.io/",
		category: "resources",
		subcategory: "hosting",
	},

];

export const sidebarData: ISidebar[] = [
  {
    category: 'frontend',
    subcategory: [
      { name: 'images', url: '/images' },
      { name: 'fonts', url: '/fonts' },
      { name: 'colors', url: '/colors' },
      { name: 'illustrations', url: '/illustrations' },
      { name: 'animations', url: '/animations' },
      { name: 'icons', url: '/icons' },
      { name: 'design inspiration', url: '/design-inspiration' },
      { name: 'themes & templates', url: '/themes-templates' },
      { name: 'UI Generators', url: '/ui-generator' },
      { name: 'online code editors', url: '/online-code-editors' },
    ],
  },
  {
    category: 'backend',
    subcategory: [
      { name: 'validation', url: '/validation' },
      { name: 'security', url: '/security' },
      { name: 'authentication', url: '/authentication' },
      { name: 'caching', url: '/caching' },
      { name: 'testing', url: '/testing' },
    ],
  },
  {
    category: 'youtube',
    subcategory: [
      { name: 'web development', url: '/web-development' },
      { name: 'machine learning', url: '/machine-learning' },
      { name: 'data structures', url: '/dsa' },
      { name: 'Android', url: '/android' },
    ],
  },
  {
    category: 'resources',
    subcategory: [
      { name: 'blogs', url: '/blogs' },
      { name: 'hosting', url: '/hosting' },
    ],
  },
];