From 7ca5fc60f03eb00cd1777cc14f6b767d9448f0aa Mon Sep 17 00:00:00 2001
From: Santiago Montoya <santiago.mordz@gmail.com>
Date: Mon, 28 Jul 2025 22:11:42 +0000
Subject: [PATCH 1/2] styles(texts): minor adjustments for cards content

---
 src/front/index.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/front/index.css b/src/front/index.css
index 8b8dd4f5b4..11932577dc 100644
--- a/src/front/index.css
+++ b/src/front/index.css
@@ -128,6 +128,10 @@ h6 {
 
 /* Services cards, components & background */
 
+.card-text {
+  font-size: 13pt;
+}
+
 .card.card-background {
   background-color: rgba(255, 255, 255, 0.16);
   backdrop-filter: blur(3px);

From 5ceba614f2930cf9c52bfcdb5a7782978dc5b6d9 Mon Sep 17 00:00:00 2001
From: Santiago Montoya <santiago.mordz@gmail.com>
Date: Thu, 14 Aug 2025 20:54:26 +0000
Subject: [PATCH 2/2] fix & updates: mail protocol and image change
 functionality on projects

---
 src/front/components/Projects.jsx      | 44 +++++++++++++++++---------
 src/front/components/Team/Card.jsx     |  6 ++--
 src/front/components/Values/Values.jsx |  2 +-
 3 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/src/front/components/Projects.jsx b/src/front/components/Projects.jsx
index e2b8834605..4a297295ab 100644
--- a/src/front/components/Projects.jsx
+++ b/src/front/components/Projects.jsx
@@ -2,31 +2,39 @@ import { useState } from "react";
 import { Link } from "react-router-dom";
 import { projectsContent } from "../utils/projectsContent";
 import { useTranslation } from "react-i18next";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 
 export const Projects = ({ limit = 0 }) => {
     const { t } = useTranslation();
     const [showModal, setShowModal] = useState(false);
-    const [selectedImage, setSelectedImage] = useState("");
+    const [selectedImageIndex, setSelectedImageIndex] = useState(null);
 
-    const handleImageClick = (imageSrc) => {
+    const imagesToDisplay = limit > 0
+        ? projectsContent.slice(0, limit).map(project => project.images[0])
+        : projectsContent.flatMap(project => project.images);
+
+    const handleImageClick = (index) => {
         setShowModal(true);
-        setSelectedImage(imageSrc);
+        setSelectedImageIndex(index);
     }
 
     const handleCloseModal = () => {
         setShowModal(false);
-        setSelectedImage("");
+        setSelectedImageIndex(null);
     }
 
-    let imagesToDisplay = [];
+    const handlePrev = (e) => {
+        e.stopPropagation();
+        setSelectedImageIndex(prevIndex => (prevIndex === 0 ? imagesToDisplay.length - 1 : prevIndex - 1));
+    }
 
-    if (limit > 0) {
-        const projectsToDisplay = projectsContent.slice(0, limit);
-        imagesToDisplay = projectsToDisplay.map(project => project.images[0])
-    } else {
-        imagesToDisplay = projectsContent.flatMap(project => project.images)
+    const handleNext = (e) => {
+        e.stopPropagation();
+        setSelectedImageIndex(prevIndex => (prevIndex === imagesToDisplay.length - 1 ? 0 : prevIndex + 1));
     }
 
+    const currentImage = selectedImageIndex !== null ? imagesToDisplay[selectedImageIndex] : null;
 
     const column1Projects = imagesToDisplay.slice(0, Math.ceil(imagesToDisplay.length / 2));
     const column2Projects = imagesToDisplay.slice(Math.ceil(imagesToDisplay.length / 2), imagesToDisplay.length);
@@ -47,7 +55,7 @@ export const Projects = ({ limit = 0 }) => {
                                     src={image.src}
                                     className="mb-3 rounded-5 object-fit-cover flex-grow-1"
                                     alt={image.alt}
-                                    onClick={() => handleImageClick(image.src)}
+                                    onClick={() => handleImageClick(index)}
                                     style={{ cursor: "pointer" }}
                                 />
                             ))}
@@ -61,7 +69,7 @@ export const Projects = ({ limit = 0 }) => {
                                     src={image.src}
                                     className="mb-3 rounded-5 object-fit-cover"
                                     alt={image.alt}
-                                    onClick={() => handleImageClick(image.src)}
+                                    onClick={() => handleImageClick(index)}
                                     style={{ cursor: "pointer" }}
                                 />
                             ))}
@@ -87,7 +95,7 @@ export const Projects = ({ limit = 0 }) => {
                 )}
             </div>
 
