Merge pull request #3 from skunichetty/light-mode

Added light mode support
skunichetty · May 26, 2024 · da559b3 · da559b3
2 parents 03a5ed7 + a97a46d
commit da559b3
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 30 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -3,27 +3,20 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --foreground-rgb: 12, 10, 9;
+  --background-rgb: 231, 229, 228;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --foreground-rgb: 231, 229, 228;
+    --background-rgb: 12, 10, 9;
   }
 }
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background: rgb(var(--background-rgb));
 }
 
 @layer utilities {

diff --git a/app/page.tsx b/app/page.tsx
@@ -100,7 +100,7 @@ function Hero() {
 
   return (
     <div
-      className="opacity-0 bg-gradient-to-l from-blue-500 text-white text-center w-full sm:h-52 h-40 mt-5 relative"
+      className="opacity-0 bg-gradient-to-l from-blue-500 text-center w-full sm:h-52 h-40 mt-5 relative"
       ref={hero}
     >
       <div ref={heroContent} className="opacity-0 w-full h-full"></div>
@@ -109,8 +109,9 @@ function Hero() {
 }
 function LineWithHeading({ heading, description }: LineWithHeadingProps) {
   return (
-    <p className="text-gray-400">
-      <span className="text-white">{heading}:</span> {description}
+    <p>
+      {heading}:&nbsp;&nbsp;
+      <span className="text-gray-500 dark:text-gray-400">{description}</span>
     </p>
   );
 }
@@ -143,21 +144,21 @@ export default function Home() {
           <ExperienceList experiences={experiences} />
         </Dropdown>
         <Dropdown icon="graduation" title="Education">
-          <div className="md:text-base sm:text-sm text-xs text-gray-400 sm:max-w-md max-w-sm ">
-            <p className="text-white">
-              Bachelor of Science in Engineering, Computer Science
-            </p>
-            <div className="md:text-sm text-xs">
+          <div className="md:text-base sm:text-sm text-xs sm:max-w-md max-w-sm ">
+            <p>Bachelor of Science in Engineering, Computer Science</p>
+            <div className="md:text-sm text-xs text-gray-500 dark:text-gray-400">
               <div className="flex flex-row justify-between">
                 <p>University of Michigan, Ann Arbor</p>
                 <p>Aug 2020 - Apr 2024</p>
               </div>
-              <p>Minors in Business Administration, Mathematics</p>
+              <p className="text-gray-500 dark:text-gray-400">
+                Minors in Business Administration, Mathematics
+              </p>
             </div>
           </div>
         </Dropdown>
         <Dropdown icon="library" title="Skills">
-          <div className="md:text-sm text-xs text-white">
+          <div className="md:text-sm text-xs">
             <LineWithHeading
               heading="Programming Languages"
               description="C++, Python, TypeScript, Rust"

diff --git a/components/dropdown.tsx b/components/dropdown.tsx
@@ -15,7 +15,7 @@ export default function Dropdown({ icon, title, children }: DropdownProps) {
       <button
         type="button"
         onClick={() => setContentVisibility(!contentVisible)}
-        className="text-white hover:text-blue-500 transition"
+        className="hover:text-blue-500 transition"
       >
         <div className="flex flex-row items-center gap-2">
           <Icon name={contentVisible ? "caret_up" : "caret_down"} />

diff --git a/components/experience_list.tsx b/components/experience_list.tsx
@@ -38,7 +38,7 @@ export function ExperienceItem({
         ) : null}
         {position}
       </p>
-      <div className="text-gray-400 md:text-sm text-xs flex flex-row justify-between">
+      <div className="text-gray-500 dark:text-gray-400 md:text-sm text-xs flex flex-row justify-between">
         <div className="flex flex-row">
           {href == undefined ? (
             <span>{company}</span>

diff --git a/components/footer.tsx b/components/footer.tsx
@@ -4,7 +4,7 @@ import SocialMediaLink from "./social";
 
 export default function Footer() {
   return (
-    <footer className="flex flex-row justify-center items-center gap-2 mt-auto p-10 text-gray-400 divide-x-2 divide-gray-400">
+    <footer className="flex flex-row justify-center items-center gap-2 mt-auto p-10 text-gray-500 dark:text-gray-400 divide-x-2 divide-gray-400">
       <div className="flex flex-row justify-center items-center gap-2">
         <SocialMediaLink
           type="linkedin"

diff --git a/components/location.tsx b/components/location.tsx
@@ -37,7 +37,7 @@ export function Clock({ locale, timezone }: ClockProps) {
 
 export default function Location() {
   return (
-    <div className="flex flex-row gap-4 text-sm text-gray-400 mt-1">
+    <div className="flex flex-row gap-4 text-sm text-gray-500 dark:text-gray-400 mt-1">
       <div className="flex flex-row items-center gap-1">
         <Icon name="location" />
         <h1>New York, NY, US</h1>

diff --git a/components/navbar.tsx b/components/navbar.tsx
@@ -28,7 +28,7 @@ function NavbarRowItem({ title, href, active }: NavbarItemProps) {
   return (
     <Link
       className={`font-bold ${
-        active ? "text-white" : "text-gray-400"
+        active ? "" : "text-gray-500 dark:text-gray-400"
       } hover:text-blue-500 transition`}
       href={href}
     >
@@ -41,7 +41,7 @@ function NavbarDropdownItem({ title, href, active }: NavbarItemProps) {
   return (
     <Link
       className={`block w-full ${
-        active ? "font-bold text-white" : "font-normal text-gray-400"
+        active ? "font-bold" : "font-normal text-gray-500 dark:text-gray-400"
       } hover:text-blue-500 py-2 pl-3 transition flex flew-row items-center gap-2`}
       href={href}
     >
@@ -52,7 +52,7 @@ function NavbarDropdownItem({ title, href, active }: NavbarItemProps) {
 
 function NavbarRow({ links, pathname }: NavbarSubtypeProps) {
   return (
-    <ul className="flex-row sm:flex hidden divide-x-2 divide-gray-400 text-gray-400">
+    <ul className="flex-row sm:flex hidden divide-x-2 divide-gray-400 text-gray-500 dark:text-gray-400">
       {links.map((item) => (
         <li key={item.title} className="px-3 my-1">
           <NavbarRowItem
@@ -68,7 +68,7 @@ function NavbarRow({ links, pathname }: NavbarSubtypeProps) {
 
 function NavbarDropdown({ links, pathname }: NavbarSubtypeProps) {
   return (
-    <ul className="flex-col sm:hidden visible mt-6 divide-y-2 divide-gray-400 border-y-2 text-gray-400">
+    <ul className="flex-col sm:hidden visible mt-6 divide-y-2 divide-gray-400 border-y-2 text-gray-500 dark:text-gray-400">
       {links.map((item) => (
         <li key={item.title}>
           <NavbarDropdownItem