feat(): Adding project support

Author: ar1603

jest.config.js

@@ -27,7 +27,9 @@ module.exports = {
     '@assets/(.*)': '<rootDir>/src/assets/$1',
     '@assets': '<rootDir>/src/assets',
     '@screens': '<rootDir>/src/screens',
+    '@screens/(.*)': '<rootDir>/src/screens/$1',
     '@data': '<rootDir>/src/data',
+    '@hooks': '<rootDir>/src/hooks',
     '@store/slice': '<rootDir>/src/store/slice',
     '@store': '<rootDir>/src/store',
     '@selectors': '<rootDir>/src/store/selectors',

src/assets/icons/Common/NpmIcon.tsx

@@ -0,0 +1,24 @@
+import { SVGProps } from 'react';
+
+const NpmIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 128 128"
+      width="1em"
+      height="1em"
+      {...props}
+    >
+      <path
+        fill="#cb3837"
+        d="M0 7.062C0 3.225 3.225 0 7.062 0h113.88c3.838 0 7.063 3.225 7.063 7.062v113.88c0 3.838-3.225 7.063-7.063 7.063H7.062c-3.837 0-7.062-3.225-7.062-7.063zm23.69 97.518h40.395l.05-58.532h19.494l-.05 58.581h19.543l.05-78.075l-78.075-.1l-.1 78.126z"
+      ></path>
+      <path
+        fill="#fff"
+        d="M25.105 65.52V26.512H40.96c8.72 0 26.274.034 39.008.075l23.153.075v77.866H83.645v-58.54H64.057v58.54H25.105z"
+      ></path>
+    </svg>
+  );
+};
+
+export default NpmIcon;

src/assets/icons/Common/index.ts

@@ -10,3 +10,4 @@ export { default as InstagramIcon } from './InstagramIcon';
 export { default as StarIcon } from './Star';
 export { default as StarTrekIcon } from './Startrek';
 export { default as Redirect } from './Redirect';
+export { default as NpmIcon } from './NpmIcon';

src/assets/icons/Projects/Dashwave.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+const Dashwave = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="128"
+      height="128"
+      viewBox="0 0 128 128"
+      {...props}
+    >
+      <path
+        fill="#60767E"
+        d="m64.375 12.563 2.783.025c13.807.342 24.972 5.738 35.092 15.1 9.71 10.307 14.352 22.679 14.188 36.687l-.026 2.783c-.342 13.807-5.738 24.972-15.1 35.092-10.307 9.71-22.679 14.352-36.687 14.188l-2.783-.026c-13.807-.342-24.972-5.738-35.092-15.1-9.71-10.307-14.352-22.679-14.187-36.687l.025-2.783c.342-13.807 5.738-24.972 15.1-35.092 10.307-9.71 22.679-14.352 36.687-14.187M31.82 36.664C24.283 46.336 20.73 57.827 22 70c1.75 8.342 4.623 15.374 10 22l1.52 1.895c7.037 7.859 17.586 12.308 27.957 13.355C72.803 107.772 83.235 104.112 92 97l1.895-1.52c7.859-7.037 12.308-17.586 13.355-27.957C107.772 56.197 104.112 45.765 97 37l-1.52-1.895c-7.006-7.825-17.653-12.445-28.027-13.32-13.947-.492-26.05 4.754-35.633 14.88"
+      ></path>
+      <path
+        fill="#60767E"
+        d="M62 49c3.522 1.977 5.7 4.099 7 8 .226 2.393.408 4.79.563 7.188l.253 3.855L70 71h2l.113-2.633c.734-12.864.734-12.864 5.575-18.242C81.127 48.452 84.31 48.228 88 49c3.522 1.977 5.7 4.099 7 8 .122 2.866.185 5.697.188 8.563l.037 2.365c.005 2.025-.103 4.05-.225 6.072-2 2-2 2-4.5 2.313L88 76c-2.401-3.602-2.438-6.509-2.625-10.687l-.117-2.127A678 678 0 0 1 85 58h-2l-.113 2.887-.2 3.8-.175 3.762c-.644 4.467-2.16 7.1-5.2 10.364C73.89 80.57 70.709 80.776 67 80c-3.522-1.977-5.7-4.099-7-8-.226-2.393-.408-4.79-.562-7.187l-.254-3.856L59 58h-2l-.113 2.633c-.734 12.864-.734 12.864-5.574 18.242C47.876 80.547 44.687 80.779 41 80c-3.019-1.753-5.415-3.83-7-7-.235-2.994-.185-5.997-.187-9l-.038-2.523-.005-2.414-.013-2.215C34 55 34 55 36 53c2.5-.312 2.5-.312 5 0 2.401 3.602 2.438 6.509 2.625 10.688l.117 2.126c.094 1.729.177 3.457.258 5.186h2l.113-2.887.2-3.8.175-3.762c.644-4.467 2.16-7.1 5.2-10.364C55.11 48.43 58.292 48.225 62 49"
+      ></path>
+    </svg>
+  );
+};
+
+export default Dashwave;

