updated site including discord

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">
+						<h2 class="text-xl font-bold">Full Stack Developer</h2>
-							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 development of websites.
+						Led implementation of frontend development, while also
-						Efficiently translated designs into code, while ensuring
+						developing and intergating a CMS on the backend for
-						maintainability, accessibility and performance. Actively
+						website development. Actively contributing to LLM
-						researching and developing for LLM integration into
+						product research and development.
-						product.
 					</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>NextJS</li>
-							<li>TailwindCSS</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;
+		background: #1c1c1c;
-		position: relative;
+		background: linear-gradient(
-		background-color: var(--bgColor);
+			135deg,
-		border: 1px solid rgb(255 255 255 / 10%);
+			rgba(18, 18, 18, 1) 0%,
-		border-radius: 1.5rem;
+			rgba(30, 30, 30, 1) 33%,
+			rgba(25, 25, 25, 1) 66%,
+			rgba(19, 19, 19, 1) 100%
+		);
+		--tw-shadow-color: var(--shadowColor);
 		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: linear-gradient(
-			transparent,
-			var(--primaryColor),
-			transparent
-		);
-		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;
-	}
 </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"
+						class="my-1 mr-1 w-fit rounded-full px-3 py-1 transition-colors duration-300 text-white bg-secondary"
-						style={`
-							background-color: ${tag.bgColor || "black"};
-							color: ${tag.textColor || "white"};
-						`}
 					>
 						{tag.text}
 					</div>

src/components/projects/VideoProject.svelte

@@ -133,13 +133,9 @@
 		>
 			{#each tags as tag}
 				<div
-                    class="my-1 mr-1 w-fit
+					class="bg-secondary my-1 mr-1
-                        rounded-full px-3 py-1
+                        w-fit rounded-full px-3
-                        transition-colors duration-300"
+                        py-1 text-white transition-colors duration-300"
-                    style={`
-							background-color: ${tag.bgColor || "black"};
-							color: ${tag.textColor || "white"};
-						`}
 				>
 					{tag.text}
 				</div>

src/components/skills/Skill.astro

@@ -33,9 +33,7 @@ const { title, tags, primaryColor, className = "" } = Astro.props;
 				{
 					tags?.map((tag, index) => (
 						<div
-							class={`tag-${index} my-1 mr-1 w-fit cursor-default rounded-full px-3 py-1 transition-colors duration-300`}
+							class={`tag-${index} my-1 mr-1 w-fit cursor-default rounded-full bg-[#303030] px-3 py-1 text-white transition-colors duration-300`}
-							style={`--tag-bg: ${tag.bgColor || "#000"}; --tag-text: ${tag.textColor || "#ffffff"};
-                        --tag-hover-text: ${tag.hoverTextColor || "#ffffff"}`}
 						>
 							{tag.text}
 						</div>
@@ -45,10 +43,3 @@ const { title, tags, primaryColor, className = "" } = Astro.props;
 		</div>
 	</Card>
 </div>
-
-<style>
-	[class*="tag-"] {
-		background-color: var(--tag-bg);
-		color: var(--tag-text);
-	}
-</style>

src/pages/discord.astro

@@ -9,5 +9,5 @@ import InfoLayout from "../layouts/InfoLayout.astro";
 />
 
 <script is:inline>
-    window.location.href = "https://discord.gg/UnHyHkhbga";
+    window.location.href = "https://discord.gg/F5efU63Prz";
 </script>

src/styles/global.css

@@ -27,6 +27,8 @@
 	--animate-fadeUp: fadeUp 0.5s ease-in-out;
 	--animate-glow: glow 2s ease infinite;
 
+	/* --gradient-primary:  */
+
 	@keyframes fadeIn {
 		0% {
 			opacity: 0;