Skip to content

Commit

Permalink
Shows all my github followers on about me page
Browse files Browse the repository at this point in the history
  • Loading branch information
Akash Singh committed Mar 9, 2024
1 parent c821d99 commit de2cfb9
Show file tree
Hide file tree
Showing 2 changed files with 216 additions and 49 deletions.
1 change: 0 additions & 1 deletion .github/workflows/deploy.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ jobs:

- name: Set Variables Data
env:
CI: true
REACT_APP_FOLLOWERS_ACCESS_KEY: ${{ secrets.REACT_APP_FOLLOWERS_ACCESS_KEY }}
run: |
echo ${{ secrets.REACT_APP_FOLLOWERS_ACCESS_KEY }}
Expand Down
264 changes: 216 additions & 48 deletions documentation/src/prepverse-theme/about-me-profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,56 @@ import { useInView } from "framer-motion";
import { CommonThemedImage } from "./common-themed-image";
import { GithubIcon } from "@site/src/prepverse-theme/icons/github";
import { TwitterIcon, LinkedInIcon, InstagramIcon } from "@site/src/prepverse-theme/icons/popover";
import { LandingSectionCtaButton } from "./landing-section-cta-button";
import {GitHubFollowers} from "./common-header/github-followers";
import {GithubFollowersAvatar} from "./common-header/github-followers-avatar";
import { LandingSectionCtaButton } from "./landing-section-cta-button";
import { GitHubFollowers } from "./common-header/github-followers";
import { GithubFollowersAvatar } from "./common-header/github-followers-avatar";

const GithubFollowers = ({ className }: { className?: string }) => {
return (
<div className="text-xs md:text-base">
<h2
className={clsx(
"text-base landing-sm:text-2xl",
"dark:text-gray-300 text-gray-900",
"font-semibold",
"flex items-center",
)}
>
<GitHubFollowers />
</h2>
<div
className={clsx(
"my-4",
"border-b border-gray-200 dark:border-gray-700",
)}
/>
<GithubFollowersAvatar />
</div>
);
};

const LeetCodeBadges = ({ className }: { className?: string }) => {
return (
<GitHubFollowers />
);
};

const apps = [
{
name: "GitHub Followers",
showcase: GithubFollowers,
},
];

