Add: Talks section

Author: manuarora700

components/Talks.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+const Talks = ({ url, company, image, title, description }) => {
+  return (
+    <a
+      href={url}
+      className="flex flex-col md:flex-row space-x-0 md:space-x-4"
+      target="__blank"
+    >
+      <img src={image} className="rounded-md w-72 mb-4 md:mb-0" />
+      <div className="flex flex-col justify-between">
+        <div>
+          <h4 className="font-bold text-base md:text-xl tracking-tight text-black dark:text-white">
+            {title}
+          </h4>
+          <p className="text-gray-500 dark:text-gray-600 text-sm">
+            {description}
+          </p>
+        </div>
+        <p className="text-gray-500 dark:text-gray-600 text-sm">{company}</p>
+      </div>
+    </a>
+  );
+};
+
+export default Talks;

pages/index.js

@@ -13,6 +13,7 @@ import { useIsFontReady } from "@/lib/useIsFontReady";
 import { LinkPreview } from "@/components/LinkPreview";
 import { StaticLinkPreview } from "@/components/StaticLinkPreview";
 import { useTheme } from "next-themes";
+import Talks from "@/components/Talks";
 
 export default function Home() {
   const [colors, setColors] = useState([]);
@@ -229,6 +230,18 @@ export default function Home() {
           href="#"
           icon="more"
         />
+        <h3 className="font-bold text-2xl md:text-4xl tracking-tight mb-4 mt-8 text-black dark:text-white">
+          Tech Talks
+        </h3>
+        <Talks
+          title={`Crafting the perfect portfolio website for developers`}
+          description={` Talked about how to effectively utilise a portfolio website to
+          put yourself in the best position to win.`}
+          company={`roc8.careers`}
+          image={`/talks/roc8.png`}
+          url={`https://www.youtube.com/watch?v=yKVCl1jFkQQ`}
+        />
+
         <Timeline />
         <Contact />
       </div>