Added the avatar section

src/pages/projects/sistent/components/avatar/code.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { AvatarCode } from "../../../../../sections/Projects/Sistent/components/avatar/code.js";
+
+const AvatarCodePage = () => {
+  return <AvatarCode />;
+};
+
+export default AvatarCodePage;

src/pages/projects/sistent/components/avatar/guidance.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { AvatarGuidance } from "../../../../../sections/Projects/Sistent/components/avatar/guidance.js";
+
+const AvatarGuidancePage = () => {
+  return <AvatarGuidance />;
+};
+
+export default AvatarGuidancePage;

src/pages/projects/sistent/components/avatar/index.js

@@ -0,0 +1,8 @@
+import React from "react";
+import SistentAvatar from "../../../../../sections/Projects/Sistent/components/avatar/index";
+
+const SistentAvatarPage = () => {
+  return <SistentAvatar />;
+};
+
+export default SistentAvatarPage;

src/sections/Projects/Sistent/components/avatar/code-block.js

@@ -0,0 +1,19 @@
+import React, { useState } from "react";
+import Code from "../../../../../components/CodeBlock";
+export const CodeBlock = ({ name, code }) => {
+  const [showCode, setShowCode] = useState(false);
+  const onChange = () => {
+    setShowCode((prev) => !prev);
+  };
+  return (
+    <div className="show-code">
+      <input type="checkbox" name={name} id={name} onChange={onChange} />
+      <label htmlFor={name} className="label">
+        Show Code
+      </label>
+      {showCode && (
+        <Code codeString={code} language="javascript" />
+      )}
+    </div>
+  );
+};