text: /* ********************************************************** */
  // All Images Libraries Data Object
  /* ********************************************************** */
  
  let jsData = [
  	{
  		id: 1,
  		lib_name: "jQuery",
  		lib_details:
  			"jQuery is a write less, do more, fast, small, & feature-rich JavaScript library.",
  		lib_color: "#0769ad",
  		lib_link: "https://jquery.com/",
  	},
  	{
  		id: 2,
  		lib_name: "Popper",
  		lib_details:
  			"Popper - Tooltip & Popover Positioning Engine or any other UI element 'pops out'!",
  		lib_color: "#c83b50",
  		lib_link: "https://popper.js.org/",
  	},
  	{
  		id: 3,
  		lib_name: "Swiper JS",
  		lib_details: "The most modern mobile & web touch slider with amazing transitions using JS.",
  		lib_color: "#6332f6",
  		lib_link: "https://swiperjs.com/",
  	},
  	{
  		id: 4,
  		lib_name: "Parallax.js",
  		lib_details:
  			"Parallax pack that reacts to the orientation of a device & movement of the cursor.",
  		lib_color: "#D92400",
  		lib_link: "https://matthew.wagerfield.com/parallax/",
  	},
  	{
  		id: 5,
  		lib_name: "Typed.js",
  		lib_details:
  			"Typed.js is a library that types the strings you have entered in text rotation type.",
  		lib_color: "#3479b4",
  		lib_link: "https://mattboldt.com/demos/typed-js/",
  	},
  	{
  		id: 6,
  		lib_name: "Particles.js",
  		lib_details:
  			"A lightweight JS library for creating particles of different type of a site canvas.",
  		lib_color: "#b61924",
  		lib_link: "https://vincentgarreau.com/particles.js/",
  	},
  	{
  		id: 7,
  		lib_name: "Anime JS",
  		lib_details:
  			"Anime.js is a lightweight super animation library to do many complex animations.",
  		lib_color: "#252423",
  		lib_link: "https://animejs.com/",
  	},
  	{
  		id: 8,
  		lib_name: "Video.js",
  		lib_details:
  			"A built-in video player supports HTML5 video and all modern streaming formats.",
  		lib_color: "#000000",
  		lib_link: "https://videojs.com/",
  	},
  	{
  		id: 9,
  		lib_name: "GSAP JS",
  		lib_details:
  			"GSAP library from GreenSock, is used for crafting high-performance animations.",
  		lib_color: "#88CE02",
  		lib_link: "https://greensock.com/gsap/",
  	},
  	{
  		id: 10,
  		lib_name: "Mo Js",
  		lib_details:
  			"A JS motion graphics library provides click, shape, swirl, burst & etc animations.",
  		lib_color: "#3A0839",
  		lib_link: "https://mojs.github.io/",
  	},
  	{
  		id: 11,
  		lib_name: "Owl Carousel 2",
  		lib_details:
  			"Touch enabled jQuery plugin, to create a beautiful responsive carousel slider.",
  		lib_color: "#1ccacd",
  		lib_link: "https://owlcarousel2.github.io/OwlCarousel2/",
  	},
  	{
  		id: 12,
  		lib_name: "WOW.js",
  		lib_details:
  			"Reveal CSS animation as on scroll down a page, also trigger Animate.css library.",
  		lib_color: "#BD9D53",
  		lib_link: "https://wowjs.uk/",
  	},
  	{
  		id: 13,
  		lib_name: "Vanilla Tilt.js",
  		lib_details:
  			"A smooth 3D tilt animation javascript library forked from jQuery ready to use!",
  		lib_color: "#F11712",
  		lib_link: "https://micku7zu.github.io/vanilla-tilt.js/",
  	},
  	{
  		id: 14,
  		lib_name: "Tilt.js",
  		lib_details: "A tiny lightweight parallax hover tilt effect using jQuery plugin.",
  		lib_color: "#7e56ff",
  		lib_link: "https://gijsroge.github.io/tilt.js/",
  	},
  	{
  		id: 15,
  		lib_name: "Lax.js",
  		lib_details:
  			"A lightweight vanilla JS library to create smooth & beautiful scroll animations.",
  		lib_color: "#242224",
  		lib_link: "https://alexfox.dev/lax.js/",
  	},
  	{
  		id: 16,
  		lib_name: "SweetAlert",
  		lib_details:
  			"A library for replacement of default alert message with a beautiful & pretty modal.",
  		lib_color: "#ff7d79",
  		lib_link: "https://sweetalert.js.org/",
  	},
  	{
  		id: 17,
  		lib_name: "SweetAlert2",
  		lib_details:
  			"A updated beautiful, responsive and customizable replacement for default popup boxes.",
  		lib_color: "#8E64A6",
  		lib_link: "https://sweetalert2.github.io/",
  	},
  	{
  		id: 18,
  		lib_name: "Splitting.js",
  		lib_details:
  			"Splitting creates CSS variables for split animations words, letters, grids, images!",
  		lib_color: "#00c9b1",
  		lib_link: "https://splitting.js.org/",
  	},
  	{
  		id: 19,
  		lib_name: "Highlight.js",
  		lib_details:
  			"Highlight.js is a JS pack of code highlighter of different languages to display in site.",
  		lib_color: "#660000",
  		lib_link: "https://highlightjs.org/",
  	},
  	{
  		id: 20,
  		lib_name: "Clipboard.js",
  		lib_details:
  			"A modern approach to copy text or code to clipboard easily with this library.",
  		lib_color: "#1bc1a1",
  		lib_link: "https://clipboardjs.com/",
  	},
  	{
  		id: 21,
  		lib_name: "Chart.js",
  		lib_details: "An easy way to include animated, interactive graphs & charts on your site.",
  		lib_color: "#FF6384",
  		lib_link: "https://www.chartjs.org/",
  	},
  	{
  		id: 22,
  		lib_name: "Kursor.js",
  		lib_details:
  			"A custom cursor style for your website with javascript and css library toolkit.",
  		lib_color: "#3eaf7c",
  		lib_link: "https://lusaxweb.github.io/Kursor/",
  	},
  	{
  		id: 23,
  		lib_name: "Pace.js",
  		lib_details: "Automatic page load progress bar, No need to hook into any of your code.",
  		lib_color: "#2299DD",
  		lib_link: "https://codebyzach.github.io/pace/",
  	},
  	{
  		id: 24,
  		lib_name: "FlipClock.js",
  		lib_details: "Get your clock app in flipping style.",
  		lib_color: "#24292F",
  		lib_link: "https://github.com/objectivehtml/FlipClock",
  	},
  	{
  		id: 25,
  		lib_name: "Framer Motion",
  		lib_details: "A production-ready motion library for React Js by Framer Motion.",
  		lib_color: "#cc11bb",
  		lib_link: "https://www.framer.com/motion/",
  	},
  	{
  		id: 26,
  		lib_name: "React Anime",
  		lib_details:
  			"React Anime is a super easy animation library for React built on top of Anime.js",
  		lib_color: "#15191F",
  		lib_link: "https://www.npmjs.com/package/react-anime",
  	},
  	{
  		id: 27,
  		lib_name: "React Spring",
  		lib_details: "React-Spring bring your components with simple spring animation primitives.",
  		lib_color: "#FF6D6D",
  		lib_link: "https://react-spring.io/",
  	},
  	{
  		id: 28,
  		lib_name: "React Scroll",
  		lib_details: "React component for animating vertical scrolling.",
  		lib_color: "#231f20",
  		lib_link: "https://www.npmjs.com/package/react-scroll",
  	},
  	{
  		id: 29,
  		lib_name: "React Reveal",
  		lib_details:
  			"A animation library for React, used to create various cool reveal on scroll effects.",
  		lib_color: "#000000",
  		lib_link: "https://www.react-reveal.com/",
  	},
  	{
  		id: 30,
  		lib_name: "React Icons",
  		lib_details: "Include popular icons in your React projects easily with react-icons.",
  		lib_color: "#E91E63",
  		lib_link: "https://react-icons.github.io/react-icons",
  	},
  	{
  		id: 31,
  		lib_name: "Rellax Js",
  		lib_details:
  			"Rellax is a buttery smooth, super lightweight, vanilla javascript parallax library.",
  		lib_color: "#00f1c9",
  		lib_link: "https://dixonandmoe.com/rellax/",
  	},
  	{
  		id: 32,
  		lib_name: "Reveal Js",
  		lib_details:
  			"Open source HTML presentation framework, to create fully-featured and beautiful presentations.",
  		lib_color: "#F6E05E",
  		lib_link: "https://revealjs.com/",
  	},
  	{
  		id: 33,
  		lib_name: "Editor.js",
  		lib_details: "Next generation block styled editor. Free. Use for pleasure.",
  		lib_color: "#388ffe",
  		lib_link: "https://editorjs.io/",
  	},
  	{
  		id: 34,
  		lib_name: "Formspree",
  		lib_details:
  			"The form solution for any developer. Use your own frontend code. Submit to our API.",
  		lib_color: "#dc2626",
  		lib_link: "https://formspree.io/",
  	},
  	{
  		id: 35,
  		lib_name: "Notyf",
  		lib_details:
  			"A minimalistic javaScript library for toast notifications, with easy integration.",
  		lib_color: "#3c3e89",
  		lib_link: "https://carlosroso.com/notyf/",
  	},
  ];
  
  /* ********************************************************** */
  // All Images Libraries Preview Mapping
  /* ********************************************************** */
  
  let jsLibrary = document.querySelector(".libraries");
  
  Object.values(jsData).map((val) => {
  	jsLibrary.innerHTML += `
          <!-- Library ${val.id} -->
          <div class="lib_card">
              <h2>${val.lib_name}</h2>
              <p>${val.lib_details}</p>
              <a
                  href="${val.lib_link}"
                  class="btn lib_link"
                  target="_blank"
              >
                  See Now
              </a>
          </div>
      `;
  });
  