resources.ts

import { type Resources } from '../types'

export const RESOURCES: Resources[] = [
  {
    id: 1,
    title: 'unDraw',
    description: 'Ilustraciones que puedes descargar en svg y png.',
    url: 'https://undraw.co/illustrations',
    categories: ['image'],
  },
  {
    id: 2,
    title: 'getwaves',
    description:
      'Generador de ondas personalizados que puede descargar en svg o copiar el código.',
    url: 'https://getwaves.io/',
    categories: ['image'],
  },
  {
    id: 3,
    title: 'SVG Icons',
    description:
      'Navega por cientos de íconos que puedes descargar o copiar el código.',
    url: 'https://fontawesomeicons.com/svg/icons',
    categories: ['icons'],
  },
  {
    id: 4,
    title: 'vertex',
    description: 'Encuentra íconos en 3d y totalmente personalizados.',
    url: 'https://vertex.im/',
    categories: ['icons'],
  },
  {
    id: 5,
    title: 'Image-Charts',
    description:
      'Genera gráficas a través de una url donde puedes personalizar colores, tamaño entre otros parámetros.',
    url: 'https://documentation.image-charts.com/',
    categories: ['image'],
  },
  {
    id: 6,
    title: 'responsively',
    description:
      'Aplicación de escritorio para visualizar los proyectos en multiples pantallas.',
    url: 'https://responsively.app/',
    categories: ['software'],
  },
  {
    id: 7,
    title: 'unavatar',
    description: 'Genera avatares de diferentes redes sociales a través de una url.',
    url: 'https://unavatar.io/',
    categories: ['image'],
  },
  {
    id: 8,
    title: 'freecodecamp',
    description:
      'Plataforma gratuita para aprender diferentes lenguajes y tecnologias.',
    url: 'https://www.freecodecamp.org/',
    categories: ['courses'],
  },
  {
    id: 9,
    title: 'goalkicker',
    description:
      'Si buscas libros de programación sin costo alguno, este sitio es el lugar ideal para encontrarlos.',
    url: 'https://goalkicker.com/',
    categories: ['books'],
  },
  {
    id: 10,
    title: 'icons.download',
    description:
      'Iconos vectoriales de código abierto en 16 estilos para cualquier proyecto.',
    url: 'https://icons.download/',
    categories: ['icons'],
  },
  {
    id: 11,
    title: 'colorhunt',
    description:
      'Herramienta que ofrece paletas de colores gratuitas y bien diseñadas para utilizar en proyectos de diseño web.',
    url: 'https://colorhunt.co/',
    categories: ['color'],
  },
  {
    id: 12,
    title: 'cssgridgarden',
    description:
      'Un juego interactivo que permite aprender y practicar CSS Grid, una técnica de diseño web para crear diseños complejos y flexibles.',
    url: 'http://cssgridgarden.com/',
    categories: ['css', 'game'],
  },
  {
    id: 13,
    title: 'flexboxfroggy',
    description:
      'Juego interactivo que permite aprender y practicar Flexbox, una técnica de diseño web para crear diseños flexibles y adaptables a diferentes dispositivos.',
    url: 'http://cssgridgarden.com/',
    categories: ['css', 'game'],
  },
  {
    id: 14,
    title: 'cssgradient',
    description:
      'CSS Gradient es un pequeño sitio web feliz y una herramienta gratuita que le permite crear un fondo degradado para sitios web.',
    url: 'https://cssgradient.io/',
    categories: ['css', 'color'],
  },
  {
    id: 15,
    title: 'Neumorphism',
    description:
      'Genere estilos CSS de Soft-UI mediante el uso de sombras incrustadas.',
    url: 'https://neumorphism.io/#e0e0e0',
    categories: ['css', 'color'],
  },
  {
    id: 16,
    title: 'screensizemap',
    description:
      'Consulte los tamaños de pantalla más comunes para lograr un diseño responsivo.',
    url: 'https://screensizemap.com/',
    categories: ['css'],
  },
  {
    id: 17,
    title: 'interactive box-model diagram',
    description: 'Demostración de modelo de caja visual en css.',
    url: 'https://codepen.io/carolineartz/full/ogVXZj',
    categories: ['css'],
  },
  {
    id: 18,
    title: 'layout.bradwoods',
    description:
      'Facilita y agiliza la creación de diseños con esta herramienta de diseño de layouts.',
    url: 'https://layout.bradwoods.io/',
    categories: ['css'],
  },
  {
    id: 19,
    title: 'cssgrid-generator',
    description:
      'Cree cuadrículas utilizando las propiedades de la plantilla de cuadrícula CSS.',
    url: 'https://cssgrid-generator.netlify.app/',
    categories: ['css'],
  },
  {
    id: 20,
    title: 'Single Element CSS Spinners',
    description: 'Animaciones de carga de CSS.',
    url: 'https://projects.lukehaas.me/css-loaders/',
    categories: [''],
  },
  {
    id: 21,
    title: 'whirl',
    description: 'Animaciones de carga CSS, para copiar y pegar.',
    url: 'https://whirl.netlify.app/',
    categories: ['css'],
  },
  {
    id: 22,
    title: 'magicpattern',
    description:
      'Colección de patrones de fondo CSS puro/basados ​​en SVG reutilizables, con una exploración visual',
    url: 'https://www.magicpattern.design/tools/css-backgrounds',
    categories: ['svg', 'css'],
  },
  {
    id: 23,
    title: 'Animated BG',
    description: 'Genera fondos animados con efecto blur.',
    url: 'https://wweb.dev/resources/animated-css-background-generator/',
    categories: ['css', 'animation'],
  },
  {
    id: 24,
    title: 'colordesigner',
    description: 'Mezcle, extraiga, convierta y genere colores.',
    url: 'https://colordesigner.io/tools',
    categories: ['css', 'color'],
  },
  {
    id: 25,
    title: 'colorpalettes',
    description:
      'Inspírate en la naturaleza con estas paletas de colores terrosos y orgánico.',
    url: 'https://colorpalettes.earth/',
    categories: ['css', 'color'],
  },
  {
    id: 26,
    title: 'HyperUI',
    description: 'Componentes con Tailwind CSS gratuitos de código abierto.',
    url: 'https://www.hyperui.dev/',
    categories: ['css', 'library'],
  },
]