updated experience

src/components/sections/ExperienceComponent.astro

@@ -3,7 +3,7 @@ import Card from "../elements/Card.astro";
 import Line from "../elements/NetworkLine.astro";
 ---
 
-<div id="Experience" class="h-fit py-20">
+<div id="Experience" class="h-fit">
 	<h1 class="text-5xl text-center">Experience</h1>
 	<div class="flex flex-col items-center pt-10">
 		<div class="w-[90%] md:w-[600px]">
@@ -33,6 +33,32 @@ import Line from "../elements/NetworkLine.astro";
 				</div>
 			</Card>
 			<Line height="50px" />
+			<Card primaryColor="#F6DFD8">
+				<div class="card-content md:px-8 md:py-8 px-4 py-4">
+					<div class="flex flex-col justify-start w-full mb-3 gap-1">
+						<h2 class="font-bold text-xl">
+							Lead Frontend Web Developer
+						</h2>
+						<h3 class="font-bold">@ JW BizTech</h3>
+						<h3>Dec 2024 - Present</h3>
+					</div>
+					<hr class="w-full mb-3" />
+					<p class="mb-3">
+						Led implementation of frontend technology stack for
+						websites. Worked closely with UI/UX designers to
+						translate designs into code, and with backend developers
+						to ensure smooth integration with CMS.
+					</p>
+					<h3 class="mb-1 font-bold text-lg">Relevant skills:</h3>
+
+					<ul class="list-disc list-inside">
+						<li>Astro</li>
+						<li>Typescript</li>
+						<li>TailwindCSS</li>
+					</ul>
+				</div>
+			</Card>
+			<Line height="50px" />
 			<Card primaryColor="#F6DFD8">
 				<div class="card-content md:px-8 md:py-8 px-4 py-4">
 					<div class="flex flex-col justify-start w-full mb-3 gap-1">
@@ -64,30 +90,6 @@ import Line from "../elements/NetworkLine.astro";
 					</div>
 				</div>
 			</Card>
-			<Line height="50px" />
-			<Card primaryColor="#FFAC21">
-				<div class="card-content md:px-8 md:py-8 px-4 py-4">
-					<div class="flex flex-col justify-start w-full mb-3 gap-1">
-						<h2 class="font-bold text-xl">
-							Diploma in Computer Science student
-						</h2>
-						<h3 class="font-bold">
-							@ Methodist College Kuala Lumpur
-						</h3>
-						<h3>Jan 2022 - June 2024</h3>
-					</div>
-					<hr class="w-full mb-3" />
-					<h3 class="mb-1 font-bold text-lg">Achievements</h3>
-					<ul class="list-disc list-inside">
-						<li>
-							4-time Dean's List Award recipient (&gt;3.5 GPA)
-						</li>
-						<li>3.8 CGPA</li>
-						<li>President of Computer Programming Club</li>
-						<li>Vice President of Diploma Union</li>
-					</ul>
-				</div>
-			</Card>
 		</div>
 	</div>
 </div>

src/components/sections/MoreExperience.astro

@@ -0,0 +1,50 @@
+---
+import Card from "../elements/Card.astro";
+import Line from "../elements/NetworkLine.astro";
+---
+
+<div id="Experience" class="h-fit">
+	<div class="flex flex-col items-center">
+		<div class="w-[90%] md:w-[600px]">
+			<Line height="50px" />
+			<Card primaryColor="#FFAC21">
+				<div class="card-content md:px-8 md:py-8 px-4 py-4">
+					<div class="flex flex-col justify-start w-full mb-3 gap-1">
+						<h2 class="font-bold text-xl">
+							Diploma in Computer Science student
+						</h2>
+						<h3 class="font-bold">
+							@ Methodist College Kuala Lumpur
+						</h3>
+						<h3>Jan 2022 - June 2024</h3>
+					</div>
+					<hr class="w-full mb-3" />
+					<h3 class="mb-1 font-bold text-lg">Achievements</h3>
+					<ul class="list-disc list-inside">
+						<li>
+							4-time Dean's List Award recipient (&gt;3.5 GPA)
+						</li>
+						<li>3.8 CGPA</li>
+						<li>President of Computer Programming Club</li>
+						<li>Vice President of Diploma Union</li>
+					</ul>
+				</div>
+			</Card>
+		</div>
+	</div>
+</div>
+
+<style>
+	.card-content {
+		display: flex;
+		flex-direction: column;
+		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

@@ -2,6 +2,7 @@
 import NavBar from "../components/sections/NavBar.astro";
 import Layout from "../layouts/Layout.astro";
 import EducationComponent from "../components/sections/ExperienceComponent.astro";
+import MoreExperience from "../components/sections/MoreExperience.astro";
 import Footer from "../components/sections/FooterComponent.astro";
 ---
 
@@ -10,8 +11,9 @@ import Footer from "../components/sections/FooterComponent.astro";
 	description="Find out RythonDev's previous education"
 >
 	<NavBar />
-	<div id="Experience" class="mt-10">
+	<div id="Experience" class="py-20">
 		<EducationComponent />
+		<MoreExperience />
 	</div>
 	<Footer />
 </Layout>

src/pages/index.astro

@@ -5,7 +5,7 @@ import NetworkLine from "../components/elements/NetworkLine.astro";
 import WhatIDo from "../components/sections/WhatIDoComponent.astro";
 import Intro from "../components/sections/IntroComponent.svelte";
 import Projects from "../components/sections/ProjectsComponent.astro";
-import Education from "../components/sections/ExperienceComponent.astro";
+import Experience from "../components/sections/ExperienceComponent.astro";
 import Skills from "../components/sections/SkillsComponent.astro";
 import Contact from "../components/sections/ContactComponent.svelte";
 import Card from "../components/elements/Card.astro";
@@ -42,8 +42,8 @@ import Footer from "../components/sections/FooterComponent.astro";
 	<div id="skills">
 		<Skills />
 	</div>
-	<div id="education">
+	<div id="education" class="py-20">
-		<Education />
+		<Experience />
 	</div>
 	<div id="contact">
 		<Contact />