From 6b521ea1eb3ca9e0b8b6b6e729d2d4cbfeaccf72 Mon Sep 17 00:00:00 2001
From: franferrazdev <franferraz.dev@gmail.com>
Date: Tue, 20 Oct 2026 15:39:02 -0300
Subject: [PATCH] docs: enrich README layout, fix favicon trailing slashes, and
 sync new resume asset file

---
 README.md                        |  8 +++--
 index.html                       |  2 +-
 src/App.tsx                      | 10 ++++---
 src/sections/ProjectsSection.tsx | 51 ++++++++++++++++++++++++++------
 4 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 9d6f211..3361b5f 100644
--- a/README.md
+++ b/README.md
@@ -2,9 +2,11 @@
 
 <div align="center">
 <!-- Badges de Tecnologias -->
-<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/react/react-original.svg"  align="center" alt="React Icon" height="20" width="30" />
-<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/typescript/typescript-original.svg" align="center" alt="TypeScript Icon" height="20" width="30" />
-<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/tailwindcss/tailwindcss-original.svg"  align="center" alt="TailwindCSS Icon" height="20" width="30" />
+<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/react/react-original.svg"  align="center" alt="React Icon" title="React" height="20" width="30" />
+<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/typescript/typescript-original.svg" title="TypeScript" align="center" alt="TypeScript Icon" height="20" width="30" />
+<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/tailwindcss/tailwindcss-original.svg" title="Tailwind CSS"  align="center" alt="TailwindCSS Icon" height="20" width="30" />
+![Tests](https://img.shields.io/badge/tests-Jest%20%7C%20Playwright-green?style=flat-square)
+![CI](https://img.shields.io/github/actions/workflow/status/franferrazdev/franferrazdev-portfolio/playwright.yml?style=flat-square&label=CI%2FCD)
 </div>
 
 ---
diff --git a/index.html b/index.html
index 1573876..38af1a4 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="pt-BR">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="public//favicon.png" />
+    <link rel="icon" type="image/png" href="public/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Francielle Ferraz</title>
   </head>
diff --git a/src/App.tsx b/src/App.tsx
index 1116dd4..43fd9db 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -18,10 +18,10 @@ export default function App() {
   const isLocked = useRef(false);
 
   // Estado que controla se o sistema já concluiu o boot de inicialização
-  const [isLoading, setIsLoading]= useState(true)
+  const [isLoading, setIsLoading] = useState(true);
 
-  /* Algoritmo que ativa as animações ao rolar a página com micro-tolerância para garantir que o React carregou 100% dos elementos na árvore DOM 
- */
+  /* Algoritmo que ativa as animações ao rolar a página com micro-tolerância para garantir que o React carregou 100% dos elementos na árvore DOM
+   */
   useEffect(() => {
     let globalObserver: IntersectionObserver | null = null;
 
@@ -111,7 +111,9 @@ export default function App() {
       </Helmet>
 
       {/* Renderiza a Splash Screen interativa se o estado isLoading for verdadeiro */}
-      {isLoading && <LoadingScreen onLoadingComplete={() => setIsLoading(false)} />}
+      {isLoading && (
+        <LoadingScreen onLoadingComplete={() => setIsLoading(false)} />
+      )}
 
       {/* Barra Superior de Controles de Acessibilidade */}
       <Navbar />
diff --git a/src/sections/ProjectsSection.tsx b/src/sections/ProjectsSection.tsx
index 65e7f6a..1ab9e70 100644
--- a/src/sections/ProjectsSection.tsx
+++ b/src/sections/ProjectsSection.tsx
@@ -1,5 +1,11 @@
 import { useLanguage } from "@/context/LanguageContext";
-import { FolderGit2, ExternalLink, CheckSquare, Tv } from "lucide-react";
+import {
+  FolderGit2,
+  ExternalLink,
+  CheckSquare,
+  Tv,
+  Shuffle,
+} from "lucide-react";
 import { FaGithub } from "react-icons/fa";
 
 export function ProjectsSection() {
@@ -9,7 +15,7 @@ export function ProjectsSection() {
   interface TestSuite {
     name: string;
     icon: React.ReactNode;
-    type: "unit" | "e2e";
+    type: "unit" | "e2e" | "ci";
   }
 
   // Interface para a estrutura do projeto
@@ -36,6 +42,11 @@ export function ProjectsSection() {
           icon: <CheckSquare size={11} />,
           type: "unit",
         },
+        {
+          name: "GitHub Actions CI",
+          icon: <Shuffle size={11} />,
+          type: "ci",
+        },
       ],
       github: "https://github.com/franferrazdev/night-owl-ecommerce",
       live: "https://night-owl-ecommerce.vercel.app/",
@@ -58,6 +69,11 @@ export function ProjectsSection() {
           icon: <Tv size={11} />,
           type: "e2e",
         },
+        {
+          name: "GitHub Actions CI",
+          icon: <Shuffle size={11} />,
+          type: "ci",
+        },
       ],
       github: "https://github.com/franferrazdev/school-management-dashboard",
       live: "https://school-management-dashboard-woad.vercel.app/",
@@ -74,7 +90,16 @@ export function ProjectsSection() {
           icon: <CheckSquare size={11} />,
           type: "unit",
         },
-        { name: "Playwright", icon: <Tv size={11} />, type: "e2e" },
+        {
+          name: "Playwright",
+          icon: <Tv size={11} />,
+          type: "e2e",
+        },
+        {
+          name: "GitHub Actions CI",
+          icon: <Shuffle size={11} />,
+          type: "ci",
+        },
       ],
       github: "https://github.com/franferrazdev/live-coding-bug-quiz",
       live: "https://live-coding-bug-quiz-one.vercel.app/",
@@ -83,6 +108,18 @@ export function ProjectsSection() {
     },
   ];
 
+  // Função auxiliar para determinar as classes de estilo baseado no tipo de suite
+  const getSuiteStyles = (type: "unit" | "e2e" | "ci") => {
+    switch (type) {
+      case "e2e":
+        return "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20 dark:border-amber-500/30";
+      case "ci":
+        return "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20 dark:border-purple-500/30";
+      case "unit":
+        return "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20 dark:border-emerald-500/30";
+    }
+  };
+
   return (
     <section
       id="projects"
@@ -128,16 +165,12 @@ export function ProjectsSection() {
                     {project.title}
                   </h3>
 
-                  {/* Badge Técnica de Testes */}
+                  {/* Badge Técnica de Testes e CI/CD */}
                   <div className="flex flex-wrap gap-1.5 justify-end shrink-0 max-w-[50%]">
                     {project.testSuites.map((suite) => (
                       <span
                         key={suite.name}
-                        className={`flex items-center gap-1.5 text-[9px] font-black tracking-wider uppercase px-2.5 py-1 rounded-md border transition-colors select-none ${
-                          suite.type === "e2e"
-                            ? "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20 dark:border-amber-500/30"
-                            : "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20 dark:border-emerald-500/30"
-                        }`}
+                        className={`flex items-center gap-1.5 text-[9px] font-black tracking-wider uppercase px-2.5 py-1 rounded-md border transition-colors select-none ${getSuiteStyles(suite.type)}`}
                       >
                         {suite.icon}
                         {suite.name}