src/assets/icons/Projects/Galaxy.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+const Galaxy = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 14 14"
+      width="1em"
+      height="1em"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M7.558.198a.75.75 0 1 0-.75 1.3c1.249.72 1.888 1.977 1.917 3.346c-1.714-2.18-4.668-3.269-7.337-1.728a.75.75 0 0 0 .75 1.3c1.251-.723 2.661-.647 3.863.015C3.26 4.83.83 6.84.83 9.918a.75.75 0 1 0 1.5 0c0-1.434.769-2.613 1.939-3.324c-1.016 2.57-.489 5.672 2.172 7.208a.75.75 0 1 0 .75-1.3c-1.242-.716-1.878-1.972-1.909-3.34C7 11.326 9.95 12.42 12.611 10.884a.75.75 0 0 0-.75-1.3c-1.24.717-2.644.641-3.844-.014c2.74-.399 5.151-2.412 5.151-5.488a.75.75 0 0 0-1.5 0c0 1.442-.768 2.624-1.94 3.334c1.032-2.575.497-5.677-2.171-7.218ZM7 8.001A1.001 1.001 0 1 0 7 6a1.001 1.001 0 0 0 0 2Z"
+        clipRule="evenodd"
+      ></path>
+    </svg>
+  );
+};
+
+export default Galaxy;

src/assets/icons/Projects/constants.tsx

@@ -1,16 +1,35 @@
 import Apple from './Apple';
+import Dashwave from './Dashwave';
+import Galaxy from './Galaxy';
 import Hourcoding from './Hourcoding';
 import Telegramonic from './Telegramonic';
 import TopAppAi from './TopAppAi';
 import { ProjectName } from './type';
 
-const SIZE = 36;
+const SIZE = 72;
 
 export const PROJECT_NAME_ICON_MAP: Record<ProjectName, JSX.Element> = {
   [ProjectName.Hourcoding]: (
     <Hourcoding width={SIZE} height={SIZE} color="green" />
   ),
+  [ProjectName.HourcodingCheatsheet]: (
+    <Hourcoding width={SIZE} height={SIZE} color="green" />
+  ),
+  [ProjectName.HourcodingTools]: (
+    <Hourcoding width={SIZE} height={SIZE} color="green" />
+  ),
+  [ProjectName.HourcodingUI]: (
+    <Hourcoding width={SIZE} height={SIZE} color="green" />
+  ),
+  [ProjectName.HourcodingRoadmap]: (
+    <Hourcoding width={SIZE} height={SIZE} color="green" />
+  ),
+  [ProjectName.HourcodingStalker]: (
+    <Hourcoding width={SIZE} height={SIZE} color="green" />
+  ),
   [ProjectName.MacOs]: <Apple width={SIZE} height={SIZE} color="white" />,
   [ProjectName.Telegramonic]: <Telegramonic width={SIZE} height={SIZE} />,
   [ProjectName.TopAppAi]: <TopAppAi width={SIZE} height={SIZE} />,
+  [ProjectName.Dashwave]: <Dashwave width={SIZE} height={SIZE} />,
+  [ProjectName.GalaxyUI]: <Galaxy width={SIZE} height={SIZE} color="white" />,
 };

