Support dark and light mode

iamfrerot · Jul 21, 2024 · cf528cb · cf528cb
1 parent 1d80112
commit cf528cb
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 18 deletions.
diff --git a/src/Components/About.tsx b/src/Components/About.tsx
@@ -31,7 +31,7 @@ const About = () => {
     }}
     initial='hidden'
     animate={p1Controls}
-    transition={{ duration: 0.9, delay: 0.2 }}
+    transition={{ duration: 0.9 }}
     className='mt-4 text-black-100 dark:text-white text-base sm:text-lg sm:text-center '
    >
     After highschool, i decided to pursue my passion for programming. i enrolled
@@ -69,7 +69,7 @@ const About = () => {
      visible: { opacity: 1, y: 0 },
     }}
     initial='hidden'
-    transition={{ duration: 0.9, delay: 0.2 }}
+    transition={{ duration: 0.9 }}
     className='mt-4 text-black-100 dark:text-white text-base sm:text-lg sm:text-center'
    >
     I also joined the Talent 4 Startups program{" "}
@@ -116,7 +116,7 @@ const About = () => {
     }}
     initial='hidden'
     transition={{ duration: 0.9, delay: 0.2 }}
-    className='mt-3 italic text-black-100 dark:text-white text-base sm:text-lg sm:text-center'
+    className='mt-3 italic text-black-100 dark:text-white text-base sm:text-lg text-center'
    >
     "fun fact when i'm not coding, i enjoy basketball 🏀, listing to music 🎧
     and{" "}

diff --git a/src/Components/Contact.tsx b/src/Components/Contact.tsx
@@ -57,7 +57,7 @@ const Contact = () => {
     <input
      type='text'
      placeholder='your name'
-     className={`bg-transparent w-full py-2 text-black-100 dark:text-white border-b-2  outline-0 ${
+     className={`bg-transparent w-full py-2 text-black-100 dark:text-white border-b-2  outline-0 rounded-none ${
       errors.name ? "border-red-500" : "border-secondary"
      }`}
      {...register("name", {
@@ -67,9 +67,9 @@ const Contact = () => {
     />
     {errors.name && <p className='text-red-500 text-sm'>Required</p>}
     <input
-     type='email'
+     type='text'
      placeholder='your email'
-     className={`bg-transparent w-full py-2 text-black-100 dark:text-white border-b-2 outline-0 ${
+     className={`bg-transparent w-full py-2 text-black-100 dark:text-white border-b-2 outline-0 rounded-none ${
       errors.email ? "border-red-500" : "border-secondary"
      }`}
      {...register("email", {
@@ -80,7 +80,7 @@ const Contact = () => {
     />
     {errors.email && <p className='text-red-500 text-sm'>Invalid email</p>}
     <textarea
-     className={`bg-transparent w-full py-2 text-black-100 dark:text-white border-b-2 outline-0 overflow-y-scroll no-scrollbar min-h-[110px] ${
+     className={`bg-transparent w-full py-2 text-black-100 dark:text-white border-b-2 outline-0 overflow-y-scroll no-scrollbar min-h-[110px] rounded-none ${
       errors.message ? "border-red-500" : "border-secondary"
      }`}
      placeholder='your message'

diff --git a/src/Components/Experience.tsx b/src/Components/Experience.tsx
@@ -27,12 +27,12 @@ const Experience = () => {
         {experience.role} -{" "}
         <span className='text-lg text-secondary'>{experience.company}</span>
        </h6>
-       <p className='text-neutral-400 mb-4'>{experience.description}</p>
+       <p className='text-neutral-500 mb-4'>{experience.description}</p>
        <div className='flex flex-wrap'>
         {experience.stack.map((tech, index) => (
          <span
           key={index}
-          className='mr-2 mt-4 rounded bg-neutral-900 px-2 py-1 text-sm font-medium text-secondary'
+          className='mr-2 mt-4 rounded bg-neutral-200 dark:bg-neutral-900 px-2 py-1 text-sm font-medium text-secondary'
          >
           {tech}
          </span>

diff --git a/src/Components/Hero.tsx b/src/Components/Hero.tsx
@@ -21,18 +21,18 @@ const Hero = () => {
      <a
       href='https://github.com/iamfrerot'
       target='_blank'
-      className='inline-flex hover:underline text-secondary'
+      className='inline-flex hover:underline text-secondary font-bold'
      >
       <Highlightext text='frérot' />
-      <CiLink className='inline text-lg text-secondary' />
+      <CiLink className='inline text-lg text-secondary ' />
      </a>{" "}
-     a <Highlightext text='full-stack' /> and{" "}
-     <Highlightext text='mobile developer' />
+     a <Highlightext text='full-stack' styles='font-bold' /> and{" "}
+     <Highlightext text='mobile developer' styles='font-bold' />
     </p>
     <div className='flex items-center gap-x-4'>
      <Link
       to='contact'
-      className='text-black-100 font-bold hover:text-secondary dark:text-white bg-transparent px-3 py-2 rounded-3xl border border-gray-700 hover:bg-black-100 hover:dark:text-secondary transition duration-300 flex gap-x-1 cursor-pointer'
+      className='text-black-100 font-bold hover:text-secondary dark:text-white bg-transparent px-3 py-2 rounded-3xl border border-gray-700 hover:bg-white dark:hover:bg-black-100 hover:dark:text-secondary transition duration-300 flex gap-x-1 cursor-pointer'
       smooth={true}
       duration={800}
      >

diff --git a/src/Components/Skills.tsx b/src/Components/Skills.tsx
@@ -25,7 +25,7 @@ const Skills = () => {
     {skillsData.map((skill, index) => (
      <motion.li
       key={index}
-      className='bg-white dark:bg-black-100 border border-white/[0.1] rounded-xl px-5 py-3'
+      className='bg-white  dark:bg-black-100 border border-black/[0.1] dark:border-white/[0.1] rounded-xl px-5 py-3'
       variants={fadeInAnimationVariants}
       initial='initial'
       whileInView='animate'

diff --git a/src/ui/CardHoverEffect.tsx b/src/ui/CardHoverEffect.tsx
@@ -68,7 +68,7 @@ export const Card = ({
  return (
   <div
    className={cn(
-    "rounded-2xl h-full w-full p-4 overflow-hidden bg-black-100 border border-transparent dark:border-white/[0.2] group-hover:border-slate-700 relative z-20",
+    "rounded-2xl h-full w-full p-4 overflow-hidden bg-white dark:bg-black-100 border border-transparent dark:border-white/[0.2] group-hover:border-slate-700 relative z-20",
     className
    )}
   >
@@ -88,7 +88,7 @@ export const CardTitle = ({
  return (
   <h4
    className={cn(
-    "text-zinc-100 font-bold tracking-wide mt-4 text-2xl",
+    "dark:text-zinc-100 font-bold tracking-wide mt-4 text-2xl",
     className
    )}
   >
@@ -106,7 +106,7 @@ export const CardDescription = ({
  return (
   <p
    className={cn(
-    "mt-8 text-zinc-400 tracking-wide leading-relaxed text-sm",
+    "mt-8 dark:text-zinc-400 tracking-wide leading-relaxed text-sm",
     className
    )}
   >