Update

- Education Card
- Adding Color Variables

Author: davinash97

src/app/components/Card.tsx

@@ -47,7 +47,7 @@ export default React.memo(function Card({
 						href={link}
 						target="_blank"
 						rel="noopener noreferrer"
-						className={`text-purple-500 inline-flex items-center ${lato.className}`}>
+						className={`text-(--primary) inline-flex items-center ${lato.className}`}>
 						<LinkIcon className="mr-1" /> Visit
 					</a>
 				)}

src/app/components/ContactCard.tsx

@@ -15,9 +15,9 @@ export default function ContactCard({
 	content,
 }: ContactProps) {
 	return (
-		<div className="flex flex-row w-full gap-4 rounded-xl p-4 border-2 border-solid border-purple-500 items-center">
+		<div className="flex flex-row w-full gap-4 rounded-xl p-4 border-2 border-solid border-(--primary) items-center">
 			{/* Icon */}
-			<div className="h-[80px] w-[80px] flex items-center justify-center text-4xl text-purple-500">
+			<div className="h-[80px] w-[80px] flex items-center justify-center text-4xl text-(--primary)">
 				<Icon />
 			</div>
 

src/app/components/ProjectCard.tsx

@@ -40,7 +40,7 @@ export default function ProjectCard({
 					draggable="false"
 					className="w-full h-full select-none object-cover rounded-md"
 				/>
-				<h3 className="absolute font-bold text-lg z-10 w-full bottom-1 text-center text-white bg-purple-500">
+				<h3 className="absolute font-bold text-lg z-10 w-full bottom-1 text-center text-(--accent) bg-(--secondary)">
 					{name || "This is a dummy project name"}
 				</h3>
 			</div>
@@ -62,7 +62,7 @@ export default function ProjectCard({
 					{techStack.map((tech, index) => (
 						<span
 							key={index}
-							className="text-gray-200 text-sm rounded-full px-2 py-1 bg-purple-500">
+							className="text-sm rounded-full px-2 py-1 text-(--background) bg-(--secondary)">
 							{tech}
 						</span>
 					))}

src/app/globals.css

@@ -8,11 +8,21 @@
 	/* --background: #ffffff; */
 	/* --foreground: #171717; */
 	@apply bg-gray-200 text-black;
+	--primary: #8727e7;
+	--secondary: #9900ff;
+	--accent: #ceb8ff;
+	--foreground: #042004;
+	--background: #f6fef6;
 }
 
 @media (prefers-color-scheme: dark) {
 	:root {
 		@apply bg-gray-900 text-gray-200;
+		--primary: #7818d8;
+		--secondary: #9900ff;
+		--accent: #170047;
+		--foreground: #dffbdf;
+		--background: #010901;
 		/* --background: #0a0a0a; */
 		/* --foreground: #ededed; */
 	}
@@ -27,6 +37,7 @@ h1,
 h2,
 h3 {
 	@apply select-none;
+	/* -webkit-text-stroke: 1px var(--accent); */
 }
 
 h2 {

src/app/page/contact/Contact.tsx

@@ -167,7 +167,7 @@ export default function Contact() {
 							/>
 							<button
 								type="submit"
-								className="self-end px-6 py-2 bg-[var(--accent)]] text-white rounded-md hover:bg-gray-800 transition"
+								className="self-end px-6 py-2 bg-(--primary) text-(--background) rounded-md hover:bg-gray-800 transition"
 								disabled={loading}>
 								{/* Send */}
 								{loading ? "Sending..." : "Send"}

src/app/page/education/Education.tsx

@@ -28,23 +28,13 @@ export default function Education() {
 			title: "Diploma in Electrical Engineering (Lateral)",
 			organization: "Rungta College of Engineering & Technology",
 			duration: "2017-2019",
-			detail: `Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-								Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
-								when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-								It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
-								It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
-								and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`,
+			detail: `I completed my Diploma in Electrical Engineering from Rungta College of Engineering & Technology, where I gained extensive knowledge during my academic years (2017-2019 Lateral Entry after ITI). I worked on various projects, including an Arduino-based robotic arm capable of picking up and placing objects, and a path-following vehicle designed to reach a predefined destination. Both projects were controllable via an Android device using Bluetooth communication.`,
 		},
 		{
 			title: "Bachelors in Computer Science Engineering (Lateral)",
 			organization: "Rungta College of Engineering & Technology",
 			duration: "2021-2024",
-			detail: `Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-								Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
-								when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-								It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
-								It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
-								and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`,
+			detail: `I completed my Bachelor of Technology in Computer Science Engineering from 2021 to 2024 (3 years due to Lateral Entry). Throughout my academic journey, I gained a solid understanding of how computers work, as well as the wide range of applications and software in the industry. During this time, I was part of a team that developed a social media-like platform for pets, designed to help users arrange playdates. Additionally, I worked on various web-based management software projects. These experiences significantly enhanced my knowledge and skills in web development and software engineering.`,
 		},
 	];
 	return (

src/app/page/hero/Hero.tsx

@@ -65,7 +65,7 @@ export default function Hero() {
 		<section className="relative h-screen w-screen m-0 p-0">
 			{/* GPU-friendly animated gradient background */}
 			<motion.div
-				className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-purple-500 via-pink-500 to-indigo-500 animate-gradient-x"
+				className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-(--primary) via-(--background) to-(--secondary) animate-gradient-x"
 				style={{
 					opacity,
 					transform: `translateY(${translateY}px)`,
@@ -75,23 +75,23 @@ export default function Hero() {
 
 			{/* Overlay */}
 			<motion.div
-				className="relative z-10 flex flex-col items-center justify-center w-full h-full bg-black/30 text-white text-center"
+				className="relative z-10 flex flex-col items-center justify-center w-full h-full text-white bg-black/30 text-center"
 				style={{
 					opacity,
 					transform: `translateY(${translateY}px)`,
 					transition: "opacity 0.1s linear, transform 0.1s linear",
 				}}>
 				{/* Heading with stagger */}
 				<motion.h1
-					className={`text-3xl md:text-6xl lg:text-6xl xl:text-8xl break-words p-6 ${poppins.className}`}>
+					className={`text-3xl md:text-6xl lg:text-6xl xl:text-8xl break-words p-6 text-(--primary) ${poppins.className}`}>
 					{"Welcome to my Portfolio".split(" ").map((word, i) => (
 						<motion.span
 							key={i}
 							custom={i}
 							variants={headingVariants}
 							initial="hidden"
 							animate="visible"
-							className="inline-block mr-2 heading">
+							className="inline-block mr-2">
 							{word}
 						</motion.span>
 					))}
@@ -108,7 +108,7 @@ export default function Hero() {
 						initial={{ opacity: 0, y: 20 }}
 						animate={{ opacity: 1, y: 0 }}
 						transition={{ duration: 0.6 }}
-						className={`${greatVibes.className} inline-block animate-bounce hover:[animation-play-state:paused] cursor-auto text-purple-500`}>
+						className={`${greatVibes.className} inline-block animate-bounce hover:[animation-play-state:paused] cursor-auto)`}>
 						{name}
 					</motion.span>
 				</motion.h3>