export const AboutMeProfile = ({ className }: { className?: string }) => {
const [activeApp, setActiveApp] = React.useState(apps[0]);

const ShowcaseComponent = React.useMemo(() => {
return activeApp.showcase;
}, [activeApp.name]);

return (
<div
<div
className={clsx(
"flex flex-col justify-center landing-md:flex-row gap-2 landing-lg:max-w-[1200px] w-full mx-auto"
)}
Expand All @@ -27,46 +70,29 @@ export const AboutMeProfile = ({ className }: { className?: string }) => {
"bg-no-repeat",
"rounded-2xl landing-sm:rounded-3xl",
"border dark:border-gray-700 border-gray-200",
"not-prose",
)}
>

<div className={clsx(
"no-prose",
"flex flex-col gap-4",
// "mt-6 lg:mt-10",
)}>
<div
className={clsx(
"landing-lg:min-w-[400px]",
"flex flex-ṛow gap-5",
// "p-4 landing-sm:p-10",
"dark:bg-enterprise-data-source-dark dark:bg-gray-900 bg-gray-0",
"bg-blend-overlay",
"bg-no-repeat",
"rounded-2xl landing-sm:rounded-3xl",
// "not-prose",

// "flex h-max flex-row justify-start gap-3",
"dark:bg-gray-900",
// "border border-gray-200 dark:border-gray-700",
"rounded-xl p-4",
// "no-underline hover:no-underline",
)}
>
<a
target="_blank"
href="https://github.com/AkashSingh3031"
rel="noreferrer"
>
{/* <img
className={clsx(
"h-[100px] w-[100px]",
"rounded-2xl landing-sm:rounded-3xl",
)}
src="https://github.com/AkashSingh3031.png"
alt="Akash Singh"
/> */}
<CommonThemedImage
className={clsx(
"h-[100px] w-[100px]",
Expand Down Expand Up @@ -100,8 +126,6 @@ export const AboutMeProfile = ({ className }: { className?: string }) => {
<div
className={clsx(
"flex flex-col",
// "p-4 landing-sm:p-10",
// "mt-6 lg:mt-10",
)}
>
<p
Expand All @@ -114,9 +138,6 @@ export const AboutMeProfile = ({ className }: { className?: string }) => {
</p>
<LandingSectionCtaButton to="https://github.com/AkashSingh3031"
className={clsx(
// "flex flex-col",
// "p-4 landing-sm:p-10",
// "mt-6 lg:mt-10",
"mt-4",
"mb-4",
)}
Expand Down Expand Up @@ -222,8 +243,8 @@ export const AboutMeProfile = ({ className }: { className?: string }) => {
</div>
</div>
</div>
<div

<div
className={clsx(
"flex flex-col landing-md:flex-col gap-1 landing-lg:max-w-[800px] w-full mx-auto"
)}
Expand All @@ -246,56 +267,203 @@ export const AboutMeProfile = ({ className }: { className?: string }) => {
className={clsx(
"text-base landing-sm:text-2xl",
"dark:text-gray-300 text-gray-900",
"rounded-full",
"border dark:border-gray-700 border-gray-200",
"font-semibold",
"flex items-center",
"p-2"
)}
>
LeetCode Badges
<GitHubFollowers />
</h2>
<div
className={clsx(
"my-4",
"border-b border-gray-200 dark:border-gray-700",
)}
/>
<GithubFollowersAvatar />
</div>
</div> */}


<div
className={clsx(
"landing-lg:min-w-[735px]",
"flex flex-wrap",
"p-4 landing-sm:p-8",
"mt-6 lg:mt-10",
"dark:bg-enterprise-data-source-dark dark:bg-gray-900 bg-gray-0",
"bg-blend-overlay",
"bg-no-repeat",
"rounded-2xl landing-sm:rounded-3xl",
"border dark:border-gray-700 border-gray-200",
"bg-gray-50 dark:bg-gray-800",
"w-full",
"rounded-2xl landing-sm:rounded-[32px]",
"gap-2 landing-sm:gap-4",
"p-2 landing-sm:p-4",
"relative",
"group/showcase",
"landing-lg:overflow-hidden",
)}
>
<div className="text-xs md:text-base">
<h2
<div className={clsx("flex", "w-full", "gap-2")}>
<div
className={clsx(
"text-base landing-sm:text-2xl",
"dark:text-gray-300 text-gray-900",
"font-semibold",
"flex items-center",
"rounded-3xl",
"overflow-y-auto",
"flex",
"w-full",
"gap-2",
"scrollbar-hidden",
"snap snap-x snap-mandatory",
"snap-mandatory",
)}
>
<GitHubFollowers />
</h2>
<div
className={clsx(
"rounded-3xl",
"flex",
"w-auto",
"landing-lg:w-full",
"items-center",
"justify-start",
"gap-2",
"relative",
"bg-gray-0 dark:bg-gray-900",
)}
>
<div
className={clsx(
"hidden landing-sm:block",
"flex-1",
"rounded-3xl",
"h-full",
"bg-gray-200 dark:bg-gray-700",
"absolute",
"left-0",
"top-0",
"transition-transform",
"duration-150",
"ease-out",
)}
style={{
width: `calc((100% - (${apps.length-1} * 8px)) / ${apps.length})`,
minWidth: "244px",
transform: `translateX(calc((100% + 8px) * ${apps.findIndex(
(f) => f.name === activeApp.name,
)})) translateZ(0px)`,
}}
/>
{apps.map((app, index) => (
<button
key={app.name}
type="button"
onClick={(event) => {
setActiveApp(app);
// if index i >= 2
// then scroll to the right
event.currentTarget.parentElement?.parentElement?.scrollTo({
left: index >= 2 ? index * (244 + 8) : 0,
behavior: "smooth",
});
}}
className={clsx(
"z-[1]",
"snap-start",
"appearance-none",
"focus:outline-none",
"border-none",
"flex-1",
"break-keep",
"whitespace-nowrap",
"landing-sm:min-w-[244px]",
"py-2",
"landing-sm:py-3.5",
"px-4",
"rounded-3xl",
"transition-colors",
"ease-in-out",
"duration-150",
activeApp.name !== app.name && "bg-transparent",
activeApp.name === app.name && "bg-gray-200 dark:bg-gray-700",
activeApp.name !== app.name &&
"text-gray-600 dark:text-gray-400",
activeApp.name === app.name &&
"text-gray-900 dark:text-gray-0",
"landing-sm:bg-transparent",
"dark:landing-sm:bg-transparent",
"transition-colors",
"duration-150",
"ease-out",
"text-xs",
"landing-sm:text-sm",
)}
>
{app.name}
</button>
))}
</div>
</div>
</div>
<div
className={clsx(
"rounded-lg",
"landing-md:rounded-xl",
"landing-lg:rounded-2xl",
"overflow-hidden",
"shadow-sm shadow-gray-200 dark:shadow-none",
"relative",
"group/showcase-inner",
)}
>
<div
className={clsx(
"my-4",
"border-b border-gray-200 dark:border-gray-700",
"w-full",
"h-auto",
// "aspect-[1168/736]",
"transition-colors",
"duration-150",
"ease-in-out",
// activeApp.dark ? "bg-gray-900" : "bg-gray-0",
)}
/>
<ShowcaseComponent
className={clsx(
"animate-showcase-reveal",
"absolute",
"left-0",
"top-0",
"w-full",
"rounded-lg",
"landing-md:rounded-xl",
"landing-lg:rounded-2xl",
"overflow-hidden",
)}
/>
<div
key={activeApp.name}
className={clsx(
"hidden",
"landing-lg:block",
"landing-lg:opacity-0",
"landing-lg:translate-y-24",
"landing-lg:group-hover/showcase-inner:opacity-100 landing-lg:group-hover/showcase-inner:translate-y-0",
"duration-300",
"ease-in-out",
"transition-[opacity,transform,background-color,color]",
"absolute",
"left-0",
"bottom-0",
"right-0",
"w-full",
"h-24",
"opacity-0",
activeApp.dark &&
"bg-[linear-gradient(0deg,_#14141F_30%,_transparent_90%,_transparent_100%)]",
!activeApp.dark &&
"bg-[linear-gradient(0deg,_#FFFFFF_30%,_transparent_90%,_transparent_100%)]",
"rounded-bl-lg rounded-br-lg",
"landing-md:rounded-bl-xl landing-md:rounded-br-xl",
"landing-lg:rounded-bl-2xl landing-lg:rounded-br-2xl",
)}
/>
<GithubFollowersAvatar />
</div>
</div>

</div>
</div>
);
Expand Down

0 comments on commit de2cfb9

Please sign in to comment.