Skip to content

Commit

Permalink
Merge feature_dev into pruebas
Browse files Browse the repository at this point in the history
  • Loading branch information
Andres Felipe Londoño Campos committed Nov 21, 2024
2 parents 3eb63a7 + 9567384 commit de7b2cc
Show file tree
Hide file tree
Showing 5 changed files with 135 additions and 155 deletions.
13 changes: 10 additions & 3 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,14 @@ function App() {
<BgAnimation />
<NavOptions />
<HelloSection />
<div className='border-t border-gray-600 w-[90%] ml-[5%] mr-[5%]' />
<BorderSection />

<AboutMeSection />
<div className='border-t border-gray-600 w-[90%] ml-[5%] mr-[5%]' />
<BorderSection />

<SkillsSection />
<div className='border-t border-gray-600 w-[90%] ml-[5%] mr-[5%]' />
<BorderSection />

<ProjectsSection />
</main>
<footer className='w-full'>
Expand All @@ -39,4 +42,8 @@ function App() {
);
}

function BorderSection() {
return <div className='border-t border-gray-600 w-[90%] ml-[5%] mr-[5%]' />;
}

export default App;
17 changes: 7 additions & 10 deletions src/components/common/NavOptions.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,13 @@ function NavOptions() {
};

const changeTheme = () => {
const classNameDark = 'dark-theme';
document.body.classList.toggle(classNameDark);
document.body.classList.toggle('dark-theme');
showNotification(t('notification-theme-change'));
}

const goToScroll = (id, position = 'center') => {
const section = document.getElementById(id);
if (section) {
section.scrollIntoView(
{
block: position,
behavior: 'smooth'
});
}
if (section) section.scrollIntoView({ block: position, behavior: 'smooth' });
}

