switched to Bun, updating navbar

astro.config.mjs

@@ -6,9 +6,11 @@ import tailwindcss from "@tailwindcss/vite";
 
 import svelte from "@astrojs/svelte";
 
+import react from "@astrojs/react";
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [mdx(), svelte()],
+    integrations: [mdx(), svelte(), react()],
 
     server: {
         port: 8008,
@@ -24,5 +26,4 @@ export default defineConfig({
     image: {
         service: passthroughImageService(),
     },
-
 });

package.json

@@ -11,13 +11,21 @@
     },
     "dependencies": {
         "@astrojs/mdx": "^4.3.0",
+        "@astrojs/react": "^4.3.0",
         "@astrojs/svelte": "^7.1.0",
         "@tailwindcss/vite": "^4.1.8",
+        "@types/react": "^19.1.9",
+        "@types/react-dom": "^19.1.7",
         "astro": "^5.10.0",
         "caniuse-lite": "^1.0.30001698",
+        "clsx": "^2.1.1",
         "moment": "^2.30.1",
         "moment-timezone": "^0.6.0",
+        "motion": "^12.23.12",
+        "react": "^19.1.1",
+        "react-dom": "^19.1.1",
         "svelte": "^5.33.16",
+        "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.8",
         "typescript": "^5.8.3"
     },

src/components/experience/ExperienceComponent.astro

@@ -6,8 +6,8 @@ import Line from "../global/NetworkLine.astro";
 <div id="Experience" class="h-fit">
 	<h1 class="text-center text-5xl">Experience</h1>
 	<div class="flex flex-col items-center pt-10">
-		<div class="w-[90%] md:w-[600px]">
+		<div class="w-[90%] md:w-[600px] lg:w-1/2">
-			<Card primaryColor="#F6DFD8">
+			<Card primaryColor="#F6DFD8" className="animate-fadeIn">
 				<div class="px-4 py-4 md:px-8 md:py-8">
 					<div class="mb-3 flex w-full flex-col justify-start gap-1">
 						<h2 class="text-xl font-bold">Full Stack Developer</h2>
@@ -19,20 +19,27 @@ import Line from "../global/NetworkLine.astro";
 						Led implementation of frontend technology stack for
 						websites. Worked closely with UI/UX designers to
 						translate designs into code, and integrate smoothly with
-						CMS. Performing research and development for backend
+						the CMS. Performing research and development for backend
 						projects.
 					</p>
 					<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
-
+					<div
+						class="flex flex-col items-start justify-start gap-0 md:flex-row md:gap-10"
+					>
 						<ul class="list-inside list-disc">
+							<li>NextJS</li>
+							<li>React</li>
 							<li>Astro</li>
+						</ul>
+						<ul class="list-inside list-disc">
 							<li>Typescript</li>
 							<li>TailwindCSS</li>
 						</ul>
 					</div>
+				</div>
 			</Card>
 			<Line height="50px" />
-			<Card primaryColor="#F6DFD8">
+			<Card primaryColor="#F6DFD8" className="view-fadeUp">
 				<div class="px-4 py-4 md:px-8 md:py-8">
 					<div class="mb-3 flex w-full flex-col justify-start gap-1">
 						<h2 class="text-xl font-bold">
@@ -42,8 +49,8 @@ import Line from "../global/NetworkLine.astro";
 					</div>
 					<hr class="mb-3 w-full" />
 					<p class="mb-3">
-						Currently pursuing my Bachelor's degree in Computer
+						Awarded a 50% Vice-Chancellor Scholarship to study
-						Science in Australia as a 50% Vice-Chancellor Scholar.
+						Bachelor's in Computer Science.
 					</p>
 					<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
 					<div
@@ -53,9 +60,9 @@ import Line from "../global/NetworkLine.astro";
 							<li>Java</li>
 							<li>Kotlin</li>
 							<li>C#</li>
-							<li>Vue.JS</li>
 						</ul>
 						<ul class="list-inside list-disc">
+							<li>Vue.JS</li>
 							<li>MongoDB</li>
 							<li>PostgreSQL</li>
 						</ul>