-            {showModal && (
+            {showModal && selectedImageIndex !== null && (
                 <>
                     <div className="modal-backdrop fade show"></div>
                     <div
@@ -108,8 +116,14 @@ export const Projects = ({ limit = 0 }) => {
                                         onClick={handleCloseModal}
                                     ></button>
                                 </div>
-                                <div className="modal-body text-center pt-0">
-                                    <img src={selectedImage} className="img-fluid rounded-4" alt="portafolio CloudTech detalle" />
+                                <div className="modal-body text-center pt-0 position-relative">
+                                    <button onClick={handlePrev} className="btn text-white bg-dark opacity-75 position-absolute top-50 start-0 translate-middle-y ms-2 rounded-pill d-flex align-items-center justify-content-center">
+                                        <FontAwesomeIcon icon={faChevronLeft} />
+                                    </button>
+                                    <img src={currentImage.src} className="img-fluid rounded-4" alt="portafolio CloudTech detalle" />
+                                    <button onClick={handleNext} className="btn text-white bg-dark opacity-75 position-absolute top-50 end-0 translate-middle-y me-2 rounded-pill d-flex align-items-center justify-content-center">
+                                        <FontAwesomeIcon icon={faChevronRight} />
+                                    </button>
                                 </div>
                             </div>
                         </div>
diff --git a/src/front/components/Team/Card.jsx b/src/front/components/Team/Card.jsx
index 854a02012e..0e82943a90 100644
--- a/src/front/components/Team/Card.jsx
+++ b/src/front/components/Team/Card.jsx
@@ -20,9 +20,9 @@ export const Card = ({ name, position, description, image, catImage, mailLink, l
                 <h5 className="mt-0 mb-3">{position}</h5>
                 <p className="card-text px-3">{description}</p>
                 <div className="d-flex justify-content-center fs-1 gap-3">
-                    <Link to={mailLink} className="text-white"><FontAwesomeIcon icon={faEnvelope} /></Link>
-                    <Link to={linkedinLink} className="text-white"><FontAwesomeIcon icon={faLinkedin} /></Link>
-                    <Link to={githubLink} className="text-white"><FontAwesomeIcon icon={faGithubSquare} /> </Link>
+                    <a href={`mailto:${mailLink}`} className="text-white"><FontAwesomeIcon icon={faEnvelope} /></a>
+                    <a href={linkedinLink} target="_blank" className="text-white"><FontAwesomeIcon icon={faLinkedin} /></a>
+                    <a href={githubLink} target="_blank" className="text-white"><FontAwesomeIcon icon={faGithubSquare} /> </a>
                 </div>
             </div>
         </div>
diff --git a/src/front/components/Values/Values.jsx b/src/front/components/Values/Values.jsx
index 61d2d03edd..374bc92e2c 100644
--- a/src/front/components/Values/Values.jsx
+++ b/src/front/components/Values/Values.jsx
@@ -15,7 +15,7 @@ export const Values = () => {
 
                 <div className="row g-5">
                     {valuesContent.map(value => (
-                        <div key={value.id} className="col-12 col-md-6 col-lg-3">
+                        <div key={value.id} className="col-12 col-md-6 col-lg-4">
                             <Card
                                 title={t(value.title)}
                                 description={t(value.description)}