const options = [
Expand Down Expand Up @@ -61,7 +54,11 @@ function OptionControl({ value, label, action, className }) {
return (
<div className='option-navBar'>
<label className='option md:text-base xs:text-xs'>{label}</label>
<button className={`${className} h-[5.5vh] w-[5.5vh] md:h-[5.5vh] md:w-[5vh] xs:h-[4.5vh] xs:w-[4.5vh]`} onClick={action}>{value}</button>
<button
onClick={action}
className={`${className} h-[5.5vh] w-[5.5vh] md:h-[5.5vh] md:w-[5vh] xs:h-[4.5vh] xs:w-[4.5vh]`}>
{value}
</button>
</div>
);
}
Expand Down
61 changes: 39 additions & 22 deletions src/components/contact/ConnectMeSection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,37 +6,54 @@ import messageMeIcon from '../../assets/message-me-icon.svg';
function ConnectMeSection() {
const { t } = useTranslation();

const links = [
{
href: "https://github.com/ApidriuC",
alt: "Go to Andrés GitHub",
icon: gitHubIcon,
title: "GitHub"
},
{
href: "https://www.linkedin.com/in/andr%C3%A9s-felipe-londo%C3%B1o-campos-b03741222/",
alt: "Connect with Andrés on LinkedIn",
icon: linkedIcon,
title: "LinkedIn"
},
{
href: "mailto:andresfloncam@gmail.com",
alt: "Send Andrés an email",
icon: messageMeIcon,
title: "Email"
}
];

return (
<section id='contact-me' className='w-full h-[100vh] rounded-t-3xl'>
<div className='h-full w-full p-40 flex justify-center content-center items-center flex-wrap gap-5 xs:p-5'>
<h2 className='w-full text-7xl font-bold md:text-5xl xs:text-4xl'>
<section id="contact-me" className="w-full h-[100vh] rounded-t-3xl">
<div className="h-full w-full p-40 flex justify-center content-center items-center flex-wrap gap-5 xs:p-5">
<h2 className="w-full text-7xl font-bold md:text-5xl xs:text-4xl">
{t('connect-me-title')}
</h2>
<ul className="w-auto footer-links flex justify-center align-center list-none items-center text-center text-3xl gap-4 p-5 rounded-lg">
<li className="transform scale-90 hover:scale-100 duration-200">
<a href="https://github.com/ApidriuC" target="_blank" rel="noopener noreferrer" title="Go to Andrés GitHub" tabIndex="0">
<img className='h-12' alt='source-image' src={gitHubIcon} />
</a>
</li>

<li className="transform scale-90 hover:scale-100 duration-200">
<a href="https://www.linkedin.com/in/andr%C3%A9s-felipe-londo%C3%B1o-campos-b03741222/" target="_blank" rel="noopener noreferrer" title="Connect with Juan Cruz on LinkedIn" tabIndex="0">
<img className='h-12' alt='source-image' src={linkedIcon} />
</a>
</li>

<li className="transform scale-90 hover:scale-100 duration-200">
<a href="mailto:andresfloncam@gmail.com" target="_blank" rel="noopener noreferrer" title="Send Andrés Felipe Londoño an email" tabIndex="0">
<img className='h-14' alt='source-image' src={messageMeIcon} />
</a>
</li>
{links.map((link, index) => (
<li key={index} className="transform scale-90 hover:scale-100 duration-200">
<a
href={link.href}
target="_blank"
rel="noopener noreferrer"
title={link.alt}
tabIndex="0"
>
<img className="h-12" alt={link.alt} src={link.icon} />
</a>
</li>
))}
</ul>
<p className='w-full'>
<p className="w-full">
&copy; {t('copyright-text')}
</p>
</div>
</section>
);
}

export default ConnectMeSection;
export default ConnectMeSection;
187 changes: 73 additions & 114 deletions src/components/projects/ProjectsSection.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,49 @@ import javaImage from '../../assets/Java-Logo.png'
function ProjectsSection() {
const { t } = useTranslation();

const projects = [
{
title: 'EDESK PRISMA',
link: 'https://edeskprisma.syc.com.co/santander',
image: edeskPrisma,
tags: [cImage, netImage, jsImage, htmlImage, cssImage, boostrapImage]
},
{
title: 'Stream For Labs',
link: 'https://github.com/IngDeiver/streams-for-labs-web-client',
image: streamLabs,
tags: [nodeImage, reactImage, jsImage, tailwindcss, boostrapImage]
},
{
title: 'DDA Bookings',
link: 'https://github.com/ApidriuC/DDA-BOOKINGS-Dispositivos-Moviles',
image: bookings,
tags: [reactImage, jsImage]
},
{
title: 'Dispensador - Casa Libro Total',
link: '',
image: dispensadorR,
tags: [cImage, netImage, jsImage, htmlImage, cssImage, boostrapImage]
},
{
title: t('bingo-project-label'),
link: 'https://github.com/ApidriuC/Bingo_Alcaldia_Risaralda',
image: bingo,
tags: [javaImage]
},
{
title: 'Fox Game',
link: 'https://github.com/ApidriuC/FoxGame---Construct3',
image: foxGame,
tags: [construct3]
}
];

return (
<section id='projects-me' className='h-auto p-20'>
<div className='h-full w-full flex justify-center items-start flex-wrap'>
{/* Titulo */}
{/* Título */}
<div className='w-full mb-5'>
<h2 className='text-left text-5xl md:text-5xl xs:text-4xl border-b-2 border-purple-400 mb-2 pl-3 pr-3 w-max'>
{t('projects-title')}
Expand All @@ -34,125 +73,45 @@ function ProjectsSection() {
</div>

{/* Projects */}
<div className='container-projects m-12 w-full flex items-center justify-center flex-wrap md:gap-40 xs:gap-5 xs:m-0'>
<article className='w-[80vh] h-[75vh] relative rounded-lg hover:rounded-3xl overflow-hidden duration-[350ms] transition-all ease-expo group
shadow-2xl xs:w-[40vh] xs:h-[30vh] md:w-[80vh] md:h-[75vh]'>
<a className='block w-full h-full z-10:' href='https://edeskprisma.syc.com.co/santander' target='_blank'>
<div className='bg-container-1 relative w-full h-full'>
<img className='w-full h-full object-contain object-center scale-90 duration-[350ms] transition-all ease-expo group-hover:scale-95' src={edeskPrisma} alt='source_img' />
</div>

{/* Etiquetas */}
<div className='overlay cursor-pointer absolute p-4 flex justify-start items-baseline content-end flex-wrap
xs:opacity-100 md:opacity-0 group-hover:opacity-100 h-full w-full top-0 left-0 gap-3'>
<h2 className='text-white w-full text-left text-4xl md:text-4x1 xs:text-2xl'>EDESK PRISMA</h2>
<img className='object-center h-7' src={cImage} alt='source_img' />
<img className='object-center h-7' src={netImage} alt='source_img' />
<img className='object-center h-7' src={jsImage} alt='source_img' />
<img className='object-center h-7' src={htmlImage} alt='source_img' />
<img className='object-center h-7' src={cssImage} alt='source_img' />
<img className='object-center h-7' src={boostrapImage} alt='source_img' />
</div>
</a>
</article>

<article className='w-[60vh] h-[50vh] relative rounded-lg hover:rounded-3xl overflow-hidden duration-[350ms] transition-all ease-expo group
shadow-2xl xs:w-[40vh] xs:h-[30vh] md:w-[60vh] md:h-[50vh]'>
<a className='block w-full h-full z-10 rounded-lg group-hover:rounded-3xl:' href='https://github.com/IngDeiver/streams-for-labs-web-client' target='_blank'>
<div className='bg-container-2 relative w-full h-full'>
<img className='w-full h-full object-contain object-center scale-90 duration-[350ms] transition-all ease-expo group-hover:scale-95' src={streamLabs} alt='source_img' />
</div>

{/* Etiquetas */}
<div className='overlay cursor-pointer absolute p-4 flex justify-start items-baseline content-end flex-wrap
xs:opacity-100 md:opacity-0 group-hover:opacity-100 h-full w-full top-0 left-0 gap-3'>
<h2 className='text-white w-full text-left text-4xl md:text-4x1 xs:text-2xl'>Stream For Labs</h2>
<img className='object-center h-7' src={nodeImage} alt='source_img' />
<img className='object-center h-7' src={reactImage} alt='source_img' />
<img className='object-center h-7' src={jsImage} alt='source_img' />
<img className='object-center h-7' src={tailwindcss} alt='source_img' />
<img className='object-center h-7' src={boostrapImage} alt='source_img' />
</div>
</a>
</article>
<div className='container-projects m-12 w-full flex items-center justify-center flex-wrap md:gap-20 xs:gap-5 xs:m-0'>
{projects.map((project, index) => (<Cards key={index} {...project} />))}
</div>
</div>
</section>
);
}

<div className='container-projects m-12 w-full flex items-center justify-center flex-wrap md:gap-40 xs:gap-5 xs:m-5'>
<article className='w-[55vh] h-[55vh] relative rounded-lg hover:rounded-3xl overflow-hidden duration-[350ms] transition-all ease-expo group
shadow-2xl xs:w-[40vh] xs:h-[30vh] md:w-[55vh] md:h-[55vh]'>
<a className='block w-full h-full z-10 rounded-lg group-hover:rounded-3xl:' href='https://github.com/ApidriuC/DDA-BOOKINGS-Dispositivos-Moviles' target='_blank'>
<div className='bg-container-3 relative w-full h-full'>
<img className='w-full h-full object-contain object-center scale-90 duration-[350ms] transition-all ease-expo group-hover:scale-95' src={bookings} alt='source_img' />
</div>

{/* Etiquetas */}
<div className='overlay cursor-pointer absolute p-4 flex justify-start items-baseline content-end flex-wrap
xs:opacity-100 md:opacity-0 group-hover:opacity-100 h-full w-full top-0 left-0 gap-3'>
<h2 className='text-white w-full text-left text-4xl md:text-4x1 xs:text-2xl'>DDA Bookings</h2>
<img className='object-center h-7' src={reactImage} alt='source_img' />
<img className='object-center h-7' src={jsImage} alt='source_img' />
</div>
</a>
</article>

<article className='w-[95vh] h-[80vh] relative rounded-lg hover:rounded-3xl overflow-hidden duration-[350ms] transition-all ease-expo group
shadow-2xl xs:w-[40vh] xs:h-[30vh] md:w-[95vh] md:h-[80vh]'>
<a className='block w-full h-full z-10 rounded-lg group-hover:rounded-3xl:'>
<div className='bg-container-4 relative w-full h-full'>
<img className='w-full h-full object-contain object-center scale-90 duration-[350ms] transition-all ease-expo group-hover:scale-95' src={dispensadorR} alt='source_img' />
</div>
const Cards = ({ title, link, image, tags }) => {
// Generar un número aleatorio entre 56 y 80 para el width
const widthRandom = Math.floor(Math.random() * (80 - 56 + 1)) + 56;

{/* Etiquetas */}
<div className='overlay cursor-pointer absolute p-4 flex justify-start items-baseline content-end flex-wrap
xs:opacity-100 md:opacity-0 group-hover:opacity-100 h-full w-full top-0 left-0 gap-3'>
<h2 className='text-white w-full text-left text-4xl md:text-4x1 xs:text-2xl'>Dispensador - Casa Libro Total</h2>
<img className='object-center h-7' src={cImage} alt='source_img' />
<img className='object-center h-7' src={netImage} alt='source_img' />
<img className='object-center h-7' src={jsImage} alt='source_img' />
<img className='object-center h-7' src={htmlImage} alt='source_img' />
<img className='object-center h-7' src={cssImage} alt='source_img' />
<img className='object-center h-7' src={boostrapImage} alt='source_img' />
</div>
</a>
</article>
// Generar un número aleatorio entre 40 y 60 para el height
const heightRandom = Math.floor(Math.random() * (60 - 35 + 1)) + 35;
return (
<article
style={{
width: `${widthRandom}vh`,
height: `${heightRandom}vh`,
}}
className={`relative xs:w-[40vh] xs:h-[30vh] rounded-lg hover:rounded-3xl overflow-hidden duration-[350ms] transition-all ease-expo group shadow-2xl`}
>
<a className='block w-full h-full z-10' href={link} target='_blank' rel='noreferrer'>
<div className='relative w-full h-full'>
<img
className='w-full h-full object-contain object-center scale-90 duration-[350ms] transition-all ease-expo group-hover:scale-95'
src={image}
alt={`${title}_img`}
/>
</div>

<div className='container-projects m-12 w-full flex items-center justify-center flex-wrap md:gap-40 xs:gap-5 xs:m-5'>
<article className='w-[95vh] h-[80vh] relative rounded-lg hover:rounded-3xl overflow-hidden duration-[350ms] transition-all ease-expo group
shadow-2xl xs:w-[40vh] xs:h-[30vh] md:w-[95vh] md:h-[80vh]'>
<a className='block w-full h-full z-10 rounded-lg group-hover:rounded-3xl:' href='https://github.com/ApidriuC/Bingo_Alcaldia_Risaralda' target='_blank'>
<div className='bg-container-5 relative w-full h-full'>
<img className='w-full h-full object-contain object-center scale-90 duration-[350ms] transition-all ease-expo group-hover:scale-95' src={bingo} alt='source_img' />
</div>

{/* Etiquetas */}
<div className='overlay cursor-pointer absolute p-4 flex justify-start items-baseline content-end flex-wrap
xs:opacity-100 md:opacity-0 group-hover:opacity-100 h-full w-full top-0 left-0 gap-3'>
<h2 className='text-white w-full text-left text-4xl md:text-4x1 xs:text-2xl'>{t('bingo-project-label')}</h2>
<img className='object-center h-7' src={javaImage} alt='source_img' />
</div>
</a>
</article>

<article className='w-[55vh] h-[55vh] relative rounded-lg hover:rounded-3xl overflow-hidden duration-[350ms] transition-all ease-expo group
shadow-2xl xs:w-[40vh] xs:h-[30vh] md:w-[55vh] md:h-[55vh]'>
<a className='block w-full h-full z-10 rounded-lg group-hover:rounded-3xl:' href='https://github.com/ApidriuC/FoxGame---Construct3' target='_blank'>
<div className='bg-container-6 relative w-full h-full'>
<img className='w-full h-full object-contain object-center scale-90 duration-[350ms] transition-all ease-expo group-hover:scale-95' src={foxGame} alt='source_img' />
</div>

{/* Etiquetas */}
<div className='overlay cursor-pointer absolute p-4 flex justify-start items-baseline content-end flex-wrap
xs:opacity-100 md:opacity-0 group-hover:opacity-100 h-full w-full top-0 left-0 gap-3'>
<h2 className='text-white w-full text-left text-4xl'>Fox Game</h2>
<img className='object-center h-7' src={construct3} alt='source_img' />
</div>
</a>
</article>
{/* Etiquetas */}
<div className='overlay cursor-pointer absolute p-4 flex justify-start items-baseline content-end flex-wrap xs:opacity-100 md:opacity-0 group-hover:opacity-100 h-full w-full top-0 left-0 gap-3'>
<h2 className='text-white w-full text-left text-4xl md:text-4xl xs:text-2xl'>{title}</h2>
{tags.map((tag, index) => (<img key={index} className='object-center h-7' src={tag} alt={`tag_${index}`} />))}
</div>
</div>
</section>
</a>
</article>
);
}
};

export default ProjectsSection;
Loading

0 comments on commit de7b2cc

Please sign in to comment.