diff --git a/.prettierrc b/.prettierrc index 039dd3a..caf5b89 100644 --- a/.prettierrc +++ b/.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 } diff --git a/public/fonts/Antonio-Bold.ttf b/public/fonts/Antonio-Bold.ttf new file mode 100644 index 0000000..595f1ea Binary files /dev/null and b/public/fonts/Antonio-Bold.ttf differ diff --git a/src/components/contact/ContactComponent.astro b/src/components/contact/ContactComponent.astro new file mode 100644 index 0000000..bb35e62 --- /dev/null +++ b/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"; +--- + +
+
+ Ryan +
+
+
+
+

+ have an idea?
let's chat! +

+ +
+ rythondev@gmail.com +
+
+
+ + diff --git a/src/components/contact/ContactComponent.svelte b/src/components/contact/ContactComponent.svelte deleted file mode 100644 index 7313b3c..0000000 --- a/src/components/contact/ContactComponent.svelte +++ /dev/null @@ -1,45 +0,0 @@ - - -
-
-
- Get in Touch with me! -
-
- I'm always open to new opportunities and collaborations! -
- - ✉ Send me an email - -
- -
-
-
- - diff --git a/src/components/global/FooterComponent.astro b/src/components/global/FooterComponent.astro index 348cda1..8a0d84e 100644 --- a/src/components/global/FooterComponent.astro +++ b/src/components/global/FooterComponent.astro @@ -1,5 +1,5 @@ -
-
- Copyright © 2023-{new Date().getFullYear()} RythonDev. All Rights Reserved. -
+
+
+ Copyright © 2023-{new Date().getFullYear()} RythonDev. All Rights Reserved. +
diff --git a/src/components/global/NavBar.astro b/src/components/global/NavBar.astro index 99b3d5c..4536179 100644 --- a/src/components/global/NavBar.astro +++ b/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 = [ ---
Ryan diff --git a/src/components/images/contact_photo.webp b/src/components/images/contact_photo.webp new file mode 100644 index 0000000..e89c405 Binary files /dev/null and b/src/components/images/contact_photo.webp differ diff --git a/src/components/images/contact_photo_small.webp b/src/components/images/contact_photo_small.webp new file mode 100644 index 0000000..13bf3e6 Binary files /dev/null and b/src/components/images/contact_photo_small.webp differ diff --git a/src/components/ui/AnimatedToolTip.tsx b/src/components/ui/AnimatedToolTip.tsx new file mode 100644 index 0000000..d50c973 --- /dev/null +++ b/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(false); + const animationFrameRef = useRef(null); + + const handleMouseMove = (event: any) => { + if (animationFrameRef.current) { + cancelAnimationFrame(animationFrameRef.current); + } + }; + + return ( + <> +
setHovered(true)} + onMouseLeave={() => setHovered(false)} + > + + {hovered && ( + +
+
+
+ {text} +
+ + )} + + {!href && ( +
+ {children} +
+ )} + {href && ( + + {children} + + )} +
+ + ); +}; diff --git a/src/components/ui/HoverNavigation.tsx b/src/components/ui/HoverNavigation.tsx index 661511e..eaa00bb 100644 --- a/src/components/ui/HoverNavigation.tsx +++ b/src/components/ui/HoverNavigation.tsx @@ -1,136 +1,136 @@ import { cn } from "@/lib/utils"; import { - AnimatePresence, - motion, - useScroll, - useMotionValueEvent, + AnimatePresence, + motion, + useScroll, + useMotionValueEvent, } from "motion/react"; import { useState } from "react"; export const HoverNavigation = ({ - items, - className, + items, + className, }: { - items: { - label: string; - link: string; - }[]; - className?: string; + items: { + label: string; + link: string; + }[]; + className?: string; }) => { - let [hoveredIndex, setHoveredIndex] = useState(null); - const { scrollYProgress } = useScroll(); - const [visible, setVisible] = useState(true); + let [hoveredIndex, setHoveredIndex] = useState(null); + const { scrollYProgress } = useScroll(); + const [visible, setVisible] = useState(true); - useMotionValueEvent(scrollYProgress, "change", (current) => { - // Check if current is not undefined and is a number - if (typeof current === "number") { - let direction = current! - scrollYProgress.getPrevious()!; + useMotionValueEvent(scrollYProgress, "change", (current) => { + // Check if current is not undefined and is a number + if (typeof current === "number") { + let direction = current! - scrollYProgress.getPrevious()!; - if (scrollYProgress.get() < 0.05) { - setVisible(true); - } else { - if (direction > 0) { - setVisible(false); - } else { - setVisible(true); - } - } - } - }); + if (scrollYProgress.get() < 0.05 && current !== 1) { + setVisible(true); + } else { + if (direction > 0) { + setVisible(false); + } else { + setVisible(true); + } + } + } + }); - return ( - <> - - - Available for work - -
-
-
-
- - - {items.map((item, idx) => ( - setHoveredIndex(idx)} - onMouseLeave={() => setHoveredIndex(null)} - > - - {hoveredIndex === idx && ( - - )} - - {item.label} - - ))} - - - ); + return ( + <> + + + Available for work + +
+
+
+
+ + + {items.map((item, idx) => ( + setHoveredIndex(idx)} + onMouseLeave={() => setHoveredIndex(null)} + > + + {hoveredIndex === idx && ( + + )} + + {item.label} + + ))} + + + ); }; export const NavBarLink = ({ - className, - children, + className, + children, }: { - className?: string; - children: React.ReactNode; + className?: string; + children: React.ReactNode; }) => { - return ( -
- {children} -
- ); + return ( +
+ {children} +
+ ); }; diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index e97412d..027ee0d 100644 --- a/src/layouts/Layout.astro +++ b/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"; diff --git a/src/pages/contact.astro b/src/pages/contact.astro index 1bb9cac..7cbed4a 100644 --- a/src/pages/contact.astro +++ b/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";

Contact

-
-
- -
-
-

- Looking for a young developer with fresh ideas? -

-
-
-
- Whether it's sponsorships or collaboration - opportunities, hit me up! -
-
- -
-
+
diff --git a/src/pages/index.astro b/src/pages/index.astro index ac94a6e..98f6a43 100644 --- a/src/pages/index.astro +++ b/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"; ---