feat: enhance portfolio component with skill icons and update project…

… descriptions
paulemacedo · Feb 8, 2025 · cea2cdd · cea2cdd
1 parent 975b601
commit cea2cdd
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 14 deletions.
diff --git a/src/components/Portifolio.jsx b/src/components/Portifolio.jsx
@@ -2,10 +2,24 @@ import Archemy from "../assets/Archemy.png";
 import pybank from "../assets/pyBank.png";
 import bytedesabor from "../assets/bytedesabor.png";
 import CTF from "../assets/CTF.png";
-import { AiFillGithub } from "react-icons/ai";
 import Reveal from "./Reveal";
 import React from "react";
 import { useTranslation } from 'react-i18next';
+import { AiFillGithub } from "react-icons/ai";
+import {
+    FaReact,
+    FaJs,
+    FaNodeJs,
+    FaPython,
+} from "react-icons/fa";
+import { 
+    SiGnubash,
+    SiMongodb,
+    SiRedux,
+} from "react-icons/si";
+
+
+
 
 const Portifolio = () => {
     const { t } = useTranslation();
@@ -15,6 +29,7 @@ const Portifolio = () => {
             img: bytedesabor,
             title: t('portfolio.projects.0.title'),
             description: t('portfolio.projects.0.description'),
+            skills: [<FaReact/>, <SiRedux />, <FaJs/>, <SiMongodb/>],
             links: {
                 site: 'https://bytedesabor.vercel.app/',
                 github: 'https://github.com/paulemacedo/bytedesabor',
@@ -23,27 +38,30 @@ const Portifolio = () => {
         {
             img: Archemy,
             title: t('portfolio.projects.1.title'),
+            skills: [<SiGnubash/>],
             description: t('portfolio.projects.1.description'),
             links: {
-                site: 'https://github.com/paulemacedo/Archemy',
+                site: '',
                 github: 'https://github.com/paulemacedo/Archemy',
             }
         },
         {
             img: CTF,
             title: t('portfolio.projects.2.title'),
+            skills: [],
             description: t('portfolio.projects.2.description'),
             links: {
-                site: 'https://github.com/paulemacedo/CTF',
+                site: '',
                 github: 'https://github.com/paulemacedo/CTF',
             }
         },
         {
             img: pybank,
             title: t('portfolio.projects.3.title'),
+            skills: [<FaPython/>],
             description: t('portfolio.projects.3.description'),
             links: {
-                site: 'https://github.com/paulemacedo/PyBank',
+                site: '',
                 github: 'https://github.com/paulemacedo/PyBank',
             }
         },
@@ -55,24 +73,33 @@ const Portifolio = () => {
             {projects.map((project, index) => (
                 <Reveal key={index}>
                     <div className={`flex flex-col md:flex-row ${index % 2 === 0 ? 'md:flex-row-reverse' : ''} mb-12`}>
-                        <div className="w-full md:w-1/2 p-4">
+                        <div className="w-full md:w-1/2">
                             <img 
                             src={project.img} 
                             alt={project.title}
                             className="w-full h-full object-cover rounded-lg shadow-lg" 
                             />
                         </div>
                         <div className="w-full md:w-1/2 p-4 flex flex-col justify-center">
-                            <h3 className="text-2xl font-semibold text-gray-200 mb-4">{project.title}</h3>
+                            <div className="mb-4">
+                                <h3 className="text-2xl font-semibold text-gray-200 mb-4 flex items-center">
+                                    {project.title}
+                                    <span className="ml-4 flex space-x-2">
+                                        {project.skills.map((skill, index) => (
+                                            <span key={index}>{skill}</span>
+                                        ))}
+                                    </span>
+                                </h3>
+                            </div>    
                             <p className="text-gray-300 mb-4">{project.description}</p>
                             <div className="flex space-x-4">
-                                <a href={project.links.site} 
+                                {project.links.site && <a href={project.links.site} target="_blank" rel="noopener noreferrer"
                                     className="text-gray-200 px-4 py-2 rounded-lg bg-slate-600 hover:bg-slate-700 transition duration-300">
-                                    Visit Site</a>
-                                <a href={project.links.github} 
-                                    className="bg-gray-800 text-gray-200 px-4 py-2 rounded-lg flex items-center">
+                                    Visit Site</a>}
+                                {project.links.github && <a href={project.links.github} target="_blank" rel="noopener noreferrer"
+                                    className="bg-gray-800 text-gray-200 px-4 py-3 rounded-lg flex items-center">
                                     <AiFillGithub/>
-                                </a>
+                                </a>}
                             </div>
                         </div>
                     </div>

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -35,7 +35,7 @@
     "projects": [
       {
         "title": "Byte de Sabor",
-        "description": "Byte de Sabor is a açai store website developed using React. It features a modern and responsive design, showcasing the store’s products and services. This project demonstrates my proficiency in front-end development and my ability to create visually appealing and user-friendly websites."
+        "description": "Byte de Sabor is a açai store website developed using React. It features a modern and responsive design, showcasing the store’s products and services."
       },
       {
         "title": "Archemy",

diff --git a/src/locales/es.json b/src/locales/es.json
@@ -35,7 +35,7 @@
     "projects": [
       {
         "title": "Byte de Sabor",
-        "description": "Byte de Sabor es un sitio web de tienda de açaí desarrollado con React. Cuenta con un diseño moderno y responsivo, mostrando los productos y servicios de la tienda. Este proyecto demuestra mi competencia en desarrollo front-end y mi capacidad para crear sitios web visualmente atractivos y fáciles de usar."
+        "description": "Byte de Sabor es un sitio web de tienda de açaí desarrollado con React. Cuenta con un diseño moderno y responsivo, mostrando los productos y servicios de la tienda."
       },
       {
         "title": "Archemy",

diff --git a/src/locales/pt.json b/src/locales/pt.json
@@ -35,7 +35,7 @@
     "projects": [
       {
         "title": "Byte de Sabor",
-        "description": "Byte de Sabor é um site de loja de açaí desenvolvido usando React. Ele apresenta um design moderno e responsivo, exibindo os produtos e serviços da loja. Este projeto demonstra minha proficiência em desenvolvimento front-end e minha capacidade de criar sites visualmente atraentes e fáceis de usar."
+        "description": "Byte de Sabor é um site de loja de açaí desenvolvido usando React. Ele apresenta um design moderno e responsivo, exibindo os produtos e serviços da loja."
       },
       {
         "title": "Archemy",