Image optimization and experience content edit

Author: liyunze-coding

src/components/contact/ContactComponent.astro

@@ -14,6 +14,7 @@ import { AnimatedTooltip } from "@/components/ui/AnimatedToolTip";
 			src={contactPhoto}
 			alt="Ryan"
 			width={300}
+			loading="lazy"
 			class="absolute top-1/2 left-1/2 aspect-[3/4] -translate-1/2 rounded-3xl object-cover lg:top-0 lg:right-0 lg:-translate-x-10 lg:translate-y-5"
 		/>
 		<div
@@ -34,7 +35,7 @@ import { AnimatedTooltip } from "@/components/ui/AnimatedToolTip";
 			<AnimatedTooltip
 				href="mailto:[email protected]"
 				text="Email me!"
-				client:load
+				client:visible
 				className="text-xl font-bold underline transition-colors duration-75 hover:text-blue-500"
 				>Send me a Message</AnimatedTooltip
 			>

src/components/experience/ExperienceComponent.astro

@@ -10,17 +10,19 @@ import Line from "../global/NetworkLine.astro";
 			<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>
+						<h2 class="text-xl font-bold">
+							Full Stack Developer (Contract)
+						</h2>
 						<h3 class="font-bold">@ Hyson Horizon</h3>
 						<h3>Dec 2024 - Present</h3>
 					</div>
 					<hr class="mb-3 w-full" />
 					<p class="mb-3">
-						Led implementation of frontend technology stack for
-						websites. Worked closely with UI/UX designers to
-						translate designs into code, and integrate smoothly with
-						the CMS. Performing research and development for backend
-						projects.
+						Led implementation of frontend development of websites.
+						Efficiently translated designs into code, while ensuring
+						maintainability, accessibility and performance. Actively
+						researching and developing for LLM integration into
+						product.
 					</p>
 					<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
 					<div

src/components/home/Intro.astro

@@ -2,6 +2,8 @@
 import Card from "../global/Card.astro";
 import Socials from "../socials/Socials.astro";
 import Greeting from "./Greeting.svelte";
+import pfp_new from "../images/pfp_new.webp";
+import { Image } from "astro:assets";
 ---
 
 <div class="w-[90%] md:w-[600px] lg:w-1/2">
@@ -10,12 +12,13 @@ import Greeting from "./Greeting.svelte";
 			<div class="w-full px-5 pt-10 pb-2 lg:px-10">
 				<div class="flex h-20 flex-row">
 					<div class="mr-1 flex w-20 items-center justify-center">
-						<img
-							src="/images/profile/pfp_new.webp"
+						<Image
+							src={pfp_new}
 							alt="Ryan"
 							width="80"
 							height="80"
 							class="max-w-full rounded-full bg-[#505050]"
+							loading="eager"
 						/>
 					</div>
 					<div class="ml-2 flex flex-col items-start justify-center">