-
-
-
-
+
+
)
diff --git a/src/app/globals.css b/src/app/globals.css
index 8ccca9f..a3804a7 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,64 +2,70 @@
@tailwind components;
@tailwind utilities;
+@layer components {
+ .container {
+ @apply md:max-w-[768px] lg:max-w-[900px] xl:max-w-[1200px] 2xl:max-w-[1320px];
+ @apply px-4 sm:px-8 md:px-12 lg:px-16 xl:px-24;
+ }
+}
+
+.marquee-wrapper {
+ mask-image: linear-gradient(
+ to right,
+ rgba(0, 0, 0, 0),
+ rgba(0, 0, 0, 1) 20%,
+ rgba(0, 0, 0, 1) 80%,
+ rgba(0, 0, 0, 0)
+ );
+}
+
+@keyframes scrollLeft {
+ to {
+ left: -200px;
+ }
+}
+
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
-
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
-
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
-
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
-
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
-
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
-
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
-
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
-
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
-
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
-
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
-
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
-
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
-
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
-
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
-
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
-
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
-
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
@@ -74,26 +80,3 @@
@apply bg-background text-foreground;
}
}
-
-@layer components {
- .container {
- @apply md:max-w-[768px] lg:max-w-[900px] xl:max-w-[1200px] 2xl:max-w-[1320px];
- @apply px-4 sm:px-8 md:px-12 lg:px-16 xl:px-24;
- }
-}
-
-.marquee-wrapper {
- mask-image: linear-gradient(
- to right,
- rgba(0, 0, 0, 0),
- rgba(0, 0, 0, 1) 20%,
- rgba(0, 0, 0, 1) 80%,
- rgba(0, 0, 0, 0)
- );
-}
-
-@keyframes scrollLeft {
- to {
- left: -200px;
- }
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e934146..4185d05 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,9 +1,10 @@
+import { FavIcon } from "@/lib/types"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
-import "./globals.css"
-import api from "../api"
import NextHead from "next/head"
-import { FavIcon } from "@/lib/types"
+
+import api from "../api"
+import "./globals.css"
const inter = Inter({ subsets: ["latin"] })
@@ -53,8 +54,8 @@ async function Head() {
href={favicon.maskIcon.href}
color={favicon.maskIcon.color}
/>
+
-
-
+
-
-
-
+
+
+
-
-
+
+
+
- {initials}
-
- )
-}
-export default MainAvatar
diff --git a/src/components/global/CanvasAnimation.tsx b/src/components/global/CanvasAnimation.tsx
new file mode 100644
index 0000000..ac90033
--- /dev/null
+++ b/src/components/global/CanvasAnimation.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import React, { useEffect, useRef } from "react"
+
+interface Particle {
+ x: number;
+ y: number;
+ vx: number;
+ vy: number;
+ color: string;
+ speed: number;
+ friction: number;
+}
+type Props = {
+ className?: string;
+};
+const CanvasAnimation: React.FC = (props: Props) => {
+ const { className } = props
+ const canvasRef = useRef(null)
+
+ useEffect(() => {
+ const canvas = canvasRef.current
+ if (!canvas) return
+
+ const context = canvas.getContext("2d")
+ if (!context) return
+
+ let width: number, height: number, mouseX: number, mouseY: number
+ const particles: Particle[] = []
+ const maxParticles = 200
+ const radius = 3
+ const colors = [
+ "#0066ff",
+ "#0099ff",
+ "#00ccff",
+ "#33ccff",
+ "#66ccff",
+ "#99ccff",
+ "#00ff99",
+ "#00ff66",
+ "#00ff33",
+ "#00ff00",
+ ]
+
+ const resize = () => {
+ width = canvas.width = window.innerWidth
+ height = canvas.height = window.innerHeight
+ }
+
+ const createParticles = () => {
+ for (let i = 0; i < maxParticles; i++) {
+ particles.push({
+ x: Math.random() * width,
+ y: Math.random() * height,
+ vx: Math.random() * 2 - 1,
+ vy: Math.random() * 2 - 1,
+ color: colors[Math.floor(Math.random() * colors.length)],
+ speed: Math.random() * 0.5 + 0.5,
+ friction: 0.95,
+ })
+ }
+ }
+
+ const drawParticles = () => {
+ context.clearRect(0, 0, width, height)
+ particles.forEach((p) => {
+ context.beginPath()
+ context.arc(p.x, p.y, radius, 0, Math.PI * 2)
+ context.fillStyle = p.color
+ context.fill()
+ })
+ }
+
+ const updateParticles = () => {
+ particles.forEach((p) => {
+ p.x += p.vx * p.speed
+ p.y += p.vy * p.speed
+
+ const dx = p.x - mouseX
+ const dy = p.y - mouseY
+ const distance = Math.sqrt(dx * dx + dy * dy)
+ const maxDistance = 100
+ const forceDirectionX = dx / distance
+ const forceDirectionY = dy / distance
+ const maxForce = 0.5
+
+ if (distance < maxDistance) {
+ const force = (maxDistance - distance) / maxDistance
+ p.vx += forceDirectionX * force * maxForce
+ p.vy += forceDirectionY * force * maxForce
+ }
+
+ p.vx *= p.friction
+ p.vy *= p.friction
+
+ if (p.x < 0 || p.x > width) p.vx *= -1
+ if (p.y < 0 || p.y > height) p.vy *= -1
+ })
+ }
+
+ const animate = () => {
+ drawParticles()
+ updateParticles()
+ requestAnimationFrame(animate)
+ }
+
+ const handleMouseMove = (event: MouseEvent) => {
+ mouseX = event.clientX
+ mouseY = event.clientY
+ }
+
+ const handleTouchMove = (event: TouchEvent) => {
+ mouseX = event.touches[0].clientX
+ mouseY = event.touches[0].clientY
+ }
+
+ window.addEventListener("resize", resize)
+ canvas.addEventListener("mousemove", handleMouseMove)
+ canvas.addEventListener("touchmove", handleTouchMove)
+
+ resize()
+ createParticles()
+ animate()
+
+ return () => {
+ window.removeEventListener("resize", resize)
+ canvas.removeEventListener("mousemove", handleMouseMove)
+ canvas.removeEventListener("touchmove", handleTouchMove)
+ }
+ }, [])
+
+ return (
+
+ )
+}
+
+export default CanvasAnimation
diff --git a/src/components/global/ContactLinks.tsx b/src/components/global/ContactLinks.tsx
index a012c9d..6fab8e3 100644
--- a/src/components/global/ContactLinks.tsx
+++ b/src/components/global/ContactLinks.tsx
@@ -17,7 +17,7 @@ export default function ContactLinks(props: Props) {
return (
diff --git a/src/components/global/DarkModeToggle.tsx b/src/components/global/DarkModeToggle.tsx
new file mode 100644
index 0000000..c3d8774
--- /dev/null
+++ b/src/components/global/DarkModeToggle.tsx
@@ -0,0 +1,51 @@
+"use client"
+
+import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import { useEffect, useState } from "react"
+
+import Icon from "./Icon"
+
+const DarkModeToggle = () => {
+ const [darkMode, setDarkMode] = useState(false)
+
+ useEffect(() => {
+ const storedPreference = localStorage.getItem("darkMode") === "true"
+ setDarkMode(storedPreference)
+ }, [])
+
+ useEffect(() => {
+ if (darkMode) {
+ document.documentElement.classList.add("dark")
+ localStorage.setItem("darkMode", "true")
+ } else {
+ document.documentElement.classList.remove("dark")
+ localStorage.setItem("darkMode", "false")
+ }
+ }, [darkMode])
+
+ return (
+
+ )
+}
+
+export default DarkModeToggle
diff --git a/src/components/global/DateSpan.tsx b/src/components/global/DateSpan.tsx
new file mode 100644
index 0000000..858ef27
--- /dev/null
+++ b/src/components/global/DateSpan.tsx
@@ -0,0 +1,35 @@
+type Props = {
+ date: {
+ start: string;
+ end: string | null;
+ };
+};
+
+export default function DateSpan({ date }: Props) {
+ const renderDate = (dateProp: string | null) => {
+ if (!dateProp) return "Now"
+
+ const date = new Date(dateProp)
+ const month = date.toLocaleString("default", {
+ month: "short",
+ timeZone: "UTC",
+ })
+
+ const year = date.toLocaleString("default", {
+ year: "2-digit",
+ timeZone: "UTC",
+ })
+
+ return `${month} '${year}`
+ }
+
+ return (
+ } = {}
+
+Object.keys(icons).forEach((key) => {
+ Icon[key] = (props: LucideProps) => {
+ const IconComponent = icons[key]
+ return IconComponent ?
+
+
+ —
+
+
+
+ )
+}
diff --git a/src/components/global/Icon.tsx b/src/components/global/Icon.tsx
new file mode 100644
index 0000000..7ff85c2
--- /dev/null
+++ b/src/components/global/Icon.tsx
@@ -0,0 +1,14 @@
+import icons from "@/lib/icons"
+import { LucideProps } from "lucide-react"
+import React from "react"
+
+const Icon: { [key: string]: React.FC
+
+ {initials}
+
+ )
+}
+export default MainAvatar
diff --git a/src/components/global/MainHeader.tsx b/src/components/global/MainHeader.tsx
new file mode 100644
index 0000000..1c4dc60
--- /dev/null
+++ b/src/components/global/MainHeader.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import { useApi } from "@/components/providers/DataProvider"
+import { cn } from "@/lib/utils"
+import Image from "next/image"
+import type { ForwardedRef, PropsWithChildren, ReactNode } from "react"
+import { forwardRef } from "react"
+
+type Props = PropsWithChildren & {
+ className?: string;
+};
+
+export const MainHeader = forwardRef(
+ (props: Props, ref: ForwardedRef): ReactNode => {
+ const { className } = props
+ const { data } = useApi()
+ const { logo } = data.site.attributes
+
+ return (
+
+
+
+
+ )
+ },
+)
+
+MainHeader.displayName = "MainHeader"
+
+export default MainHeader
diff --git a/src/components/global/MainNav.tsx b/src/components/global/MainNav.tsx
new file mode 100644
index 0000000..ac45d8f
--- /dev/null
+++ b/src/components/global/MainNav.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import {
+ Drawer,
+ DrawerClose,
+ DrawerContent,
+ DrawerDescription,
+ DrawerFooter,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from "@/components/ui/drawer"
+import { ContactLink } from "@/lib/types"
+
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"
+import Icon from "./Icon"
+
+type Props = {
+ links: ContactLink[];
+ title?: string;
+ description?: string;
+};
+
+export default function MainNav(props: Props) {
+ const { links: linksProp = [], title, description } = props
+ const renderTrigger = (
+
+ )
+
+ const Nav = () => (
+
+ )
+
+ return (
+ <>
+
-
- {label}
-
-
- ))
-
- return (
-
-
-
-
-
-
-
- )
-}
diff --git a/src/components/MainHeader.tsx b/src/components/global/NameHeader.tsx
similarity index 60%
rename from src/components/MainHeader.tsx
rename to src/components/global/NameHeader.tsx
index 30bb348..013f984 100644
--- a/src/components/MainHeader.tsx
+++ b/src/components/global/NameHeader.tsx
@@ -1,4 +1,4 @@
-import { useApi } from "@/lib/providers/DataProvider"
+import { useApi } from "@/components/providers/DataProvider"
const NameHeader = () => {
const { data } = useApi()
@@ -7,7 +7,7 @@ const NameHeader = () => {
return (
)
}
diff --git a/src/components/global/RuleHeader.tsx b/src/components/global/RuleHeader.tsx
new file mode 100644
index 0000000..8f832fc
--- /dev/null
+++ b/src/components/global/RuleHeader.tsx
@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from "react"
+
+export default function RuleHeader(props: PropsWithChildren) {
+ return (
+ (null)
+ const [unit, setUnit] = useState<"fahrenheit" | "celsius">("fahrenheit")
+
+ // Fetch the temperature unit preference from local storage
+ useEffect(() => {
+ const savedUnit = localStorage.getItem("temperatureUnit")
+ if (savedUnit === "celsius" || savedUnit === "fahrenheit") {
+ setUnit(savedUnit)
+ }
+ }, [])
+
+ const fetchWeather = async () => {
+ const params = {
+ ...coords,
+ hourly: "temperature_2m",
+ temperature_unit: "fahrenheit",
+ wind_speed_unit: "mph",
+ }
+
+ const queryString = new URLSearchParams(params as any).toString()
+ const url = `https://api.open-meteo.com/v1/forecast?${queryString}`
+
+ try {
+ const response = await fetch(url)
+ if (!response.ok) {
+ throw new Error("Network response was not ok")
+ }
+ const data = await response.json()
+ const weatherData = data.hourly
+ setTemperature(weatherData.temperature_2m[0])
+ } catch (error) {
+ console.error("Error fetching weather data:", error)
+ }
+ }
+
+ useEffect(() => {
+ fetchWeather()
+ }, [])
+
+ const toggleUnit = () => {
+ const newUnit = unit === "fahrenheit" ? "celsius" : "fahrenheit"
+ setUnit(newUnit)
+ localStorage.setItem("temperatureUnit", newUnit) // Save the preference to local storage
+ }
+
+ const getDisplayText = () => {
+ if (unit === "fahrenheit" && temperature !== null) {
+ return `${Math.round(temperature)}º F in`
+ } else if (unit === "celsius" && temperature !== null) {
+ const celsius = ((temperature - 32) * 5) / 9
+ return `${celsius.toFixed(2)}º C in`
+ } else {
+ return ""
+ }
+ }
+
+ return (
+
+ )
+}
+
+export default WeatherComponent
diff --git a/src/components/global/WorkAvailability.tsx b/src/components/global/WorkAvailability.tsx
index 090ec01..429d645 100644
--- a/src/components/global/WorkAvailability.tsx
+++ b/src/components/global/WorkAvailability.tsx
@@ -1,20 +1,20 @@
import { cn } from "@/lib/utils"
type Props = {
- reverse?: boolean
-}
+ reverse?: boolean;
+};
export default function WorkAvailability(props: Props) {
const { reverse = false } = props
return (
,
+ VariantProps {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+ return (
+
+ )
+}
+
+export { Badge, badgeVariants }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..77e9fb7
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 0000000..29c7bd2
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+
+
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/src/lib/convertNewLinesToHTML.ts b/src/lib/convertNewLinesToHTML.ts
new file mode 100644
index 0000000..0150824
--- /dev/null
+++ b/src/lib/convertNewLinesToHTML.ts
@@ -0,0 +1,10 @@
+function convertNewLinesToHTML(inputString: string) {
+ const paragraphs = inputString.split("\n")
+
+ const htmlParagraphs = paragraphs.map((paragraph) => `>;
+};
+
+const InstagramSVG = () => (
+
+)
+
+const LinkedInSVG = () => (
+
+)
+
+const icons: IconsMap = {
+ send: Send,
+ mail: Mail,
+ moon: MoonStar,
+ sun: Sun,
+ linkedIn: LinkedInSVG,
+ github: SquareTerminal,
+ readCV: File,
+ mapPin: MapPin,
+ instagram: InstagramSVG,
+}
+
+export default icons
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 5cbd601..6fbc0c0 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,13 +1,16 @@
export type ContactLink = {
url: string;
label: string;
+ icon?: string;
};
export interface Role {
title: string;
type: string;
- start_date: string;
- end_date: string | null;
+ date: {
+ start: string;
+ end: string | null;
+ };
duration: string;
location?: string;
description: string;
@@ -28,3 +31,11 @@ export type FavIcon = {
sizes: string;
type?: string;
};
+
+export type Experience = {
+ company: string;
+ location?: string;
+ logo?: string;
+ visible?: boolean;
+ roles: Role[];
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 66d2c55..6493e2f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,13 +1,14 @@
import type { Config } from "tailwindcss"
import colors from "tailwindcss/colors"
-import defaultTheme from "tailwindcss/defaultTheme"
+
const config = {
- darkMode: ["class"],
+ darkMode: "class",
content: [
"./pages/**/*.{ts,tsx}",
"./components/**/*.{ts,tsx}",
"./app/**/*.{ts,tsx}",
"./src/**/*.{ts,tsx}",
+ "./lib/responsiveClasses.tsx",
],
prefix: "",
theme: {
@@ -18,13 +19,38 @@ const config = {
},
},
extend: {
- fontSize: {
- "heading-xs": ["clamp(1rem, 1.5vw + 0.5rem, 1.5rem)", {}],
- "heading-sm": ["clamp(1.25rem, 2vw + 0.75rem, 2rem)", {}],
- "heading-md": ["clamp(1.5rem, 2.5vw + 1rem, 2.5rem)", {}],
- "heading-lg": ["clamp(1.75rem, 3vw + 1.25rem, 3rem)", {}],
- "heading-xl": ["clamp(2rem, 3.5vw + 1.5rem, 3.5rem)", {}],
- body: ["clamp(0.875rem, 1vw + 0.5rem, 1.5rem)", {}],
+ typography: {
+ scale: {
+ css: {
+ fontSize: "clamp(0.875rem, 1vw + 0.5rem, 1.5rem)",
+ p: {
+ fontSize: "clamp(0.875rem, 1vw + 0.5rem, 1.5rem)",
+ },
+ h1: {
+ fontSize: "clamp(2rem, 3.5vw + 1.5rem, 3.5rem)",
+ fontWeight: "normal",
+ lineHeight: "1.25",
+ },
+ h2: {
+ fontSize: "clamp(1.75rem, 3vw + 1.25rem, 3rem)",
+ fontWeight: "normal",
+ lineHeight: "1.25",
+ },
+ h3: {
+ fontSize: "clamp(1.5rem, 2.5vw + 1rem, 2.5rem)",
+ fontWeight: "normal",
+ lineHeight: "1.25",
+ },
+ h4: {
+ fontSize: "clamp(1.25rem, 2vw + 0.75rem, 2rem)",
+ lineHeight: "1.25",
+ },
+ h5: {
+ fontSize: "clamp(1rem, 1.5vw + 0.5rem, 1.5rem)",
+ lineHeight: "1.25",
+ },
+ },
+ },
},
colors: {
border: "hsl(var(--border))",
@@ -68,6 +94,10 @@ const config = {
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
+ fadeIn: {
+ "0%": { opacity: "0" },
+ "100%": { opacity: "1" },
+ },
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
@@ -80,10 +110,12 @@ const config = {
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
+
+ fadeIn: "fadeIn 1s ease-in-out",
},
},
},
- plugins: [require("tailwindcss-animate")],
+ plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
} satisfies Config
export default config
{jobs.map((job, index) => (
-
)
diff --git a/src/components/global/MainAvatar.tsx b/src/components/global/MainAvatar.tsx
new file mode 100644
index 0000000..68ad69f
--- /dev/null
+++ b/src/components/global/MainAvatar.tsx
@@ -0,0 +1,25 @@
+import { useApi } from "@/components/providers/DataProvider"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import Image from "next/image"
+
+const MainAvatar = () => {
+ const { data } = useApi()
+ const { name, picture } = data.profile.attributes
+ const initials = name
+ .split(" ")
+ .map((n: string) => n[0])
+ .join("")
+ return (
+
-
+
+
))}
+
-
-
+
+
+
+
+ {props.children}
+
+
+
+ {renderTrigger}
+
+
+
+
+
+
+
+ {title}
+{description}
+
+
+ {renderTrigger}
+
+
+
+
+
+ )
+}
diff --git a/src/components/global/MobileNav.tsx b/src/components/global/MobileNav.tsx
deleted file mode 100644
index 0c4476b..0000000
--- a/src/components/global/MobileNav.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-"use client"
-import { buttonVariants, Button } from "@/components/ui/button"
-import {
- Drawer,
- DrawerClose,
- DrawerContent,
- DrawerDescription,
- DrawerFooter,
- DrawerHeader,
- DrawerTitle,
- DrawerTrigger,
-} from "@/components/ui/drawer"
-
-import { ContactLink } from "@/lib/types"
-import { cn } from "@/lib/utils"
-
-type Props = {
- className?: string
- links: ContactLink[]
-}
-
-export default function MobileNav(props: Props) {
- const { className = "", links: linksProp = [] } = props
-
- const links = linksProp.map(({ url, label }, index: number) => (
-
+
+ {title}
+ {description}
+
+
+
+
+
+
+
+
+
-
- Let's connect
-
- Find me on social media or send me an email
-
-
-
-
-
-
-
-
-
- {name}
-{title}
+{title}
+ {props.children}
+
+
+ )
+}
diff --git a/src/components/global/Weather.tsx b/src/components/global/Weather.tsx
new file mode 100644
index 0000000..03675cf
--- /dev/null
+++ b/src/components/global/Weather.tsx
@@ -0,0 +1,72 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+const coords = {
+ latitude: 40.6782,
+ longitude: -73.9442,
+}
+
+const WeatherComponent: React.FC = () => {
+ const [temperature, setTemperature] = useState
-
-
+
+
Available for work
diff --git a/src/lib/providers/DataProvider.tsx b/src/components/providers/DataProvider.tsx
similarity index 100%
rename from src/lib/providers/DataProvider.tsx
rename to src/components/providers/DataProvider.tsx
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..2c57536
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,35 @@
+import { cn } from "@/lib/utils"
+import { type VariantProps, cva } from "class-variance-authority"
+import * as React from "react"
+
+const badgeVariants = cva(
+ "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+ {
+ variants: {
+ variant: {
+ default:
+ "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+ secondary:
+ "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ destructive:
+ "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+ outline: "text-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ },
+)
+
+export interface BadgeProps
+ extends React.HTMLAttributes${paragraph}
`) + + const htmlString = htmlParagraphs.join("") + + return htmlString +} +export default convertNewLinesToHTML diff --git a/src/lib/icons.tsx b/src/lib/icons.tsx new file mode 100644 index 0000000..9e49f92 --- /dev/null +++ b/src/lib/icons.tsx @@ -0,0 +1,63 @@ +import { + File, + Mail, + MapPin, + MoonStar, + Send, + SquareTerminal, + Sun, +} from "lucide-react" + +type IconsMap = { + [key: string]: React.FC