Skip to content

Updates & fixes #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 14, 2025
Merged

Updates & fixes #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7ca5fc6
styles(texts): minor adjustments for cards content
santgeek Jul 28, 2025
1a3f97a
Merge branch 'dev' of https://github.com/Cloudtech-web-dev/Cloudtech_…
santgeek Jul 30, 2025
0c69691
Merge branch 'main' of https://github.com/Cloudtech-web-dev/Cloudtech…
santgeek Aug 14, 2025
5ceba61
fix & updates: mail protocol and image change functionality on projects
santgeek Aug 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 29 additions & 15 deletions src/front/components/Projects.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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" }}
/>
))}
Expand All @@ -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" }}
/>
))}
Expand All @@ -87,7 +95,7 @@ export const Projects = ({ limit = 0 }) => {
)}
</div>

{showModal && (
{showModal && selectedImageIndex !== null && (
<>
<div className="modal-backdrop fade show"></div>
<div
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/front/components/Team/Card.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/front/components/Values/Values.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down
4 changes: 4 additions & 0 deletions src/front/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down