chore: move tech stack logos to public and update file paths

README.md

@@ -58,7 +58,7 @@ To run the project, you can follow these steps:
    1. You can use
       1. https://realfavicongenerator.net/
       2. https://www.pwabuilder.com/imageGenerator
-3. Add/Remove icons in `src/Assets/icons` directory to suite your tech stack. Update their names and path in `src/Common/techIcons.ts` file.
+3. Add/Remove logos in `public/logos` directory to suite your tech stack. Update their names in `src/Common/techLogos.ts` file.
    1. You can use https://worldvectorlogo.com/ to get SVG icons.
 4. Add/Remove **Themes** in `src/Common/styles.config.ts` file.
    1. Default theme gets applied in `src/GlobalStyle.tsx` file.

src/Common/techlogos.ts

@@ -0,0 +1,44 @@
+export const techLogoNames = [
+  "react",
+  "html",
+  "pwa",
+  "css",
+  "bootstrap",
+  "express",
+  "git",
+  "github",
+  "materialui",
+  "mongodb",
+  "socketio",
+  "typescript",
+  "nodejs",
+  "javascript",
+  "redux",
+  "sass",
+  "d3",
+  "vuejs",
+  "styledcomponents",
+  "postman",
+  "cypress",
+  "jest",
+  "msw",
+  "nextjs",
+  "playwright",
+  "python",
+  "storybook",
+  "vitejs",
+  "amcharts",
+  "semanticui",
+] as const;
+
+type TTechLogoName = (typeof techLogoNames)[number];
+
+export type TTechLogo = Record<TTechLogoName, { label: string; src: string }>;
+
+export const techLogos = techLogoNames.reduce((acc, logoName) => {
+  acc[logoName] = {
+    label: logoName[0].toUpperCase() + logoName.slice(1),
+    src: `./logos/${logoName}.svg`,
+  };
+  return acc;
+}, {} as TTechLogo);

src/Components/Particles/index.tsx

@@ -22,18 +22,16 @@ export const ParticlesContainer = () => {
   const particles = useMemo(() => {
     if (init) {
       return (
-        <div style={{ width: 0, height: 0 }}>
-          <Particles
-            id="tsparticles"
-            options={particlesOptions}
-          />
-        </div>
+        <Particles
+          id="tsparticles"
+          options={particlesOptions}
+        />
       );
     }
     return null;
   }, [init]);
 
-  return particles;
+  return <div style={{ width: 0, height: 0 }}>{particles}</div>;
 };
 
 ParticlesContainer.displayName = "ParticlesContainer";

src/Components/Particles/particlesOptions.ts

@@ -1,4 +1,4 @@
-import { techIcons } from "@/Common/techIcons";
+import { techLogos } from "@/Common/techlogos";
 
 import type { ISourceOptions } from "@tsparticles/engine";
 
@@ -13,7 +13,7 @@ const particlesOptions: ISourceOptions = {
     // no effect
     zIndex: -1,
   },
-  fpsLimit: 120,
+  fpsLimit: 60,
   particles: {
     number: {
       density: {
@@ -44,6 +44,7 @@ const particlesOptions: ISourceOptions = {
       value: 18,
     },
     shape: {
+      // READ-MORE: https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_Particles_Shape_IShape.IShape.html
       options: {
         image: [],
       },
@@ -55,16 +56,11 @@ const particlesOptions: ISourceOptions = {
   detectRetina: true,
 };
 
-const particleOptionsImage = Object.keys(techIcons).map((iconName) => ({
-  name: iconName,
-}));
-const particleOptionsPreload = Object.keys(techIcons).map((iconName) => ({
-  src: techIcons[iconName as keyof typeof techIcons].logo,
-  name: iconName,
+const particleOptionsImage = Object.values(techLogos).map(({ src }) => ({
+  src,
 }));
 
 // @ts-expect-error-next-line
 particlesOptions.particles.shape.options.image = particleOptionsImage;
-particlesOptions.preload = particleOptionsPreload;
 
 export { particlesOptions };

src/Pages/About/AboutData.tsx

@@ -1,4 +1,4 @@
-import { techIcons } from "@/Common/techIcons";
+import { techLogos } from "@/Common/techlogos";
 import profileImg from "/profilePic.webp";
 
 export const data = {
@@ -8,6 +8,6 @@ export const data = {
 	\n My experience as a self taught proficient web developer allows me to come up with smart solutions to technical challenges.
 	\n I’m a coding enthusiast and passionate about learning and implementing web technologies.
 	\n I enjoy travelling and playing sports, I also write articles about web on **[Coders League](https://codersleague.onrender.com/)**.`,
-  stack: [...Object.values(techIcons)],
+  stack: [...Object.values(techLogos)],
   githubUsername: "singhAmandeep007",
 };

src/Pages/About/index.tsx

@@ -45,7 +45,7 @@ export const AboutPage = () => {
                   return (
                     <li key={tech.label}>
                       <img
-                        src={tech.logo}
+                        src={tech.src}
                         alt={"stack " + tech.label}
                         title={tech.label}
                       />

src/Pages/Home/index.tsx

@@ -5,8 +5,6 @@ import { ExternalLinkWithIcon, SectionContainer } from "@/Components/CommonEleme
 import { data } from "./HomeData";
 import { Handwave, HomeSectionResume, HomeSectionTypography, HomeSectionWrapper } from "./HomeElements";
 
-import handwavesign from "@/Assets/waving-hand-sign.svg";
-
 export const HomePage = () => {
   return (
     <SectionContainer>
@@ -17,7 +15,7 @@ export const HomePage = () => {
             <Handwave
               role="img"
               aria-labelledby="handwave"
-              src={handwavesign}
+              src={"./wavinghandsign.svg"}
               alt="handwave"
             ></Handwave>
           </h1>