updated contact form

.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
 }

src/components/contact/ContactComponent.astro

@@ -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:rythondev@gmail.com"
+				text="Email me!"
+				client:load
+				className="text-xl font-bold underline transition-colors duration-75 hover:text-blue-500"
+				>rythondev@gmail.com</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.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-    import Socials from "../socials/Socials.svelte";
-</script>
-
-<div class="relative flex h-fit w-full flex-col items-center justify-center">
-    <div class="flex flex-col items-center justify-center">
-        <div
-            id="title"
-            class="animate-gradient mb-3 text-center text-3xl font-bold"
-        >
-            Get in Touch with me!
-        </div>
-        <div class="mb-10 px-5 text-center text-lg">
-            I'm always open to new opportunities and collaborations!
-        </div>
-
-        <a
-            class="flex flex-row items-center justify-center rounded-xl border-2 border-blue-300 px-5 py-5 text-center text-blue-300 transition-colors duration-300 ease-in-out hover:bg-blue-300 hover:text-black"
-            href="mailto:rythondev@gmail.com"
-            ><span class="mr-2 text-3xl">&#9993;</span> Send me an email</a
-        >
-
-        <div class="flex flex-row py-10 text-white">
-            <Socials />
-        </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/global/FooterComponent.astro

@@ -1,4 +1,4 @@
-<div class="flex w-full items-center justify-center pb-16">
+<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>

src/components/global/NavBar.astro

@@ -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/ui/AnimatedToolTip.tsx

@@ -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>
+		</>
+	);
+};

src/components/ui/HoverNavigation.tsx

@@ -27,7 +27,7 @@ export const HoverNavigation = ({
 		if (typeof current === "number") {
 			let direction = current! - scrollYProgress.getPrevious()!;
 
-            if (scrollYProgress.get() < 0.05) {
+			if (scrollYProgress.get() < 0.05 && current !== 1) {
 				setVisible(true);
 			} else {
 				if (direction > 0) {
@@ -61,7 +61,7 @@ export const HoverNavigation = ({
 					Available for work
 				</a>
 				<div
-                    className={`relative z-50 ml-3 w-5 ${visible ? "hidden" : "inline-block"}`}
+					className={`relative z-50 ml-3 ${visible ? "hidden" : "inline-block"}`}
 				>
 					<div className="absolute top-1/2 left-1/2 aspect-square w-[6px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-green-500"></div>
 					<div className="animate-glow absolute top-1/2 left-1/2 aspect-square w-[6px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-green-500"></div>

src/layouts/Layout.astro

@@ -51,6 +51,13 @@ import { ClientRouter } from "astro:transitions";
 		font-style: normal;
 	}
 
+	@font-face {
+		font-family: "Antonio";
+		src: url("/fonts/Antonio-Bold.ttf") format("truetype");
+		font-weight: bold;
+		font-style: normal;
+	}
+
 	/* Montserrat Fonts */
 	@font-face {
 		font-family: "Montserrat";

src/pages/contact.astro

@@ -1,7 +1,7 @@
 ---
 import NavBar from "../components/global/NavBar.astro";
 import Layout from "../layouts/Layout.astro";
-import ContactComponent from "../components/contact/ContactComponent.svelte";
+import ContactComponent from "../components/contact/ContactComponent.astro";
 import Card from "../components/global/Card.astro";
 import Footer from "../components/global/FooterComponent.astro";
 ---
@@ -13,26 +13,7 @@ import Footer from "../components/global/FooterComponent.astro";
 	<NavBar />
 	<div id="contact-component" class="mt-10 pt-20">
 		<h1 class="text-center text-5xl">Contact</h1>
-		<div class="mt-10 flex items-center justify-center">
-			<div class="w-[90%] md:w-[600px]">
-				<Card primaryColor="#40A2D8" className="animate-fadeIn">
-					<div class="px-8 py-8">
-						<div class="justify-left mb-3 flex w-full flex-col">
-							<h2
-								class="text-center text-xl font-bold text-balance"
-							>
-								Looking for a young developer with fresh ideas?
-							</h2>
-						</div>
-						<hr class="my-3 w-full" />
-						<div class="text-center text-balance">
-							Whether it's sponsorships or collaboration
-							opportunities, hit me up!
-						</div>
-					</div>
-				</Card>
-			</div>
-		</div>
+
 		<div class="mt-10">
 			<ContactComponent />
 		</div>

src/pages/index.astro

@@ -6,7 +6,7 @@ import Intro from "../components/home/Intro.astro";
 import Projects from "../components/projects/ProjectsComponent.astro";
 import Experience from "../components/experience/ExperienceComponent.astro";
 import Skills from "../components/skills/SkillsComponent.astro";
-import Contact from "../components/contact/ContactComponent.svelte";
+import Contact from "../components/contact/ContactComponent.astro";
 import Footer from "../components/global/FooterComponent.astro";
 ---