My Photo Book
-
+
A collection of moments and memories captured during my journeys around the world.
+ My Photo Book
+
+
- {dynamicCategories.map(filter => (
-
))}
@@ -122,33 +124,32 @@ export default function PhotoGallery({ galleryItems }: PhotoGalleryProps) {
{filteredImages.length > 0 ? (
filteredImages.map((image, index) => (
-
openModal(index)}
>
- {/* Loading spinner */}
- {imageLoading[image.id] !== false && (
- handleImageLoad(image.id)}
- style={imageLoading[image.id] !== false ? { visibility: "hidden" } : {}}
- />
-
+ {image.category}
+
+
))
) : (
-
-
- )}
-
-
+ - {image.caption} -
-{image.category}
+
+ {imageLoading[image.id] !== false && (
+ handleImageLoad(image.id)}
+ style={imageLoading[image.id] !== false ? { visibility: "hidden" } : {}}
+ />
-
+
+
+ )}
+ {image.caption}
+@@ -161,32 +162,32 @@ export default function PhotoGallery({ galleryItems }: PhotoGalleryProps) { {/* Modal */} {isModalOpen && (
e.stopPropagation()}
>
-
-
+
+
+
{modalImageDetails.caption || "Image Preview"}
-
+
{modalImageLoading && (
-
-
+
+
)}
setModalImageLoading(false)}
style={modalImageLoading ? { visibility: "hidden" } : {}}
/>
- {modalImageDetails.caption}
+ {modalImageDetails.caption}
{filteredImages[currentImageIndex]?.location && (
- {filteredImages[currentImageIndex].location}
+ {filteredImages[currentImageIndex].location}
)}
-
-
diff --git a/components/layout/Layout.tsx b/components/layout/Layout.tsx
index 163fa29..d1bcf54 100644
--- a/components/layout/Layout.tsx
+++ b/components/layout/Layout.tsx
@@ -2,35 +2,31 @@ import React from "react";
import { Header } from "../header/header";
import Footer from "../../sections/footer/footer";
import Meta from "../meta/meta";
+import { SmoothScroll } from "../smooth-scroll";
interface LayoutProps {
children: React.ReactNode;
data: {
- meta?: any; // Make meta optional on data if it can sometimes be missing
- header?: any; // Make header optional on data if it can sometimes be missing
+ meta?: any;
+ header?: any;
};
- about: { // Expecting an object that contains a profiles property
- profiles?: any[]; // Make profiles optional on about if it can sometimes be missing
+ about: {
+ profiles?: any[];
};
}
-const Layout: React.FC = ({
- children,
- data,
- about,
-}) => {
- // Destructure with safety for potentially undefined props
+const Layout: React.FC = ({ children, data, about }) => {
const meta = data?.meta;
const header = data?.header;
const profiles = about?.profiles;
return (
- <>
+
{meta && }
{header && {children}
{profiles && }
-
+
);
};
diff --git a/components/profile/profile.tsx b/components/profile/profile.tsx
index 421388f..f02af90 100644
--- a/components/profile/profile.tsx
+++ b/components/profile/profile.tsx
@@ -35,6 +35,10 @@ const Profile = ({url, name, className}: ProfileProps) => {
};
return (
+
{
{getProfileIcon(name)}
+
);
};
diff --git a/components/smooth-scroll.tsx b/components/smooth-scroll.tsx
new file mode 100644
index 0000000..98d7f70
--- /dev/null
+++ b/components/smooth-scroll.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { useRouter } from "next/router";
+import { useEffect, useRef, ReactNode } from "react";
+
+interface SmoothScrollProps {
+ children: ReactNode;
+}
+
+export function SmoothScroll({ children }: SmoothScrollProps) {
+ const router = useRouter();
+ const lenisRef = useRef | null>(null);
+ const rafRef = useRef(0);
+
+ useEffect(() => {
+ const isReducedMotion =
+ typeof window !== "undefined" &&
+ window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+ if (isReducedMotion) return;
+
+ let lenis: InstanceType | null = null;
+
+ const init = async () => {
+ if (typeof window !== "undefined") window.scrollTo(0, 0);
+ const Lenis = (await import("lenis")).default;
+ lenis = new Lenis({
+ duration: 1.1,
+ easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+ orientation: "vertical",
+ gestureOrientation: "vertical",
+ smoothWheel: true,
+ touchMultiplier: 2,
+ });
+ lenisRef.current = lenis;
+ lenis.scrollTo(0, { immediate: true });
+
+ function raf(time: number) {
+ lenis?.raf(time);
+ rafRef.current = requestAnimationFrame(raf);
+ }
+ rafRef.current = requestAnimationFrame(raf);
+ };
+ init();
+
+ const handleRouteChange = () => {
+ lenisRef.current?.scrollTo(0, { immediate: true });
+ };
+ router.events.on("routeChangeComplete", handleRouteChange);
+
+ return () => {
+ router.events.off("routeChangeComplete", handleRouteChange);
+ if (rafRef.current) cancelAnimationFrame(rafRef.current);
+ lenis?.destroy();
+ lenisRef.current = null;
+ };
+ }, [router.events]);
+
+ return <>{children};
+}
diff --git a/components/tailwind/badge.tsx b/components/tailwind/badge.tsx
deleted file mode 100644
index a3aa728..0000000
--- a/components/tailwind/badge.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function Badge({text, className} : {text: string, className?: string}) {
- return (
-
- {text}
-
- );
-}
diff --git a/components/tailwind/button.tsx b/components/tailwind/button.tsx
deleted file mode 100644
index e91625f..0000000
--- a/components/tailwind/button.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ReactNode } from "react";
-import { Button as MantineButton, ButtonVariant } from "@mantine/core";
-
-interface ButtonProps {
- children: ReactNode;
- variant: ButtonVariant;
- fullWidth?: boolean;
- onClick?: () => void;
-}
-
-export default function Button({ children, variant, fullWidth, onClick }: ButtonProps) {
- return (
-
- {children}
-
- );
-}
diff --git a/components/tailwind/section.tsx b/components/tailwind/section.tsx
index 7476fa5..c92b3e9 100644
--- a/components/tailwind/section.tsx
+++ b/components/tailwind/section.tsx
@@ -8,19 +8,26 @@ interface SectionProps {
heading?: string;
}
-const Section = ({children, id, background, container, heading}: SectionProps) => {
- return (
-
- {heading && {heading}
}
- {children}
-
- );
+const Section = ({ children, id, background, container, heading }: SectionProps) => {
+ return (
+
+ {heading && (
+
+ {heading}
+
+ )}
+ {children}
+
+ );
};
export default Section;
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
new file mode 100644
index 0000000..5aa2b88
--- /dev/null
+++ b/components/ui/accordion.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+ React.ComponentRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ svg]:rotate-180",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+
+
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+ React.ComponentRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+ {children}
+
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
new file mode 100644
index 0000000..ca076e5
--- /dev/null
+++ b/components/ui/avatar.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<
+ React.ComponentRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ & {
+ asChild?: boolean;
+ }) {
+ const Comp = asChild ? Slot : "span";
+ return (
+ & {
+ asChild?: boolean;
+ }) {
+ const Comp = asChild ? Slot : "button";
+ const variantClasses = buttonVariants({ variant, size });
+ return (
+ ;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+ opts?: CarouselOptions;
+ plugins?: CarouselPlugin;
+ orientation?: "horizontal" | "vertical";
+ setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+ carouselRef: ReturnType[0];
+ api: ReturnType[1];
+ scrollPrev: () => void;
+ scrollNext: () => void;
+ canScrollPrev: boolean;
+ canScrollNext: boolean;
+ plugins?: CarouselPlugin;
+} & CarouselProps;
+
+const CarouselContext = React.createContext(null);
+
+function useCarousel() {
+ const context = React.useContext(CarouselContext);
+
+ if (!context) {
+ throw new Error("useCarousel must be used within a
+
+ {children}
+
+
+ );
+}
+
+function CarouselContent({
+ className,
+ children,
+ ...props
+}: React.ComponentProps<"div">) {
+ const { carouselRef, orientation } = useCarousel();
+
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+function CarouselItem({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ const { orientation } = useCarousel();
+
+ return (
+
+ );
+}
+
+function CarouselPrevious({
+ className,
+ variant = "noShadow",
+ size = "icon",
+ ...props
+}: React.ComponentProps) {
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+ return (
+
+ );
+}
+
+function CarouselNext({
+ className,
+ variant = "noShadow",
+ size = "icon",
+ ...props
+}: React.ComponentProps) {
+ const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+ return (
+
+ );
+}
+
+export {
+ type CarouselApi,
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselPrevious,
+ CarouselNext,
+};
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
new file mode 100644
index 0000000..e79ffce
--- /dev/null
+++ b/components/ui/sheet.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+const SheetTrigger = SheetPrimitive.Trigger;
+const SheetClose = SheetPrimitive.Close;
+const SheetPortal = SheetPrimitive.Portal;
+
+function SheetOverlay({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ & {
+ side?: "top" | "bottom" | "left" | "right";
+}) {
+ const sideClasses = {
+ top: "inset-x-0 top-0 border-b-2 border-border data-[state=closed]:-translate-y-full data-[state=open]:translate-y-0",
+ bottom:
+ "inset-x-0 bottom-0 border-t-2 border-border data-[state=closed]:translate-y-full data-[state=open]:translate-y-0",
+ left: "inset-y-0 left-0 h-full w-3/4 border-r-2 border-border data-[state=closed]:-translate-x-full data-[state=open]:translate-x-0 sm:max-w-sm",
+ right:
+ "inset-y-0 right-0 h-full w-3/4 border-l-2 border-border data-[state=closed]:translate-x-full data-[state=open]:translate-x-0 sm:max-w-sm",
+ };
+ return (
+
+
+ {children}
+
+
+
+
+ );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SheetTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
-
+
+
-
+
);
}
diff --git a/pages/_document.tsx b/pages/_document.tsx
index b6eee1a..cc4af7e 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,5 +1,4 @@
import { Html, Head, Main, NextScript } from "next/document";
-import { ColorSchemeScript, mantineHtmlProps } from "@mantine/core";
import { GA_TRACKING_ID } from "../lib/gtag";
@@ -7,9 +6,8 @@ const isProduction = process.env.NODE_ENV === "production";
export default function Document() {
return (
-
+
- (null);
- const [expandedCard, setExpandedCard] = useState(null);
-
- const toggleCard = (cardType: string) => {
- const newExpandedCard = expandedCard === cardType ? null : cardType;
- setExpandedCard(newExpandedCard);
-
- // Scroll to the about section when expanding a card
- if (newExpandedCard) {
- setTimeout(() => {
- const aboutSection = document.getElementById("about");
- if (aboutSection) {
- aboutSection.scrollIntoView({
- behavior: "smooth",
- block: "start",
- });
- }
- }, 100); // Small delay to allow the layout to update
+ const toggleCard = (cardType: string) => {
+ const newExpandedCard = expandedCard === cardType ? null : cardType;
+ setExpandedCard(newExpandedCard);
+ if (newExpandedCard) {
+ setTimeout(() => {
+ const aboutSection = document.getElementById("about");
+ if (aboutSection) {
+ aboutSection.scrollIntoView({ behavior: "smooth", block: "start" });
}
- };
+ }, 100);
+ }
+ };
+
+ const cardTypes = [
+ { id: "about", icon: User, label: "About Me" },
+ { id: "skills", icon: Code, label: "Skills" },
+ ] as const;
- const AboutPreview = () => (
-
- 200 ? about.substring(0, 200) + "..." : about,
- }} />
-
- Click to read more
-
+ return (
+
+
+
+
+
+ Profile
+
+
+
+
+ {stats.map((stat) => (
+
+ {stat.count}
+ {stat.label}
+
+ ))}
+
+
+
+
+ {profiles.map((profile) => (
+ {name}
+
+
+
+
+
+
- );
- const ExperiencePreview = () => (
-
-
- {experience.slice(0, 2).map((company, index) => (
-
-
- {company.logo && (
+
+
+ {expandedCard && (
+
+ {expandedCard === "about" && (
+ toggleCard("about")}
+ >
+
+
+
+
+
+
+
+
+ )}
+ {expandedCard === "skills" && (
+ toggleCard("skills")}
+ >
+
+
+
+
+
+
+ {skills.map((skill) => (
+
- {company.designation}
-
-
- {company.company} • {company.from} - {company.to}
-
-
-
-
- ))}
-
- {experience.length > 2 && (
-
- +{experience.length - 2} more positions. Click to see all
-
- )}
-
- );
-
- const ExperienceExpanded = () => (
-
-
- {experience.map((company, index) => (
- {`${company.designation} @ ${company.company}`}}
- bullet={
-
-
- }
- >
- {company.logo && (
-
-
-
-
-
- {company.technologies && company.technologies.map((technology) =>
- {technology} )}
-
-
+
+ {skill.name}
+
+
))}
-
-
- );
-
- const SkillsPreview = () => (
-
-
- {skills.slice(0, 8).map((skill) => (
-
-
- {skill.name}
-
-
- ))}
-
- {skills.length > 8 && (
-
- +{skills.length - 8} more skills. Click to see all
-
+
+
+
+ )}
+
)}
-
- );
-
- const SkillsExpanded = () => (
-
-
- {skills.map((skill) => (
-
-
- {skill.name}
-
-
- ))}
-
-
- );
+
- return (
-
-
- {/* Profile Header Section */}
-
-
-
- {stats.length && stats.map((stat) => (
-
- {stat.count}
- {stat.label}
-
- ))}
-
-
-
-
- {profiles.length && profiles.map((profile) => (
-
+
+ {cardTypes.map(({ id, icon: Icon, label }) => {
+ if (expandedCard === id) return null;
+ return (
+
+ toggleCard(id)}
+ >
+
+
+
+
+
+ {id === "about" && (
+ <>
+ 200
+ ? about.substring(0, 200) + "..."
+ : about,
+ }}
+ />
+
+ Click to read more
+
+
+ )}
+ {id === "skills" && (
+ <>
+
+ {skills.slice(0, 8).map((skill) => (
+
+ {name}
-
-
-
-
-
-
-
- {education}
-
-
-
- {/* Expandable Cards Section */}
-
-
- {/* Expanded Card - Full Width */}
-
- {expandedCard === "about" && (
- toggleCard("about")}
- >
-
-
- About Me
-
-
- )}
-
- {expandedCard === "experience" && (
- toggleCard("experience")}
- >
-
-
- Experience
-
-
- )}
-
- {expandedCard === "skills" && (
- toggleCard("skills")}
- >
-
-
- Skills
-
-
- )}
-
-
- {/* Collapsed Cards - Side by Side */}
-
- {/* About Card */}
- {expandedCard !== "about" && (
-
- toggleCard("about")}
- >
-
-
- About Me
-
-
-
- )}
-
- {/* Experience Card */}
- {expandedCard !== "experience" && (
-
- toggleCard("experience")}
- >
-
-
- Experience
-
-
-
- )}
-
- {/* Skills Card */}
- {expandedCard !== "skills" && (
-
- toggleCard("skills")}
- >
-
-
- Skills
-
-
-
- )}
-
-
-
-
-
- );
+
+ {skills.length > 8 && (
+
+ +{skills.length - 8} more. Click to see all
+
+ )}
+
+ )}
+
+
+
+ );
+ })}
+
+
+
+
+ );
};
export default About;
diff --git a/sections/banner/banner.tsx b/sections/banner/banner.tsx
index d709871..a46860e 100644
--- a/sections/banner/banner.tsx
+++ b/sections/banner/banner.tsx
@@ -1,110 +1,154 @@
-import {useEffect} from "react";
-import Image from "next/image";
+"use client";
+
+import { useEffect } from "react";
import Link from "next/link";
-import Button from "../../components/tailwind/button";
+import { motion } from "framer-motion";
+import { ArrowUpRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
interface BannerProps {
- illustration: string;
- texts: string[];
- ctaLabel: string;
- ctaUrl: string;
- downloadable: boolean;
-
+ illustration: string;
+ texts: string[];
+ ctaLabel: string;
+ ctaUrl: string;
+ downloadable: boolean;
}
const Banner = ({
- illustration, texts, ctaLabel, ctaUrl, downloadable,
- }: BannerProps) => {
-
- useEffect(() => {
- let toRotate: string | null;
- let el: HTMLElement | null;
- let loopNum: number;
- let period: string | null;
- let txt: string;
- let isDeleting: boolean;
- const tick = () => {
- if (!el || !toRotate) return;
- const i = loopNum % (JSON.parse(toRotate) as string[]).length;
- const fullTxt = (JSON.parse(toRotate) as string[])[i];
- if (isDeleting) {
- txt = fullTxt.substring(0, txt.length - 1);
- } else {
- txt = fullTxt.substring(0, txt.length + 1);
- }
- el.innerHTML = `${txt}`;
- let delta = 200 - Math.random() * 100;
- if (isDeleting) {
- delta /= 2;
- }
- if (!isDeleting && txt === fullTxt) {
- delta = parseInt(period || "2000", 10);
- isDeleting = true;
- } else if (isDeleting && txt === "") {
- isDeleting = false;
- loopNum += 1;
- delta = 500;
- }
- setTimeout(() => {
- tick();
- }, delta);
- };
- const TxtType = (elL: HTMLElement, toRotateL: string, periodL: string | null) => {
- toRotate = toRotateL;
- el = elL;
- loopNum = 0;
- period = periodL;
- txt = "";
- tick();
- isDeleting = false;
- };
- const elements = document.querySelectorAll("#typewrite");
- elements.forEach(currentEl => {
- const dataType = currentEl.getAttribute("data-type");
- const dataPeriod = currentEl.getAttribute("data-period");
- if (dataType) {
- TxtType(currentEl, dataType, dataPeriod);
- }
- });
- const css = document.createElement("style");
- css.type = "text/css";
- css.innerHTML = "#typewrite > span { border-right: 0.08em solid currentColor; }";
- document.body.appendChild(css);
- return () => {
- document.body.removeChild(css);
- };
- }, []);
- return (
-
-
-
-
- Hi, I'm
-
-
-
-
-
-
- {ctaLabel && (
-
- )}
-
-
-
-
-
- );
+ texts,
+ ctaLabel,
+ ctaUrl,
+ downloadable,
+}: BannerProps) => {
+ useEffect(() => {
+ let toRotate: string | null;
+ let el: HTMLElement | null;
+ let loopNum: number;
+ let period: string | null;
+ let txt: string;
+ let isDeleting: boolean;
+ const tick = () => {
+ if (!el || !toRotate) return;
+ const i = loopNum % (JSON.parse(toRotate) as string[]).length;
+ const fullTxt = (JSON.parse(toRotate) as string[])[i];
+ if (isDeleting) {
+ txt = fullTxt.substring(0, txt.length - 1);
+ } else {
+ txt = fullTxt.substring(0, txt.length + 1);
+ }
+ el.innerHTML = `${txt}`;
+ let delta = 200 - Math.random() * 100;
+ if (isDeleting) {
+ delta /= 2;
+ }
+ if (!isDeleting && txt === fullTxt) {
+ delta = parseInt(period || "2000", 10);
+ isDeleting = true;
+ } else if (isDeleting && txt === "") {
+ isDeleting = false;
+ loopNum += 1;
+ delta = 500;
+ }
+ setTimeout(() => {
+ tick();
+ }, delta);
+ };
+ const TxtType = (
+ elL: HTMLElement,
+ toRotateL: string,
+ periodL: string | null,
+ ) => {
+ toRotate = toRotateL;
+ el = elL;
+ loopNum = 0;
+ period = periodL;
+ txt = "";
+ tick();
+ isDeleting = false;
+ };
+ const elements = document.querySelectorAll("#typewrite");
+ elements.forEach((currentEl) => {
+ const dataType = currentEl.getAttribute("data-type");
+ const dataPeriod = currentEl.getAttribute("data-period");
+ if (dataType) {
+ TxtType(currentEl, dataType, dataPeriod);
+ }
+ });
+ const css = document.createElement("style");
+ css.type = "text/css";
+ css.innerHTML =
+ "#typewrite > span { border-right: 0.08em solid currentColor; }";
+ document.body.appendChild(css);
+ return () => {
+ document.body.removeChild(css);
+ };
+ }, []);
+
+ return (
+
+
+
+
+ Hi, I'm{" "}
+
+
+
+
+
+
+
+
+
+ {ctaLabel && (
+
+ )}
+
+
+
+ );
};
export default Banner;
diff --git a/sections/blog/blog.tsx b/sections/blog/blog.tsx
index 8ed84e9..f8cb96c 100644
--- a/sections/blog/blog.tsx
+++ b/sections/blog/blog.tsx
@@ -1,93 +1,73 @@
-import { Carousel } from "@mantine/carousel";
-import { useMediaQuery } from "@mantine/hooks";
-import { useMantineTheme } from "@mantine/core";
+"use client";
+
import Card from "../../components/card/card";
import Section from "../../components/tailwind/section";
+import {
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselNext,
+ CarouselPrevious,
+} from "@/components/ui/carousel";
import { Blog as BlogType } from "../../interfaces/blog";
-const Blog = ({blogs}: { blogs: BlogType[] }) => {
- const theme = useMantineTheme();
- const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
- const isSmallScreen = useMediaQuery(`(min-width: ${theme.breakpoints.sm})`); // Technikally, sm and up
- const isMediumScreen = useMediaQuery(`(min-width: ${theme.breakpoints.md})`);
- const isLargeScreen = useMediaQuery(`(min-width: ${theme.breakpoints.lg})`);
- const isXLargeScreen = useMediaQuery(`(min-width: ${theme.breakpoints.xl})`);
-
- const sortedBlogs = blogs
- .filter(blog => !blog.hidden)
- .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
-
-
- const groupBy = (xs: BlogType[], f: (blog: BlogType) => string) =>
- xs.reduce((r, v) => {
- const k = f(v);
- (r[k] || (r[k] = [])).push(v);
- return r;
- }, {} as Record);
-
- const kebabCaseToSentenceCase = (str: string) =>
- str.split("-").map((word) => word[0].toUpperCase() + word.substring(1)).join(" ");
-
- const result = groupBy(sortedBlogs, (c) => c.type);
+const Blog = ({ blogs }: { blogs: BlogType[] }) => {
+ const sortedBlogs = blogs
+ .filter((blog) => !blog.hidden)
+ .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
- let slidesToScrollValue = 1;
- let visibleSlides = 1;
+ const groupBy = (xs: BlogType[], f: (blog: BlogType) => string) =>
+ xs.reduce((r, v) => {
+ const k = f(v);
+ (r[k] || (r[k] = [])).push(v);
+ return r;
+ }, {} as Record);
- if (isXLargeScreen) {
- slidesToScrollValue = 5;
- visibleSlides = 5;
- } else if (isLargeScreen) {
- slidesToScrollValue = 4;
- visibleSlides = 4;
- } else if (isMediumScreen) {
- slidesToScrollValue = 3;
- visibleSlides = 3;
- } else if (isSmallScreen) { // This is sm (since mobile is sm and down, and md,lg,xl are covered)
- slidesToScrollValue = 2;
- visibleSlides = 2;
- }
- // For mobile (base screen size), slidesToScrollValue and visibleSlides remain 1
+ const kebabCaseToSentenceCase = (str: string) =>
+ str
+ .split("-")
+ .map((word) => word[0].toUpperCase() + word.substring(1))
+ .join(" ");
- return (
- <>
- {Object.keys(result).length > 0 && Object.keys(result).map((sectionName) => {
- const slidesInSection = result[sectionName]?.length || 0;
- const showIndicators = mobile && slidesInSection > 1;
- const showControls = !mobile && slidesInSection > visibleSlides;
+ const result = groupBy(sortedBlogs, (c) => c.type);
- return (
-
-
- {result[sectionName]?.length > 0 && result[sectionName].map((blog, index) => {
- return (
-
-
- );
- })}
-
-
- );
- })}
-
- );
+ return (
+ <>
+ {Object.keys(result).length > 0 &&
+ Object.keys(result).map((sectionName) => (
+
+
+
+ {result[sectionName]?.map((blog, index) => (
+
+
+ ))}
+
+
+
+ ))}
+
+ );
};
export default Blog;
diff --git a/sections/experience/experience.tsx b/sections/experience/experience.tsx
new file mode 100644
index 0000000..9ea17a2
--- /dev/null
+++ b/sections/experience/experience.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+import Section from "../../components/tailwind/section";
+import { Badge } from "@/components/ui/badge";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+} from "@/components/ui/accordion";
+
+export interface ExperienceItem {
+ logo: string;
+ designation: string;
+ company: string;
+ from: string;
+ to: string;
+ location: string;
+ technologies: string[];
+}
+
+interface ExperienceProps {
+ experience: ExperienceItem[];
+}
+
+const Experience = ({ experience }: ExperienceProps) => {
+ return (
+
+
+
+ {experience.map((entry, index) => (
+
+
+
+
+ {entry.logo ? (
+
+
+
+ {entry.technologies?.map((tech) => (
+
+ {tech}
+
+ ))}
+
+
+
+ ))}
+
+
+
+ );
+};
+
+export default Experience;
diff --git a/sections/footer/footer.tsx b/sections/footer/footer.tsx
index 5f13c0d..e08c2cb 100644
--- a/sections/footer/footer.tsx
+++ b/sections/footer/footer.tsx
@@ -1,32 +1,65 @@
-import Profile from "../../components/profile/profile";
-
-const Footer = ({profiles}) => (
-
+const Footer = ({
+ profiles,
+}: {
+ profiles: { name: string; url: string }[];
+}) => (
+
+
+
+
+ Thank you for stopping by!
+
+
+ Let's get in touch on any of these platforms.
+
+
+
+ {profiles.length > 0 &&
+ profiles.map((profile) => (
+
+
+
+ © {new Date().getFullYear()}{" "}
+
+ Prasheel
+
+
+
+ License
+
+
+
);
export default Footer;
diff --git a/sections/interests/interests.tsx b/sections/interests/interests.tsx
index b441db1..8c75fd9 100644
--- a/sections/interests/interests.tsx
+++ b/sections/interests/interests.tsx
@@ -1,111 +1,142 @@
+"use client";
+
import Image from "next/image";
-import Section from "../../components/tailwind/section";
import Link from "next/link";
+import { motion } from "framer-motion";
+import Section from "../../components/tailwind/section";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
interface InterestsProps {
- illustration: string;
- interests: {
- title: string;
- description: string;
- }[];
+ illustration: string;
+ interests: {
+ title: string;
+ description: string;
+ }[];
}
-const Interests = ({ illustration, interests }: InterestsProps) => {
+const container = {
+ hidden: { opacity: 0 },
+ show: {
+ opacity: 1,
+ transition: { staggerChildren: 0.1 },
+ },
+};
- const getInterestType = (title: string): "blogging" | "photography" | "coding" | "other" => {
- const lowerTitle = title.toLowerCase();
- if (lowerTitle.includes("blog") || lowerTitle.includes("writing")) {
- return "blogging";
- }
- if (lowerTitle.includes("photo") || lowerTitle.includes("camera") || lowerTitle.includes("image")) {
- return "photography";
- }
- if (lowerTitle.includes("coding") || lowerTitle.includes("programming") || lowerTitle.includes("development")) {
- return "coding";
- }
- return "other";
- };
+const item = {
+ hidden: { opacity: 0, x: -16 },
+ show: { opacity: 1, x: 0 },
+};
+const Interests = ({ illustration, interests }: InterestsProps) => {
+ const getInterestType = (
+ title: string,
+ ): "blogging" | "photography" | "coding" | "other" => {
+ const lowerTitle = title.toLowerCase();
+ if (lowerTitle.includes("blog") || lowerTitle.includes("writing"))
+ return "blogging";
+ if (
+ lowerTitle.includes("photo") ||
+ lowerTitle.includes("camera") ||
+ lowerTitle.includes("image")
+ )
+ return "photography";
+ if (
+ lowerTitle.includes("coding") ||
+ lowerTitle.includes("programming") ||
+ lowerTitle.includes("development")
+ )
+ return "coding";
+ return "other";
+ };
- const getCTAButton = (interest: { title: string; description: string }) => {
- const type = getInterestType(interest.title);
- switch (type) {
- case "blogging":
- return (
-
- 📝 View My Blog Posts
-
- );
- case "photography":
- return (
-
- 📸 Explore Photo Gallery
-
- );
- case "coding":
- return (
-
- 💻 View My GitHub
-
- );
- default:
- return (
-
- );
- }
- };
+ const getCTA = (interest: { title: string; description: string }) => {
+ const type = getInterestType(interest.title);
+ switch (type) {
+ case "blogging":
+ return (
+
+ );
+ case "photography":
+ return (
+
+ );
+ case "coding":
+ return (
+
+ );
+ default:
+ return (
+
+ );
+ }
+ };
- return (
-
-
-
- {interests.length && interests.map((interest) => (
-
-
-
-
-
- {interest.title}
-
-
- {interest.description}
-
-
- {/* CTA Button */}
-
- {getCTAButton(interest)}
-
-
-
-
-
- ))}
-
-
-
- );
+ return (
+
+
+
+ {interests.length > 0 &&
+ interests.map((interest) => (
+
+
+
+
+ {interest.title}
+
+
+
+ {interest.description}
+ {getCTA(interest)}
+
+
+
+ ))}
+
+
+
+
+
+ );
};
export default Interests;
diff --git a/sections/map/map.tsx b/sections/map/map.tsx
index 6c54550..1f5829e 100644
--- a/sections/map/map.tsx
+++ b/sections/map/map.tsx
@@ -1,53 +1,69 @@
-import React, {memo} from "react";
+"use client";
+
+import React, { memo } from "react";
import {
- ComposableMap,
- Geographies,
- Geography,
+ ComposableMap,
+ Geographies,
+ Geography,
} from "react-simple-maps";
-import { Tooltip } from "@mantine/core";
+import { motion } from "framer-motion";
import Section from "../../components/tailwind/section";
+import { Card } from "@/components/ui/card";
-// Type assertion to fix React 19 compatibility
-const ComposableMapComponent = ComposableMap as React.ComponentType;
+const ComposableMapComponent = ComposableMap as React.ComponentType<{
+ projection?: string;
+ projectionConfig?: { center: [number, number]; scale: number };
+ children?: React.ReactNode;
+}>;
-export const Map = ({countriesVisited}) => {
- return (
-
-
- How much of the World I've seen so
- far?
-
-
-
- {({geographies}) =>
- geographies.map((geo) => (
-
-
- ))
- }
-
-
-
-
-
- );
+const Map = ({ countriesVisited }: { countriesVisited: string[] }) => {
+ return (
+
+
+
+
+
+ {({ geographies }) =>
+ geographies.map((geo) => (
+
+ {geo.properties.name}
+
+ ))
+ }
+
+
+
+
+
+ );
};
export default memo(Map);
+export { Map };
diff --git a/styles/global.scss b/styles/global.scss
index 050eb2c..e279985 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -2,35 +2,122 @@
@tailwind components;
@tailwind utilities;
+@layer base {
+ html,
+ body {
+ margin: 0;
+ padding: 0;
+ }
+ :root {
+ --background: #dfe5f2;
+ --foreground: #000000;
+ --main: #6C90FF;
+ --main-foreground: #000000;
+ --border: #000000;
+ --secondary-background: #e8ecf4;
+ --ring: #000000;
+ --radius: 5px;
+ --muted-foreground: #374151;
+ }
+ .dark {
+ --background: #272933;
+ --foreground: #eeefe9;
+ --main: #6C90FF;
+ --main-foreground: #000000;
+ --border: #000000;
+ --secondary-background: #212121;
+ --ring: #eeefe9;
+ --muted-foreground: #9ca3af;
+ }
+}
+
@layer components {
- .markdown-body h1, .markdown-body h2, .markdown-body h3 {
- @apply font-bold mt-8 mb-4 text-2xl dark:text-white;
+ .markdown-body h1,
+ .markdown-body h2,
+ .markdown-body h3 {
+ font-weight: 700;
+ margin-top: 2rem;
+ margin-bottom: 1rem;
+ font-size: 1.5rem;
+ line-height: 2rem;
+ }
+ .dark .markdown-body h1,
+ .dark .markdown-body h2,
+ .dark .markdown-body h3 {
+ color: #fafafa;
+ }
+ .markdown-body h4,
+ .markdown-body h5,
+ .markdown-body h6 {
+ font-weight: 600;
+ margin-top: 1.5rem;
+ margin-bottom: 0.5rem;
+ font-size: 1.25rem;
+ line-height: 1.75rem;
}
- .markdown-body h4, .markdown-body h5, .markdown-body h6 {
- @apply font-semibold mt-6 mb-2 text-xl dark:text-white;
+ .dark .markdown-body h4,
+ .dark .markdown-body h5,
+ .dark .markdown-body h6 {
+ color: #fafafa;
}
.markdown-body p {
- @apply mb-4 leading-relaxed;
+ margin-bottom: 1rem;
+ line-height: 1.625;
}
- .markdown-body ul, .markdown-body ol {
- @apply pl-6 mb-4;
+ .markdown-body ul,
+ .markdown-body ol {
+ padding-left: 1.5rem;
+ margin-bottom: 1rem;
}
.markdown-body li {
- @apply list-disc;
+ list-style-type: disc;
}
.markdown-body a {
- @apply text-brandMutedYellow-700 underline hover:text-brandMutedYellow-900 dark:text-brandMutedYellow-300 dark:hover:text-brandMutedYellow-100;
+ color: #4d80e6;
+ text-decoration: underline;
+ }
+ .markdown-body a:hover {
+ color: #2563eb;
+ }
+ .dark .markdown-body a {
+ color: #88aaee;
+ }
+ .dark .markdown-body a:hover {
+ color: #a5c4ff;
}
.markdown-body img {
- @apply my-4 rounded max-w-full h-auto;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ border-radius: 0.25rem;
+ max-width: 100%;
+ height: auto;
}
.markdown-body blockquote {
- @apply border-l-4 border-brandMutedYellow-500 pl-4 italic text-neutralGray-700 dark:text-neutralGray-300 mb-4;
+ border-left: 4px solid #88aaee;
+ padding-left: 1rem;
+ font-style: italic;
+ color: #495057;
+ margin-bottom: 1rem;
+ }
+ .dark .markdown-body blockquote {
+ color: #dee2e6;
}
.markdown-body pre {
- @apply bg-neutralGray-100 dark:bg-neutralGray-800 p-4 rounded mb-4 overflow-x-auto;
+ background-color: #f1f3f5;
+ padding: 1rem;
+ border-radius: 0.25rem;
+ margin-bottom: 1rem;
+ overflow-x: auto;
+ }
+ .dark .markdown-body pre {
+ background-color: #495057;
}
.markdown-body code {
- @apply bg-neutralGray-200 dark:bg-neutralGray-700 px-1 py-0.5 rounded;
+ background-color: #e9ecef;
+ padding: 0.125rem 0.25rem;
+ border-radius: 0.25rem;
+ }
+ .dark .markdown-body code {
+ background-color: #495057;
}
}
diff --git a/styles/theme.ts b/styles/theme.ts
deleted file mode 100644
index e669d99..0000000
--- a/styles/theme.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createTheme, MantineColorsTuple } from "@mantine/core";
-import { themeValues } from "./theme-values";
-
-const colors = themeValues.colors as unknown as Record;
-
-export const theme = createTheme({
- colors,
- primaryColor: themeValues.primaryColor,
- white: themeValues.white,
- black: themeValues.black,
- headings: themeValues.headings,
- fontFamily: themeValues.fontFamily,
- other: themeValues.other,
-});
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index e091e9a..a7be6e4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,6 +18,8 @@ module.exports = {
"./components/**/*.*",
"./sections/**/*.*",
"./pages/**/*.*",
+ "./lib/**/*.*",
+ "./styles/**/*.scss",
],
theme: {
container: {
@@ -49,11 +51,53 @@ module.exports = {
},
// You can also map other theme values like fontSize, spacing, borderRadius
// For example, for heading font sizes (this is a simplified example):
- // fontSize: {
- // 'h1-mantine': mantineColorsTheme.headings.sizes.h1.fontSize,
- // 'h2-mantine': mantineColorsTheme.headings.sizes.h2.fontSize,
- // // ... and so on
- // },
+ borderRadius: {
+ base: "5px",
+ },
+ borderWidth: {
+ "3": "3px",
+ },
+ boxShadow: {
+ shadow: "4px 4px 0px 0px #000",
+ "shadow-sm": "2px 2px 0px 0px #000",
+ },
+ translate: {
+ boxShadowX: "4px",
+ boxShadowY: "4px",
+ reverseBoxShadowX: "-4px",
+ reverseBoxShadowY: "-4px",
+ },
+ colors: {
+ main: "var(--main)",
+ "main-foreground": "var(--main-foreground)",
+ border: "var(--border)",
+ foreground: "var(--foreground)",
+ background: "var(--background)",
+ "secondary-background": "var(--secondary-background)",
+ ring: "var(--ring)",
+ "muted-foreground": "var(--muted-foreground)",
+ },
+ fontWeight: {
+ base: "500",
+ heading: "700",
+ },
+ fontFamily: {
+ heading: ["var(--font-space-grotesk)", "var(--font-sans)", "sans-serif"],
+ },
+ keyframes: {
+ "accordion-down": {
+ from: { height: "0" },
+ to: { height: "var(--radix-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--radix-accordion-content-height)" },
+ to: { height: "0" },
+ },
+ },
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
+ },
},
},
plugins: [],
diff --git a/tsconfig.json b/tsconfig.json
index 265ea94..b4201d6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "es5",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
+ "lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
@@ -17,14 +13,12 @@
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
- "incremental": true
+ "incremental": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./*"]
+ }
},
- "include": [
- "next-env.d.ts",
- "**/*.ts",
- "**/*.tsx"
- ],
- "exclude": [
- "node_modules"
- ]
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
}
{modalImageDetails.caption || "Image Preview"}
{modalImageLoading && (
-
diff --git a/components/layout/Layout.tsx b/components/layout/Layout.tsx
index 163fa29..d1bcf54 100644
--- a/components/layout/Layout.tsx
+++ b/components/layout/Layout.tsx
@@ -2,35 +2,31 @@ import React from "react";
import { Header } from "../header/header";
import Footer from "../../sections/footer/footer";
import Meta from "../meta/meta";
+import { SmoothScroll } from "../smooth-scroll";
interface LayoutProps {
children: React.ReactNode;
data: {
- meta?: any; // Make meta optional on data if it can sometimes be missing
- header?: any; // Make header optional on data if it can sometimes be missing
+ meta?: any;
+ header?: any;
};
- about: { // Expecting an object that contains a profiles property
- profiles?: any[]; // Make profiles optional on about if it can sometimes be missing
+ about: {
+ profiles?: any[];
};
}
-const Layout: React.FC
-
+ setModalImageLoading(false)}
style={modalImageLoading ? { visibility: "hidden" } : {}}
/>
-
-
+
)}
{modalImageDetails.caption}
+{modalImageDetails.caption}
{filteredImages[currentImageIndex]?.location && ( -{filteredImages[currentImageIndex].location}
+{filteredImages[currentImageIndex].location}
)}
-
{heading}
} - {children} -+ {heading} +
+ )} + {children} +{children}
+
+ {children}
+
+
+
+ );
+}
+
+function CarouselItem({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ const { orientation } = useCarousel();
+
+ return (
+
+ );
+}
+
+function CarouselPrevious({
+ className,
+ variant = "noShadow",
+ size = "icon",
+ ...props
+}: React.ComponentProps
+ {children}
+
+
+
-
+
);
}
diff --git a/pages/_document.tsx b/pages/_document.tsx
index b6eee1a..cc4af7e 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,5 +1,4 @@
import { Html, Head, Main, NextScript } from "next/document";
-import { ColorSchemeScript, mantineHtmlProps } from "@mantine/core";
import { GA_TRACKING_ID } from "../lib/gtag";
@@ -7,9 +6,8 @@ const isProduction = process.env.NODE_ENV === "production";
export default function Document() {
return (
-
+
-
+ {pageSpecificAboutData &&
);
}
diff --git a/postcss.config.js b/postcss.config.js
index b466557..3f82780 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,8 +1,7 @@
module.exports = {
plugins: {
"tailwindcss/nesting": {},
- "tailwindcss": {},
- "postcss-preset-mantine": {},
+ tailwindcss: {},
"postcss-simple-vars": {
variables: {
// Optional: define Mantine breakpoints here if needed by your setup,
diff --git a/sections/about/about.tsx b/sections/about/about.tsx
index f2fbd29..5323f33 100644
--- a/sections/about/about.tsx
+++ b/sections/about/about.tsx
@@ -1,402 +1,276 @@
+"use client";
+
+import { useState } from "react";
import Image from "next/image";
+import {
+ Briefcase,
+ MapPin,
+ Code,
+ User,
+ ChevronDown,
+ ChevronUp,
+ GraduationCap,
+} from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
import Section from "../../components/tailwind/section";
import Profile from "../../components/profile/profile";
-import { Text, Title, Group, Timeline, ThemeIcon, Badge as MantineBadge, Box, SimpleGrid, Card, Stack } from "@mantine/core";
-import { IconBriefcase, IconMapPin, IconCalendarEvent, IconCode, IconUser, IconChevronDown, IconChevronUp } from "@tabler/icons-react";
-import { useState } from "react";
+import {
+ Card,
+ CardContent,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
interface AboutProps {
- about: string;
- skills: { logo: string; name: string }[];
- experience: {
- logo: string;
- designation: string;
- company: string;
- from: string;
- to: string;
- location: string;
- technologies: string[];
- }[];
- imageUrl: string;
- name: string;
- location: string;
- designation: string;
- education: string;
- stats: { count: number; label: string }[];
- profiles: { name: string; url: string }[];
-
+ about: string;
+ skills: { logo: string; name: string }[];
+ imageUrl: string;
+ name: string;
+ location: string;
+ designation: string;
+ education: string;
+ stats: { count: number; label: string }[];
+ profiles: { name: string; url: string }[];
}
const About = ({
- name, about, imageUrl, location, designation, experience, education, skills, stats, profiles,
- }: AboutProps) => {
+ name,
+ about,
+ imageUrl,
+ location,
+ designation,
+ education,
+ skills,
+ stats,
+ profiles,
+}: AboutProps) => {
+ const [expandedCard, setExpandedCard] = useState
-
200 ? about.substring(0, 200) + "..." : about,
- }} />
-
- Click to read more
-
+ return (
+
+
+
+
- );
- const AboutExpanded = () => (
-
+
+ Profile
+
+
+
+
+
+ {stats.map((stat) => (
+
+
+
+ ))}
+ {stat.count}
+ {stat.label}
+
+
+ {profiles.map((profile) => (
+
+
-
+
+
- );
- const ExperiencePreview = () => (
- {name}
+
+
+
+
-
- {experience.slice(0, 2).map((company, index) => (
-
-
-
+ );
};
export default About;
diff --git a/sections/banner/banner.tsx b/sections/banner/banner.tsx
index d709871..a46860e 100644
--- a/sections/banner/banner.tsx
+++ b/sections/banner/banner.tsx
@@ -1,110 +1,154 @@
-import {useEffect} from "react";
-import Image from "next/image";
+"use client";
+
+import { useEffect } from "react";
import Link from "next/link";
-import Button from "../../components/tailwind/button";
+import { motion } from "framer-motion";
+import { ArrowUpRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
interface BannerProps {
- illustration: string;
- texts: string[];
- ctaLabel: string;
- ctaUrl: string;
- downloadable: boolean;
-
+ illustration: string;
+ texts: string[];
+ ctaLabel: string;
+ ctaUrl: string;
+ downloadable: boolean;
}
const Banner = ({
- illustration, texts, ctaLabel, ctaUrl, downloadable,
- }: BannerProps) => {
-
- useEffect(() => {
- let toRotate: string | null;
- let el: HTMLElement | null;
- let loopNum: number;
- let period: string | null;
- let txt: string;
- let isDeleting: boolean;
- const tick = () => {
- if (!el || !toRotate) return;
- const i = loopNum % (JSON.parse(toRotate) as string[]).length;
- const fullTxt = (JSON.parse(toRotate) as string[])[i];
- if (isDeleting) {
- txt = fullTxt.substring(0, txt.length - 1);
- } else {
- txt = fullTxt.substring(0, txt.length + 1);
- }
- el.innerHTML = `${txt}`;
- let delta = 200 - Math.random() * 100;
- if (isDeleting) {
- delta /= 2;
- }
- if (!isDeleting && txt === fullTxt) {
- delta = parseInt(period || "2000", 10);
- isDeleting = true;
- } else if (isDeleting && txt === "") {
- isDeleting = false;
- loopNum += 1;
- delta = 500;
- }
- setTimeout(() => {
- tick();
- }, delta);
- };
- const TxtType = (elL: HTMLElement, toRotateL: string, periodL: string | null) => {
- toRotate = toRotateL;
- el = elL;
- loopNum = 0;
- period = periodL;
- txt = "";
- tick();
- isDeleting = false;
- };
- const elements = document.querySelectorAll("#typewrite");
- elements.forEach(currentEl => {
- const dataType = currentEl.getAttribute("data-type");
- const dataPeriod = currentEl.getAttribute("data-period");
- if (dataType) {
- TxtType(currentEl, dataType, dataPeriod);
- }
- });
- const css = document.createElement("style");
- css.type = "text/css";
- css.innerHTML = "#typewrite > span { border-right: 0.08em solid currentColor; }";
- document.body.appendChild(css);
- return () => {
- document.body.removeChild(css);
- };
- }, []);
- return (
-
-
- );
+ texts,
+ ctaLabel,
+ ctaUrl,
+ downloadable,
+}: BannerProps) => {
+ useEffect(() => {
+ let toRotate: string | null;
+ let el: HTMLElement | null;
+ let loopNum: number;
+ let period: string | null;
+ let txt: string;
+ let isDeleting: boolean;
+ const tick = () => {
+ if (!el || !toRotate) return;
+ const i = loopNum % (JSON.parse(toRotate) as string[]).length;
+ const fullTxt = (JSON.parse(toRotate) as string[])[i];
+ if (isDeleting) {
+ txt = fullTxt.substring(0, txt.length - 1);
+ } else {
+ txt = fullTxt.substring(0, txt.length + 1);
+ }
+ el.innerHTML = `${txt}`;
+ let delta = 200 - Math.random() * 100;
+ if (isDeleting) {
+ delta /= 2;
+ }
+ if (!isDeleting && txt === fullTxt) {
+ delta = parseInt(period || "2000", 10);
+ isDeleting = true;
+ } else if (isDeleting && txt === "") {
+ isDeleting = false;
+ loopNum += 1;
+ delta = 500;
+ }
+ setTimeout(() => {
+ tick();
+ }, delta);
+ };
+ const TxtType = (
+ elL: HTMLElement,
+ toRotateL: string,
+ periodL: string | null,
+ ) => {
+ toRotate = toRotateL;
+ el = elL;
+ loopNum = 0;
+ period = periodL;
+ txt = "";
+ tick();
+ isDeleting = false;
+ };
+ const elements = document.querySelectorAll("#typewrite");
+ elements.forEach((currentEl) => {
+ const dataType = currentEl.getAttribute("data-type");
+ const dataPeriod = currentEl.getAttribute("data-period");
+ if (dataType) {
+ TxtType(currentEl, dataType, dataPeriod);
+ }
+ });
+ const css = document.createElement("style");
+ css.type = "text/css";
+ css.innerHTML =
+ "#typewrite > span { border-right: 0.08em solid currentColor; }";
+ document.body.appendChild(css);
+ return () => {
+ document.body.removeChild(css);
+ };
+ }, []);
+
+ return (
+
+
+ );
};
export default Banner;
diff --git a/sections/blog/blog.tsx b/sections/blog/blog.tsx
index 8ed84e9..f8cb96c 100644
--- a/sections/blog/blog.tsx
+++ b/sections/blog/blog.tsx
@@ -1,93 +1,73 @@
-import { Carousel } from "@mantine/carousel";
-import { useMediaQuery } from "@mantine/hooks";
-import { useMantineTheme } from "@mantine/core";
+"use client";
+
import Card from "../../components/card/card";
import Section from "../../components/tailwind/section";
+import {
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselNext,
+ CarouselPrevious,
+} from "@/components/ui/carousel";
import { Blog as BlogType } from "../../interfaces/blog";
-const Blog = ({blogs}: { blogs: BlogType[] }) => {
- const theme = useMantineTheme();
- const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
- const isSmallScreen = useMediaQuery(`(min-width: ${theme.breakpoints.sm})`); // Technikally, sm and up
- const isMediumScreen = useMediaQuery(`(min-width: ${theme.breakpoints.md})`);
- const isLargeScreen = useMediaQuery(`(min-width: ${theme.breakpoints.lg})`);
- const isXLargeScreen = useMediaQuery(`(min-width: ${theme.breakpoints.xl})`);
-
- const sortedBlogs = blogs
- .filter(blog => !blog.hidden)
- .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
-
-
- const groupBy = (xs: BlogType[], f: (blog: BlogType) => string) =>
- xs.reduce((r, v) => {
- const k = f(v);
- (r[k] || (r[k] = [])).push(v);
- return r;
- }, {} as Record);
-
- const kebabCaseToSentenceCase = (str: string) =>
- str.split("-").map((word) => word[0].toUpperCase() + word.substring(1)).join(" ");
-
- const result = groupBy(sortedBlogs, (c) => c.type);
+const Blog = ({ blogs }: { blogs: BlogType[] }) => {
+ const sortedBlogs = blogs
+ .filter((blog) => !blog.hidden)
+ .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
- let slidesToScrollValue = 1;
- let visibleSlides = 1;
+ const groupBy = (xs: BlogType[], f: (blog: BlogType) => string) =>
+ xs.reduce((r, v) => {
+ const k = f(v);
+ (r[k] || (r[k] = [])).push(v);
+ return r;
+ }, {} as Record);
- if (isXLargeScreen) {
- slidesToScrollValue = 5;
- visibleSlides = 5;
- } else if (isLargeScreen) {
- slidesToScrollValue = 4;
- visibleSlides = 4;
- } else if (isMediumScreen) {
- slidesToScrollValue = 3;
- visibleSlides = 3;
- } else if (isSmallScreen) { // This is sm (since mobile is sm and down, and md,lg,xl are covered)
- slidesToScrollValue = 2;
- visibleSlides = 2;
- }
- // For mobile (base screen size), slidesToScrollValue and visibleSlides remain 1
+ const kebabCaseToSentenceCase = (str: string) =>
+ str
+ .split("-")
+ .map((word) => word[0].toUpperCase() + word.substring(1))
+ .join(" ");
- return (
- <>
- {Object.keys(result).length > 0 && Object.keys(result).map((sectionName) => {
- const slidesInSection = result[sectionName]?.length || 0;
- const showIndicators = mobile && slidesInSection > 1;
- const showControls = !mobile && slidesInSection > visibleSlides;
+ const result = groupBy(sortedBlogs, (c) => c.type);
- return (
-
-
- {result[sectionName]?.length > 0 && result[sectionName].map((blog, index) => {
- return (
-
-
- );
- })}
-
-
- );
- })}
-
- );
+ return (
+ <>
+ {Object.keys(result).length > 0 &&
+ Object.keys(result).map((sectionName) => (
+
+
+
+ {result[sectionName]?.map((blog, index) => (
+
+
+ ))}
+
+
+
+ ))}
+
+ );
};
export default Blog;
diff --git a/sections/experience/experience.tsx b/sections/experience/experience.tsx
new file mode 100644
index 0000000..9ea17a2
--- /dev/null
+++ b/sections/experience/experience.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "framer-motion";
+import Section from "../../components/tailwind/section";
+import { Badge } from "@/components/ui/badge";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+} from "@/components/ui/accordion";
+
+export interface ExperienceItem {
+ logo: string;
+ designation: string;
+ company: string;
+ from: string;
+ to: string;
+ location: string;
+ technologies: string[];
+}
+
+interface ExperienceProps {
+ experience: ExperienceItem[];
+}
+
+const Experience = ({ experience }: ExperienceProps) => {
+ return (
+
+
+
+ {experience.map((entry, index) => (
+
+
+
+
+
+
+ ))}
+
+
+
+ );
+};
+
+export default Experience;
diff --git a/sections/footer/footer.tsx b/sections/footer/footer.tsx
index 5f13c0d..e08c2cb 100644
--- a/sections/footer/footer.tsx
+++ b/sections/footer/footer.tsx
@@ -1,32 +1,65 @@
-import Profile from "../../components/profile/profile";
-
-const Footer = ({profiles}) => (
-
+const Footer = ({
+ profiles,
+}: {
+ profiles: { name: string; url: string }[];
+}) => (
+
+
+
);
export default Footer;
diff --git a/sections/interests/interests.tsx b/sections/interests/interests.tsx
index b441db1..8c75fd9 100644
--- a/sections/interests/interests.tsx
+++ b/sections/interests/interests.tsx
@@ -1,111 +1,142 @@
+"use client";
+
import Image from "next/image";
-import Section from "../../components/tailwind/section";
import Link from "next/link";
+import { motion } from "framer-motion";
+import Section from "../../components/tailwind/section";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
interface InterestsProps {
- illustration: string;
- interests: {
- title: string;
- description: string;
- }[];
+ illustration: string;
+ interests: {
+ title: string;
+ description: string;
+ }[];
}
-const Interests = ({ illustration, interests }: InterestsProps) => {
+const container = {
+ hidden: { opacity: 0 },
+ show: {
+ opacity: 1,
+ transition: { staggerChildren: 0.1 },
+ },
+};
- const getInterestType = (title: string): "blogging" | "photography" | "coding" | "other" => {
- const lowerTitle = title.toLowerCase();
- if (lowerTitle.includes("blog") || lowerTitle.includes("writing")) {
- return "blogging";
- }
- if (lowerTitle.includes("photo") || lowerTitle.includes("camera") || lowerTitle.includes("image")) {
- return "photography";
- }
- if (lowerTitle.includes("coding") || lowerTitle.includes("programming") || lowerTitle.includes("development")) {
- return "coding";
- }
- return "other";
- };
+const item = {
+ hidden: { opacity: 0, x: -16 },
+ show: { opacity: 1, x: 0 },
+};
+const Interests = ({ illustration, interests }: InterestsProps) => {
+ const getInterestType = (
+ title: string,
+ ): "blogging" | "photography" | "coding" | "other" => {
+ const lowerTitle = title.toLowerCase();
+ if (lowerTitle.includes("blog") || lowerTitle.includes("writing"))
+ return "blogging";
+ if (
+ lowerTitle.includes("photo") ||
+ lowerTitle.includes("camera") ||
+ lowerTitle.includes("image")
+ )
+ return "photography";
+ if (
+ lowerTitle.includes("coding") ||
+ lowerTitle.includes("programming") ||
+ lowerTitle.includes("development")
+ )
+ return "coding";
+ return "other";
+ };
- const getCTAButton = (interest: { title: string; description: string }) => {
- const type = getInterestType(interest.title);
- switch (type) {
- case "blogging":
- return (
-
- 📝 View My Blog Posts
-
- );
- case "photography":
- return (
-
- 📸 Explore Photo Gallery
-
- );
- case "coding":
- return (
-
- 💻 View My GitHub
-
- );
- default:
- return (
-
- );
- }
- };
+ const getCTA = (interest: { title: string; description: string }) => {
+ const type = getInterestType(interest.title);
+ switch (type) {
+ case "blogging":
+ return (
+
+ );
+ case "photography":
+ return (
+
+ );
+ case "coding":
+ return (
+
+ );
+ default:
+ return (
+
+ );
+ }
+ };
- return (
-
-
- );
+ return (
+
+
+ );
};
export default Interests;
diff --git a/sections/map/map.tsx b/sections/map/map.tsx
index 6c54550..1f5829e 100644
--- a/sections/map/map.tsx
+++ b/sections/map/map.tsx
@@ -1,53 +1,69 @@
-import React, {memo} from "react";
+"use client";
+
+import React, { memo } from "react";
import {
- ComposableMap,
- Geographies,
- Geography,
+ ComposableMap,
+ Geographies,
+ Geography,
} from "react-simple-maps";
-import { Tooltip } from "@mantine/core";
+import { motion } from "framer-motion";
import Section from "../../components/tailwind/section";
+import { Card } from "@/components/ui/card";
-// Type assertion to fix React 19 compatibility
-const ComposableMapComponent = ComposableMap as React.ComponentType;
+const ComposableMapComponent = ComposableMap as React.ComponentType<{
+ projection?: string;
+ projectionConfig?: { center: [number, number]; scale: number };
+ children?: React.ReactNode;
+}>;
-export const Map = ({countriesVisited}) => {
- return (
-
-
- );
+const Map = ({ countriesVisited }: { countriesVisited: string[] }) => {
+ return (
+
+
+
+
+
+ {({ geographies }) =>
+ geographies.map((geo) => (
+
+ {geo.properties.name}
+
+ ))
+ }
+
+
+
+
+
+ );
};
export default memo(Map);
+export { Map };
diff --git a/styles/global.scss b/styles/global.scss
index 050eb2c..e279985 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -2,35 +2,122 @@
@tailwind components;
@tailwind utilities;
+@layer base {
+ html,
+ body {
+ margin: 0;
+ padding: 0;
+ }
+ :root {
+ --background: #dfe5f2;
+ --foreground: #000000;
+ --main: #6C90FF;
+ --main-foreground: #000000;
+ --border: #000000;
+ --secondary-background: #e8ecf4;
+ --ring: #000000;
+ --radius: 5px;
+ --muted-foreground: #374151;
+ }
+ .dark {
+ --background: #272933;
+ --foreground: #eeefe9;
+ --main: #6C90FF;
+ --main-foreground: #000000;
+ --border: #000000;
+ --secondary-background: #212121;
+ --ring: #eeefe9;
+ --muted-foreground: #9ca3af;
+ }
+}
+
@layer components {
- .markdown-body h1, .markdown-body h2, .markdown-body h3 {
- @apply font-bold mt-8 mb-4 text-2xl dark:text-white;
+ .markdown-body h1,
+ .markdown-body h2,
+ .markdown-body h3 {
+ font-weight: 700;
+ margin-top: 2rem;
+ margin-bottom: 1rem;
+ font-size: 1.5rem;
+ line-height: 2rem;
+ }
+ .dark .markdown-body h1,
+ .dark .markdown-body h2,
+ .dark .markdown-body h3 {
+ color: #fafafa;
+ }
+ .markdown-body h4,
+ .markdown-body h5,
+ .markdown-body h6 {
+ font-weight: 600;
+ margin-top: 1.5rem;
+ margin-bottom: 0.5rem;
+ font-size: 1.25rem;
+ line-height: 1.75rem;
}
- .markdown-body h4, .markdown-body h5, .markdown-body h6 {
- @apply font-semibold mt-6 mb-2 text-xl dark:text-white;
+ .dark .markdown-body h4,
+ .dark .markdown-body h5,
+ .dark .markdown-body h6 {
+ color: #fafafa;
}
.markdown-body p {
- @apply mb-4 leading-relaxed;
+ margin-bottom: 1rem;
+ line-height: 1.625;
}
- .markdown-body ul, .markdown-body ol {
- @apply pl-6 mb-4;
+ .markdown-body ul,
+ .markdown-body ol {
+ padding-left: 1.5rem;
+ margin-bottom: 1rem;
}
.markdown-body li {
- @apply list-disc;
+ list-style-type: disc;
}
.markdown-body a {
- @apply text-brandMutedYellow-700 underline hover:text-brandMutedYellow-900 dark:text-brandMutedYellow-300 dark:hover:text-brandMutedYellow-100;
+ color: #4d80e6;
+ text-decoration: underline;
+ }
+ .markdown-body a:hover {
+ color: #2563eb;
+ }
+ .dark .markdown-body a {
+ color: #88aaee;
+ }
+ .dark .markdown-body a:hover {
+ color: #a5c4ff;
}
.markdown-body img {
- @apply my-4 rounded max-w-full h-auto;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ border-radius: 0.25rem;
+ max-width: 100%;
+ height: auto;
}
.markdown-body blockquote {
- @apply border-l-4 border-brandMutedYellow-500 pl-4 italic text-neutralGray-700 dark:text-neutralGray-300 mb-4;
+ border-left: 4px solid #88aaee;
+ padding-left: 1rem;
+ font-style: italic;
+ color: #495057;
+ margin-bottom: 1rem;
+ }
+ .dark .markdown-body blockquote {
+ color: #dee2e6;
}
.markdown-body pre {
- @apply bg-neutralGray-100 dark:bg-neutralGray-800 p-4 rounded mb-4 overflow-x-auto;
+ background-color: #f1f3f5;
+ padding: 1rem;
+ border-radius: 0.25rem;
+ margin-bottom: 1rem;
+ overflow-x: auto;
+ }
+ .dark .markdown-body pre {
+ background-color: #495057;
}
.markdown-body code {
- @apply bg-neutralGray-200 dark:bg-neutralGray-700 px-1 py-0.5 rounded;
+ background-color: #e9ecef;
+ padding: 0.125rem 0.25rem;
+ border-radius: 0.25rem;
+ }
+ .dark .markdown-body code {
+ background-color: #495057;
}
}
diff --git a/styles/theme.ts b/styles/theme.ts
deleted file mode 100644
index e669d99..0000000
--- a/styles/theme.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createTheme, MantineColorsTuple } from "@mantine/core";
-import { themeValues } from "./theme-values";
-
-const colors = themeValues.colors as unknown as Record;
-
-export const theme = createTheme({
- colors,
- primaryColor: themeValues.primaryColor,
- white: themeValues.white,
- black: themeValues.black,
- headings: themeValues.headings,
- fontFamily: themeValues.fontFamily,
- other: themeValues.other,
-});
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index e091e9a..a7be6e4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,6 +18,8 @@ module.exports = {
"./components/**/*.*",
"./sections/**/*.*",
"./pages/**/*.*",
+ "./lib/**/*.*",
+ "./styles/**/*.scss",
],
theme: {
container: {
@@ -49,11 +51,53 @@ module.exports = {
},
// You can also map other theme values like fontSize, spacing, borderRadius
// For example, for heading font sizes (this is a simplified example):
- // fontSize: {
- // 'h1-mantine': mantineColorsTheme.headings.sizes.h1.fontSize,
- // 'h2-mantine': mantineColorsTheme.headings.sizes.h2.fontSize,
- // // ... and so on
- // },
+ borderRadius: {
+ base: "5px",
+ },
+ borderWidth: {
+ "3": "3px",
+ },
+ boxShadow: {
+ shadow: "4px 4px 0px 0px #000",
+ "shadow-sm": "2px 2px 0px 0px #000",
+ },
+ translate: {
+ boxShadowX: "4px",
+ boxShadowY: "4px",
+ reverseBoxShadowX: "-4px",
+ reverseBoxShadowY: "-4px",
+ },
+ colors: {
+ main: "var(--main)",
+ "main-foreground": "var(--main-foreground)",
+ border: "var(--border)",
+ foreground: "var(--foreground)",
+ background: "var(--background)",
+ "secondary-background": "var(--secondary-background)",
+ ring: "var(--ring)",
+ "muted-foreground": "var(--muted-foreground)",
+ },
+ fontWeight: {
+ base: "500",
+ heading: "700",
+ },
+ fontFamily: {
+ heading: ["var(--font-space-grotesk)", "var(--font-sans)", "sans-serif"],
+ },
+ keyframes: {
+ "accordion-down": {
+ from: { height: "0" },
+ to: { height: "var(--radix-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--radix-accordion-content-height)" },
+ to: { height: "0" },
+ },
+ },
+ animation: {
+ "accordion-down": "accordion-down 0.2s ease-out",
+ "accordion-up": "accordion-up 0.2s ease-out",
+ },
},
},
plugins: [],
diff --git a/tsconfig.json b/tsconfig.json
index 265ea94..b4201d6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "es5",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
+ "lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
@@ -17,14 +13,12 @@
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
- "incremental": true
+ "incremental": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./*"]
+ }
},
- "include": [
- "next-env.d.ts",
- "**/*.ts",
- "**/*.tsx"
- ],
- "exclude": [
- "node_modules"
- ]
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
}
- {company.logo && (
+
- );
-
- const SkillsExpanded = () => (
-
+
+ {expandedCard && (
+
+ {expandedCard === "about" && (
+ toggleCard("about")}
+ >
+
+
+
+
+
+
+
+
+ )}
+ {expandedCard === "skills" && (
+ toggleCard("skills")}
+ >
+
+
+
+
+
+
- );
-
- const SkillsPreview = () => (
-
+ {skills.map((skill) => (
+
- +{experience.length - 2} more positions. Click to see all
-
- )}
-
- );
-
- const ExperienceExpanded = () => (
-
-
- {company.designation}
-
-
- {company.company} • {company.from} - {company.to}
-
-
-
-
- {experience.map((company, index) => (
- {`${company.designation} @ ${company.company}`}}
- bullet={
-
-
- }
- >
- {company.logo && (
-
-
-
-
-
- {company.technologies && company.technologies.map((technology) =>
- {technology} )}
-
-
+
+ {skill.name}
+
+
))}
-
-
-
- {skills.slice(0, 8).map((skill) => (
-
-
- {skill.name}
-
-
- ))}
-
- {skills.length > 8 && (
-
- +{skills.length - 8} more skills. Click to see all
-
+
+
+
+ )}
+
)}
-
-
- {skills.map((skill) => (
-
-
- {skill.name}
-
-
- ))}
-
-
- );
+
- return (
-
- {/* Profile Header Section */}
-
+
+
-
+
-
-
-
- {stats.length && stats.map((stat) => (
-
-
-
- {stat.count}
- {stat.label}
-
- ))}
-
-
- {profiles.length && profiles.map((profile) => (
-
+
+ {skills.length > 8 && (
+
+ {cardTypes.map(({ id, icon: Icon, label }) => {
+ if (expandedCard === id) return null;
+ return (
+
+ toggleCard(id)}
+ >
+
+
+
+
+
+ {id === "about" && (
+ <>
+
-
- );
+ 200
+ ? about.substring(0, 200) + "..."
+ : about,
+ }}
+ />
+
-
- {/* Name and Basic Info */}
- + Click to read more +
+ + )} + {id === "skills" && ( + <> +
+ {skills.slice(0, 8).map((skill) => (
+
-
+
))}
-
-
- {name}
-
-
-
-
-
-
-
- {education}
-
-
-
- {/* Expandable Cards Section */}
-
-
-
- {/* Expanded Card - Full Width */}
-
-
- {expandedCard === "about" && (
- toggleCard("about")}
- >
-
- )}
-
- {expandedCard === "experience" && (
- toggleCard("experience")}
- >
-
- )}
-
- {expandedCard === "skills" && (
- toggleCard("skills")}
- >
-
- )}
-
-
- {/* Collapsed Cards - Side by Side */}
-
-
-
- About Me
-
-
-
-
-
-
- Experience
-
-
-
-
-
-
- Skills
-
-
-
-
- {/* About Card */}
- {expandedCard !== "about" && (
-
-
- toggleCard("about")}
- >
-
-
- )}
-
- {/* Experience Card */}
- {expandedCard !== "experience" && (
-
-
-
- About Me
-
-
-
-
- toggleCard("experience")}
- >
-
-
- )}
-
- {/* Skills Card */}
- {expandedCard !== "skills" && (
-
-
-
- Experience
-
-
-
-
- toggleCard("skills")}
- >
-
-
- )}
-
-
-
- Skills
-
-
-
- + +{skills.length - 8} more. Click to see all +
+ )} + + )} + + + + ); + })} +
-
-
-
-
-
-
-
-
-
- Hi, I'm
-- - -
-
- {ctaLabel && (
-
- )}
-
-
+
+
+
+
+ {ctaLabel && (
+
+ )}
+
+
+ + Hi, I'm{" "} + + + + + +
+
+
+
+ {entry.logo ? (
+
+
+
+ {entry.designation} @ {entry.company}
+
+
+ {entry.from} – {entry.to}
+
+
+
+ {entry.technologies?.map((tech) => (
+
+ {tech}
+
+ ))}
+
+
+
+
+
+ + Thank you for stopping by! +
++ Let's get in touch on any of these platforms. +
+
+ {profiles.length > 0 &&
+ profiles.map((profile) => (
+
+ +
+
+ © {new Date().getFullYear()}{" "}
+
+ Prasheel
+
+
+
+ License
+
+
+
-
-
- {interests.length && interests.map((interest) => (
-
-
-
- ))}
-
-
-
-
-
-
- - {interest.title} -
-- {interest.description} -
- - {/* CTA Button */} -
- {getCTAButton(interest)}
-
-
-
-
+
+ {interests.length > 0 &&
+ interests.map((interest) => (
+
+
+
+
+ {interest.title}
+
+
+
+
+
+
+ ))}
+
+
+
+
+ {interest.description}
+{getCTA(interest)}
+
-
- How much of the World I've seen so - far?
-
-
-
- {({geographies}) =>
- geographies.map((geo) => (
-
-
- ))
- }
-
-
-
-