diff --git a/blog/authors.yml b/blog/authors.yml index b1cb7643..c761b7c9 100644 --- a/blog/authors.yml +++ b/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 diff --git a/blog/google-icon-update/index.md b/blog/google-icon-update/index.md index c45dc8b1..dcb13a1f 100644 --- a/blog/google-icon-update/index.md +++ b/blog/google-icon-update/index.md @@ -41,7 +41,7 @@ import imgWorkspace from './assets/06-googleworkspace-new-logo.png'; - +--- 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. +
- - [![Github](./assets/03-google-old-apps-logo.png)]() - + [![Github](./assets/03-google-old-apps-logo.png)]() +
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. @@ -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. - - - [![Github](./assets/06-googleworkspace-new-logo.png)]() - + **Thought process behind Google**? In 2020 diff --git a/docs/GitHub/intro-gitlab.md b/docs/GitHub/intro-gitlab.md deleted file mode 100644 index cbe53f77..00000000 --- a/docs/GitHub/intro-gitlab.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -id: intro-gitlab -title: Introduction of GitLab -sidebar_label: Introduction of GitLab #displays in sidebar -sidebar_position: 2 -tags: - [ - GitLab, - Introduction of GitLab, - Why learn GitLab, - How to use GitLab, - GitLab Prerequisites, - ] -description: In this tutorial, you will learn about GitLab, its importance, why learn GitLab, how to use GitLab, prerequisites to get started, and more. ---- - -GitLab is a web-based DevOps lifecycle tool that provides a **Git repository manager**, issue tracking, continuous integration/continuous deployment (CI/CD) pipelines, and more. It is similar to GitHub but focuses heavily on providing an **all-in-one platform** for software development and DevOps. - -:::note -Key Features of GitLab: -- GitLab is not only a Git-based repository management tool but also provides **built-in CI/CD pipelines**. -- Unlike GitHub, GitLab can be **self-hosted** as well as used on the cloud (GitLab.com). -- GitLab offers Premium Plans with advanced CI/CD, security, compliance, and scalability features. -::: - ---- - -## How to start with GitLab? - -When developers create new projects or collaborate on existing ones, they need a place to host, version, and automate their workflows. GitLab provides this with the **additional advantage of integrated DevOps tools** such as issue boards, pipelines, and monitoring. - -Other alternatives include GitHub, Bitbucket, and Azure Repos. GitLab is often preferred in organizations where **self-hosting** and **end-to-end DevOps** automation are critical. - -:::info -In the picture below, you can see multiple developers working on the same project. For example, Developer 1 handles the backend APIs, Developer 2 builds the frontend interface, and Developer 3 manages CI/CD pipeline setup. - -Each developer works on their local copy of the repository and pushes their changes to the **remote GitLab repository**. After a merge request (MR) review, the maintainer merges the changes into the main branch. GitLab can then automatically trigger a **pipeline** to build, test, and deploy the new version of the project. -::: - - - [![GitLab Dashboard](./assets/1-Introduction-to-gitlab.png)](https://about.gitlab.com/) - - ---- - -## Why Learn GitLab? - -GitLab is more than just version control—it provides a complete DevOps platform. -Here’s why you should learn it: - -1. **Integrated DevOps** – GitLab includes planning, coding, testing, security, deployment, and monitoring in one place. -2. **Self-hosting option** – Unlike GitHub, GitLab allows organizations to run GitLab on their own servers. -3. **Automation with CI/CD** – GitLab’s pipelines make testing and deployment faster and less error-prone. -4. **Collaboration** – Teams can manage issues, boards, milestones, and code reviews easily. -5. **Industry demand** – Many companies prefer GitLab for its **security compliance** and DevOps workflows. - ---- - -## How to Learn GitLab? - -To get started with GitLab, here are the recommended steps and prerequisites: - -:::info -### 🔑 Prerequisites: -- **Basic Git Knowledge**: Understand commands like `git clone`, `git add`, `git commit`, `git push`. -- **Programming Knowledge**: Any language is fine (Python, JavaScript, Java, etc.). -- **Command Line Basics**: Comfortable using a terminal (Linux, macOS, or Windows PowerShell). -- **Optional (for CI/CD)**: Docker basics, YAML syntax (for writing pipeline configs). - ---- - -### 📝 Learning Path: -1. **Create an account** on [GitLab.com](https://gitlab.com/). -2. **Install Git** on your system to interact with GitLab repositories. -3. **Start a new project** or fork an existing repository. -4. **Explore GitLab features**: issues, merge requests, labels, and boards. -5. **Learn GitLab CI/CD** by creating `.gitlab-ci.yml` for automating builds/tests. -6. **Advance**: Learn GitLab Runners, environment variables, and deployment. - -![GitLab Workflow](./assets/2-gitlab-workflow.png) -::: - ---- - -### Watch the video Tutorial - - ---- - -## Conclusion - -GitLab is not just a code hosting tool—it’s a **complete DevOps ecosystem**. By learning GitLab, you gain both Git skills and practical experience with **automation pipelines, deployments, and project management tools**. - -In the next tutorial, we will explore how to create your first GitLab project, push code to it, and set up a CI/CD pipeline. diff --git a/src/components/ReadingTimeIndicator/index.tsx b/src/components/ReadingTimeIndicator/index.tsx index cef2c607..507a7945 100644 --- a/src/components/ReadingTimeIndicator/index.tsx +++ b/src/components/ReadingTimeIndicator/index.tsx @@ -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 diff --git a/src/components/blogCarousel/blogCard.tsx b/src/components/blogCarousel/blogCard.tsx index 4e84f5cd..077e3c24 100644 --- a/src/components/blogCarousel/blogCard.tsx +++ b/src/components/blogCarousel/blogCard.tsx @@ -134,9 +134,7 @@ const BlogCard = ({ ))} - - 🕒 {Math.max(1, Math.ceil(content.split(" ").length / 200))} min read - + 5 min read {/* Read More Button */} diff --git a/src/components/testimonials/TestimonialCard.tsx b/src/components/testimonials/TestimonialCard.tsx index fea7aeca..730e6fdc 100644 --- a/src/components/testimonials/TestimonialCard.tsx +++ b/src/components/testimonials/TestimonialCard.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 = ({ }; }; + const [mounted, setMounted] = useState(false); + useEffect(() => setMounted(true), []); + return ( = ({
-

