updated layouts, added thumbnails

Author: liyunze-coding

public/images/profile/contact_photo.webp

@@ -1,6 +1,6 @@
 ---
 import { Image } from "astro:assets";
-import contactPhoto from "@/components/images/contact_photo.webp";
+import contactPhoto from "@/components/images/profile/contact_photo.webp";
 import { AnimatedTooltip } from "@/components/ui/AnimatedToolTip";
 ---
 

public/images/socials.webp

@@ -1,16 +1,11 @@
 ---
 import NavBar from "../components/global/NavBar.astro";
-import Layout from "../layouts/Layout.astro";
+import PageLayout from "@/layouts/PageLayout.astro";
 import ContactComponent from "../components/contact/ContactComponent.astro";
-import Card from "../components/global/Card.astro";
 import Footer from "../components/global/FooterComponent.astro";
 ---
 
-<Layout
-	title="Contact"
-	description="Find out how to contact RythonDev, for sponsorship offers or collaboration opportunities!"
->
-	<NavBar />
+<PageLayout title="Contact" description="Have an idea? Contact Ryan here!">
 	<div id="contact-component" class="mt-10 pt-20">
 		<h1 class="text-center text-5xl">Contact</h1>
 
@@ -19,4 +14,4 @@ import Footer from "../components/global/FooterComponent.astro";
 		</div>
 	</div>
 	<Footer />
-</Layout>
+</PageLayout>

src/components/contact/ContactComponent.astro

@@ -1,6 +1,4 @@
 ---
-import NavBar from "../components/global/NavBar.astro";
-import Layout from "../layouts/Layout.astro";
 import ExperienceComponent from "../components/experience/ExperienceComponent.astro";
 import MoreExperience from "../components/experience/MoreExperience.astro";
 import Footer from "../components/global/FooterComponent.astro";
@@ -10,6 +8,7 @@ import PageLayout from "@/layouts/PageLayout.astro";
 <PageLayout
 	title="Experience"
 	description="Find out RythonDev's previous education"
+	thumbnail="/images/profile/contact_photo.webp"
 >
 	<div id="Experience" class="pt-30">
 		<ExperienceComponent />

src/pages/contact.astro

@@ -74,19 +74,20 @@ import Footer from "../components/global/FooterComponent.astro";
 		</Card>
 		<Footer />
 	</div>
-	<style>
-		.card-content {
-			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;
-			border-radius: 1.25rem;
-			overflow: hidden;
-		}
-	</style>
 </Layout>
+
+<style>
+	.card-content {
+		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;
+		border-radius: 1.25rem;
+		overflow: hidden;
+	}
+</style>

src/pages/experience.astro

@@ -1,6 +1,4 @@
 ---
-import NavBar from "../components/global/NavBar.astro";
-import Layout from "../layouts/Layout.astro";
 import NetworkLine from "../components/global/NetworkLine.astro";
 import Intro from "../components/home/Intro.astro";
 import Projects from "../components/projects/ProjectsComponent.astro";
@@ -14,6 +12,7 @@ import PageLayout from "@/layouts/PageLayout.astro";
 <PageLayout
 	title="Ryan's Portfolio"
 	description="Ryan is a software developer, streamer and Computer Science undergraduate. Learn more about him and his skills here!"
+	thumbnail="/images/profile/contact_photo.webp"
 >
 	<div id="home" class="flex items-center justify-center pt-32">
 		<Intro />

src/pages/faq.astro

@@ -1,13 +1,15 @@
 ---
-import NavBar from "../components/global/NavBar.astro";
-import Layout from "../layouts/Layout.astro";
+import PageLayout from "@/layouts/PageLayout.astro";
 import ProjectsComponent from "../components/projects/ProjectsComponent.astro";
 import MoreProjects from "../components/projects/MoreProjects.svelte";
 import Footer from "../components/global/FooterComponent.astro";
 ---
 
-<Layout title="Projects" description="View what projects RythonDev has made">
-	<NavBar />
+<PageLayout
+	title="Projects"
+	description="View what projects RythonDev has made"
+	thumbnail="/images/profile/contact_photo.webp"
+>
 	<div id="projects" class="pt-20">
 		<h1 class="mt-10 text-center text-5xl">Projects</h1>
 		<!-- other projects -->
@@ -17,7 +19,7 @@ import Footer from "../components/global/FooterComponent.astro";
 		<ProjectsComponent />
 	</div>
 	<Footer />
-</Layout>
+</PageLayout>
 
 <style>
 	.image-container img,

src/pages/index.astro

@@ -1,22 +1,21 @@
 ---
-import NavBar from "../components/global/NavBar.astro";
-import Layout from "../layouts/Layout.astro";
 import SkillsComponent from "../components/skills/SkillsComponent.astro";
 import MoreSkills from "../components/skills/MoreSkills.astro";
 import Footer from "../components/global/FooterComponent.astro";
+import PageLayout from "@/layouts/PageLayout.astro";
 ---
 
-<Layout
+<PageLayout
 	title="Skills"
 	description="Learn what skills RythonDev has honed in the past few years"
+	thumbnail="/images/profile/contact_photo.webp"
 >
-	<NavBar />
 	<div id="skills" class="mt-10 pb-20">
 		<SkillsComponent />
 		<MoreSkills />
 	</div>
 	<Footer />
-</Layout>
+</PageLayout>
 
 <style>
 	.card-content {

src/pages/projects.astro

@@ -16,7 +16,11 @@ import DateTimeIcon from "./_images/date-time.svg";
 import DiscordIcon from "./_images/discord.svg";
 ---
 
-<Layout title="Socials" description="Check out Ryan's socials">
+<Layout
+	title="Socials"
+	description="Check out Ryan's socials"
+	thumbnail="/images/socials.webp"
+>
 	<div class="flex flex-col items-center justify-center px-0 py-10">
 		<div class="w-[calc(100%-20px)] max-w-[1024px]">
 			<div