Merge pull request #1677 from hrx01-dev/fix/Darkmode-readabilityissue

Fixed  dark mode readability issue

Author: sanjay-kv

blog/authors.yml

@@ -6,7 +6,7 @@ sanjay-kv:
   email: sanjay@recodehive.com
   page: true # Turns the feature on
   description: >
-    Founder at @recodehive, previously a Software Engineer turned into a Data Engineer and Program Manager, Google ML Facilitator & Ex- GitHub CE.
+    I'm a Software Engineer turned into a Data Engineer and Program Manager🚀, 🏆 Google ML Facilitator & Ex- GitHub CE who delivered 100+ talks on ML and open source and developer advocacy at various events and platforms.
 
   socials:
     x: https://x.com/sanjay_kv_
@@ -19,7 +19,7 @@ sanjay-kv:
 
 sowmiya-v:
   name: Sowmiya Venkatesan
-  tile: Business Strategy & Operations Manager
+  tile:  Business Strategy & Operations Manager 
   url: https://github.com/sowmiyeh
   image_url: https://avatars.githubusercontent.com/u/74345706?v=4
 
@@ -33,6 +33,7 @@ Aditya-Singh-Rathore:
   description: >
     Aditya is a self-taught, Fabric-certified Data Engineer, GSSoC winner, author, and open-source enthusiast passionate about building scalable data solutions, contributing to the community, and sharing knowledge through blogs and public learning.
 
+
   socials:
     linkedin: aditya-singh-rathore0017
     github: Adez017

blog/google-icon-update/index.md

@@ -41,7 +41,7 @@ import imgWorkspace from './assets/06-googleworkspace-new-logo.png';
 
 <!-- truncate -->
 
-
+---
 
 Last week I clicked Google Meet when I meant to click Google Calendar.
 
@@ -82,11 +82,11 @@ To understand why this redesign matters, you have to go back to October 2020 whe
 At the time, the rebrand looked clean on paper. Google unified its entire app suite under one design language: every icon would use all four company colors, blue, red, yellow, and green, in the same flat style. The thinking was brand consistency. The result was visual chaos.
 
 
+<div className="img-zoom">
 
-  <BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>    
-     [![Github](./assets/03-google-old-apps-logo.png)]()
-    </BrowserWindow>
+ [![Github](./assets/03-google-old-apps-logo.png)]()
 
+</div>
 
 Within hours of the 2020 announcement, the internet responded with a very specific complaint: all the icons now look the same. The new Gmail icon was the most mocked. The classic envelope with a red M that everyone recognized was replaced with a four-color M that looked like a child's art project. People struggled to tell Calendar from Drive, Drive from Docs, and Meet from everything else at a glance.
   <BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>    
@@ -95,10 +95,7 @@ Within hours of the 2020 announcement, the internet responded with a very specif
 
 The complaint was not just aesthetic. It was functional. When apps share the same four colors and similar shapes, your brain cannot build distinct visual shortcuts for each one. You have to read the icon rather than recognize it. That adds cognitive friction dozens of times a day. Multiply that across 3 billion Google Workspace users and the accumulated frustration becomes significant.
 
-
-  <BrowserWindow url="https://github.com/recodehive/recode-website/issues" bodyStyle={{padding: 0}}>    
-     [![Github](./assets/06-googleworkspace-new-logo.png)]()
-    </BrowserWindow>
+<ZoomImage src={imgWorkspace} alt="Google new Workspace logo" />
 
 
 <span style={{color: 'red'}}> **Thought process behind Google**</span>? In 2020

docs/GitHub/intro-gitlab.md

@@ -34,7 +34,7 @@ export default function ReadingTimeIndicator({
       authorCardReached = pageScrollPercent >= 90;
     }
 
-    const shouldBeVisible = pageScrollPercent >= 2 && !authorCardReached;
+    const shouldBeVisible = pageScrollPercent >= 15 && !authorCardReached;
     setVisible(shouldBeVisible);
 
     // Calculate remaining time proportional to how far through the content the

src/components/ReadingTimeIndicator/index.tsx

@@ -134,9 +134,7 @@ const BlogCard = ({
                 ))}
               </div>
             </div>
-            <span className="card-read-time">
-  🕒 {Math.max(1, Math.ceil(content.split(" ").length / 200))} min read
-</span>
+            <span className="card-read-time">5 min read</span>
           </div>
 
           {/* Read More Button */}

src/components/blogCarousel/blogCard.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { motion } from "framer-motion";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { useSafeColorMode } from "../../utils/useSafeColorMode";
@@ -54,9 +54,12 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
     };
   };
 
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
   return (
     <motion.div
-      initial={{ opacity: 0, y: 20 }}
+      initial={mounted ? { opacity: 0, y: 20 } : false}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -20 }}
       whileHover={{ y: -8 }}
@@ -95,18 +98,27 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
             </Avatar>
 
             <div className="flex-1">
-              <h3 className="text-xl font-bold text-gray-900 mb-1 tracking-tight">
+              <h3
+                className="testimonial-author-name mb-1 text-xl font-bold leading-tight tracking-tight"
+                style={{ color: "#111827", opacity: 1, WebkitTextFillColor: "#111827" }}
+              >
                 {name}
               </h3>
               {username !== "AryanGupta" && username !== "DonaldAnyamba" && (
-                <p className="text-sm text-gray-700 font-medium mb-3">
+                <p
+                  className="testimonial-author-role mb-3 text-sm font-medium"
+                  style={{ color: "#334155", opacity: 1, WebkitTextFillColor: "#334155" }}
+                >
                   {username === "VivienChen" ? "Founder @ Toastie (BC Y24)" :
                     username === "DanielHan" ? "Founder @ Unsloth AI (YC W24, BC Y24)" :
                       "AI Engineer @ Relevance AI"}
                 </p>
               )}
 