src/assets/icons/Projects/type.ts

@@ -1,6 +1,15 @@
 export enum ProjectName {
-  Hourcoding = 'Hourcoding',
-  MacOs = 'MacOs',
-  Telegramonic = 'Telegramonic',
-  TopAppAi = 'TopAppAi',
+  // Hourcoding projects
+  Hourcoding = 'hourcoding',
+  HourcodingCheatsheet = 'hourcoding_cheatsheet',
+  HourcodingTools = 'hourcoding_tools',
+  HourcodingUI = 'hourcoding_ui',
+  HourcodingRoadmap = 'hourcoding_roadmap',
+  HourcodingStalker = 'hourcoding_stalker',
+  // Non Hourcoding projects
+  MacOs = 'macos',
+  Telegramonic = 'telegramonic',
+  TopAppAi = 'topAppAi',
+  Dashwave = 'dashwave',
+  GalaxyUI = 'galaxyUI',
 }

src/components/CardComponent/Card.tsx

@@ -19,7 +19,13 @@ export const Icon = ({ className, ...rest }: any) => {
   );
 };
 
-export const CardBasic = ({ text }: { text?: string }) => {
+export const CardBasic = ({
+  text,
+  icon,
+}: {
+  text?: string;
+  icon?: React.ReactNode;
+}) => {
   const mouseX = useMotionValue(0);
   const mouseY = useMotionValue(0);
 
@@ -41,8 +47,8 @@ export const CardBasic = ({ text }: { text?: string }) => {
 
   return (
     <Box
-      width={{ base: '36', md: '44', lg: '64' }}
-      h={'100%'}
+      width={'full'}
+      height={{ base: '36', md: '44', lg: '64' }}
       className={
         'p-0.5  bg-transparent aspect-square  flex items-center justify-center relative'
       }
@@ -56,12 +62,16 @@ export const CardBasic = ({ text }: { text?: string }) => {
           mouseY={mouseY}
           randomString={randomString}
         />
-        <div className="relative z-10 flex items-center justify-center">
+        <div className="relative z-0 flex items-center justify-center">
+          <div className="absolute z=0 w-full h-full bg-black/[0.8] rounded-full blur-md" />
           <div className="relative h-28 w-28  rounded-full flex items-center justify-center text-white font-bold text-4xl">
-            <div className="absolute w-full h-full bg-white/[0.8] dark:bg-black/[0.8] blur-sm rounded-full" />
-            <span className="dark:text-white text-black z-20 text-center w-[200%]">
-              {text}
-            </span>
+            {icon ? (
+              icon
+            ) : (
+              <span className="dark:text-white text-black z-20 text-center w-[200%]">
+                {text}
+              </span>
+            )}
           </div>
         </div>
       </div>
@@ -74,17 +84,17 @@ function CardPattern({ mouseX, mouseY, randomString }: any) {
   const style = { maskImage, WebkitMaskImage: maskImage };
 
   return (
-    <div className="pointer-events-none">
+    <div className="pointer-events-none ">
       <div className="absolute inset-0 rounded-2xl  [mask-image:linear-gradient(white,transparent)] group-hover/card:opacity-50"></div>
       <motion.div
         className="absolute inset-0 rounded-2xl bg-gradient-to-r from-green-500 to-blue-700 opacity-0  group-hover/card:opacity-100 backdrop-blur-xl transition duration-500"
         style={style}
       />
       <motion.div
-        className="absolute inset-0 rounded-2xl opacity-0 mix-blend-overlay  group-hover/card:opacity-100"
+        className="absolute inset-0 px-0 rounded-2xl opacity-0 mix-blend-overlay  group-hover/card:opacity-100"
         style={style}
       >
-        <p className="absolute inset-x-0 text-xs h-full break-words whitespace-pre-wrap text-white font-mono font-bold transition duration-500">
+        <p className="absolute inset-[0] text-xs h-full break-words text-white font-mono font-bold transition duration-500">
           {randomString}
         </p>
       </motion.div>

src/components/CardComponent/CardExport.tsx

@@ -2,13 +2,23 @@ import { useRef } from 'react';
 import { useCursor } from '../Cursor';
 import { CardBasic, Icon } from './Card';
 import { CardExportProps } from './types';
-import { Wrap } from '@chakra-ui/react';
+import { Box, Button, HStack, Text, Wrap } from '@chakra-ui/react';
+import { Chip, Language } from '../Chip';
+import { Link } from 'react-router-dom';
+import { PROJECT_NAME_ICON_MAP } from '@assets';
 
-const Card = ({ titleText, chips: chipText, centerText }: CardExportProps) => {
+const Card = ({
+  titleText,
+  chips,
+  centerText,
+  icon,
+  description,
+  link,
+}: CardExportProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const { setCursorInsets } = useCursor();
   return (
-    <div
+    <Box
       ref={ref}
       onMouseEnter={() =>
         setCursorInsets({
@@ -20,26 +30,56 @@ const Card = ({ titleText, chips: chipText, centerText }: CardExportProps) => {
       }
       onMouseLeave={() => setCursorInsets(undefined)}
       className="border border-black/[0.2] dark:border-white/[0.2] flex flex-col items-start max-w-sm p-4 relative"
+      style={{
+        backdropFilter: 'blur(10px)',
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+      }}
     >
-      <CardBasic text={centerText} />
+      <CardBasic text={centerText} icon={icon && PROJECT_NAME_ICON_MAP[icon]} />
       <Icon className="absolute h-6 w-6 -top-3 -left-3 dark:text-white text-black" />
       <Icon className="absolute h-6 w-6 -bottom-3 -left-3 dark:text-white text-black" />
       <Icon className="absolute h-6 w-6 -top-3 -right-3 dark:text-white text-black" />
       <Icon className="absolute h-6 w-6 -bottom-3 -right-3 dark:text-white text-black" />
-      <h2 className="dark:text-white text-black mt-4 text-md font-light">
-        {titleText}
-      </h2>
-      <Wrap mt={2}>
-        {chipText?.map((chipText) => (
-          <p
-            key={chipText}
-            className="text-sm border font-light dark:border-white/[0.2] border-black/[0.2] rounded-full text-black dark:text-white px-1 "
-          >
-            {chipText}
-          </p>
-        ))}
+      <HStack
+        justifyContent={'space-between'}
+        width={'full'}
+        alignItems={'center'}
+        alignContent={'center'}
+        marginTop={2}
+        mb={2}
+      >
+        <Text
+          fontSize="md"
+          color="white"
+          fontWeight="bold"
+          textAlign="left"
+          lineHeight={5}
+          as="a"
+          href={link}
+        >
+          {titleText}
+        </Text>
+        <Button size="sm" py={0} px={1} as={Link} to={'/projects/' + icon}>
+          Know More
+        </Button>
+      </HStack>
+      <Text
+        maxW={'72'}
+        fontSize="sm"
+        color="white"
+        textAlign="justify"
+        lineHeight={5}
+        mb={2}
+      >
+        {description}
+      </Text>
+      <Wrap mt={2} maxW={'72'}>
+        {chips
+          ?.slice(0, 5)
+          ?.map((tag) => <Chip key={tag} type={tag} size="sm" />)}
+        <Chip type={Language.more} size="sm" />
       </Wrap>
-    </div>
+    </Box>
   );
 };
 

src/components/CardComponent/types.ts

@@ -1,6 +1,12 @@
+import { ProjectName } from '@assets';
+import { Language } from '../Chip';
+
 export type CardExportProps = {
   centerText?: string;
   titleText?: string;
+  icon?: ProjectName;
   subtitleText?: string;
-  chips?: string[];
+  chips?: Language[];
+  link?: string;
+  description?: string;
 };