Theming ✅ #4

darsan-in · Jul 9, 2024 · 1cb257c · 1cb257c
1 parent 846bd7a
commit 1cb257c
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 22 deletions.
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -3,7 +3,7 @@ export default () => {
 		<main>
 			<div className="max-w-screen-xl mx-auto px-4 flex items-center justify-start h-screen md:px-8">
 				<div className="max-w-lg mx-auto space-y-3 text-center">
-					<h3 className="text-indigo-600 font-semibold">404 Error</h3>
+					<h3 className="text-primary font-semibold">404 Error</h3>
 					<p className="text-gray-800 text-4xl font-semibold sm:text-5xl">
 						Page not found
 					</p>

diff --git a/app/src/components/achievments.tsx b/app/src/components/achievments.tsx
@@ -42,7 +42,7 @@ export default () => {
 							<li
 								key={idx}
 								className="space-y-3">
-								<div className="w-12 h-12 mx-auto bg-indigo-50 text-primary rounded-full flex items-center justify-center">
+								<div className="w-12 h-12 mx-auto bg-secondary text-primary rounded-full flex items-center justify-center">
 									{item.icon}
 								</div>
 								<h4 className="text-lg text-gray-800 font-semibold">

diff --git a/app/src/components/education.tsx b/app/src/components/education.tsx
@@ -52,7 +52,7 @@ export default () => {
 						<div
 							className="space-y-3 mt-6 px-8"
 							key={idx}>
-							<h4 className="text-gray-800 text-xl font-semibold ">
+							<h4 className="text-gray-800 text-xl font-bold text-primary ">
 								{item.title}
 							</h4>
 							<p className="text-gray-500">{item.desc}</p>

diff --git a/app/src/components/home.tsx b/app/src/components/home.tsx
@@ -66,7 +66,7 @@ export default function HomePage() {
 									<div className="items-center gap-x-3 space-y-3 sm:flex sm:space-y-0">
 										<a
 											href="#skills"
-											className="block py-2 px-4 text-center text-white font-medium bg-primary duration-150 hover:bg-indigo-500 active:bg-indigo-700 rounded-lg shadow-lg hover:shadow-none">
+											className="block py-2 px-4 text-center text-white font-medium bg-primary duration-150 hover:bg-secondary active:bg-indigo-700 rounded-lg shadow-lg hover:shadow-none hover:text-black">
 											Explore more
 										</a>
 										<a

diff --git a/app/src/components/topnav.tsx b/app/src/components/topnav.tsx
@@ -9,7 +9,7 @@ export default () => {
 					<div className="max-w-3xl">
 						<p
 							className={
-								"leading-relaxed mt-2 text-8xl font-bold text-primary duration-1000 hover:text-blue-700 active:bg-gray-200 font-jose " +
+								"leading-relaxed mt-2 text-8xl font-bold text-primary duration-1000 hover:text-secondary active:bg-gray-200 font-jose " +
 								style.name
 							}>
 							{name}

diff --git a/app/src/components/utils.tsx b/app/src/components/utils.tsx
@@ -40,11 +40,11 @@ export async function fetchGHMeta(
 
 export function getBarColours(percentages: number[]): string[] {
 	const colors: string[] = [
-		"#0E46A3",
-		"#90D26D",
-		"#80BCBD",
-		"#7077A1",
-		"#AC87C5",
+		"#3498DB",
+		"#2ECC71",
+		"#E67E22",
+		"#E74C3C",
+		"#1ABC9C",
 	];
 
 	const sortedPercentage = percentages.sort();

diff --git a/app/src/components/work-card.tsx b/app/src/components/work-card.tsx
@@ -23,14 +23,12 @@ export default ({ projects }: { projects: GithubRepoMeta[] }) => {
 						<li
 							className={"border rounded-lg " + style.workCard}
 							key={idx}>
-							<div className="flex items-start justify-between p-4 rounded-t-lg bg-primary">
+							<div className="flex items-start justify-between p-4 rounded-t-lg bg-secondary">
 								<div className="space-y-2">
-									<h4 className="text-white font-bold text-blue-700 text-xl">
+									<h4 className="text-black font-bold text-xl">
 										{project.name.toUpperCase()}
 									</h4>
-									<p className="text-white text-sm">
-										{project.description}
-									</p>
+									<p className="text-sm">{project.description}</p>
 								</div>
 								<div className="flex gap-2">
 									<a
@@ -62,14 +60,14 @@ export default ({ projects }: { projects: GithubRepoMeta[] }) => {
 								<div className="flex gap-x-2 justify-between">
 									<ul>
 										<li className="flex">
-											<GoGoal className="mr-2 pt-1 text-indigo-600" />
+											<GoGoal className="mr-2 pt-1 text-primary" />
 											Created on{" "}
 											<span className="ml-1 font-normal text-gray-500">
 												{project.createdAt}
 											</span>
 										</li>
 										<li className="mt-2 flex">
-											<RxUpdate className="mr-2 pt-1 text-indigo-600" />{" "}
+											<RxUpdate className="mr-2 pt-1 text-primary" />{" "}
 											Updated on{"  "}
 											<span className="ml-1 font-normal text-gray-500">
 												{project.updatedAt}
@@ -78,7 +76,7 @@ export default ({ projects }: { projects: GithubRepoMeta[] }) => {
 
 										{project.downloadCount ? (
 											<li className="mt-2 flex">
-												<RxDownload className="mr-2 pt-1 text-indigo-600" />{" "}
+												<RxDownload className="mr-2 pt-1 text-primary" />{" "}
 												Downloads:{"  "}
 												<span className="ml-1 font-normal text-gray-500">
 													{project.downloadCount}
@@ -90,7 +88,7 @@ export default ({ projects }: { projects: GithubRepoMeta[] }) => {
 
 										{project.openIssuesCount ? (
 											<li className="mt-2 flex">
-												<GoIssueOpened className="mr-2 pt-1 text-indigo-600" />
+												<GoIssueOpened className="mr-2 pt-1 text-primary" />
 												Request:{" "}
 												<span className="ml-1 font-normal text-gray-500">
 													{project.openIssuesCount}
@@ -101,7 +99,7 @@ export default ({ projects }: { projects: GithubRepoMeta[] }) => {
 										)}
 										{project.loc ? (
 											<li className="mt-2 flex">
-												<HiOutlineCodeBracket className="mr-2 pt-1 text-indigo-600" />
+												<HiOutlineCodeBracket className="mr-2 pt-1 text-primary" />
 												Lines of code:{" "}
 												<span className="ml-1 font-normal text-gray-500">
 													{Math.ceil(project.loc)}

diff --git a/app/src/icons/hireme.tsx b/app/src/icons/hireme.tsx
@@ -4,7 +4,7 @@ export default () => {
 	return (
 		<button
 			type="button"
-			className="relative inline-flex items-center p-3 px-5 text-sm font-medium text-center text-white bg-blue-700 rounded-full hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+			className="relative inline-flex items-center p-3 px-5 text-sm font-medium text-center text-white bg-primary rounded-full hover:bg-secondary focus:ring-4 focus:outline-none focus:ring-blue-300 hover:text-black">
 			<IoIosRocket size={22} />
 
 			<span className="ml-2">OPEN TO WORK</span>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -8,7 +8,8 @@ module.exports = {
 				jose: ["Josefin Sans", "sans-serif"],
 			},
 			colors: {
-				primary: "#2563eb",
+				primary: "#9400FF",
+				secondary: "#E6CCFF",
 			},
 		},
 	},