-              <div className="flex items-center gap-3 text-xs text-gray-700">
+              <div
+                className="flex items-center gap-3 text-xs"
+                style={{ color: "#334155", opacity: 1, WebkitTextFillColor: "#334155" }}
+              >
                 <span className="font-medium">{date}</span>
               </div>
             </div>

src/components/testimonials/TestimonialCard.tsx

@@ -72,6 +72,9 @@ export function TestimonialCarousel() {
   const [current, setCurrent] = useState(0);
   const [count, setCount] = useState(0);
   const { colorMode } = useSafeColorMode();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
 
   useEffect(() => {
     if (!api) {
@@ -106,7 +109,7 @@ export function TestimonialCarousel() {
 
       <div className="relative mx-auto max-w-7xl px-4 z-10">
         <motion.div
-          initial={{ opacity: 0, y: 30 }}
+          initial={mounted ? { opacity: 0, y: 30 } : false}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6 }}
           className="mb-16 text-center"
@@ -121,7 +124,7 @@ export function TestimonialCarousel() {
         </motion.div>
 
         <motion.div
-          initial={{ opacity: 0, y: 40 }}
+          initial={mounted ? { opacity: 0, y: 40 } : false}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6, delay: 0.2 }}
         >

src/components/testimonials/TestimonialCarousel.tsx

@@ -5,6 +5,82 @@
   color: inherit;
 }
 
+/* Careers testimonials */
+.testimonials-section .testimonial-carousel {
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  color: #111827;
+}
+
+/* Ensure testimonial cards are visible by default (override animation initial states) */
+.testimonials-section .testimonial-carousel {
+  opacity: 1 !important;
+  transform: none !important;
+}
+
+.testimonials-section .testimonial-carousel--light {
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
+}
+
+.testimonials-section .testimonial-content {
+  color: #0f172a;
+}
+
+.testimonials-section .testimonial-content blockquote {
+  color: #0f172a;
+}
+
+.testimonials-section .testimonial-author {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.85rem 1.1rem;
+  border-radius: 1rem;
+  background: rgba(255, 255, 255, 0.98);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
+  opacity: 1;
+  mix-blend-mode: normal;
+  isolation: isolate;
+}
+
+/* Strong override to ensure author text is always visible */
+.testimonials-section .testimonial-author {
+  background: rgba(255, 255, 255, 0.98) !important;
+  border: 1px solid rgba(15, 23, 42, 0.08) !important;
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16) !important;
+  opacity: 1 !important;
+  mix-blend-mode: normal !important;
+}
+
+.testimonials-section .testimonial-author-name,
+.testimonials-section .testimonial-author-role {
+  color: #111827 !important;
+  -webkit-text-fill-color: #111827 !important;
+  opacity: 1 !important;
+  mix-blend-mode: normal !important;
+  text-shadow: none !important;
+}
+
+.testimonials-section .testimonial-author-name {
+  color: #111827;
+  -webkit-text-fill-color: #111827;
+  text-shadow: none;
+  opacity: 1;
+  mix-blend-mode: normal;
+  font-weight: 900;
+}
+
+.testimonials-section .testimonial-author-role {
+  color: #334155;
+  -webkit-text-fill-color: #334155;
+  opacity: 1;
+  mix-blend-mode: normal;
+}
+
 /* You can override the default Infima variables here. */
 @import "tailwindcss";
 
@@ -2098,8 +2174,8 @@ html[data-theme="dark"] {
 }
 
 /* TOC inner wrapper — sticky; border-left here so the vertical line
-   only spans the height of the TOC content, not the full page */
-.blog-wrapper .col.col--2 > div {
+  only spans the height of the TOC content, not the full page */
+.blog-wrapper .col.col--2>div {
   position: sticky !important;
   top: calc(var(--ifm-navbar-height, 60px) + 1rem) !important;
   max-height: calc(100vh - var(--ifm-navbar-height, 60px) - 2rem) !important;
@@ -2108,7 +2184,7 @@ html[data-theme="dark"] {
   scrollbar-width: none !important;
 }
 
-.blog-wrapper .col.col--2 > div::-webkit-scrollbar {
+.blog-wrapper .col.col--2>div::-webkit-scrollbar {
   display: none !important;
 }
 
@@ -2252,7 +2328,7 @@ html[data-theme="dark"] .blog-post-page .markdown h4 {
     border-left: none !important;
   }
 
-  .blog-wrapper .col.col--2 > div {
+  .blog-wrapper .col.col--2>div {
     position: static !important;
     max-height: none !important;
     overflow-y: visible !important;

src/css/custom.css

@@ -335,15 +335,12 @@ const BlogCard = ({ blog }: { blog: (typeof blogs)[number] }) => {
             </div>
           </div>
 
-          {/* Read time + Read link */}
-          <span className="card-read-time">
-            🕒 {Math.max(1, Math.ceil((blog.description || "").split(" ").length / 200))} min read
-          </span>
+          {/* Read link */}
           <Link to={`/blog/${blog.slug}`} className="card-read-link">
             Read →
           </Link>
         </div>
       </div>
     </div>
   );
-};
+};