@@ -64,7 +71,7 @@ import Line from "../global/NetworkLine.astro";
 			</Card>
 
 			<Line height="50px" />
-			<Card primaryColor="#F6DFD8">
+			<Card primaryColor="#F6DFD8" className="view-fadeUp">
 				<div class="px-4 py-4 md:px-8 md:py-8">
 					<div class="mb-3 flex w-full flex-col justify-start gap-1">
 						<h2 class="text-xl font-bold">

src/components/experience/MoreExperience.astro

@@ -5,9 +5,9 @@ import Line from "../global/NetworkLine.astro";
 
 <div id="Experience" class="h-fit">
 	<div class="flex flex-col items-center">
-		<div class="w-[90%] md:w-[600px]">
+		<div class="w-[90%] md:w-[600px] lg:w-1/2">
 			<Line height="50px" />
-			<Card primaryColor="#FFAC21">
+			<Card primaryColor="#FFAC21" className="view-fadeUp">
 				<div class="px-4 py-4 md:px-8 md:py-8">
 					<div class="mb-3 flex w-full flex-col justify-start gap-1">
 						<h2 class="text-xl font-bold">

src/components/global/Card.astro

@@ -11,7 +11,7 @@ type Props = {
 const {
 	href,
 	primaryColor,
-	bgColor = "#282828",
+	bgColor = "var(--color-secondary)",
 	scaleOnHover = false,
 	pixelHeight = "70px",
 	className = "",
@@ -36,7 +36,7 @@ const {
 	{
 		!href && (
 			<div
-				class="card z-10"
+				class="card z-10 mb-0"
 				class:list={[{ scale: scaleOnHover }, className]}
 			>
 				<div class="card-content">
@@ -63,10 +63,9 @@ const {
 		height: inherit;
 		position: relative;
 		background-color: var(--bgColor);
-		border: 1px solid rgb(255 255 255 / 5%);
+		border: 1px solid rgb(255 255 255 / 10%);
 		border-radius: 1.5rem;
 		padding: 0.5rem;
-		box-shadow: 0px 5px 5px 5px #141414;
 	}
 
 	.card:after {
@@ -104,10 +103,6 @@ const {
 		display: flex;
 		flex-direction: column;
 		gap: 1rem;
-		background-image: radial-gradient(
-			rgba(255, 255, 255, 0.1) 1px,
-			transparent 1px
-		);
 		background-position: 50% 50%;
 		background-size: 1.1rem 1.1rem;
 	}

src/components/global/NavBar.tsx

@@ -0,0 +1,37 @@
+import { HoverNavigation } from "@/components/ui/HoverNavigation";
+
+export default function Navigationbar() {
+    const navLinks = [
+        {
+            label: "Home",
+            link: "/",
+        },
+        {
+            label: "Experience",
+            link: "/experience",
+        },
+        {
+            label: "Projects",
+            link: "/projects",
+        },
+        {
+            label: "Skills",
+            link: "/skills",
+        },
+        {
+            label: "Contact",
+            link: "/contact",
+        },
+    ];
+    return (
+        <div className="bg-secondary fixed top-5 left-1/2 z-30 box-border flex w-auto -translate-x-1/2 items-center justify-center gap-5 overflow-auto rounded-full border-2 border-solid border-gray-700 px-5 py-3">
+            <img
+                src="/images/pfp_new.webp"
+                alt="Ryan"
+                width={50}
+                className="rounded-full"
+            />
+            <HoverNavigation items={navLinks} />
+        </div>
+    );
+}

src/components/global/NetworkLine.astro

@@ -7,7 +7,7 @@ const { height } = Astro.props;
 ---
 
 <div id="line-container" class="relative flex items-center justify-center p-0">
-    <div id="line" class="h-full w-[1px]"></div>
+	<div id="line" class="h-full w-[1px] p-0"></div>
 </div>
 
 <style define:vars={{ height }}>
@@ -26,9 +26,9 @@ const { height } = Astro.props;
 	#line {
 		background-image: linear-gradient(
 			to bottom,
-            #404040 5%,
+			#404040 0%,
-            #aaa 10%,
+			#aaa 5%,
-            #404040 15%
+			#404040 10%
 		);
 		background-size: 100% 200%;
 		animation: gradientAnimation 2s linear infinite;

src/components/home/Greeting.svelte

@@ -55,6 +55,7 @@
 
     // after window finish loading, call animateRoles()
     onMount(async () => {
+        await sleep(500);
         animateGreeting(greeting);
     });
 </script>

src/components/home/Intro.astro

@@ -4,8 +4,8 @@ import Socials from "../socials/Socials.svelte";
 import Greeting from "./Greeting.svelte";
 ---
 
-<div class="w-[90%] md:w-[600px] lg:w-1/2 xl:w-1/2">
+<div class="w-[90%] md:w-[600px] lg:w-1/2">
-	<Card bgColor="#252525" primaryColor="#BEADFA" className="animate-fadeIn">
+	<Card primaryColor="#BEADFA" className="animate-fadeIn">
 		<div id="intro" class="flex h-fit flex-col text-white">
 			<div class="w-full px-5 pt-10 pb-2 lg:px-10">
 				<div class="flex h-20 flex-row">
@@ -40,14 +40,10 @@ import Greeting from "./Greeting.svelte";
 					<Greeting client:load />, <br class="sm:hidden" />I'm Ryan!
 				</div>
 				<p class="text-left">
-					Born and raised in Malaysia, I'm currently pursuing a
+					A Malaysian software developer studying in Australia, fluent
-					Bachelor's in Computer Science in Australia.
+					in English and Mandarin Chinese. My work in software
-				</p>
+					development has connected me with many Twitch streamers and
-				<br />
+					content creators.
-				<p class="text-left">
-					My work has connected me with Twitch streamers and content
-					creators, and I'm driven by interests in web development,
-					computer vision, and data science.
 				</p>
 
 				<div class="mt-8 flex flex-row items-center justify-center">

src/components/skills/MoreSkills.astro

@@ -6,7 +6,7 @@ import Skill from "./Skill.astro";
 
 <div id="Experience" class="h-fit">
 	<div class="flex flex-col items-center">
-		<div class="w-[90%] md:w-[600px]">
+		<div class="w-[90%] md:w-[600px] lg:w-1/2">
 			<Line height="50px" />
 			<Skill
 				title="Content Creation"

src/components/skills/Skill.astro

@@ -6,19 +6,21 @@ interface Tag {
 	bgColor: string;
 	textColor?: string;
 	hoverTextColor?: string;
+	className?: string;
 }
 
 interface Props {
 	title: string;
 	tags?: Tag[];
 	primaryColor: string;
+	className?: string;
 }
 
-const { title, tags, primaryColor } = Astro.props;
+const { title, tags, primaryColor, className = "" } = Astro.props;
 ---
 
-<div class="mx-auto w-[90%] md:w-[600px]">
+<div class="mx-auto w-full">
-	<Card primaryColor={primaryColor}>
+	<Card primaryColor={primaryColor} {className}>
 		<div class="px-8 py-8">
 			<div class="flex w-full flex-col">
 				<h2 class="text-2xl font-bold">{title}</h2>
@@ -48,16 +50,5 @@ const { title, tags, primaryColor } = Astro.props;
 	[class*="tag-"] {
 		background-color: var(--tag-bg);
 		color: var(--tag-text);
-
-		@media (width >= 48rem /* 768px */) {
-			background-color: var(--color-gray-500);
-		}
-
-		&:hover {
-			@media (hover: hover) {
-				background-color: var(--tag-bg);
-				color: var(--tag-hover-text);
-			}
-		}
 	}
 </style>

src/components/skills/SkillsComponent.astro

@@ -7,8 +7,9 @@ import Skill from "./Skill.astro";
 <div class="h-fit w-full pt-20">
 	<h1 class="text-center text-5xl">Skills</h1>
 	<div class="flex flex-col items-center">
-		<div class="w-[90%] pt-10 md:w-[600px]">
+		<div class="w-[90%] pt-10 md:w-[600px] lg:w-1/2">
 			<Skill
+				className="view-fadeUp"
 				title="Frontend Development"
 				primaryColor="#19a7ce"
 				tags={[
@@ -23,7 +24,7 @@ import Skill from "./Skill.astro";
 					{
 						text: "Javascript",
 						bgColor: "var(--color-yellow-400)",
-						hoverTextColor: "black",
+						textColor: "black",
 					},
 					{
 						text: "Typescript",
@@ -36,12 +37,12 @@ import Skill from "./Skill.astro";
 					{
 						text: "React",
 						bgColor: "var(--color-react)",
-						hoverTextColor: "black",
+						textColor: "black",
 					},
 					{
 						text: "Vue",
 						bgColor: "var(--color-green-500)",
-						hoverTextColor: "black",
+						textColor: "black",
 					},
 					{
 						text: "WordPress",
@@ -50,17 +51,18 @@ import Skill from "./Skill.astro";
 					{
 						text: "Astro",
 						bgColor: "white",
-						hoverTextColor: "black",
+						textColor: "black",
 					},
 					{
 						text: "TailwindCSS",
 						bgColor: "var(--color-tailwind)",
-						hoverTextColor: "black",
+						textColor: "black",
 					},
 				]}
 			/>
 			<Line height="50px" />
 			<Skill
+				className="view-fadeUp"
 				title="Backend Development"
 				primaryColor="#474F7A"
 				tags={[
@@ -100,6 +102,7 @@ import Skill from "./Skill.astro";
 			/>
 			<Line height="50px" />
 			<Skill
+				className="view-fadeUp"
 				title="Data Science"
 				primaryColor="#a1eebd"
 				tags={[
@@ -134,7 +137,7 @@ import Skill from "./Skill.astro";
 					{
 						text: "BeautifulSoup4",
 						bgColor: "white",
-						hoverTextColor: "black",
+						textColor: "black",
 					},
 				]}
 			/>

src/components/ui/HoverNavigation.tsx

@@ -0,0 +1,101 @@
+import { cn } from "@/lib/utils";
+import {
+    AnimatePresence,
+    motion,
+    useScroll,
+    useMotionValueEvent,
+} from "motion/react";
+
+import { useState } from "react";
+
+export const HoverNavigation = ({
+    items,
+    className,
+}: {
+    items: {
+        label: string;
+        link: string;
+    }[];
+    className?: string;
+}) => {
+    let [hoveredIndex, setHoveredIndex] = useState<number | null>(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()!;
+
+            if (scrollYProgress.get() < 0.05) {
+                setVisible(true);
+            } else {
+                if (direction > 0) {
+                    setVisible(false);
+                } else {
+                    setVisible(true);
+                }
+            }
+        }
+    });
+
+    return (
+        <motion.div
+            animate={{
+                width: visible ? "100%" : "0%",
+            }}
+            className={cn(
+                "flex flex-row items-center justify-center overflow-hidden",
+                className,
+            )}
+        >
+            {items.map((item, idx) => (
+                <a
+                    href={item?.link}
+                    key={item?.link}
+                    className="group relative block h-full w-auto px-5 py-2"
+                    onMouseEnter={() => setHoveredIndex(idx)}
+                    onMouseLeave={() => setHoveredIndex(null)}
+                >
+                    <AnimatePresence>
+                        {hoveredIndex === idx && (
+                            <motion.span
+                                className="absolute inset-0 block h-full w-full rounded-3xl bg-neutral-200"
+                                layoutId="hoverBackground"
+                                initial={{ opacity: 0 }}
+                                animate={{
+                                    opacity: 1,
+                                    transition: { duration: 0.15 },
+                                }}
+                                exit={{
+                                    opacity: 0,
+                                    transition: { duration: 0.15, delay: 0.2 },
+                                }}
+                            />
+                        )}
+                    </AnimatePresence>
+                    <NavBarLink>{item.label}</NavBarLink>
+                </a>
+            ))}
+        </motion.div>
+    );
+};
+
+export const NavBarLink = ({
+    className,
+    children,
+}: {
+    className?: string;
+    children: React.ReactNode;
+}) => {
+    return (
+        <div
+            className={cn(
+                "relative z-20 h-full w-full overflow-hidden rounded-2xl text-center transition-all ease-out group-hover:text-black",
+                className,
+            )}
+        >
+            {children}
+        </div>
+    );
+};

src/components/what-i-do/WhatIDoComponent.astro

@@ -1,53 +0,0 @@
----
-import Card from "../global/Card.astro";
----
-
-<div class="flex w-full flex-col items-center justify-center">
-	<div
-		class="flex h-fit w-full max-w-[1440px] flex-col items-center justify-center"
-	>
-		<h1 class="mb-10 text-center text-5xl">What I Do</h1>
-		<div
-			class="grid w-[90%] grid-cols-1 place-content-center justify-center gap-5 sm:w-[350px] lg:w-[90%] lg:grid-cols-3 xl:w-4/5 xl:gap-12"
-		>
-			<Card primaryColor="#19a7ce" scaleOnHover={true}>
-				<div class="px-8 py-8">
-					<h2 class="text-center text-xl font-bold">
-						Web Development
-					</h2>
-					<hr class="my-3 w-full" />
-					<p class="text-center text-balance">
-						Bringing ideas to life on the web is my passion. I enjoy
-						bringing my imagination to life through web development.
-					</p>
-				</div>
-			</Card>
-
-			<Card primaryColor="#a1eebd" scaleOnHover={true}>
-				<div class="px-8 py-8">
-					<h2 class="text-center text-xl font-bold">Data Science</h2>
-					<hr class="my-3 w-full" />
-					<p class="text-center text-balance">
-						Using data to make decisions is a powerful tool. I am
-						experienced in analyzing data and making decisions based
-						on data.
-					</p>
-				</div>
-			</Card>
-
-			<Card primaryColor="#9D76C1" scaleOnHover={true}>
-				<div class="px-8 py-8">
-					<h2 class="text-center text-xl font-bold">
-						Content Creation
-					</h2>
-					<hr class="my-3 w-full" />
-					<p class="text-center text-balance">
-						Everyone has something to give, or something to share. I
-						produce content around productivity and software
-						development.
-					</p>
-				</div>
-			</Card>
-		</div>
-	</div>
-</div>

src/layouts/Layout.astro

@@ -2,9 +2,11 @@
 interface Props {
 	title: string;
 	description: string;
+	thumbnail?: string;
+	metaURL?: string;
 }
 
-const { title, description } = Astro.props;
+const { title, description, thumbnail, metaURL } = Astro.props;
 import "../styles/global.css";
 import { ClientRouter } from "astro:transitions";
 ---
@@ -20,6 +22,18 @@ import { ClientRouter } from "astro:transitions";
 		/>
 		<meta name="author" content="RythonDev" />
 		<meta name="theme-color" content="#2B2D31" />
+
+		{
+			thumbnail && (
+				<>
+					<meta name="twitter:image" content={thumbnail} />
+					<meta name="og:image" content={thumbnail} />
+				</>
+			)
+		}
+
+		{metaURL && <meta name="og:url" content={metaURL} />}
+
 		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
@@ -59,8 +73,26 @@ import { ClientRouter } from "astro:transitions";
 	body {
 		font-family: "Montserrat", sans-serif;
 		color: #fff;
+		background: #0e0e11;
 		background:
-			radial-gradient(circle, #383838 1px, transparent 1px), #202020;
+			radial-gradient(circle, #303030 1px, transparent 1px), #101010;
 		background-size: 20px 20px;
 	}
 </style>
+
+<script is:inline>
+	document.addEventListener("astro:page-load", () => {
+		const observer = new IntersectionObserver((entries) => {
+			entries.forEach((entry) => {
+				if (entry.isIntersecting) {
+					entry.target.classList.add("view-appear");
+				}
+			});
+		});
+
+		const elements = document.querySelectorAll(".view-fadeUp");
+		elements.forEach((el) => {
+			observer.observe(el);
+		});
+	});
+</script>

src/lib/utils.ts

@@ -0,0 +1,7 @@
+import { clsx } from "clsx";
+import type { ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}

src/pages/contact.astro

@@ -1,5 +1,5 @@
 ---
-import NavBar from "../components/global/NavBar.astro";
+import NavBar from "../components/global/NavBar.tsx";
 import Layout from "../layouts/Layout.astro";
 import ContactComponent from "../components/contact/ContactComponent.svelte";
 import Card from "../components/global/Card.astro";
@@ -15,7 +15,7 @@ import Footer from "../components/global/FooterComponent.astro";
 		<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">
+				<Card primaryColor="#40A2D8" className="animate-fadeIn">
 					<div class="px-8 py-8">
 						<div class="justify-left mb-3 flex w-full flex-col">
 							<h2

src/pages/experience.astro

@@ -1,7 +1,7 @@
 ---
-import NavBar from "../components/global/NavBar.astro";
+import NavBar from "../components/global/NavBar.tsx";
 import Layout from "../layouts/Layout.astro";
-import EducationComponent from "../components/experience/ExperienceComponent.astro";
+import ExperienceComponent from "../components/experience/ExperienceComponent.astro";
 import MoreExperience from "../components/experience/MoreExperience.astro";
 import Footer from "../components/global/FooterComponent.astro";
 ---
@@ -11,8 +11,8 @@ import Footer from "../components/global/FooterComponent.astro";
 	description="Find out RythonDev's previous education"
 >
 	<NavBar />
-	<div id="Experience" class="py-20">
+	<div id="Experience" class="pt-30">
-		<EducationComponent />
+		<ExperienceComponent />
 		<MoreExperience />
 	</div>
 	<Footer />

src/pages/index.astro

@@ -1,14 +1,12 @@
 ---
-import NavBar from "../components/global/NavBar.astro";
+import NavBar from "../components/global/NavBar.tsx";
 import Layout from "../layouts/Layout.astro";
 import NetworkLine from "../components/global/NetworkLine.astro";
-import WhatIDo from "../components/what-i-do/WhatIDoComponent.astro";
 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 Card from "../components/global/Card.astro";
 import Footer from "../components/global/FooterComponent.astro";
 ---
 
@@ -16,15 +14,11 @@ import Footer from "../components/global/FooterComponent.astro";
 	title="Ryan's Portfolio"
 	description="Ryan is a software developer, streamer and Computer Science undergraduate. Learn more about him and his skills here!"
 >
-	<NavBar />
+	<NavBar client:load />
-	<div id="home" class="flex items-center justify-center pt-20">
+	<div id="home" class="flex items-center justify-center pt-32">
 		<Intro />
 	</div>
 	<NetworkLine height="70px" />
-	<!-- <div id="what-i-do">
-		
-		<WhatIDo />
-	</div> -->
 	<div id="education">
 		<div class="mx-auto mb-10 h-[1px] w-1/3 bg-[#404040]"></div>
 		<Experience />

src/pages/projects.astro

@@ -1,5 +1,5 @@
 ---
-import NavBar from "../components/global/NavBar.astro";
+import NavBar from "../components/global/NavBar.tsx";
 import Layout from "../layouts/Layout.astro";
 import ProjectsComponent from "../components/projects/ProjectsComponent.astro";
 import MoreProjects from "../components/projects/MoreProjects.svelte";

src/pages/skills.astro

@@ -1,5 +1,5 @@
 ---
-import NavBar from "../components/global/NavBar.astro";
+import NavBar from "../components/global/NavBar.tsx";
 import Layout from "../layouts/Layout.astro";
 import SkillsComponent from "../components/skills/SkillsComponent.astro";
 import MoreSkills from "../components/skills/MoreSkills.astro";

src/pages/what-i-do.astro

@@ -1,193 +0,0 @@
----
-import NavBar from "../components/global/NavBar.astro";
-import Layout from "../layouts/Layout.astro";
-import WhatIDoComponent from "../components/what-i-do/WhatIDoComponent.astro";
-import Card from "../components/global/Card.astro";
-import Line from "../components/global/NetworkLine.astro";
-import Footer from "../components/global/FooterComponent.astro";
----
-
-<Layout
-	title="What I Do"
-	description="What Ryan's skillsets are, in Data Science, Web Development and Content Creation"
->
-	<NavBar />
-	<div id="what-i-do" class="mt-10 pt-20 pb-20">
-		<WhatIDoComponent />
-
-		<div class="mx-auto mt-20 w-[90%] md:w-[750px]">
-			<Card primaryColor="#19a7ce">
-				<div class="px-8 py-8">
-					<h2
-						id="web-dev"
-						class="animate-gradient text-2xl font-bold"
-					>
-						Web Development
-					</h2>
-					<hr class="mt-3 mb-3 w-full" />
-					<div class="mb-5">
-						<h3 class="text-xl font-bold">Websites</h3>
-						<p class="mt-1 text-left">
-							I am beyond just a programmer; I'm a developer who
-							can turn your vision into a clickable product.
-							Through custom designs, intuitive user experiences,
-							and special attention to detail, I can bring your
-							brand to life online.
-						</p>
-					</div>
-					<div class="mb-5">
-						<h3 class="text-xl font-bold">Web Apps</h3>
-						<p class="mt-1 text-left">
-							With a growing dislike against tools with premium
-							features stuck behind a subscription service, I
-							design and craft solutions that solves problems and
-							improves my workflow.
-						</p>
-					</div>
-					<div>
-						<h3 class="text-xl font-bold">Widgets</h3>
-						<p class="mt-1 text-left">
-							Leveraging my web development skills, I built stream
-							widgets to level up livestreams on Twitch and
-							YouTube. Easy to use and customize, my work have
-							been used by 100+ Twitch streamers!
-						</p>
-					</div>
-				</div>
-			</Card>
-			<Line height="50px" />
-			<Card primaryColor="#a1eebd">
-				<div class="px-8 py-8">
-					<h2
-						id="data-science"
-						class="animate-gradient text-2xl font-bold"
-					>
-						Data Science
-					</h2>
-					<hr class="mt-3 mb-3 w-full" />
-					<div class="mb-5">
-						<h3 class="text-xl font-bold">
-							Data Analysis and Visualization
-						</h3>
-						<p class="mt-1 text-left">
-							Translating numbers into works of art that inform,
-							inspire, and guide decision-making. I can create
-							visually compelling narratives that turn dry
-							statistics into captivating stories.
-						</p>
-					</div>
-					<div class="mb-5">
-						<h3 class="text-xl font-bold">
-							Statistics and Probability
-						</h3>
-						<p class="mt-1 text-left">
-							Every number tells a story, but it takes the
-							language of statistics and probability to truly
-							understand it. Our world is full of data, but it's
-							only through powerful tools that we can transform it
-							into meaningful insights and actionable
-							intelligence.
-						</p>
-					</div>
-					<div>
-						<h3 class="text-xl font-bold">Machine Learning</h3>
-						<p class="mt-1 text-left">
-							Machine learning isn't just about mimicking human
-							intelligence, it's about surpassing it. We push the
-							boundaries of what's possible, collaborating with
-							code to solve problems beyond human capabilities.
-						</p>
-					</div>
-				</div>
-			</Card>
-			<Line height="50px" />
-			<Card primaryColor="#9D76C1">
-				<div class="px-8 py-8">
-					<h2
-						id="content-creation"
-						class="animate-gradient text-2xl font-bold"
-					>
-						Content Creation
-					</h2>
-					<hr class="mt-3 mb-3 w-full" />
-					<div class="mb-5">
-						<h3 class="text-xl font-bold">Streaming</h3>
-						<p class="mt-1 text-left">
-							Streaming isn't just about entertainment, it's about
-							building a brand that resonates and inspires.
-							Streaming allows me to engage with viewers in real
-							time, developing their trust and allows me to build
-							a community of like-minded people.
-						</p>
-					</div>
-					<div class="mb-5">
-						<h3 class="text-xl font-bold">Video Marketing</h3>
-						<p class="mt-1 text-left">
-							In this world where brand marketing centres around
-							short videos (Instagram reels, Tiktok videos,
-							YouTube shorts...), I aim to craft and produce
-							videos that will engage with your targeted audience
-							while maintaining a brand friendly identity.
-						</p>
-					</div>
-					<div>
-						<h3 class="text-xl font-bold">Personality</h3>
-						<p class="mt-1 text-left">
-							I believe content should be an adventure, not a
-							formula. My livestreams revolve around unscripted
-							interactions, quirky challenges, and raw emotional
-							moments. It's messy, it's exhilarating, and it's
-							uniquely me.
-						</p>
-					</div>
-				</div>
-			</Card>
-		</div>
-	</div>
-	<Footer />
-</Layout>
-
-<style>
-	#web-dev {
-		background: linear-gradient(
-			90deg,
-			#afd3e2 0%,
-			#19a7ce 45%,
-			#a5d7e8 100%
-		);
-
-		background-size: 300%;
-
-		background-clip: text;
-		-webkit-background-clip: text;
-
-		-webkit-text-fill-color: transparent;
-	}
-
-	#data-science {
-		background: linear-gradient(
-			90deg,
-			#a1eebd 0%,
-			#7bd3ea 45%,
-			#f6f7c4 100%
-		);
-
-		background-size: 300%;
-
-		background-clip: text;
-		-webkit-background-clip: text;
-
-		-webkit-text-fill-color: transparent;
-	}
-
-	#content-creation {
-		background: linear-gradient(90deg, #d09dff 40%, #ff6868 90%);
-
-		background-size: 300%;
-
-		background-clip: text;
-		-webkit-background-clip: text;
-
-		-webkit-text-fill-color: transparent;
-	}
-</style>

src/styles/global.css

@@ -1,23 +1,62 @@
 @import "tailwindcss";
 
 @theme {
-    --color-html: #B11700;
+    --color-html: #b11700;
-    --color-typescript: #3178C6;
+    --color-typescript: #3178c6;
-    --color-svelte: #B11700;
+    --color-svelte: #b11700;
-    --color-react: #00D8FF;
+    --color-react: #00d8ff;
-    --color-wordpress: #21759B;
+    --color-wordpress: #21759b;
-    --color-htmx: #3366CC;
+    --color-htmx: #3366cc;
-    --color-tailwind: #07B6D4;
+    --color-tailwind: #07b6d4;
-    --color-python: #3776AB;
+    --color-python: #3776ab;
     --color-csharp: #672079;
-    --color-java: #ED8B00;
+    --color-java: #ed8b00;
-    --color-kotlin: #7F52FF;
+    --color-kotlin: #7f52ff;
-    --color-php: #3D5694;
+    --color-php: #3d5694;
     --color-go: #006080;
-    --color-rust: #B11700;
+    --color-rust: #b11700;
-    --color-postgresql: #4479A1;
+    --color-postgresql: #4479a1;
-    --color-mysql: #1D6998;
+    --color-mysql: #1d6998;
-    --color-mongodb: #09934E;
+    --color-mongodb: #09934e;
-    --color-opencv: #10652F;
+    --color-opencv: #10652f;
-    --color-win32api: #0078D4;
+    --color-win32api: #0078d4;
+    --color-primary: #fafafa;
+    --color-secondary: #1d1c20;
+
+    --animate-fadeIn: fadeIn 0.5s ease-in-out;
+    --animate-fadeUp: fadeUp 0.5s ease-in-out;
+
+    @keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 100%;
+        }
+    }
+
+    @keyframes fadeUp {
+        0% {
+            opacity: 0;
+            translate: 0px 10px;
+        }
+
+        100% {
+            opacity: 100%;
+            translate: 0px 0px;
+        }
+    }
+}
+
+.view-fadeUp {
+    translate: 0px 30px;
+    opacity: 0;
+
+    transition: all 0.5s ease;
+}
+
+.view-appear {
+    translate: 0px 0px;
+    opacity: 100%;
 }

tsconfig.json

@@ -1,3 +1,11 @@
 {
-  "extends": "astro/tsconfigs/strict"
+    "extends": "astro/tsconfigs/strict",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "jsxImportSource": "react",
+        "baseUrl": "./",
+        "paths": {
+            "@/*": ["src/*"]
+        }
+    }
 }