+

{name}

{username !== "AryanGupta" && username !== "DonaldAnyamba" && ( -

+

{username === "VivienChen" ? "Founder @ Toastie (BC Y24)" : username === "DanielHan" ? "Founder @ Unsloth AI (YC W24, BC Y24)" : "AI Engineer @ Relevance AI"}

)} -
+
{date}
diff --git a/src/components/testimonials/TestimonialCarousel.tsx b/src/components/testimonials/TestimonialCarousel.tsx index 2b23f7fb..d11b46ca 100644 --- a/src/components/testimonials/TestimonialCarousel.tsx +++ b/src/components/testimonials/TestimonialCarousel.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() {
diff --git a/src/css/custom.css b/src/css/custom.css index 42190c2b..0b165221 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -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; diff --git a/src/pages/blogs/index.tsx b/src/pages/blogs/index.tsx index 3f267c8b..86484684 100644 --- a/src/pages/blogs/index.tsx +++ b/src/pages/blogs/index.tsx @@ -335,10 +335,7 @@ const BlogCard = ({ blog }: { blog: (typeof blogs)[number] }) => {
- {/* Read time + Read link */} - - 🕒 {Math.max(1, Math.ceil((blog.description || "").split(" ").length / 200))} min read - + {/* Read link */} Read → @@ -346,4 +343,4 @@ const BlogCard = ({ blog }: { blog: (typeof blogs)[number] }) => { ); -}; +}; \ No newline at end of file diff --git a/src/pages/careers/index.tsx b/src/pages/careers/index.tsx index 0c2e0298..aee69158 100644 --- a/src/pages/careers/index.tsx +++ b/src/pages/careers/index.tsx @@ -110,7 +110,6 @@ const perks = [ "Clear career progression paths with mentorship and leadership opportunities.", }, ]; - const cultureValues = [ { title: "Innovation First", @@ -216,9 +215,8 @@ function CareersContent() {
{/* Hero Section */}
{job.department} {job.location} {job.type} @@ -550,80 +545,144 @@ function CareersContent() { variants={staggerContainer} >
- -

- What Our Team Says -

-

- Hear from our team members about their experience at recode - hive. -

- - - -
-
- -
-
+

+ What Our Team Says +

+

+ Hear from our team members about their experience at recode + hive. +

+ + ) : ( +
+

+ What Our Team Says +

+

- "{testimonials[activeTestimonial].content}" -

-
-

+

+ )} + + {mounted ? ( + +
+
+ +
+
+ "{testimonials[activeTestimonial].content}" +
+
- {testimonials[activeTestimonial].name} - -

+ {testimonials[activeTestimonial].name} + +

+ {testimonials[activeTestimonial].role} +

+
+ +
+ {testimonials.map((_, index) => ( +
+
+ + ) : ( +
+
+
+ +
+
+ "{testimonials[activeTestimonial].content}" +
+
- {testimonials[activeTestimonial].role} -

-
-
+

+ {testimonials[activeTestimonial].name} +

+

+ {testimonials[activeTestimonial].role} +

+
-
- {testimonials.map((_, index) => ( -
+
- + )}
diff --git a/src/theme/BlogPostItem/Footer/index.tsx b/src/theme/BlogPostItem/Footer/index.tsx index 053076a6..5c0f04ca 100644 --- a/src/theme/BlogPostItem/Footer/index.tsx +++ b/src/theme/BlogPostItem/Footer/index.tsx @@ -89,7 +89,9 @@ export default function BlogPostItemFooterWrapper(props: Props): JSX.Element { month: "short", day: "numeric", }).format(new Date(metadata.date)); - const metaDateAndTime = [blogDate, readTimeText].filter(Boolean).join(META_SEPARATOR); + const metaItems = [authorHandle, blogDate, readTimeText] + .filter(Boolean) + .join(META_SEPARATOR); const showAuthorCard = Boolean(isBlogPostPage && primaryAuthor && authorName); @@ -109,28 +111,7 @@ export default function BlogPostItemFooterWrapper(props: Props): JSX.Element {
- {githubUrl ? ( - - {authorAvatar ? ( - {`${authorName} - ) : ( - - )} - - ) : authorAvatar ? ( + {authorAvatar ? (
- {githubUrl ? ( - - {authorName} - - ) : ( -

{authorName}

- )} +

{authorName}

Author
- {(authorHandle || metaDateAndTime) ? ( -

- {authorHandle && ( - githubUrl ? ( - - {authorHandle} - - ) : ( - authorHandle - ) - )} - {authorHandle && metaDateAndTime ? META_SEPARATOR : null} - {metaDateAndTime} -

- ) : null} + {metaItems ?

{metaItems}

: null} {authorSummary ? (

{authorSummary}

) : null} diff --git a/src/theme/BlogPostItem/Footer/styles.module.css b/src/theme/BlogPostItem/Footer/styles.module.css index 7fe3ca4b..b2b908a6 100644 --- a/src/theme/BlogPostItem/Footer/styles.module.css +++ b/src/theme/BlogPostItem/Footer/styles.module.css @@ -4,7 +4,7 @@ padding: 1.5rem; border: 1px solid var(--ifm-color-emphasis-300); border-radius: 16px; - background: #FAFBFD; + background: var(--ifm-color-emphasis-100); box-sizing: border-box; } @@ -34,16 +34,6 @@ justify-content: center; } -.authorAvatarLink { - display: block; - line-height: 0; - border-radius: 50%; -} - -.authorAvatarLink:hover { - opacity: 0.85; -} - .authorAvatar, .authorAvatarFallback { width: 64px; @@ -74,21 +64,6 @@ font-size: 1.75rem; font-weight: 800; line-height: 1.2; - color: var(--ifm-font-color-base); - text-decoration: none; -} - -.authorName:hover { - text-decoration: underline; -} - -.authorHandleLink { - color: inherit; - text-decoration: none; -} - -.authorHandleLink:hover { - text-decoration: underline; } .authorNameRow { @@ -116,8 +91,8 @@ .authorSummary { margin: 0.65rem 0 0; color: var(--ifm-color-emphasis-800); - font-size: 0.875rem; - line-height: 1.625; + font-size: 1.1rem; + line-height: 1.4; } .githubButton {