Skip to content

Commit bb76bed

Browse files
lassiecoderlassiecoder
authored
Merge pull request #13 from lassiecoder/staging
misc: added newsletter CTA, tooltips in about
2 parents bb520d5 + dd2980e commit bb76bed

File tree

4 files changed

+155
-56
lines changed

4 files changed

+155
-56
lines changed

‎src/app/pages/about.tsx‎

Lines changed: 56 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
"use client";
22

3+
import Tooltip from "@/components/Tooltip";
4+
import Link from "next/link";
35
import React from "react";
6+
import { HiMiniBellAlert } from "react-icons/hi2";
47

58
const About = () => {
69
return (
@@ -25,13 +28,45 @@ const About = () => {
2528
My technical expertise includes –{" "}
2629
<span className="text-white">JavaScript</span>,{" "}
2730
<span className="text-white">TypeScript</span>, and{" "}
28-
<span className="text-white">React ecosystems</span>, along with{" "}
29-
<span className="text-white">backend technologies</span>,{" "}
30-
<span className="text-white">cloud deployment</span>,{" "}
31-
<span className="text-white">state management</span>,{" "}
32-
<span className="text-white">real-time communication</span>, and{" "}
33-
<span className="text-white">UI development</span> and{" "}
34-
<span className="text-white">testing</span>.
31+
{/* <span className="text-white">React ecosystems</span> */}
32+
<Tooltip
33+
text="React ecosystems"
34+
tooltipText="React Native, ReactJS, NextJS, Storybook, Expo"
35+
className="text-white"
36+
/>
37+
, along with{" "}
38+
{/* <span className="text-white">backend technologies</span> */}
39+
<Tooltip
40+
text="backend technologies"
41+
tooltipText="NodeJS, ExpressJS, MongoDB Atlas"
42+
className="text-white"
43+
/>
44+
,{/* <span className="text-white">cloud deployment</span> */}{" "}
45+
<Tooltip
46+
text="cloud deployment"
47+
tooltipText="AWS, Vercel, Netlify, Heroku, Fastlane"
48+
className="text-white"
49+
/>
50+
,{/* <span className="text-white">state management</span> */}{" "}
51+
<Tooltip
52+
text="state management"
53+
tooltipText="Redux, Rematch, React Query"
54+
className="text-white"
55+
/>
56+
,{/* <span className="text-white">real-time communication</span> */}{" "}
57+
<Tooltip
58+
text="real-time communication"
59+
tooltipText="Websocket"
60+
className="text-white"
61+
/>
62+
, and {/* <span className="text-white">UI development</span> */}
63+
<Tooltip
64+
text="UI development"
65+
tooltipText="Figma, Adobe XD"
66+
className="text-white"
67+
/>{" "}
68+
and {/* <span className="text-white">testing</span> */}
69+
<Tooltip text="testing" tooltipText="Jest" className="text-white" />.
3570
</p>
3671
<p className="mt-6">
3772
Currently, I&apos;m contributing my skills to{" "}
@@ -45,6 +80,20 @@ const About = () => {
4580
innovation and excellence defines every project I undertake.
4681
</p>
4782
</h3>
83+
<div className="flex justify-center items-center">
84+
<Link
85+
href={"https://techscoop.hashnode.dev/newsletter"}
86+
target="_blank"
87+
>
88+
<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">
89+
<span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
90+
<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">
91+
&nbsp; Subscribe to my newsletter &nbsp;
92+
<HiMiniBellAlert className="mr-2 text-xl" />
93+
</span>
94+
</button>
95+
</Link>
96+
</div>
4897
</div>
4998
);
5099
};

‎src/app/pages/contact.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const ContactForm = () => {
3333
contact me directly at
3434
<a
3535
className=" bg-gradient-to-r from-purple-600 to-gray-400 text-transparent bg-clip-text ml-2"
36-
href="mailto:sharmapriyanka84510@gmail.com"
36+
href="mailto:lassiecoder@gmail.com"
3737
target="_blank"
3838
>
3939
[email protected]

‎src/components/Tooltip.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
"use client";
2+
3+
import React from "react";
4+
5+
interface TooltipProps {
6+
text: string; // The text to display
7+
tooltipText: string; // The content of the tooltip
8+
className?: string; // Optional className for styling the text
9+
}
10+
11+
const Tooltip: React.FC<TooltipProps> = ({ text, tooltipText, className }) => {
12+
return (
13+
<span className={`relative group ${className || ""}`}>
14+
<span className="underline">{text}</span>
15+
<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">
16+
{tooltipText}
17+
</span>
18+
</span>
19+
);
20+
};
21+
22+
export default Tooltip;

‎src/components/footer.tsx‎

Lines changed: 76 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { FaMedium, FaSquareXTwitter } from "react-icons/fa6";
2+
import { IoNewspaperOutline } from "react-icons/io5";
3+
24
import {
35
FaGithub,
46
FaLinkedinIn,
5-
FaTwitter,
6-
FaDev,
77
FaInstagram,
88
FaMailBulk
99
} from "react-icons/fa";
@@ -12,52 +12,80 @@ import Link from "next/link";
1212
export default function Footer() {
1313
return (
1414
<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">
15-
<Link
16-
href="https://github.com/lassiecoder"
17-
target="_blank"
18-
rel="noopener noreferrer"
19-
>
20-
{/* <FaGithub size="1.5em" /> */}
21-
<FaGithub className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
22-
</Link>
23-
<Link
24-
href="https://www.linkedin.com/in/priyanka-s-b79401142/"
25-
target="_blank"
26-
rel="noopener noreferrer"
27-
>
28-
<FaLinkedinIn className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
29-
</Link>
30-
<Link
31-
href="https://twitter.com/lassiecoder"
32-
target="_blank"
33-
rel="noopener noreferrer"
34-
>
35-
<FaSquareXTwitter className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
36-
</Link>
37-
<Link
38-
href="https://medium.com/@sharmapriyanka84510"
39-
target="_blank"
40-
rel="noopener noreferrer"
41-
>
42-
<FaMedium className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
43-
</Link>
44-
<Link
45-
href="https://dev.to/lassiecoder"
46-
target="_blank"
47-
rel="noopener noreferrer"
48-
>
49-
<FaDev className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
50-
</Link>
51-
<Link
52-
href="https://instagram.com/lassiecoder"
53-
target="_blank"
54-
rel="noopener noreferrer"
55-
>
56-
<FaInstagram className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
57-
</Link>
58-
<Link href="mailto:[email protected]">
59-
<FaMailBulk className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
60-
</Link>
15+
<div className="relative group">
16+
<Link
17+
href="https://github.com/lassiecoder"
18+
target="_blank"
19+
rel="noopener noreferrer"
20+
>
21+
{/* <FaGithub size="1.5em" /> */}
22+
<FaGithub className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
23+
<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">
24+
GitHub
25+
</span>
26+
</Link>
27+
</div>
28+
29+
<div className="relative group">
30+
<Link
31+
href="https://www.linkedin.com/in/priyanka-s-b79401142/"
32+
target="_blank"
33+
rel="noopener noreferrer"
34+
>
35+
<FaLinkedinIn className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
36+
<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">
37+
LinkedIn
38+
</span>
39+
</Link>
40+
</div>
41+
42+
<div className="relative group">
43+
<Link
44+
href="https://techscoop.hashnode.dev"
45+
target="_blank"
46+
rel="noopener noreferrer"
47+
>
48+
<IoNewspaperOutline className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
49+
<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">
50+
Newsletter
51+
</span>
52+
</Link>
53+
</div>
54+
55+
<div className="relative group">
56+
<Link
57+
href="https://twitter.com/lassiecoder"
58+
target="_blank"
59+
rel="noopener noreferrer"
60+
>
61+
<FaSquareXTwitter className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
62+
<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">
63+
Twitter
64+
</span>
65+
</Link>
66+
</div>
67+
68+
<div className="relative group">
69+
<Link
70+
href="https://instagram.com/lassiecoder"
71+
target="_blank"
72+
rel="noopener noreferrer"
73+
>
74+
<FaInstagram className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
75+
<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">
76+
Instagram
77+
</span>
78+
</Link>
79+
</div>
80+
81+
<div className="relative group">
82+
<Link href="mailto:[email protected]">
83+
<FaMailBulk className="text-white hover:text-gray-300 transition-colors duration-200 sm:text-xl lg:text-2xl" />
84+
<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">
85+
Mail
86+
</span>
87+
</Link>
88+
</div>
6189
</div>
6290
);
6391
}

0 commit comments

Comments
 (0)