New design, added category & bug fixes

2024-11-10 14:46:54 +08:00 · 2022-01-21 22:30:32 +00:00 · 2022-01-21 22:30:32 +00:00 · 57f2339589
commit 57f2339589
parent 2706236410
43 changed files with 1916 additions and 191 deletions
--- a/animations/hover.js
+++ b/animations/hover.js
@ -3,7 +3,7 @@ import { motion } from "framer-motion";

 const Hover = ({ children }) => {
  return (
-    <motion.div whileHover={{ scale: 1.030 }} whileTap={{ scale: 1 }}>
+    <motion.div whileHover={{ scale: 1.020 }} whileTap={{ scale: 1 }}>
      {children}
    </motion.div>
  );
--- a/animations/loader.js
+++ b/animations/loader.js
@ -0,0 +1,82 @@
+import { motion } from "framer-motion";
+import React from "react";
+
+const LoadingDot = {
+  display: "block",
+  width: "2rem",
+  height: "2rem",
+  backgroundColor: "#50cdc5",
+  borderRadius: "50%",
+};
+
+const LoadingContainer = {
+  width: "10rem",
+  height: "5rem",
+  display: "flex",
+  justifyContent: "space-around",
+};
+
+const ContainerVariants = {
+  initial: {
+    transition: {
+      staggerChildren: 0.2,
+    },
+  },
+  animate: {
+    transition: {
+      staggerChildren: 0.2,
+    },
+  },
+};
+
+const DotVariants = {
+  initial: {
+    y: "0%",
+  },
+  animate: {
+    y: "100%",
+  },
+};
+
+const DotTransition = {
+  duration: 0.5,
+  yoyo: Infinity,
+  ease: "easeInOut",
+};
+
+export default function Loader() {
+  return (
+    <div
+      style={{
+        paddingTop: "5rem",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <motion.div
+        style={LoadingContainer}
+        variants={ContainerVariants}
+        initial="initial"
+        animate="animate"
+      >
+        <motion.span
+          style={LoadingDot}
+          variants={DotVariants}
+          transition={DotTransition}
+        />
+        <motion.span
+          style={LoadingDot}
+          variants={DotVariants}
+          transition={DotTransition}
+        />
+        <motion.span
+          style={LoadingDot}
+          variants={DotVariants}
+          transition={DotTransition}
+        />
+      </motion.div>
+    </div>
+  );
+}
--- a/components/card/index.js
+++ b/components/card/index.js
@ -1,9 +1,9 @@
 import React from "react";
 import Link from "next/link";
-import { Box, Text, Icon } from "@chakra-ui/react";
+import { Box, Text, Icon, Image, Center } from "@chakra-ui/react";
 import Hover from "animations/hover";

-const Index = ({ title, url, icon }) => {
+const Index = ({ title, url, href }) => {
  return (
    <Hover>
      <Link href={url} passHref>
@ -14,8 +14,10 @@ const Index = ({ title, url, icon }) => {
          p={4}
          cursor="pointer"
        >
-          <Icon as={icon} alt={title} boxSize="60px" />
-          <Text mt="2" fontWeight="semibold">
+          <Center>
+            <Image src={href} alt={title} boxSize="60px" />
+          </Center>
+          <Text mt="2" fontWeight="light" textAlign={"center"}>
            {title}
          </Text>
        </Box>
--- a/components/error/index.js
+++ b/components/error/index.js
@ -0,0 +1,60 @@
+import React from "react";
+import {
+  Box,
+  Flex,
+  SimpleGrid,
+  Button,
+  Container,
+  Center,
+  Text,
+  Icon,
+} from "@chakra-ui/react";
+import {
+  IoAlertOutline,
+  IoArrowBackOutline,
+  IoHome,
+  IoShapesOutline,
+} from "react-icons/io5";
+import Link from "next/link";
+import Show from "animations/show";
+
+const Error = () => {
+  return (
+    <>
+      <Show delay="0">
+        <Container
+          maxW={{ base: "100%", md: "75%" }}
+          borderWidth="1px"
+          borderRadius="30px"
+        >
+          <Box px={{ base: 4, lg: 20 }} py={{ base: "3", md: "24" }}>
+            <Flex align="center" justify="center" direction="column" w="full">
+              <Icon name="error" boxSize="80px" mb="3" as={IoShapesOutline} />
+              <Text fontSize="40px" mb="2">
+                Oh no!
+              </Text>
+              <Text fontSize="20px" mb="3">
+                This page does not exist.
+              </Text>
+            </Flex>
+          </Box>
+          <Link href="/" passHref>
+            <Button
+              leftIcon={<IoHome />}
+              colorScheme="twitter"
+              variant="outline"
+              fontWeight="bold"
+              w="100%"
+              border="0"
+              mb="4"
+            >
+              Go home
+            </Button>
+          </Link>
+        </Container>
+      </Show>
+    </>
+  );
+};
+
+export default Error;
--- a/components/header/index.js
+++ b/components/header/index.js
@ -15,7 +15,7 @@ import {
  useColorModeValue,
 } from "@chakra-ui/react";
 import Dark from "components/header/dark";
-import { IoApps, IoLogoGithub } from "react-icons/io5";
+import { IoApps, IoLogoGithub, IoLogoTwitter } from "react-icons/io5";
 import Link from "next/link";
 import Hover from "animations/hover";

@ -34,14 +34,14 @@ const Header = () => {
        top="0"
        zIndex="1000"
      >
-        <Container maxW="container.xl" pb="4">
+        <Container maxW="container.xxl" pb="4">
          <Flex alignItems="center" justifyContent="space-between" mx="auto">
-            <Link href="/" passHref>
-              <Hover>
+            <Hover>
+              <Link href="/" passHref>
                <Flex cursor="pointer">
                  <chakra.a title="iconr" display="flex" alignItems="center">
                    <Image
-                      src="images/logo.png"
+                      src="/images/logo.png"
                      boxSize="25px"
                      alt="iconr logo"
                    />
@ -56,8 +56,8 @@ const Header = () => {
                    iconr
                  </chakra.h1>
                </Flex>
-              </Hover>
-            </Link>
+              </Link>
+            </Hover>
            <HStack display="flex" alignItems="center">
              <HStack
                spacing={2}
@ -70,6 +70,15 @@ const Header = () => {
                >
                  <Button variant="ghost">Library</Button>
                </Link>
+                <Link href="https://twitter.com/iconrhq" passHref>
+                  <IconButton
+                    aria-label="Twitter profile"
+                    bg="transparent"
+                    border="0"
+                    variant="outline"
+                    icon={<IoLogoTwitter size="25" />}
+                  />
+                </Link>
                <Link href="https://github.com/pheralb/iconr" passHref>
                  <IconButton
                    aria-label="Github Repository"
--- a/components/items/all.js
+++ b/components/items/all.js
@ -0,0 +1,33 @@
+import React from "react";
+import useSWR from "swr";
+import Grid from "components/grid";
+import Card from "components/card";
+import Loader from "animations/loader";
+import { Text } from "@chakra-ui/react";
+
+const fetcher = (url) => fetch(url).then((res) => res.json());
+
+const All = () => {
+  const { data, error } = useSWR("/api/all", fetcher);
+  if (error) return <div>failed to load</div>;
+  if (!data) return <Loader />;
+  return (
+    <>
+      <Grid>
+        {data.map((link) => (
+          <>
+            <div key={link.id}>
+              <Card
+                title={link.title}
+                url={`/icon/${link.id}`}
+                href={link.href}
+              />
+            </div>
+          </>
+        ))}
+      </Grid>
+    </>
+  );
+};
+
+export default All;
--- a/components/items/categories.js
+++ b/components/items/categories.js
@ -0,0 +1,37 @@
+import React from "react";
+import useSWR from "swr";
+import Grid from "components/grid";
+import Card from "components/card";
+import SideItem from "components/sidebar/sideItem";
+import Loader from "animations/loader";
+import Link from "next/link";
+
+const fetcher = (url) => fetch(url).then((res) => res.json());
+
+const All = () => {
+  const { data, error } = useSWR("/api/categories", fetcher);
+  if (error) return <div>failed to load</div>;
+  if (!data) return <Loader />;
+  return (
+    <>
+      {data.map((category) => (
+        <>
+          <div key={category}>
+            <Link href={`/category/${category}`} passHref>
+              <SideItem
+                cursor="pointer"
+                _hover={{
+                  bg: "blackAlpha.300",
+                }}
+              >
+                {category}
+              </SideItem>
+            </Link>
+          </div>
+        </>
+      ))}
+    </>
+  );
+};
+
+export default All;
--- a/components/search/withModal.js
+++ b/components/search/withModal.js
@ -0,0 +1,11 @@
+import React from 'react'
+
+const WithModal = () => {
+    return (
+        <>
+            
+        </>
+    )
+}
+
+export default WithModal
--- a/components/sidebar/index.js
+++ b/components/sidebar/index.js
@ -0,0 +1,96 @@
+import {
+  Avatar,
+  Box,
+  Button,
+  Drawer,
+  DrawerContent,
+  DrawerOverlay,
+  Flex,
+  Icon,
+  IconButton,
+  Text,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { IoAlbums, IoAlbumsOutline } from "react-icons/io5";
+import Categories from "components/items/categories";
+import SideItem from "./sideItem";
+
+export default function Index({ children }) {
+  const sidebar = useDisclosure();
+
+  const SidebarContent = (props) => (
+    <Box
+      as="nav"
+      pos="fixed"
+      zIndex="sticky"
+      h={{ base: "full", md: "90%" }}
+      pb="10"
+      px={{ base: 2, md: 6 }}
+      overflowX="hidden"
+      overflowY="auto"
+      bg="brand.600"
+      w="30"
+      {...props}
+    >
+      <Flex
+        direction="column"
+        as="nav"
+        fontSize="sm"
+        aria-label="Main Navigation"
+        pt="2"
+      >
+        <SideItem
+          fontWeight="semibold"
+          fontSize="18px"
+          borderBottomWidth="1px"
+          borderRadius="0px"
+          mb="3"
+        >
+          <Icon as={IoAlbumsOutline} mr="2" />
+          Categories
+        </SideItem>
+        <Categories />
+      </Flex>
+    </Box>
+  );
+  return (
+    <Box as="section" minH="100vh">
+      <SidebarContent display={{ base: "none", md: "unset" }} />
+      <Drawer
+        isOpen={sidebar.isOpen}
+        onClose={sidebar.onClose}
+        placement="left"
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <SidebarContent w="full" borderRight="none" />
+        </DrawerContent>
+      </Drawer>
+      <Box ml={{ base: 0, md: "60" }} transition=".3s ease">
+        <Flex
+          as="header"
+          align="center"
+          justify="space-between"
+          w="full"
+          px="4"
+          h="14"
+          display={{ base: "inline-flex", md: "none" }}
+        >
+          <Button
+            onClick={sidebar.onOpen}
+            leftIcon={<IoAlbumsOutline />}
+            size="md"
+            borderWidth="1px"
+            bg="transparent"
+            w="100%"
+          >
+            Categories
+          </Button>
+        </Flex>
+        <Box as="main" p="4">
+          {children}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
--- a/components/sidebar/sideItem.js
+++ b/components/sidebar/sideItem.js
@ -0,0 +1,22 @@
+import React from "react";
+import { Flex } from "@chakra-ui/react";
+
+const SideItem = (props) => {
+  const { icon, children, ...rest } = props;
+  return (
+    <Flex
+      align="center"
+      px="4"
+      mx="2"
+      rounded="md"
+      py="3"
+      role="group"
+      transition=".15s ease"
+      {...rest}
+    >
+      {children}
+    </Flex>
+  );
+};
+
+export default SideItem;
--- a/components/svg/index.js
+++ b/components/svg/index.js
--- a/data/icons.js
+++ b/data/icons.js
@ -1,118 +1,256 @@
-import * as SVG from "components/svg";
-
 const Icons = [
-    {
-      id: 1,
-      href: "/library/discord.svg",
-      title: "Discord",
-      url: "https://discord.com/",
-      icon: SVG.Discord,
-    },
-    {
-      id: 2,
-      href: "/library/github.svg",
-      title: "Github",
-      url: "https://github.com/",
-      icon: SVG.Github,
-    },
-    {
-      id: 3,
-      href: "/library/preact.svg",
-      title: "Preact",
-      url: "https://preactjs.com/",
-      icon: SVG.Preact, 
-    },
-    {
-      id: 4,
-      href: "/library/react.svg",
-      title: "React",
-      url: "https://reactjs.org/",
-      icon: SVG.ReactIcon,
-    },
-    {
-      id: 5,
-      href: "/library/vercel.svg",
-      title: "Vercel",
-      url: "https://vercel.com/",
-      icon: SVG.Vercel,
-    },
-    {
-      id: 6,
-      href: "/library/svelte.svg",
-      title: "Svelte",
-      url: "https://svelte.dev/",
-      icon: SVG.Svelte,
-    },
-    {
-      id: 7,
-      href: "/library/vue.svg",
-      title: "Vue",
-      url: "https://vuejs.org/",
-      icon: SVG.Vue,
-    },
-    {
-      id: 8,
-      href: "/library/nuxt.svg",
-      title: "Nuxt",
-      url: "https://nuxtjs.org/",
-      icon: SVG.Nuxt,
-    },
-    {
-      id: 9,
-      href: "/library/nextjs.svg",
-      title: "Nextjs",
-      url: "https://nextjs.org/",
-      icon: SVG.Next,
-    },
-    {
-      id: 10,
-      href: "/library/vscode.svg",
-      title: "VSCode",
-      url: "https://code.visualstudio.com/",
-      icon: SVG.VSCode,
-    },  
-    {
-      id: 11,
-      href: "/library/jwt.svg",
-      title: "JWT",
-      url: "https://jwt.io/",
-      icon: SVG.JWT,
-    },
-    {
-      id: 12,
-      href: "/library/strapi.svg",
-      title: "Strapi",
-      url: "https://strapi.io/",
-      icon: SVG.Strapi,
-    },
-    {
-      id: 13,
-      href: "/library/figma.svg",
-      title: "Figma",
-      url: "https://www.figma.com/",
-      icon: SVG.Figma,
-    },
-    {
-      id: 14,
-      href: "/library/spotify.svg",
-      title: "Spotify",
-      url: "https://www.spotify.com/",
-      icon: SVG.Spotify,
-    },
-    {
-      id: 15,
-      href: "/library/postman.svg",
-      title: "Postman",
-      url: "https://www.getpostman.com/",
-      icon: SVG.Postman,
-    },
-    {
-      id: 16,
-      href: "/library/algolia.svg",
-      title: "Algolia",
-      url: "https://www.algolia.com/",
-      icon: SVG.Algolia,
-    },
-  ];
-  
-  export default Icons;
+  {
+    id: 1,
+    href: "/library/discord.svg",
+    title: "Discord",
+    category: "Videocall",
+    url: "https://discord.com/",
+  },
+  {
+    id: 2,
+    href: "/library/github.svg",
+    title: "Github",
+    category: "Repository",
+    url: "https://github.com/",
+  },
+  {
+    id: 3,
+    href: "/library/preact.svg",
+    title: "Preact",
+    category: "Library",
+    url: "https://preactjs.com/",
+  },
+  {
+    id: 4,
+    href: "/library/react.svg",
+    title: "React",
+    category: "Library",
+    url: "https://reactjs.org/",
+  },
+  {
+    id: 5,
+    href: "/library/vercel.svg",
+    title: "Vercel",
+    category: "Hosting",
+    url: "https://vercel.com/",
+  },
+  {
+    id: 6,
+    href: "/library/svelte.svg",
+    title: "Svelte",
+    category: "Framework",
+    url: "https://svelte.dev/",
+  },
+  {
+    id: 7,
+    href: "/library/vue.svg",
+    title: "Vue",
+    category: "Framework",
+    url: "https://vuejs.org/",
+  },
+  {
+    id: 8,
+    href: "/library/nuxt.svg",
+    title: "Nuxt",
+    category: "Framework",
+    url: "https://nuxtjs.org/",
+  },
+  {
+    id: 9,
+    href: "/library/nextjs.svg",
+    title: "Nextjs",
+    category: "Framework",
+    url: "https://nextjs.org/",
+  },
+  {
+    id: 10,
+    href: "/library/vscode.svg",
+    title: "VSCode",
+    category: "Text Editor",
+    url: "https://code.visualstudio.com/",
+  },
+  {
+    id: 11,
+    href: "/library/jwt.svg",
+    title: "JWT",
+    category: "Security",
+    url: "https://jwt.io/",
+  },
+  {
+    id: 12,
+    href: "/library/strapi.svg",
+    title: "Strapi",
+    category: "CMS",
+    url: "https://strapi.io/",
+  },
+  {
+    id: 13,
+    href: "/library/figma.svg",
+    title: "Figma",
+    category: "Design",
+    url: "https://www.figma.com/",
+  },
+  {
+    id: 14,
+    href: "/library/spotify.svg",
+    title: "Spotify",
+    category: "Music",
+    url: "https://www.spotify.com/",
+  },
+  {
+    id: 15,
+    href: "/library/postman.svg",
+    title: "Postman",
+    category: "API",
+    url: "https://www.getpostman.com/",
+  },
+  {
+    id: 16,
+    href: "/library/algolia.svg",
+    title: "Algolia",
+    category: "Search",
+    url: "https://www.algolia.com/",
+  },
+  {
+    id: 17,
+    href: "/library/bootstrap.svg",
+    title: "Bootstrap",
+    category: "CSS Framework",
+    url: "https://getbootstrap.com/",
+  },
+  {
+    id: 18,
+    href: "/library/firebase.svg",
+    title: "Firebase",
+    category: "Hosting",
+    url: "https://firebase.google.com/",
+  },
+  {
+    id: 19,
+    href: "/library/supabase.svg",
+    title: "Supabase",
+    category: "Database",
+    url: "https://supabase.com/",
+  },
+  {
+    id: 20,
+    href: "/library/vitejs.svg",
+    title: "Vite.js",
+    category: "JavaScript Compiler",
+    url: "https://vitejs.dev",
+  },
+  {
+    id: 21,
+    href: "/library/facebook.svg",
+    title: "Facebook",
+    category: "Social",
+    url: "https://www.facebook.com/",
+  },
+  {
+    id: 22,
+    href: "/library/twitter.svg",
+    title: "Twitter",
+    category: "Social",
+    url: "https://twitter.com/",  
+  },
+  {
+    id: 23,
+    href: "/library/nodejs.svg",
+    title: "Node.js",
+    category: "JavaScript Runtime",
+    url: "https://nodejs.org/",
+  },
+  {
+    id: 24,
+    href: "/library/esbuild.svg",
+    title: "Esbuild",
+    category: "JavaScript Compiler",
+    url: "https://esbuild.github.io/",
+  },
+  {
+    id: 25,
+    href: "/library/deno.svg",
+    title: "Deno",
+    category: "JavaScript Runtime",
+    url: "https://deno.land/",
+  },
+  {
+    id: 26,
+    href: "/library/gatsby.svg",
+    title: "Gatsby",
+    category: "Static Site Generator",
+    url: "https://www.gatsbyjs.org/",
+  },
+  {
+    id: 27,
+    href: "/library/npm.svg",
+    title: "NPM",
+    category: "Package Manager",
+    url: "https://www.npmjs.com/",
+  },
+  {
+    id: 28,
+    href: "/library/homebrew.svg",
+    title: "Homebrew",
+    category: "Package Manager",
+    url: "https://brew.sh/",
+  },
+  {
+    id: 29,
+    href: "/library/sublimetext.svg",
+    title: "Sublime Text",
+    category: "Text Editor",
+    url: "https://www.sublimetext.com/",
+  },
+  {
+    id: 30,
+    href: "/library/turborepo.svg",
+    title: "TurboRepo",
+    category: "Package Manager",
+    url: "https://turborepo.org/",
+  },
+  {
+    id: 31,
+    href: "/library/tailwindcss.svg",
+    title: "Tailwind CSS",
+    category: "CSS Framework",
+    url: "https://tailwindcss.com/",
+  },
+  {
+    id: 32,
+    href: "/library/styledcomponents.svg",
+    title: "Styled Components",
+    category: "CSS-in-JS",
+    url: "https://styled-components.com/",
+  },
+  {
+    id: 33,
+    href: "/library/angular.svg",
+    title: "Angular",
+    category: "Framework",
+    url: "https://angular.io/",
+  },
+  {
+    id: 34,
+    href: "/library/blitzjs.svg",
+    title: "Blitz",
+    category: "Framework",
+    url: "https://blitzjs.com/",
+  },
+  {
+    id: 35,
+    href: "/library/lit.svg",
+    title: "Lit",
+    category: "Web Components", 
+    url: "https://lit.dev/",
+  },
+  {
+    id: 36,
+    href: "/library/atom.svg",
+    title: "Atom",
+    category: "Text Editor",
+    url: "https://atom.io/",
+  },
+];
+
+export default Icons;
--- a/package-lock.json
+++ b/package-lock.json
@ -14,7 +14,8 @@
        "next": "12.0.8",
        "react": "17.0.2",
        "react-dom": "17.0.2",
-        "react-icons": "^4.3.1"
+        "react-icons": "^4.3.1",
+        "swr": "^1.1.2"
      },
      "devDependencies": {
        "eslint": "8.7.0",
@ -5012,6 +5013,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/swr": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.1.2.tgz",
+      "integrity": "sha512-UsM0eo5T+kRPyWFZtWRx2XR5qzohs/LS4lDC0GCyLpCYFmsfTk28UCVDbOE9+KtoXY4FnwHYiF+ZYEU3hnJ1lQ==",
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/text-table": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@ -8954,6 +8963,12 @@
      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
    },
+    "swr": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-1.1.2.tgz",
+      "integrity": "sha512-UsM0eo5T+kRPyWFZtWRx2XR5qzohs/LS4lDC0GCyLpCYFmsfTk28UCVDbOE9+KtoXY4FnwHYiF+ZYEU3hnJ1lQ==",
+      "requires": {}
+    },
    "text-table": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
--- a/package.json
+++ b/package.json
@ -16,7 +16,8 @@
    "next": "12.0.8",
    "react": "17.0.2",
    "react-dom": "17.0.2",
-    "react-icons": "^4.3.1"
+    "react-icons": "^4.3.1",
+    "swr": "^1.1.2"
  },
  "devDependencies": {
    "eslint": "8.7.0",
--- a/pages/404.js
+++ b/pages/404.js
@ -0,0 +1,8 @@
+import Error from 'components/error';
+import React from 'react';
+
+const Error404 = () => {
+  return <Error />;
+};
+
+export default Error404;
--- a/pages/_app.js
+++ b/pages/_app.js
@ -7,6 +7,7 @@ import { ChakraProvider } from "@chakra-ui/react";
 // 📦 Components ->
 import Header from "components/header";
 import Footer from "components/footer";
+import Sidebar from "components/sidebar";

 // 💙 Global CSS ->
 import "styles/globals.css";
@ -30,14 +31,19 @@ function MyApp({ Component, pageProps }) {
          property="og:description"
          content="SVGs for everyone, totally free"
        />
-        <meta property="og:image" content="images/banner.png" />
+        <meta
+          property="og:image"
+          content="https://iconr.vercel.app/images/banner.png"
+        />
        <meta name="keywords" content="svg,vector,logo,logos,download" />
        <meta content="#16161a" name="theme-color" />
-        <link rel="icon" href="images/logo.png" />
+        <link rel="icon" href="/images/logo.png" />
      </Head>
      <ChakraProvider theme={theme}>
        <Header />
-        <Component {...pageProps} />
+        <Sidebar>
+          <Component {...pageProps} />
+        </Sidebar>
        <Footer />
      </ChakraProvider>
    </>
--- a/pages/api/all.js
+++ b/pages/api/all.js
@ -0,0 +1,6 @@
+import db from "data/icons";
+
+// 📦 Show all content ->
+export default function handler(req, res) {
+  res.status(200).json(db);
+}
--- a/pages/api/categories.js
+++ b/pages/api/categories.js
@ -0,0 +1,13 @@
+import db from "data/icons";
+
+// 📦 Show categories ->
+export default function handler(req, res) {
+  try {
+    const categories = db
+      .map((item) => item.category)
+      .filter((category, index, self) => self.indexOf(category) === index);
+    return res.status(200).json(categories);
+  } catch (err) {
+    res.status(400).json({ message: err });
+  }
+}
--- a/pages/api/search.js
+++ b/pages/api/search.js
@ -1,7 +1,7 @@
 import db from "data/icons";

 export default function handler(req, res) {
-  const { id, q } = req.query;
+  const { id, q, c } = req.query;

  // 🔎 Search by id (ex: ?id=1) ->
  if (id) {
@ -18,6 +18,15 @@ export default function handler(req, res) {
    return res.status(200).json(results);
  }

+  // 🔎 Search by category (ex: ?c=library) ->
+  if (c) {
+    const results = db.filter((product) => {
+      const { category } = product;
+      return category.toLowerCase().includes(c.toLowerCase());
+    });
+    return res.status(200).json(results);
+  }
+
  // ✖ Error ->
  res.status(400).json({ info: 'Error: api query not found.' });
 }
--- a/pages/category/[c].js
+++ b/pages/category/[c].js
@ -0,0 +1,93 @@
+import Head from "next/head";
+import {
+  chakra,
+  Box,
+  useColorModeValue,
+  Flex,
+  Badge,
+  Input,
+  VisuallyHidden,
+  SimpleGrid,
+  Button,
+  InputGroup,
+  InputRightElement,
+  Image,
+  Container,
+  Center,
+  Stack,
+  Text,
+} from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import Error from "components/error";
+import Grid from "components/grid";
+import Card from "components/card";
+import { IoArrowBackOutline } from "react-icons/io5";
+import Link from "next/link";
+import Show from "animations/show";
+import Loader from "animations/loader";
+
+const fetcher = async (url) => {
+  const res = await fetch(url);
+  const data = await res.json();
+  if (res.status !== 200) {
+    throw new Error(data.message);
+  }
+  return data;
+};
+
+export default function Icon() {
+  const { query } = useRouter();
+  const { data, error } = useSWR(
+    () => query.c && `/api/search?c=${query.c}`,
+    fetcher
+  );
+
+  if (error) return <Error />;
+  if (!data) return <Loader />;
+
+  return (
+    <>
+      <Head>
+        <title>{query.c} icons - iconr</title>
+      </Head>
+      <Show delay="0">
+        <Box w="100%" borderBottomWidth="1px" p="4" mb="3" textAlign="center">
+          <Text fontSize="5xl" pt="5">
+            {query.c} icons
+          </Text>
+          <Link href="/" passHref>
+            <Button
+              leftIcon={<IoArrowBackOutline />}
+              colorScheme="twitter"
+              variant="outline"
+              fontWeight="bold"
+              border="0"
+              mt="4"
+              mb="4"
+            >
+              Continue discovering
+            </Button>
+          </Link>
+        </Box>
+      </Show>
+      <Show delay="0.2">
+        <Container maxW={{ base: "100%", md: "90%" }}>
+          <Grid>
+            {data.map((link) => (
+              <>
+                <div key={link.id}>
+                  <Card
+                    title={link.title}
+                    url={`/icon/${link.id}`}
+                    href={link.href}
+                  />
+                </div>
+              </>
+            ))}
+          </Grid>
+        </Container>
+      </Show>
+    </>
+  );
+}
--- a/pages/icon/[id].js
+++ b/pages/icon/[id].js
@ -0,0 +1,151 @@
+import Head from "next/head";
+import {
+  chakra,
+  Box,
+  useColorModeValue,
+  Flex,
+  Badge,
+  Input,
+  VisuallyHidden,
+  SimpleGrid,
+  Button,
+  InputGroup,
+  InputRightElement,
+  Image,
+  Container,
+  Center,
+  Stack,
+} from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import Error from "components/error";
+import { IoArrowBackOutline, IoCloudDownloadOutline } from "react-icons/io5";
+import Link from "next/link";
+import Show from "animations/show";
+import Loader from "animations/loader";
+import Hover from "animations/hover";
+
+const fetcher = async (url) => {
+  const res = await fetch(url);
+  const data = await res.json();
+  if (res.status !== 200) {
+    throw new Error(data.message);
+  }
+  return data;
+};
+
+export default function Icon() {
+  const { query } = useRouter();
+  const { data, error } = useSWR(
+    () => query.id && `/api/search?id=${query.id}`,
+    fetcher
+  );
+
+  if (error) return <Error />;
+  if (!data) return <Loader />;
+
+  return (
+    <>
+      <Head>
+        <title>{data.title} - iconr</title>
+      </Head>
+      <Show delay="0">
+        <Container
+          maxW={{ base: "100%", md: "100%", lg: "75%" }}
+          borderWidth="1px"
+          borderRadius="30px"
+        >
+          <SimpleGrid columns={{ base: 1, md: 1, lg: 2 }} spacing={0}>
+            <Box py={{ base: "10", md: "24" }}>
+              <Center>
+                <Image
+                  src={data.href}
+                  alt={data.title}
+                  w={{ base: "30%", md: "20%", lg: "50%" }}
+                  fit="cover"
+                  loading="lazy"
+                />
+              </Center>
+            </Box>
+            <Flex
+              direction="column"
+              alignItems="start"
+              justifyContent="center"
+              px={{ base: 4, lg: 20 }}
+              py={{ base: "3", md: "0", lg: "24" }}
+            >
+              <chakra.h1
+                mb={6}
+                fontSize={{ base: "4xl", md: "4xl", lg: "5xl" }}
+                fontWeight="semibold"
+                lineHeight="shorter"
+              >
+                {data.title}
+              </chakra.h1>
+              <Hover>
+                <Link href={`/category/${data.category}`} passHref>
+                  <Badge
+                    borderWidth="1px"
+                    _hover={{ borderColor: "#51d1c8" }}
+                    textTransform="lowercase"
+                    fontSize="md"
+                    color="gray.500"
+                    bg="transparent"
+                    px={3}
+                    py={1}
+                    mb={3}
+                    rounded="full"
+                    fontWeight="light"
+                    cursor="pointer"
+                  >
+                    {data.category}
+                  </Badge>
+                </Link>
+              </Hover>
+              <Stack direction="row" spacing={0} mt="2">
+                <Hover>
+                  <Link href={data.href} passHref>
+                    <Button
+                      leftIcon={<IoCloudDownloadOutline />}
+                      colorScheme="black"
+                      variant="outline"
+                      bg="transparent"
+                      fontWeight="light"
+                      mr="2"
+                    >
+                      Download .svg
+                    </Button>
+                  </Link>
+                </Hover>
+                <Link href={data.url} passHref>
+                  <Button
+                    colorScheme="teal"
+                    variant="outline"
+                    fontWeight="light"
+                    borderWidth="1px"
+                  >
+                    {data.title} website
+                  </Button>
+                </Link>
+              </Stack>
+            </Flex>
+          </SimpleGrid>
+          <Link href="/" passHref>
+            <Button
+              leftIcon={<IoArrowBackOutline />}
+              colorScheme="twitter"
+              variant="outline"
+              fontWeight="bold"
+              w="100%"
+              border="0"
+              mt="4"
+              mb="4"
+            >
+              Continue discovering
+            </Button>
+          </Link>
+        </Container>
+      </Show>
+    </>
+  );
+}
--- a/pages/index.js
+++ b/pages/index.js
@ -1,67 +1,37 @@
-import { chakra, Box } from "@chakra-ui/react";
+import { chakra, Box, Container } from "@chakra-ui/react";
 import Search from "components/search";
-import Grid from "components/grid";
-import Card from "components/card";
-import Icons from "data/icons";
+import Items from "components/items/all";
 import Show from "animations/show";

 export default function Index() {
  return (
    <>
      <Box overflow="hidden">
-        <Box mx="auto">
-          <Box
-            pos="relative"
-            pb={{ base: 2, sm: 16, md: 20, lg: 28, xl: 32 }}
-            w="full"
-            border="solid 1px transparent"
-          >
-            <Box
-              mt={{ base: "4", md: "8" }}
-              mx="auto"
-              maxW={{ base: "8xl" }}
-              px={{ base: 4, sm: 6, lg: 8 }}
-            >
-              <Box
-                textAlign="center"
-                w={{ base: "full", md: 11 / 12, xl: 8 / 12 }}
-                mx="auto"
-              >
-                <Show delay="0">
-                  <chakra.h1
-                    fontSize={{ base: "30px", sm: "5xl", md: "6xl" }}
-                    letterSpacing="tight"
-                    lineHeight="short"
-                    fontWeight="extrabold"
-                    mb={{ base: 4, md: 8 }}
-                  >
-                    Beautiful SVG vector icons
-                  </chakra.h1>
-                </Show>
-                <Show delay="0.2">
-                  <Search />
-                </Show>
-                <Show delay="0.4">
-                  <Box mt={{ base: 4, md: 8 }}>
-                    <Grid>
-                      {Icons.map((link) => (
-                        <>
-                          <div key={link.id}>
-                            <Card
-                              title={link.title}
-                              url={link.href}
-                              icon={link.icon}
-                            />
-                          </div>
-                        </>
-                      ))}
-                    </Grid>
-                  </Box>
-                </Show>
-              </Box>
+        <Container maxW={{ base: "100%", md: "90%" }}>
+          <Box w="full" border="solid 1px transparent">
+            <Box textAlign="center">
+              <Show delay="0">
+                <chakra.h1
+                  fontSize={{ base: "30px", sm: "35px", md: "6xl" }}
+                  letterSpacing="tight"
+                  lineHeight="short"
+                  fontWeight="extrabold"
+                  mb={{ base: 4, md: 8 }}
+                >
+                  Beautiful SVG vector icons
+                </chakra.h1>
+              </Show>
+              <Show delay="0.2">
+                <Search />
+              </Show>
+              <Show delay="0.2">
+                <Box mt={{ base: 4, md: 8 }}>
+                  <Items />
+                </Box>
+              </Show>
            </Box>
          </Box>
-        </Box>
+        </Container>
      </Box>
    </>
  );
--- a/public/library/angular.svg
+++ b/public/library/angular.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="272px" viewBox="0 0 256 272" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+	<g>
+		<path d="M0.0996108949,45.522179 L125.908171,0.697276265 L255.103502,44.7252918 L234.185214,211.175097 L125.908171,271.140856 L19.3245136,211.971984 L0.0996108949,45.522179 Z" fill="#E23237"></path>
+		<path d="M255.103502,44.7252918 L125.908171,0.697276265 L125.908171,271.140856 L234.185214,211.274708 L255.103502,44.7252918 L255.103502,44.7252918 Z" fill="#B52E31"></path>
+		<path d="M126.107393,32.27393 L126.107393,32.27393 L47.7136187,206.692607 L76.9992218,206.194553 L92.7377432,166.848249 L126.207004,166.848249 L126.306615,166.848249 L163.063035,166.848249 L180.29572,206.692607 L208.286381,207.190661 L126.107393,32.27393 L126.107393,32.27393 Z M126.306615,88.155642 L152.803113,143.5393 L127.402335,143.5393 L126.107393,143.5393 L102.997665,143.5393 L126.306615,88.155642 L126.306615,88.155642 Z" fill="#FFFFFF"></path>
+	</g>
+</svg>
--- a/public/library/atom.svg
+++ b/public/library/atom.svg
--- a/public/library/blitzjs.svg
+++ b/public/library/blitzjs.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="394px" viewBox="0 0 256 394" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <title>Blitz</title>
+    <g>
+        <path d="M65.0616978,196.687365 C89.8205926,196.687365 113.139606,208.323896 128.026679,228.106249 L192.204501,313.394482 C193.417342,315.00617 193.600242,317.170181 192.675105,318.962957 L155.680955,390.63785 C153.906059,394.078536 149.148181,394.481457 146.818249,391.391633 L1.42108547e-14,196.687365 L65.0616978,196.687365 Z M109.181234,2.09080071 L256,196.795792 L190.937786,196.795792 C166.178891,196.795792 142.859651,185.159487 127.972805,165.376003 L63.7949826,80.0891285 C62.5821413,78.477213 62.3992418,76.3134299 63.3243784,74.5208786 L100.318529,2.84428799 C102.093424,-0.594639809 106.851302,-0.9991491 109.181234,2.09080071 Z" fill="#6700EB"></path>
+    </g>
+</svg>
--- a/public/library/bootstrap.svg
+++ b/public/library/bootstrap.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M0,222.991225 C0,241.223474 14.7785318,256 33.0087747,256 L222.991225,256 C241.223474,256 256,241.221468 256,222.991225 L256,33.0087747 C256,14.7765263 241.221468,0 222.991225,0 L33.0087747,0 C14.7765263,0 0,14.7785318 0,33.0087747 L0,222.991225 Z" fill="#563D7C"></path>
+        <path d="M106.157563,113.238095 L106.157563,76.9845938 L138.069328,76.9845938 C141.108559,76.9845938 144.039202,77.2378593 146.861345,77.7443978 C149.683488,78.2509362 152.179961,79.1554557 154.35084,80.4579832 C156.52172,81.7605107 158.258397,83.5695496 159.560924,85.8851541 C160.863452,88.2007585 161.514706,91.1675823 161.514706,94.7857143 C161.514706,101.298352 159.560944,106.001853 155.653361,108.896359 C151.745779,111.790864 146.752832,113.238095 140.67437,113.238095 L106.157563,113.238095 L106.157563,113.238095 Z M72.07493,50.5 L72.07493,205.5 L147.186975,205.5 C154.133788,205.5 160.899594,204.631661 167.484594,202.894958 C174.069594,201.158255 179.93088,198.480877 185.068627,194.862745 C190.206375,191.244613 194.294803,186.577293 197.334034,180.860644 C200.373264,175.143996 201.892857,168.37819 201.892857,160.563025 C201.892857,150.866431 199.541107,142.581033 194.837535,135.706583 C190.133963,128.832132 183.00635,124.020088 173.454482,121.270308 C180.401295,117.941627 185.647508,113.672295 189.193277,108.462185 C192.739047,103.252075 194.511905,96.7395349 194.511905,88.9243697 C194.511905,81.6881057 193.317939,75.6097352 190.929972,70.6890756 C188.542005,65.7684161 185.177193,61.8247114 180.835434,58.8578431 C176.493676,55.8909749 171.283644,53.756309 165.205182,52.4537815 C159.12672,51.151254 152.397096,50.5 145.016106,50.5 L72.07493,50.5 L72.07493,50.5 Z M106.157563,179.015406 L106.157563,136.466387 L143.279412,136.466387 C150.660401,136.466387 156.594049,138.166883 161.080532,141.567927 C165.567016,144.968971 167.810224,150.649353 167.810224,158.609244 C167.810224,162.661552 167.122789,165.990183 165.747899,168.595238 C164.373009,171.200293 162.527789,173.262597 160.212185,174.782213 C157.89658,176.301828 155.219203,177.387252 152.179972,178.038515 C149.140741,178.689779 145.956833,179.015406 142.628151,179.015406 L106.157563,179.015406 L106.157563,179.015406 Z" fill="#FFFFFF"></path>
+    </g>
+</svg>
--- a/public/library/deno.svg
+++ b/public/library/deno.svg
@ -0,0 +1,92 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1024.000000pt" height="1024.000000pt" viewBox="0 0 1024.000000 1024.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M4720 9174 c-19 -2 -80 -9 -135 -14 -782 -82 -1552 -413 -2180 -939
+-116 -96 -380 -360 -476 -476 -520 -621 -824 -1318 -936 -2143 -25 -183 -25
+-801 0 -984 112 -825 416 -1522 936 -2143 96 -116 360 -380 476 -476 621 -520
+1318 -824 2143 -936 183 -25 801 -25 984 0 825 112 1522 416 2143 936 116 96
+380 360 476 476 520 621 824 1318 936 2143 25 183 25 801 0 984 -112 825 -416
+1522 -936 2143 -96 116 -360 380 -476 476 -619 518 -1323 826 -2137 935 -88
+12 -216 17 -453 19 -181 2 -346 1 -365 -1z m50 -432 c0 -117 8 -371 19 -612 6
+-118 13 -287 16 -375 11 -312 44 -1131 49 -1204 l5 -73 -45 5 c-25 2 -48 8
+-52 11 -3 4 -10 73 -14 154 -18 356 -77 1737 -83 1939 l-6 222 28 4 c15 2 40
+5 56 6 l27 1 0 -78z m957 24 c1 -1 4 -303 7 -671 4 -369 9 -700 12 -736 3 -37
+2 -69 -3 -71 -4 -3 -29 -3 -54 0 l-46 4 -7 291 c-4 161 -9 339 -11 397 -8 177
+-15 778 -9 793 4 11 15 12 57 5 29 -6 53 -11 54 -12z m-2313 -335 c6 -9 53
+-560 111 -1281 19 -245 38 -469 41 -497 5 -51 4 -53 -28 -73 -18 -11 -36 -20
+-40 -20 -3 0 -9 26 -12 58 -14 130 -68 758 -106 1212 -22 267 -42 506 -45 532
+-5 44 -4 48 22 62 32 17 50 20 57 7z m2753 -201 c28 -10 31 -15 37 -72 10
+-100 7 -578 -4 -578 -29 0 -89 34 -94 53 -3 12 -6 154 -6 315 0 325 -4 306 67
+282z m-1847 -47 c0 -27 7 -176 15 -333 8 -157 17 -356 21 -442 7 -174 9 -168
+-58 -172 -33 -1 -33 -1 -35 49 -2 28 -7 115 -13 195 -5 80 -17 253 -25 385 -8
+132 -18 263 -21 291 -6 50 -5 52 22 62 16 6 44 11 62 11 32 1 32 1 32 -46z
+m2774 -137 l34 -14 7 -134 c3 -73 5 -231 3 -350 l-3 -218 -42 21 -42 20 -3
+332 c-2 183 -1 338 1 345 4 15 4 15 45 -2z m-1826 -131 c6 -6 20 -491 21 -737
+l1 -148 -47 7 c-27 3 -49 6 -50 7 -3 2 -33 743 -33 815 l0 74 51 -6 c29 -4 54
+-9 57 -12z m2303 -71 c12 -14 14 -233 17 -1441 3 -1387 3 -1423 -15 -1423 -11
+0 -26 6 -35 13 -15 11 -17 132 -22 1317 -4 718 -9 1370 -12 1449 l-6 144 29
+-21 c17 -12 36 -29 44 -38z m-897 -205 c5 -4 10 -61 11 -126 5 -221 6 -1576 1
+-1580 -2 -2 -20 3 -40 11 l-36 15 0 851 0 850 28 -6 c15 -4 31 -10 36 -15z
+m-2760 -56 c3 -27 8 -88 11 -138 3 -49 10 -161 16 -248 12 -176 10 -187 -47
+-187 -30 0 -34 3 -38 33 -10 59 -45 551 -40 559 5 7 57 25 81 27 6 1 14 -20
+17 -46z m-1654 -255 c11 -106 33 -328 49 -493 17 -165 31 -305 31 -311 0 -12
+-77 -50 -85 -42 -5 5 -105 890 -105 930 0 24 77 125 87 114 3 -2 13 -91 23
+-198z m3921 -105 l29 -17 1 -216 c1 -118 3 -250 3 -293 2 -90 -9 -105 -63 -86
+l-31 11 0 86 c0 48 -3 187 -7 310 l-6 222 23 0 c12 0 35 -8 51 -17z m-3482
+-388 c18 -192 47 -516 66 -720 l34 -370 -39 -39 -38 -39 -7 79 c-4 44 -24 248
+-45 454 -21 206 -51 505 -66 664 l-28 288 39 36 c35 33 39 34 46 16 4 -10 21
+-176 38 -369z m-749 -121 c22 -197 80 -721 130 -1164 50 -443 97 -870 106
+-950 8 -80 22 -201 30 -270 14 -117 14 -125 -2 -137 -24 -18 -34 -16 -34 5 0
+9 -9 85 -20 167 -18 137 -48 369 -115 890 -14 105 -41 314 -60 465 -20 151
+-49 376 -65 500 -16 124 -43 336 -60 473 -18 136 -29 257 -26 270 7 27 66 121
+72 115 2 -3 22 -166 44 -364z m-306 -431 c15 -120 43 -339 62 -488 19 -148 43
+-333 54 -410 l19 -140 -21 -18 c-12 -10 -24 -14 -28 -10 -4 4 -12 44 -18 88
+-6 44 -43 301 -83 570 l-71 490 23 68 c12 37 25 67 28 67 4 0 19 -98 35 -217z
+m5490 131 c14 -14 16 -76 16 -535 l0 -519 -28 0 c-61 0 -60 -15 -64 553 l-3
+517 32 0 c17 0 39 -7 47 -16z m-2189 -179 c226 -34 423 -97 618 -197 126 -65
+186 -110 326 -244 208 -199 336 -373 456 -619 175 -358 243 -675 329 -1525 39
+-381 90 -1072 101 -1355 3 -82 10 -217 16 -300 11 -176 24 -152 -131 -227
+-215 -104 -422 -176 -695 -243 -334 -82 -550 -108 -880 -109 l-240 -1 2 115
+c0 63 6 210 12 325 30 557 24 1260 -15 1650 -22 224 -65 496 -89 556 -5 13 18
+24 117 58 181 63 338 142 362 181 43 74 -34 180 -132 180 -17 0 -68 -18 -115
+-39 -224 -103 -673 -224 -932 -251 -179 -19 -457 -8 -650 27 -105 19 -293 90
+-450 171 -181 94 -292 219 -325 367 -18 80 -13 240 10 330 25 99 95 243 159
+327 285 375 873 700 1476 814 192 36 464 40 670 9z m3085 -31 c36 -15 40 -19
+40 -53 2 -273 -4 -897 -9 -923 -1 -9 -53 -10 -75 -2 -14 5 -16 59 -16 500 0
+316 4 494 10 494 5 0 28 -7 50 -16z m437 -549 l36 -15 -7 -828 c-8 -1055 -9
+-1086 -47 -1177 -62 -149 -59 -179 -53 475 2 327 7 658 9 735 2 77 4 294 5
+483 0 228 3 342 10 342 6 0 27 -7 47 -15z m-6014 -249 c6 -81 4 -89 -25 -153
+l-32 -68 -12 100 c-19 160 -19 167 19 191 17 12 35 20 38 18 3 -2 9 -42 12
+-88z m-618 -603 c9 -82 79 -626 115 -893 54 -413 58 -472 34 -447 -3 3 -26
+142 -50 309 -156 1078 -155 1071 -142 1079 27 18 36 8 43 -48z m720 -458 c6
+-25 35 -296 35 -329 0 -28 -36 -54 -52 -38 -5 5 -18 90 -28 188 -11 99 -22
+202 -25 229 l-6 50 35 -40 c20 -22 38 -49 41 -60z m807 -377 c11 -10 18 -50
+27 -158 15 -195 17 -180 -24 -180 -42 0 -41 -3 -55 173 -14 179 -14 177 13
+177 13 0 30 -6 39 -12z m792 -15 c2 -10 7 -70 11 -133 3 -63 12 -205 20 -315
+28 -404 29 -455 12 -455 -19 0 -21 15 -43 300 -8 118 -23 304 -33 413 -9 109
+-15 200 -12 202 11 12 40 3 45 -12z m-1880 -192 c6 -9 44 -329 91 -766 14
+-132 28 -259 31 -283 l5 -43 -25 16 c-19 13 -26 26 -26 49 0 63 -43 478 -76
+732 -19 144 -34 271 -34 283 0 21 24 29 34 12z m5771 -418 l-7 -418 -25 -37
+c-57 -84 -54 -100 -51 368 l2 429 37 38 c20 20 40 37 44 37 3 0 3 -188 0 -417z
+m-925 -663 c5 -581 4 -626 -12 -644 -10 -11 -19 -18 -22 -15 -7 8 -17 1275 -9
+1282 4 4 14 6 23 5 13 -3 16 -74 20 -628z m-3266 398 c7 -62 32 -359 42 -499
+6 -94 6 -97 -16 -104 -12 -4 -26 -3 -30 2 -7 7 -29 229 -56 571 l-7 82 31 0
+c29 0 31 -2 36 -52z m-786 -350 c7 -7 12 -32 12 -57 0 -26 12 -161 25 -301 38
+-383 41 -435 24 -425 -26 15 -49 38 -44 44 2 4 -2 54 -10 111 -7 58 -16 152
+-20 210 -4 58 -13 164 -21 235 -19 175 -18 195 4 195 10 0 23 -5 30 -12z m473
+-673 c3 -22 9 -104 13 -182 7 -150 4 -161 -37 -130 -12 9 -20 47 -32 161 -21
+206 -22 198 17 194 29 -3 33 -7 39 -43z"/>
+<path d="M3184 5756 c-104 -45 -112 -186 -14 -236 71 -36 143 -19 180 43 70
+114 -44 246 -166 193z"/>
+<path d="M3862 5660 c-96 -59 -96 -201 0 -260 95 -57 218 18 218 132 0 110
+-126 184 -218 128z"/>
+</g>
+</svg>
--- a/public/library/esbuild.svg
+++ b/public/library/esbuild.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <circle fill="#FFCF00" cx="128" cy="128" r="128"></circle>
+        <path d="M69.2852814,58.7147186 L138.570563,128 L69.2852814,197.285281 L52.3147186,180.314719 L104.629,128 L52.3147186,75.6852814 L69.2852814,58.7147186 Z M146.085281,58.7147186 L215.370563,128 L146.085281,197.285281 L129.114719,180.314719 L181.429,128 L129.114719,75.6852814 L146.085281,58.7147186 Z" fill="#191919"></path>
+    </g>
+</svg>
--- a/public/library/facebook.svg
+++ b/public/library/facebook.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+	<g>
+		<path d="M241.871,256.001 C249.673,256.001 256,249.675 256,241.872 L256,14.129 C256,6.325 249.673,0 241.871,0 L14.129,0 C6.324,0 0,6.325 0,14.129 L0,241.872 C0,249.675 6.324,256.001 14.129,256.001 L241.871,256.001" fill="#395185"></path>
+		<path d="M176.635,256.001 L176.635,156.864 L209.912,156.864 L214.894,118.229 L176.635,118.229 L176.635,93.561 C176.635,82.375 179.742,74.752 195.783,74.752 L216.242,74.743 L216.242,40.188 C212.702,39.717 200.558,38.665 186.43,38.665 C156.932,38.665 136.738,56.67 136.738,89.736 L136.738,118.229 L103.376,118.229 L103.376,156.864 L136.738,156.864 L136.738,256.001 L176.635,256.001" fill="#FFFFFF"></path>
+	</g>
+</svg>
--- a/public/library/firebase.svg
+++ b/public/library/firebase.svg
@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="351px" viewBox="0 0 256 351" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <defs>
+        <path d="M1.25273437,280.731641 L2.85834533,277.600858 L102.211177,89.0833546 L58.0613266,5.6082033 C54.3920011,-1.28304578 45.0741245,0.473674398 43.8699203,8.18789086 L1.25273437,280.731641 Z" id="path-1"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
+            <feGaussianBlur stdDeviation="17.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.06 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <path d="M134.417103,148.974235 L166.455722,116.161738 L134.417104,55.1546874 C131.374828,49.3635911 123.983911,48.7568362 120.973828,54.5646483 L103.26875,88.6738296 L102.739423,90.4175473 L134.417103,148.974235 Z" id="path-3"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
+            <feGaussianBlur stdDeviation="3.5" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="1" dy="-9" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.09 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+    </defs>
+	<g>
+		<path d="M0,282.99762 L2.12250746,280.0256 L102.527363,89.5119284 L102.739423,87.4951323 L58.478806,4.35817711 C54.7706269,-2.60604179 44.3313035,-0.845245771 43.1143483,6.95065473 L0,282.99762 Z" fill="#FFC24A"></path>
+		<g>
+			<use fill="#FFA712" fill-rule="evenodd" xlink:href="#path-1"></use>
+			<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+		</g>
+		<path d="M135.004975,150.380704 L167.960199,116.629461 L134.995423,53.6993114 C131.866109,47.7425353 123.128817,47.7253411 120.032618,53.6993112 L102.421015,87.2880848 L102.421015,90.1487443 L135.004975,150.380704 Z" fill="#F4BD62"></path>
+		<g>
+			<use fill="#FFA50E" fill-rule="evenodd" xlink:href="#path-3"></use>
+			<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+		</g>
+		<polygon fill="#F6820C" points="0 282.99762 0.962097168 282.030396 4.45771144 280.60956 132.935323 152.60956 134.563025 148.178595 102.513123 87.1048584"></polygon>
+		<path d="M139.120971,347.551268 L255.395916,282.703666 L222.191698,78.2093373 C221.153051,71.8112478 213.303658,69.2818149 208.724314,73.8694368 L0.000254726368,282.997875 L115.608454,347.545536 C122.914643,351.624979 131.812872,351.62689 139.120971,347.551268" fill="#FDE068"></path>
+		<path d="M254.354084,282.159837 L221.401937,79.2179369 C220.371175,72.8684188 213.843792,70.2409553 209.299213,74.79375 L1.28945312,282.600785 L115.627825,346.509458 C122.878548,350.557931 131.709226,350.559827 138.961846,346.515146 L254.354084,282.159837 Z" fill="#FCCA3F"></path>
+		<path d="M139.120907,345.64082 C131.812808,349.716442 122.914579,349.714531 115.60839,345.635089 L0.93134768,282.014551 L0.000191044776,282.997875 L115.60839,347.545536 C122.914579,351.624979 131.812808,351.62689 139.120907,347.551268 L255.395853,282.703666 L255.111196,280.951785 L139.120907,345.64082 Z" fill="#EEAB37"></path>
+	</g>
+</svg>
--- a/public/library/gatsby.svg
+++ b/public/library/gatsby.svg
@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#64328B" d="M64,0C28.7,0,0,28.7,0,64v0c0,35.3,28.7,64,64,64s64-28.7,64-64v0C128,28.7,99.3,0,64,0z M13.2,64L64,114.8 C35.9,114.8,13.2,92.1,13.2,64z M75.4,113.5l-60.9-61C19.7,30,39.9,13.2,64,13.2c16.6,0,31.3,7.9,40.5,20.2l-7.5,7.2 C89.7,30.2,77.7,23.5,64,23.5c-17.6,0-32.5,11.2-38.1,26.8C33.1,57,75.4,98.8,78.1,102c12.7-4.7,22.3-15.5,25.4-28.9H81.9v-9.4 l33,0.2C114.8,88.2,98,108.4,75.4,113.5z"/></svg>
--- a/public/library/github.svg
+++ b/public/library/github.svg
@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="256px" height="250px" fill="currentColor" viewBox="0 0 256 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
    <g>
-        <path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="#161614"></path>
+        <path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="#545454"></path>
    </g>
 </svg>
--- a/public/library/homebrew.svg
+++ b/public/library/homebrew.svg
--- a/public/library/lit.svg
+++ b/public/library/lit.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="320px" viewBox="0 0 256 320" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <title>Lit</title>
+    <g>
+				<polygon fill="#00E8FF" points="64 192 89.9257031 147.272598 128.15876 128.15876 192.133047 192.133047 202.966055 253.886973 192 320 128 256 89.9257031 230.385117"></polygon>
+				<path d="M128,256 L128,128 L192,64 L192,192 L128,256 Z M0,256 L64,320 L73.2016406,259.398301 L64,192 L26.457793,215.709199 L0,256 Z" fill="#283198"></path>
+				<path d="M64,192 L64,64 L128,0 L128,128 L64,192 Z M192,320 L192,192 L256,128 L256,256 L192,320 Z M0,256 L0,128 L64,192 L0,256 Z" fill="#324FFF"></path>
+				<polygon fill="#00FFFF" points="64 320 64 192 128 256"></polygon>
+    </g>
+</svg>
--- a/public/library/nodejs.svg
+++ b/public/library/nodejs.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="289px" viewBox="0 0 256 289" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M127.999999,288.463771 C124.024844,288.463771 120.314699,287.403728 116.869564,285.548656 L81.6231884,264.612838 C76.32298,261.697724 78.9730854,260.637682 80.5631458,260.107661 C87.7184259,257.72257 89.0434775,257.192547 96.4637688,252.952381 C97.2587979,252.422361 98.3188405,252.687372 99.1138718,253.217392 L126.144927,269.383024 C127.20497,269.913045 128.530021,269.913045 129.325053,269.383024 L235.064182,208.165634 C236.124225,207.635611 236.654245,206.575571 236.654245,205.250519 L236.654245,83.0807467 C236.654245,81.7556929 236.124225,80.6956526 235.064182,80.1656324 L129.325053,19.2132506 C128.26501,18.6832305 126.939959,18.6832305 126.144927,19.2132506 L20.4057954,80.1656324 C19.3457551,80.6956526 18.8157349,82.0207041 18.8157349,83.0807467 L18.8157349,205.250519 C18.8157349,206.31056 19.3457551,207.635611 20.4057954,208.165634 L49.2919247,224.861286 C64.9275364,232.811595 74.7329196,223.536234 74.7329196,214.260871 L74.7329196,93.681159 C74.7329196,92.0910985 76.0579711,90.5010358 77.9130428,90.5010358 L91.4285716,90.5010358 C93.0186343,90.5010358 94.6086948,91.8260873 94.6086948,93.681159 L94.6086948,214.260871 C94.6086948,235.196689 83.2132512,247.387164 63.3374737,247.387164 C57.2422362,247.387164 52.4720502,247.387164 38.9565214,240.761906 L11.1304347,224.861286 C4.24016581,220.886129 5.68434189e-14,213.46584 5.68434189e-14,205.515528 L5.68434189e-14,83.3457557 C5.68434189e-14,75.3954465 4.24016581,67.9751552 11.1304347,64.0000006 L116.869564,2.78260752 C123.494824,-0.927535841 132.505176,-0.927535841 139.130436,2.78260752 L244.869565,64.0000006 C251.759834,67.9751552 256,75.3954465 256,83.3457557 L256,205.515528 C256,213.46584 251.759834,220.886129 244.869565,224.861286 L139.130436,286.078676 C135.685299,287.668739 131.710145,288.463771 127.999999,288.463771 L127.999999,288.463771 Z M160.596274,204.455488 C114.219461,204.455488 104.679089,183.254659 104.679089,165.233955 C104.679089,163.643893 106.004141,162.053832 107.859212,162.053832 L121.639752,162.053832 C123.229813,162.053832 124.554864,163.113872 124.554864,164.703935 C126.674947,178.749484 132.770187,185.639753 160.861283,185.639753 C183.122154,185.639753 192.662526,180.604556 192.662526,168.67909 C192.662526,161.788821 190.012423,156.753624 155.296065,153.308489 C126.409938,150.393375 108.389235,144.033126 108.389235,120.977226 C108.389235,99.5113875 126.409938,86.7908901 156.621119,86.7908901 C190.542443,86.7908901 207.238095,98.4513472 209.358178,123.89234 C209.358178,124.687371 209.093167,125.482403 208.563147,126.277434 C208.033127,126.807454 207.238095,127.337474 206.443064,127.337474 L192.662526,127.337474 C191.337475,127.337474 190.012423,126.277434 189.747412,124.952382 C186.567289,110.376813 178.351966,105.606625 156.621119,105.606625 C132.240165,105.606625 129.325053,114.086957 129.325053,120.447205 C129.325053,128.132506 132.770187,130.5176 165.631471,134.757766 C198.227744,138.997931 213.598344,145.093169 213.598344,167.884058 C213.333333,191.20497 194.252589,204.455488 160.596274,204.455488 L160.596274,204.455488 Z" fill="#539E43"></path>
+    </g>
+</svg>
--- a/public/library/npm.svg
+++ b/public/library/npm.svg
@ -0,0 +1 @@
+<svg id="NPM" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path id="original-wordmark" fill="#cb3837" d="M2,38.5H126V82.21H64V89.5H36.44V82.21H2ZM8.89,74.93H22.67V53.07h6.89V74.93h6.89V45.79H8.89ZM43.33,45.79V82.21H57.11V74.93H70.89V45.79Zm13.78,7.29H64V67.64H57.11Zm20.67-7.29V74.93H91.56V53.07h6.89V74.93h6.89V53.07h6.89V74.93h6.89V45.79Z"/></svg>
--- a/public/library/styledcomponents.svg
+++ b/public/library/styledcomponents.svg
--- a/public/library/sublimetext.svg
+++ b/public/library/sublimetext.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="332px" viewBox="0 0 256 332" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <defs>
+        <linearGradient x1="55.1170996%" y1="58.6795405%" x2="63.6801778%" y2="39.5971572%" id="linearGradient-1">
+            <stop stop-color="#FF9700" offset="0%"></stop>
+            <stop stop-color="#F48E00" offset="53%"></stop>
+            <stop stop-color="#D06F00" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g>
+				<path d="M255.288325,166.794648 C255.288325,162.908052 252.415934,160.666877 248.891046,161.780372 L6.39727934,238.675387 C2.86530029,239.795974 0,243.859878 0,247.73938 L0,326.329461 C0,330.216057 2.86530029,332.464324 6.39727934,331.343737 L248.891046,254.455814 C252.415934,253.335227 255.288325,249.271323 255.288325,245.384729 L255.288325,166.794648 L255.288325,166.794648 Z" fill="url(#linearGradient-1)"></path>
+				<path d="M5.68434189e-14,164.291056 C5.68434189e-14,168.177652 2.86530029,172.241555 6.39727934,173.362144 L248.926508,250.26425 C252.458487,251.384837 255.323787,249.13657 255.323787,245.257067 L255.323787,166.659893 C255.323787,162.780391 252.458487,158.716487 248.926508,157.595899 L6.39727934,80.693793 C2.86530029,79.5732052 5.68434189e-14,81.8143808 5.68434189e-14,85.7009761 L5.68434189e-14,164.291056 Z" fill="#FF9800"></path>
+				<path d="M255.288325,5.30235244 C255.288325,1.41575701 252.415934,-0.83251079 248.891046,0.288076943 L6.39727934,77.1759986 C2.86530029,78.2965864 0,82.36049 0,86.2470854 L0,164.837165 C0,168.723761 2.86530029,170.964936 6.39727934,169.851441 L248.891046,92.9564272 C252.415934,91.8358394 255.288325,87.7719358 255.288325,83.8924327 L255.288325,5.30235244 Z" fill="#FF9800"></path>
+		</g>
+</svg>
--- a/public/library/supabase.svg
+++ b/public/library/supabase.svg
@ -0,0 +1,15 @@
+<svg width="109" height="113" viewBox="0 0 109 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z" fill="url(#paint0_linear)"/>
+<path d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z" fill="url(#paint1_linear)" fill-opacity="0.2"/>
+<path d="M45.317 2.07103C48.1765 -1.53037 53.9745 0.442937 54.0434 5.041L54.4849 72.2922H9.83113C1.64038 72.2922 -2.92775 62.8321 2.1655 56.4175L45.317 2.07103Z" fill="#3ECF8E"/>
+<defs>
+<linearGradient id="paint0_linear" x1="53.9738" y1="54.974" x2="94.1635" y2="71.8295" gradientUnits="userSpaceOnUse">
+<stop stop-color="#249361"/>
+<stop offset="1" stop-color="#3ECF8E"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="36.1558" y1="30.578" x2="54.4844" y2="65.0806" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
--- a/public/library/tailwindcss.svg
+++ b/public/library/tailwindcss.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="154px" viewBox="0 0 256 154" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <defs>
+        <linearGradient x1="-2.77777778%" y1="32%" x2="100%" y2="67.5555556%" id="linearGradient-1">
+            <stop stop-color="#2298BD" offset="0%"></stop>
+            <stop stop-color="#0ED7B5" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g>
+        <path d="M128,-1.0658141e-14 C93.8666667,-1.0658141e-14 72.5333333,17.0666667 64,51.2 C76.8,34.1333333 91.7333333,27.7333333 108.8,32 C118.537481,34.4343704 125.497363,41.4985481 133.201067,49.3184 C145.750756,62.0567704 160.275437,76.8 192,76.8 C226.133333,76.8 247.466667,59.7333333 256,25.6 C243.2,42.6666667 228.266667,49.0666667 211.2,44.8 C201.462519,42.3656296 194.502637,35.3014519 186.798933,27.4816 C174.249244,14.7432296 159.724563,-1.0658141e-14 128,-1.0658141e-14 Z M64,76.8 C29.8666667,76.8 8.53333333,93.8666667 0,128 C12.8,110.933333 27.7333333,104.533333 44.8,108.8 C54.5374815,111.23437 61.497363,118.298548 69.2010667,126.1184 C81.7507556,138.85677 96.275437,153.6 128,153.6 C162.133333,153.6 183.466667,136.533333 192,102.4 C179.2,119.466667 164.266667,125.866667 147.2,121.6 C137.462519,119.16563 130.502637,112.101452 122.798933,104.2816 C110.249244,91.5432296 95.724563,76.8 64,76.8 Z" fill="url(#linearGradient-1)"></path>
+    </g>
+</svg>
--- a/public/library/turborepo.svg
+++ b/public/library/turborepo.svg
@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="318px" viewBox="0 0 256 318" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <title>turborepo</title>
+    <defs>
+        <linearGradient x1="123.779228%" y1="-3.85716965e-07%" x2="123.779228%" y2="698.962346%" id="turborepo-linearGradient-1">
+            <stop stop-color="#1E90FF" offset="0%"></stop>
+            <stop stop-color="#FF1E56" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="11.4859916%" y1="-2.19377472%" x2="11.4859916%" y2="512.39779%" id="turborepo-linearGradient-2">
+            <stop stop-color="#1E90FF" offset="0%"></stop>
+            <stop stop-color="#FF1E56" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="-153.743225%" y1="-62.2632095%" x2="-153.743225%" y2="278.479413%" id="turborepo-linearGradient-3">
+            <stop stop-color="#1E90FF" offset="0%"></stop>
+            <stop stop-color="#FF1E56" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="-153.743225%" y1="-178.48023%" x2="-153.743225%" y2="162.263952%" id="turborepo-linearGradient-4">
+            <stop stop-color="#1E90FF" offset="0%"></stop>
+            <stop stop-color="#FF1E56" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="11.4859916%" y1="-412.397334%" x2="11.4859916%" y2="102.193662%" id="turborepo-linearGradient-5">
+            <stop stop-color="#1E90FF" offset="0%"></stop>
+            <stop stop-color="#FF1E56" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="123.779228%" y1="-598.960854%" x2="123.779228%" y2="99.9997513%" id="turborepo-linearGradient-6">
+            <stop stop-color="#1E90FF" offset="0%"></stop>
+            <stop stop-color="#FF1E56" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g>
+        <g>
+            <path d="M103.409919,0.0945810675 C66.8366598,-1.16649961 30.2676723,10.1832239 0,34.1437712 L20.1770242,45.4933581 C44.1391095,27.838355 74.4025099,20.2718642 103.409919,21.5329389 L103.409919,0.0945810675 Z" fill="url(#turborepo-linearGradient-1)"></path>
+            <path d="M210.600627,48.0155928 C185.378279,21.5328962 152.590081,5.13883968 117.281356,1.35559852 L117.281356,22.7939708 C147.549029,27.8383123 174.03164,41.7101766 195.468927,63.1485746 L210.600627,48.0155928 Z" fill="url(#turborepo-linearGradient-2)"></path>
+            <path d="M256,151.42423 C254.739737,118.636032 242.128563,85.8478338 220.691275,58.1041051 L205.555303,73.2370868 C223.211802,97.1978904 233.30245,123.680502 234.562713,151.42423 L256,151.42423 Z" fill="url(#turborepo-linearGradient-3)"></path>
+            <path d="M220.691275,259.876911 C242.128563,232.133182 254.739737,199.345411 256,166.557212 L234.562713,166.557212 C233.30245,194.300941 223.211802,220.783552 205.555303,244.743929 L220.691275,259.876911 Z" fill="url(#turborepo-linearGradient-4)"></path>
+            <path d="M117.281356,316.625913 C151.329818,312.84256 185.378279,296.44846 210.600627,269.96585 L195.468927,254.832868 C174.03164,277.532127 146.284494,291.403993 117.281356,295.187343 L117.281356,316.625913 Z" fill="url(#turborepo-linearGradient-5)"></path>
+            <path d="M0,283.837714 C30.2676723,307.79809 66.8366598,319.147719 103.409919,317.88703 L103.409919,296.44846 C74.4025099,297.70958 45.3993724,290.142873 20.1770242,272.488085 L0,283.837714 Z" fill="url(#turborepo-linearGradient-6)"></path>
+        </g>
+        <path d="M97.6511578,71.3437019 C111.129564,71.3437019 123.569854,73.6390892 134.972031,78.2302915 C146.374206,82.6732526 156.148722,88.893398 164.295573,96.8907279 C172.587676,104.888058 179.02997,114.292183 183.622455,125.103531 C188.214939,135.766638 190.509044,147.318336 190.509044,159.758627 C190.509044,172.198918 188.214939,183.824524 183.622455,194.635872 C179.02997,205.298979 172.587676,214.629197 164.295573,222.626527 C156.148722,230.623857 146.374206,236.917909 134.972031,241.509111 C123.569854,245.952072 111.129564,248.173553 97.6511578,248.173553 C84.0274998,248.173553 71.5103114,245.952072 60.1081367,241.509111 C48.8512106,236.917909 39.1535939,230.623857 31.0067421,222.626527 C22.8598876,214.629197 16.4944931,205.298979 11.9020085,194.635872 C7.30952399,183.824524 5.0154192,172.198918 5.0154192,159.758627 C5.0154192,147.318336 7.30952399,135.766638 11.9020085,125.103531 C16.4944931,114.292183 22.8598876,104.888058 31.0067421,96.8907279 C39.1535939,88.893398 48.8512106,82.6732526 60.1081367,78.2302915 C71.5103114,73.6390892 84.0274998,71.3437019 97.6511578,71.3437019 Z M97.6511578,113.551832 C91.2814883,113.551832 85.2108658,114.736479 79.4350181,117.106201 C73.8086911,119.327681 68.8445353,122.511661 64.5510977,126.658567 C60.2576602,130.805473 56.8485416,135.692731 54.3322862,141.320339 C51.8160337,146.947947 50.5557685,153.094186 50.5557685,159.758627 C50.5557685,166.423069 51.8160337,172.569308 54.3322862,178.196916 C56.8485416,183.824524 60.2576602,188.711781 64.5510977,192.858687 C68.8445353,197.005594 73.8086911,200.26348 79.4350181,202.633202 C85.2108658,204.854682 91.2814883,205.965423 97.6511578,205.965423 C104.020825,205.965423 110.018823,204.854682 115.64515,202.633202 C121.421,200.26348 126.45778,197.005594 130.751218,192.858687 C135.194179,188.711781 138.675922,183.824524 141.192177,178.196916 C143.70843,172.569308 144.968692,166.423069 144.968692,159.758627 C144.968692,153.094186 143.70843,146.947947 141.192177,141.320339 C138.675922,135.692731 135.194179,130.805473 130.751218,126.658567 C126.45778,122.511661 121.421,119.327681 115.64515,117.106201 C110.018823,114.736479 104.020825,113.551832 97.6511578,113.551832 Z" fill="#000000"></path>
+    </g>
+</svg>
--- a/public/library/twitter.svg
+++ b/public/library/twitter.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="209px" viewBox="0 0 256 209" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M256,25.4500259 C246.580841,29.6272672 236.458451,32.4504868 225.834156,33.7202333 C236.678503,27.2198053 245.00583,16.9269929 248.927437,4.66307685 C238.779765,10.6812633 227.539325,15.0523376 215.57599,17.408298 C205.994835,7.2006971 192.34506,0.822 177.239197,0.822 C148.232605,0.822 124.716076,24.3375931 124.716076,53.3423116 C124.716076,57.4586875 125.181462,61.4673784 126.076652,65.3112644 C82.4258385,63.1210453 43.7257252,42.211429 17.821398,10.4359288 C13.3005011,18.1929938 10.710443,27.2151234 10.710443,36.8402889 C10.710443,55.061526 19.9835254,71.1374907 34.0762135,80.5557137 C25.4660961,80.2832239 17.3681846,77.9207088 10.2862577,73.9869292 C10.2825122,74.2060448 10.2825122,74.4260967 10.2825122,74.647085 C10.2825122,100.094453 28.3867003,121.322443 52.413563,126.14673 C48.0059695,127.347184 43.3661509,127.988612 38.5755734,127.988612 C35.1914554,127.988612 31.9009766,127.659938 28.694773,127.046602 C35.3777973,147.913145 54.7742053,163.097665 77.7569918,163.52185 C59.7820257,177.607983 37.1354036,186.004604 12.5289147,186.004604 C8.28987161,186.004604 4.10888474,185.75646 0,185.271409 C23.2431033,200.173139 50.8507261,208.867532 80.5109185,208.867532 C177.116529,208.867532 229.943977,128.836982 229.943977,59.4326002 C229.943977,57.1552968 229.893412,54.8901664 229.792282,52.6381454 C240.053257,45.2331635 248.958338,35.9825545 256,25.4500259" fill="#55acee"></path>
+    </g>
+</svg>
--- a/public/library/vitejs.svg
+++ b/public/library/vitejs.svg
@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="257px" viewBox="0 0 256 257" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <defs>
+        <linearGradient x1="-0.828097821%" y1="7.6518539%" x2="57.6359644%" y2="78.4107719%" id="linearGradient-1">
+            <stop stop-color="#41D1FF" offset="0%"></stop>
+            <stop stop-color="#BD34FE" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="43.3760053%" y1="2.24179788%" x2="50.3158848%" y2="89.0299051%" id="linearGradient-2">
+            <stop stop-color="#FFEA83" offset="0%"></stop>
+            <stop stop-color="#FFDD35" offset="8.33333%"></stop>
+            <stop stop-color="#FFA800" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g>
+        <path d="M255.152904,37.937763 L134.896865,252.97646 C132.413943,257.416178 126.035075,257.442321 123.5149,253.02417 L0.87443175,37.9584812 C-1.87111536,33.1438084 2.24595371,27.3119153 7.70191187,28.2871109 L128.086639,49.8052023 C128.854587,49.9424525 129.640835,49.9411454 130.408783,49.8012155 L248.276014,28.3179595 C253.713738,27.3268821 257.850198,33.1136134 255.152904,37.937763 Z" fill="url(#linearGradient-1)"></path>
+        <path d="M185.432401,0.0631038902 L96.4393502,17.500942 C94.9766549,17.7875335 93.8936852,19.0270992 93.8054529,20.5146956 L88.3311293,112.971419 C88.2023755,115.149123 90.2023075,116.839261 92.3277254,116.349082 L117.10466,110.630976 C119.422882,110.096354 121.517582,112.138114 121.041128,114.469407 L113.67994,150.515893 C113.184532,152.941955 115.462232,155.016394 117.831433,154.29681 L133.134834,149.647295 C135.507302,148.927059 137.786963,151.00738 137.285019,153.435402 L125.586724,210.056351 C124.854723,213.598061 129.565674,215.529368 131.530313,212.49287 L132.842687,210.464834 L205.359174,65.745575 C206.573511,63.3224548 204.479465,60.5594769 201.818118,61.0730542 L176.31441,65.9952397 C173.91776,66.4573155 171.878614,64.2253653 172.555061,61.8805431 L189.2009,4.17570253 C189.878001,1.82692623 187.831665,-0.406957894 185.432401,0.0631038902 Z" fill="url(#linearGradient-2)"></path>
+    </g>
+</svg>
				`@ -0,0 +1 @@`
				`<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#64328B" d="M64,0C28.7,0,0,28.7,0,64v0c0,35.3,28.7,64,64,64s64-28.7,64-64v0C128,28.7,99.3,0,64,0z M13.2,64L64,114.8 C35.9,114.8,13.2,92.1,13.2,64z M75.4,113.5l-60.9-61C19.7,30,39.9,13.2,64,13.2c16.6,0,31.3,7.9,40.5,20.2l-7.5,7.2 C89.7,30.2,77.7,23.5,64,23.5c-17.6,0-32.5,11.2-38.1,26.8C33.1,57,75.4,98.8,78.1,102c12.7-4.7,22.3-15.5,25.4-28.9H81.9v-9.4 l33,0.2C114.8,88.2,98,108.4,75.4,113.5z"/></svg>`
				`@ -0,0 +1 @@`
				`<svg id="NPM" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path id="original-wordmark" fill="#cb3837" d="M2,38.5H126V82.21H64V89.5H36.44V82.21H2ZM8.89,74.93H22.67V53.07h6.89V74.93h6.89V45.79H8.89ZM43.33,45.79V82.21H57.11V74.93H70.89V45.79Zm13.78,7.29H64V67.64H57.11Zm20.67-7.29V74.93H91.56V53.07h6.89V74.93h6.89V53.07h6.89V74.93h6.89V45.79Z"/></svg>`