feat: add emurgo testimonials

Author: neuodev

components/Experience.tsx

@@ -94,9 +94,6 @@ const Experience = () => {
                         dangerouslySetInnerHTML={{ __html: role }}
                       />
                     ))}
-                    <li className="text-left mb-3 leading-relaxed text-sm lg:text-base">
-                      Skills: {ex.skils.join(" · ")}
-                    </li>
                   </ul>
                 </TimelineContent>
               </TimelineItem>

components/Particles.tsx

@@ -48,17 +48,15 @@ const Particles: React.FC<{}> = () => {
               opacity: 0.5,
               width: 1,
             },
-            collisions: {
-              enable: true,
-            },
+            collisions: { enable: true },
             move: {
               direction: "none",
               enable: true,
               outModes: {
                 default: "bounce",
               },
               random: false,
-              speed: 3,
+              speed: 0.7,
               straight: false,
             },
             number: {
@@ -68,15 +66,9 @@ const Particles: React.FC<{}> = () => {
               },
               value: 30,
             },
-            opacity: {
-              value: 0.4,
-            },
-            shape: {
-              type: "circle",
-            },
-            size: {
-              value: { min: 1, max: 5 },
-            },
+            opacity: { value: 0.4 },
+            shape: { type: "circle" },
+            size: { value: { min: 1, max: 5 } },
           },
           detectRetina: true,
         }}

components/Testimonials.tsx

@@ -0,0 +1,62 @@
+import { Link, Typography } from "@mui/material";
+import theme from "../theme";
+import me from "../json/me.json";
+import Image from "next/image";
+
+const Testimonials: React.FC = () => {
+  return (
+    <div className="min-h-screen text-gray-300">
+      <div className="max-w-screen-lg mx-auto">
+        <div className="px-4 py-12 mx-auto bg-black rounded-xl shadow-2xl max-w-screen-lg">
+          <svg
+            className="h-12 mx-auto mb-3 text-gray-400 dark:text-gray-600"
+            viewBox="0 0 24 27"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M14.017 18L14.017 10.609C14.017 4.905 17.748 1.039 23 0L23.995 2.151C21.563 3.068 20 5.789 20 8H24V18H14.017ZM0 18V10.609C0 4.905 3.748 1.038 9 0L9.996 2.151C7.563 3.068 6 5.789 6 8H9.983L9.983 18L0 18Z"
+              fill="currentColor"
+            />
+          </svg>
+          <p className=" text-base md:text-2xl text-center font-medium text-gray-900 dark:text-white leading-relaxed px-4">
+            &quot;{me.testimonials.main.text}&quot;
+          </p>
+          <div className="flex items-center justify-center gap-3 mt-8">
+            <div className="rounded-full overflow-hidden inline-block">
+              <Image
+                width={60}
+                height={60}
+                src={me.testimonials.main.owner.image}
+                alt={me.testimonials.main.owner.name}
+              />
+            </div>
+            <div className="flex flex-col">
+              <Typography
+                href={me.testimonials.main.owner.linkedin}
+                target="_blank"
+                component={Link}
+                sx={{
+                  textAlign: "left",
+                  fontSize: "1rem",
+                  display: "block",
+                  textDecoration: "none",
+                  [theme.breakpoints.up("lg")]: {
+                    fontSize: "1.5rem",
+                  },
+                }}
+              >
+                {me.testimonials.main.owner.name}
+              </Typography>
+              <p className="text-sm font-light text-gray-400">
+                {me.testimonials.main.owner.role}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Testimonials;

json/me.json

@@ -46,6 +46,17 @@
       "urlAsText": "linkedin.com/in/neuodev/"
     }
   ],
+  "testimonials": {
+    "main": {
+      "text": "Your versatility in both front-end and back-end development has been a game-changer for EMURGO Fintech. With a proven track record of excellence in extending our platform's capabilities and now transitioning to enhance our libraries, your dual expertise is a rare and valuable virtue. Your adaptability and technical prowess ensure that we can confidently rely on your skills across the full spectrum of our software development needs.",
+      "owner": {
+        "name": "Vineeth Bhuvanagiri",
+        "role": "Managing Director at EMURGO Fintech",
+        "image": "images/vineeth.png",
+        "linkedin": "https://linkedin.com/in/vineeth-bhuvanagiri-59b35679"
+      }
+    }
+  },
   "experiences": [
     {
       "company": {
@@ -62,14 +73,6 @@
         "Adding new features, responding to issues, reviewing pull requests, refactoring the codebase, writing tests.",
         "Documented the framework from start to finish — <strong>docs.synpress.io</strong>",
         "Migrated the project to TypeScript, reduced package size, and added headless browser support."
-      ],
-      "skils": [
-        "JavaScript",
-        "TypeScript",
-        "Cypress",
-        "Playwright",
-        "Docker",
-        "CI/CD"
       ]
     },
     {
@@ -87,8 +90,7 @@
         "Improve the CI/CD speed (IPFS, Selective CI/CD Script Runner).",
         "Took the initiative to introduce end-to-end testing to our code base.",
         "Increase the backend syncing speed by 50x (from 50s to 1s)."
-      ],
-      "skils": ["TypeScript", "ReactJS", "Cypress", "IndexedDB"]
+      ]
     },
     {
       "company": {
@@ -107,15 +109,6 @@
         "Wrote end-to-end and unit tests to ensure app integrity.",
         "Review PRs and make sure they follow the code standards and best practices.",
         "Onboard new developers and help them fit into the team."
-      ],
-      "skils": [
-        "JavaScript",
-        "TypeScript",
-        "React",
-        "NodeJS",
-        "PostgreSQL",
-        "WebAssembly",
-        "Rust"
       ]
     },
     {
@@ -133,14 +126,6 @@
         "Integrated new 12 blockchains that allowed users to easily move tokens between them.",
         "Reduced average request time for most important endpoints from 12s to 2s (6x faster).",
         "Onboarding new developers and helping them fit into the team."
-      ],
-      "skils": [
-        "JavaScript",
-        "TypeScript",
-        "ReactJS",
-        "NodeJS",
-        "MongoDB",
-        "Cloud (AWS)"
       ]
     }
   ],

pages/index.tsx

@@ -11,6 +11,7 @@ import Head from "next/head";
 import me from "../json/me.json";
 import Experience from "../components/Experience";
 import Particles from "../components/Particles";
+import Testimonials from "../components/Testimonials";
 
 const Main: NextPage = () => {
   const header = `${me.name} - ${me.jobTitle}`;
@@ -34,6 +35,7 @@ const Main: NextPage = () => {
       <Particles />
       <div className="bg-dark w-full">
         <AboutMe />
+        <Testimonials />
         <Experience />
         <Projects />
         <Skills />