updated site including discord

Author: liyunze-coding

src/components/experience/ExperienceComponent.astro

@@ -10,19 +10,16 @@ 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 (Contract)
-						</h2>
+						<h2 class="text-xl font-bold">Full Stack Developer</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 development of websites.
-						Efficiently translated designs into code, while ensuring
-						maintainability, accessibility and performance. Actively
-						researching and developing for LLM integration into
-						product.
+						Led implementation of frontend development, while also
+						developing and intergating a CMS on the backend for
+						website development. Actively contributing to LLM
+						product research and development.
 					</p>
 					<h3 class="mb-1 text-lg font-bold">Relevant skills:</h3>
 					<div
@@ -31,9 +28,10 @@ import Line from "../global/NetworkLine.astro";
 						<ul class="list-inside list-disc">
 							<li>NextJS</li>
 							<li>React</li>
-							<li>Astro</li>
+							<li>Payload CMS</li>
 						</ul>
 						<ul class="list-inside list-disc">
+							<li>Astro</li>
 							<li>Typescript</li>
 							<li>TailwindCSS</li>
 						</ul>
@@ -94,12 +92,13 @@ import Line from "../global/NetworkLine.astro";
 					>
 						<ul class="list-inside list-disc">
 							<li>WordPress & PHP</li>
-							<li>Typescript</li>
-							<li>TailwindCSS</li>
+							<li>NextJS</li>
+							<li>React</li>
 						</ul>
 						<ul class="list-inside list-disc">
 							<li>Adobe XD</li>
-							<li>NextJS & React</li>
+							<li>Typescript</li>
+							<li>TailwindCSS</li>
 						</ul>
 					</div>
 				</div>

src/components/global/Card.astro

@@ -1,7 +1,8 @@
 ---
 type Props = {
 	href?: string;
-	primaryColor: string;
+	primaryColor?: string;
+	shadowColor?: string;
 	bgColor?: string;
 	scaleOnHover?: boolean;
 	pixelHeight?: string;
@@ -11,6 +12,7 @@ type Props = {
 const {
 	href,
 	primaryColor,
+	shadowColor = "rgb(12,12,12)",
 	bgColor = "var(--color-secondary)",
 	scaleOnHover = false,
 	pixelHeight = "70px",
@@ -36,7 +38,7 @@ const {
 	{
 		!href && (
 			<div
-				class="card z-10 mb-0"
+				class="card z-10 mb-0 rounded-xl shadow-xl"
 				class:list={[{ scale: scaleOnHover }, className]}
 			>
 				<div class="card-content">
@@ -47,7 +49,7 @@ const {
 	}
 </>
 
-<style define:vars={{ primaryColor, bgColor, pixelHeight }}>
+<style define:vars={{ bgColor, pixelHeight, shadowColor }}>
 	* {
 		box-sizing: border-box;
 	}
@@ -60,50 +62,15 @@ const {
 	}
 
 	.card {
-		height: inherit;
-		position: relative;
-		background-color: var(--bgColor);
-		border: 1px solid rgb(255 255 255 / 10%);
-		border-radius: 1.5rem;
-		padding: 0.5rem;
-	}
-
-	.card:after {
-		content: "";
-		height: var(--pixelHeight);
-		width: 1px;
-		position: absolute;
-		left: -1px;
-		top: 65%;
-		transition: top, opacity;
-		transition-duration: 600ms;
-		transition-timing-function: ease;
+		background: #1c1c1c;
 		background: linear-gradient(
-			transparent,
-			var(--primaryColor),
-			transparent
+			135deg,
+			rgba(18, 18, 18, 1) 0%,
+			rgba(30, 30, 30, 1) 33%,
+			rgba(25, 25, 25, 1) 66%,
+			rgba(19, 19, 19, 1) 100%
 		);
-		opacity: 0;
-	}
-
-	/* .card:hover:after {
-		top: 25%;
-		opacity: 1;
-	} */
-
-	.card.scale {
-		transition: transform 0.5s ease;
-	}
-
-	.card.scale:hover {
-		transform: scale(1.05);
-	}
-
-	.card-content {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-		background-position: 50% 50%;
-		background-size: 1.1rem 1.1rem;
+		--tw-shadow-color: var(--shadowColor);
+		padding: 0.5rem;
 	}
 </style>

src/components/home/Intro.astro

@@ -7,7 +7,7 @@ import { Image } from "astro:assets";
 ---
 
 <div class="w-[90%] md:w-[600px] lg:w-1/2">
-	<Card primaryColor="#BEADFA" className="animate-fadeIn">
+	<Card shadowColor="rgb(4, 57, 57)" 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">

src/components/projects/Project.astro

@@ -115,11 +115,7 @@ const leftProject = position == "left";
 			{
 				tags.map((tag) => (
 					<div
-						class="my-1 mr-1 w-fit rounded-full px-3 py-1 transition-colors duration-300"
-						style={`
-							background-color: ${tag.bgColor || "black"};
-							color: ${tag.textColor || "white"};
-						`}
+						class="my-1 mr-1 w-fit rounded-full px-3 py-1 transition-colors duration-300 text-white bg-secondary"
 					>
 						{tag.text}
 					</div>