Rainnny/rainnny.club
Rainnny/rainnny.club
1
0
Fork 0
Code Issues 1 Pull Requests 4 Actions Activity

Compare commits

base: Rainnny:0e0a4f5c076b2423ee240954f50fc7e936f4a9ff
Branches Tags
Rainnny:master Rainnny:renovate/nextjs-monorepo Rainnny:renovate/lucide-monorepo Rainnny:renovate/major-react-monorepo Rainnny:renovate/next-themes-0.x
...
compare: Rainnny:606a58be1b4d7a42fc0cda9833af652651fe1f31
Branches Tags
Rainnny:renovate/nextjs-monorepo Rainnny:renovate/lucide-monorepo Rainnny:renovate/major-react-monorepo Rainnny:renovate/next-themes-0.x Rainnny:master

2 Commits
0e0a4f5c07 ... 606a58be1b

Author SHA1 Message Date
Rainnny7
606a58be1b Add tooltip to projects in the my work section
All checks were successful
Deploy Site / docker (ubuntu-latest, 2.44.0) (push) Successful in 1m15s
Details
2024-09-25 18:02:14 -04:00
Rainnny7
8347793ec9 fix the Discord status bio being too long 2024-09-25 17:58:32 -04:00
2 changed files with 58 additions and 48 deletions
Show Stats Expand all files Collapse all files

2
src/components/landing/discord-status.tsx
View File

@ -104,7 +104,7 @@ const BannerAvatar = ({
const Bio = ({ bio }: { bio: string }): ReactElement => (
<SimpleTooltip content={bio}>
<div className="p-2 bg-zinc-100 dark:bg-zinc-950/65 text-sm rounded-xl">
{truncateText(bio, 15)}
{truncateText(bio, 10)}
</div>
</SimpleTooltip>
);

104
src/components/landing/nav-content/my-work.tsx
View File

@ -10,6 +10,7 @@ import Project from "@/types/project";
import { ScrollArea } from "@/components/ui/scroll-area";
import Image from "next/image";
import { truncateText } from "@/lib/utils";
import SimpleTooltip from "@/components/ui/simple-tooltip";
const projects: Project[] = [
{
@ -76,55 +77,64 @@ const MyWork = (): ReactElement => {
return (
<ScrollArea className="h-[17.75rem]">
<div className="max-w-[55rem] flex flex-wrap gap-3 justify-center">
{projects.map((project, index) => (
<Link
{projects.map((project: Project, index: number) => (
<SimpleTooltip
key={index}
href={project.link || "#"}
target="_blank"
>
<MagicCard
className="w-[15rem] lg:w-[25rem] p-3.5 opacity-95"
gradientColor={
theme === "dark" ? "#262626" : "#D9D9D9"
}
>
{/* Icon, Name & Years Active */}
<div className="flex flex-col lg:flex-row gap-0 md:gap-3 justify-center lg:justify-start lg:items-center">
<div className="flex gap-3">
<Image
className="rounded-full"
src={project.icon}
alt={`The ${project.name} Project Icon`}
width={24}
height={24}
/>
<h1 className="font-semibold select-none pointer-events-none">
{project.name}
</h1>
</div>
<div className="flex gap-1 text-sm">
<span className="text-green-400/80">
{project.startDate.format("MMM YYYY")}
</span>
🞄
{project.endDate ? (
<span className="text-red-400/80">
{project.endDate.format("MMM YYYY")}
</span>
) : (
<span className="text-green-400/80">
Present
</span>
)}
</div>
</div>
{/* Description */}
<p className="mt-2.5 text-black dark:!text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/80 to-white">
{truncateText(project.description, 136)}
content={
<p className="max-w-[23rem] text-center">
{project.description}
</p>
</MagicCard>
</Link>
}
>
<Link href={project.link || "#"} target="_blank">
<MagicCard
className="w-[15rem] lg:w-[25rem] p-3.5 opacity-95"
gradientColor={
theme === "dark" ? "#262626" : "#D9D9D9"
}
>
{/* Icon, Name & Years Active */}
<div className="flex flex-col lg:flex-row gap-0 md:gap-3 justify-center lg:justify-start lg:items-center">
<div className="flex gap-3">
<Image
className="rounded-full"
src={project.icon}
alt={`The ${project.name} Project Icon`}
width={24}
height={24}
/>
<h1 className="font-semibold select-none pointer-events-none">
{project.name}
</h1>
</div>
<div className="flex gap-1 text-sm">
<span className="text-green-400/80">
{project.startDate.format(
"MMM YYYY"
)}
</span>
🞄
{project.endDate ? (
<span className="text-red-400/80">
{project.endDate.format(
"MMM YYYY"
)}
</span>
) : (
<span className="text-green-400/80">
Present
</span>
)}
</div>
</div>
{/* Description */}
<p className="mt-2.5 text-black dark:!text-transparent bg-clip-text bg-gradient-to-br from-zinc-300/80 to-white">
{truncateText(project.description, 136)}
</p>
</MagicCard>
</Link>
</SimpleTooltip>
))}
</div>
</ScrollArea>