updated contact form

Author: liyunze-coding

.prettierrc

@@ -1,4 +1,9 @@
 {
-  "plugins": ["prettier-plugin-svelte", "prettier-plugin-astro","prettier-plugin-tailwindcss"],
-  "tabWidth": 4
+    "plugins": [
+        "prettier-plugin-svelte",
+        "prettier-plugin-astro",
+        "prettier-plugin-tailwindcss"
+    ],
+    "tabWidth": 4,
+    "useTabs": true
 }

public/fonts/Antonio-Bold.ttf

@@ -0,0 +1,59 @@
+---
+import { Image } from "astro:assets";
+import contactPhoto from "@/components/images/contact_photo.webp";
+import { AnimatedTooltip } from "@/components/ui/AnimatedToolTip";
+---
+
+<div
+	class="relative flex h-[400px] w-full flex-col-reverse items-start justify-center gap-10 lg:flex-row"
+>
+	<div class="relative flex w-1/2 items-end justify-end">
+		<Image
+			src={contactPhoto}
+			alt="Ryan"
+			width={300}
+			class="absolute top-0 right-0 aspect-[3/4] -translate-x-7 translate-y-3 rounded-3xl object-cover"
+		/>
+		<div
+			class="absolute top-0 right-0 -z-10 aspect-[3/4] w-[300px] -translate-x-10 translate-y-5 rounded-3xl bg-[#c98703]"
+		>
+		</div>
+	</div>
+	<div
+		class="flex h-full w-1/2 flex-col items-start justify-center text-left"
+	>
+		<h1
+			class="[font-family:'Antonio',sans-serif] text-5xl leading-14 font-bold uppercase"
+		>
+			have an idea? <br /> let's chat!
+		</h1>
+
+		<div class="mt-10 flex w-fit items-center justify-center">
+			<AnimatedTooltip
+				href="mailto:[email protected]"
+				text="Email me!"
+				client:load
+				className="text-xl font-bold underline transition-colors duration-75 hover:text-blue-500"
+				>[email protected]</AnimatedTooltip
+			>
+		</div>
+	</div>
+</div>
+
+<style>
+	#title {
+		background: linear-gradient(
+			90deg,
+			#85e6c5 0%,
+			#a084e8 45%,
+			#33bbc5 100%
+		);
+
+		background-size: 300%;
+
+		background-clip: text;
+		-webkit-background-clip: text;
+
+		-webkit-text-fill-color: transparent;
+	}
+</style>

src/components/contact/ContactComponent.astro

@@ -1,5 +1,5 @@
-<div class="flex w-full items-center justify-center pb-16">
-    <div class="text-center">
-        Copyright © 2023-{new Date().getFullYear()} RythonDev. All Rights Reserved.
-    </div>
+<div class="flex w-full items-center justify-center py-16">
+	<div class="text-center">
+		Copyright © 2023-{new Date().getFullYear()} RythonDev. All Rights Reserved.
+	</div>
 </div>

src/components/contact/ContactComponent.svelte

@@ -1,7 +1,7 @@
 ---
 import { HoverNavigation } from "@/components/ui/HoverNavigation";
 import { Image } from "astro:assets";
-import pfp from "@/components/images/pfp_new.webp";
+import pfp from "@/components/images/contact_photo_small.webp";
 
 const navLinks = [
 	{
@@ -28,7 +28,7 @@ const navLinks = [
 ---
 
 <div
-	class="bg-secondary fixed top-5 left-1/2 z-30 box-border flex -translate-x-1/2 items-center justify-center overflow-auto rounded-full border-2 border-solid border-gray-700 px-5 py-3"
+	class="bg-secondary/90 fixed top-5 left-1/2 z-30 box-border flex -translate-x-1/2 items-center justify-center overflow-auto rounded-full border-2 border-solid border-gray-700 px-5 py-3"
 >
 	<Image src={pfp} alt="Ryan" width={50} class="mr-3 rounded-full" />
 	<HoverNavigation items={navLinks} client:load />

src/components/global/FooterComponent.astro

@@ -0,0 +1,94 @@
+"use client";
+
+import { useState, useRef } from "react";
+import {
+	motion,
+	useTransform,
+	AnimatePresence,
+	useMotionValue,
+	useSpring,
+} from "motion/react";
+import { cn } from "@/lib/utils";
+
+export const AnimatedTooltip = ({
+	className,
+	children,
+	text,
+	href,
+}: {
+	className?: string;
+	children: React.ReactNode;
+	text: string;
+	href?: string;
+}) => {
+	const [hovered, setHovered] = useState<boolean>(false);
+	const animationFrameRef = useRef<number | null>(null);
+
+	const handleMouseMove = (event: any) => {
+		if (animationFrameRef.current) {
+			cancelAnimationFrame(animationFrameRef.current);
+		}
+	};
+
+	return (
+		<>
+			<div
+				className="group relative -mr-4"
+				onMouseEnter={() => setHovered(true)}
+				onMouseLeave={() => setHovered(false)}
+			>
+				<AnimatePresence>
+					{hovered && (
+						<motion.div
+							initial={{ opacity: 0, y: 20, scale: 0.6 }}
+							animate={{
+								opacity: 1,
+								y: 10,
+								scale: 1,
+								transition: {
+									type: "spring",
+									stiffness: 260,
+									damping: 10,
+								},
+							}}
+							exit={{ opacity: 0, y: 20, scale: 0.6 }}
+							style={{
+								whiteSpace: "nowrap",
+							}}
+							className="absolute -top-16 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center justify-center rounded-md bg-black px-4 py-2 text-xs shadow-xl"
+						>
+							<div className="absolute inset-x-10 -bottom-px z-30 h-px w-[20%] bg-gradient-to-r from-transparent via-emerald-500 to-transparent" />
+							<div className="absolute -bottom-px left-10 z-30 h-px w-[40%] bg-gradient-to-r from-transparent via-sky-500 to-transparent" />
+							<div className="relative z-30 text-base font-bold text-white">
+								{text}
+							</div>
+						</motion.div>
+					)}
+				</AnimatePresence>
+				{!href && (
+					<div
+						onMouseMove={handleMouseMove}
+						className={cn(
+							"relative h-14 w-14 transition duration-500 group-hover:z-30",
+							className,
+						)}
+					>
+						{children}
+					</div>
+				)}
+				{href && (
+					<a
+						href={href}
+						onMouseMove={handleMouseMove}
+						className={cn(
+							"relative h-14 w-14 transition duration-500 group-hover:z-30",
+							className,
+						)}
+					>
+						{children}
+					</a>
+				)}
+			</div>
+		</>
+	);
+};