misc: added newsletter CTA, tooltips in about

src/app/pages/about.tsx

@@ -1,6 +1,9 @@
 "use client";
 
+import Tooltip from "@/components/Tooltip";
+import Link from "next/link";
 import React from "react";
+import { HiMiniBellAlert } from "react-icons/hi2";
 
 const About = () => {
   return (
@@ -25,13 +28,45 @@ const About = () => {
           My technical expertise includes –{" "}
           <span className="text-white">JavaScript</span>,{" "}
           <span className="text-white">TypeScript</span>, and{" "}
-          <span className="text-white">React ecosystems</span>, along with{" "}
-          <span className="text-white">backend technologies</span>,{" "}
-          <span className="text-white">cloud deployment</span>,{" "}
-          <span className="text-white">state management</span>,{" "}
-          <span className="text-white">real-time communication</span>, and{" "}
-          <span className="text-white">UI development</span> and{" "}
-          <span className="text-white">testing</span>.
+          {/* <span className="text-white">React ecosystems</span> */}
+          <Tooltip
+            text="React ecosystems"
+            tooltipText="React Native, ReactJS, NextJS, Storybook, Expo"
+            className="text-white"
+          />
+          , along with{" "}
+          {/* <span className="text-white">backend technologies</span> */}
+          <Tooltip
+            text="backend technologies"
+            tooltipText="NodeJS, ExpressJS, MongoDB Atlas"
+            className="text-white"
+          />
+          ,{/* <span className="text-white">cloud deployment</span> */}{" "}
+          <Tooltip
+            text="cloud deployment"
+            tooltipText="AWS, Vercel, Netlify, Heroku, Fastlane"
+            className="text-white"
+          />
+          ,{/* <span className="text-white">state management</span> */}{" "}
+          <Tooltip
+            text="state management"
+            tooltipText="Redux, Rematch, React Query"
+            className="text-white"
+          />
+          ,{/* <span className="text-white">real-time communication</span> */}{" "}
+          <Tooltip
+            text="real-time communication"
+            tooltipText="Websocket"
+            className="text-white"
+          />
+          , and {/* <span className="text-white">UI development</span> */}
+          <Tooltip
+            text="UI development"
+            tooltipText="Figma, Adobe XD"
+            className="text-white"
+          />{" "}
+          and {/* <span className="text-white">testing</span> */}
+          <Tooltip text="testing" tooltipText="Jest" className="text-white" />.
         </p>
         <p className="mt-6">
           Currently, I&apos;m contributing my skills to{" "}
@@ -45,6 +80,20 @@ const About = () => {
           innovation and excellence defines every project I undertake.
         </p>
       </h3>
+      <div className="flex justify-center items-center">
+        <Link
+          href={"https://techscoop.hashnode.dev/newsletter"}
+          target="_blank"
+        >
+          <button className="relative inline-flex h-10 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
+            <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
+            <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-3 py-1 text-sm font-medium text-white backdrop-blur-3xl">
+              &nbsp; Subscribe to my newsletter &nbsp;
+              <HiMiniBellAlert className="mr-2 text-xl" />
+            </span>
+          </button>
+        </Link>
+      </div>
     </div>
   );
 };

src/app/pages/contact.tsx

@@ -33,7 +33,7 @@ const ContactForm = () => {
           contact me directly at
           <a
             className=" bg-gradient-to-r from-purple-600 to-gray-400 text-transparent bg-clip-text ml-2"
-            href="mailto:sharmapriyanka84510@gmail.com"
+            href="mailto:lassiecoder@gmail.com"
             target="_blank"
           >
             lassiecoder@gmail.com

src/components/Tooltip.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import React from "react";
+
+interface TooltipProps {
+  text: string; // The text to display
+  tooltipText: string; // The content of the tooltip
+  className?: string; // Optional className for styling the text
+}
+
+const Tooltip: React.FC<TooltipProps> = ({ text, tooltipText, className }) => {
+  return (
+    <span className={`relative group ${className || ""}`}>
+      <span className="underline">{text}</span>
+      <span className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 bg-purple-600 text-white text-sm font-light rounded px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap z-10">
+        {tooltipText}
+      </span>
+    </span>
+  );
+};
+
+export default Tooltip;

src/components/footer.tsx

@@ -1,9 +1,9 @@
 import { FaMedium, FaSquareXTwitter } from "react-icons/fa6";
+import { IoNewspaperOutline } from "react-icons/io5";
+
 import {
   FaGithub,
   FaLinkedinIn,
-  FaTwitter,
-  FaDev,
   FaInstagram,
   FaMailBulk
 } from "react-icons/fa";
@@ -12,52 +12,80 @@ import Link from "next/link";
 export default function Footer() {
   return (
     <div className="flex bg-black xl:justify-end lg:justify-end md:justify-end xl:pr-8 lg:pr-8 md:pr-8 space-x-8 pt-6 pr-0 justify-center">
-      <Link
-        href="https://github.com/lassiecoder"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {/* <FaGithub size="1.5em" /> */}
-        <FaGithub className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
-      </Link>
-      <Link
-        href="https://www.linkedin.com/in/priyanka-s-b79401142/"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <FaLinkedinIn className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
-      </Link>
-      <Link
-        href="https://twitter.com/lassiecoder"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <FaSquareXTwitter className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
-      </Link>
-      <Link
-        href="https://medium.com/@sharmapriyanka84510"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <FaMedium className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
-      </Link>
-      <Link
-        href="https://dev.to/lassiecoder"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <FaDev className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
-      </Link>
-      <Link
-        href="https://instagram.com/lassiecoder"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <FaInstagram className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
-      </Link>
-      <Link href="mailto:sharmapriyanka84510@gmail.com">
-        <FaMailBulk className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
-      </Link>
+      <div className="relative group">
+        <Link
+          href="https://github.com/lassiecoder"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {/* <FaGithub size="1.5em" /> */}
+          <FaGithub className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
+          <span className="absolute left-1/2 transform -translate-x-1/2 mt-2 bg-black text-white text-sm rounded px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+            GitHub
+          </span>
+        </Link>
+      </div>
+
+      <div className="relative group">
+        <Link
+          href="https://www.linkedin.com/in/priyanka-s-b79401142/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <FaLinkedinIn className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
+          <span className="absolute left-1/2 transform -translate-x-1/2 mt-2 bg-black text-white text-sm rounded px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+            LinkedIn
+          </span>
+        </Link>
+      </div>
+
+      <div className="relative group">
+        <Link
+          href="https://techscoop.hashnode.dev"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <IoNewspaperOutline className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
+          <span className="absolute left-1/2 transform -translate-x-1/2 mt-2 bg-black text-white text-sm rounded px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+            Newsletter
+          </span>
+        </Link>
+      </div>
+
+      <div className="relative group">
+        <Link
+          href="https://twitter.com/lassiecoder"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <FaSquareXTwitter className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
+          <span className="absolute left-1/2 transform -translate-x-1/2 mt-2 bg-black text-white text-sm rounded px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+            Twitter
+          </span>
+        </Link>
+      </div>
+
+      <div className="relative group">
+        <Link
+          href="https://instagram.com/lassiecoder"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <FaInstagram className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
+          <span className="absolute left-1/2 transform -translate-x-1/2 mt-2 bg-black text-white text-sm rounded px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+            Instagram
+          </span>
+        </Link>
+      </div>
+
+      <div className="relative group">
+        <Link href="mailto:lassiecoder@gmail.com">
+          <FaMailBulk className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
+          <span className="absolute left-1/2 transform -translate-x-1/2 mt-2 bg-black text-white text-sm rounded px-2 py-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+            Mail
+          </span>
+        </Link>
+      </div>
     </div>
   );
 }