Merge pull request #11 from FedeCodeLab/development

🌟🌟🌟 Release 2.0.0 🌟🌟🌟

Author: FedeCodeLab

public/logos/firebase-icon-seeklogo.png

@@ -1,11 +1,11 @@
-"use client"; // si estás usando App Router
+"use client";
 
+import { useInView } from "react-intersection-observer";
+import { motion, useAnimation } from "framer-motion";
 import { Project } from "@/types/project";
+import { useEffect } from "react";
 import Image from "next/image";
 import { CTA } from "./CTA";
-import { motion, useAnimation } from "framer-motion";
-import { useInView } from "react-intersection-observer";
-import { useEffect } from "react";
 
 export const ProjectCard = ({
   title,
@@ -15,6 +15,7 @@ export const ProjectCard = ({
   deploy,
   techs,
   image,
+  list,
 }: Project) => {
   const controls = useAnimation();
   const { ref, inView } = useInView({
@@ -43,16 +44,33 @@ export const ProjectCard = ({
       }}
       className="relative overflow-hidden rounded-lg flex flex-col"
     >
-      <div className="absolute inset-0 bg-blue-950 opacity-50 backdrop-blur-xl z-0" />
-
-      <div className="relative z-10 flex flex-col h-full">
-        <div className="p-6 flex flex-col flex-1">
+      <div className="relative z-10 flex flex-col lg:flex-row">
+        <div className="relative block lg:hidden w-full h-[250px]">
+          <Image
+            src={image}
+            fill
+            alt="Portada"
+            className="object-cover rounded-md"
+          />
+        </div>
+        <div className="pt-6 lg:py-0 lg:pl-0 lg:pr-16 flex flex-col flex-3">
           <div className="flex flex-col gap-2">
-            <div>
-              <h4 className="text-lg font-semibold">{title}</h4>
+            <div className="pb-4">
+              <h4 className="text-[2rem] font-semibold">{title}</h4>
               <p className="text-sm text-gray-400">{type}</p>
             </div>
-            <p className="text-gray-400">{content}</p>
+            <p
+              className="text-gray-400 lg:max-w-[500px]"
+              dangerouslySetInnerHTML={{ __html: content }}
+            />
+
+            {list && (
+              <ul className="text-gray-400 text-[14px]">
+                {list.map((item, index) => (
+                  <li key={index}>✨ {item}</li>
+                ))}
+              </ul>
+            )}
 
             <div className="flex flex-wrap gap-2 mt-2">
               {techs.map((tech, index) => (
@@ -65,13 +83,18 @@ export const ProjectCard = ({
               ))}
             </div>
           </div>
-          <div className="mt-auto pt-6">
+          <div className="mt-auto md:mt-0 pt-6">
             <CTA repository={repository} deploy={deploy} />
           </div>
         </div>
 
-        <div className="aspect-video w-full relative">
-          <Image src={image} fill alt="Portada" className="object-cover" />
+        <div className="relative w-full hidden lg:block md:w-auto md:min-w-[500px] md:h-[400px] rounded-md">
+          <Image
+            src={image}
+            fill
+            alt="Portada"
+            className="object-cover rounded-md"
+          />
         </div>
       </div>
     </motion.article>

public/logos/firebase.svg

@@ -9,7 +9,7 @@ const projects: Project[] = [
     title: "BeBot Design",
     type: "Experiencia Laboral",
     content:
-      "BeBot Design es una web que presenta la propuesta de la empresa en la creación de bots con identidad propia, mediante una interfaz clara y profesional que refuerza su presencia digital.",
+      "✨ Implementé Next-intl para la internacionalización (i18n) en múltiples idiomas y apliqué renderizado del lado del servidor (SSR) para optimizar la performance y el SEO. Desarrollé animaciones complejas con Framer Motion y diseñé la interfaz con Tailwind CSS, logrando un sistema escalable, consistente y orientado a la experiencia del usuario.<br/><br/>🧪 Llevé a cabo tareas de optimización SEO técnico, identificando y resolviendo problemas de indexación y rendimiento. Finalmente, realicé el deploy con Firebase Hosting y Functions, asegurando estabilidad y disponibilidad en producción.",
     repository: "",
     deploy: "https://bebot.design/",
     techs: [
@@ -26,12 +26,12 @@ const projects: Project[] = [
     image: "/portadas/bebot.PNG",
   },
   {
-    title: "Conversational UX Academy",
+    title: "CUX Academy",
     type: "Experiencia Laboral",
     content:
-      "Actualmente me encuentro participando en el desarrollo de la página oficial de Cux Academy para la empresa BeBot, contribuyendo a la optimización de la experiencia digital y al crecimiento de su presencia online.",
+      "✨ Implementé un chatbot creado con Voiceflow, optimizando la integración y garantizando un flujo conversacional fluido. Para enriquecer la experiencia de usuario, desarrollé animaciones complejas con Framer Motion y diseñé la interfaz con Tailwind CSS, logrando un sistema escalable y consistente.<br/><br/>🧪 Realicé el deploy estático en producción vía FTP, asegurando estabilidad y disponibilidad. Además, integré un script de Octopus para la gestión de suscripciones e implementé estados globales con Zustand para un control eficiente de la aplicación.",
     repository: "",
-    deploy: "https://cux.academy/",
+    deploy: "https://www.cux.academy/",
     techs: [
       "Next.js",
       "Typescript",
@@ -42,14 +42,15 @@ const projects: Project[] = [
       "Octopus",
       "Voiceflow",
       "FTP",
+      "Zustand",
     ],
     image: "/portadas/cux.png",
   },
   {
     title: "Spotify Clone",
     type: "Proyecto",
     content:
-      "Clon de Spotify realizado con Astro.js en el cual se puede reproducir música, interactuar con el volumen y cambiar las canciones entre albums.",
+      "✨ Desarrollé un clon de Spotify con Astro.js, recreando la experiencia de un reproductor de música moderno y funcional.<br/><br/>🧪 Implementé la reproducción de canciones, control de volumen e interacción entre distintos álbumes, logrando una interfaz responsiva y fluida que emula la experiencia original de la plataforma.",
     repository: "https://github.com/FedeCodeLab/SpotifyClone",
     deploy: "https://spotify-clone-fedecodelab.vercel.app/",
     techs: [
@@ -63,6 +64,16 @@ const projects: Project[] = [
     ],
     image: "/portadas/spotify.png",
   },
+  {
+    title: "Expansiva",
+    type: "Proyecto",
+    content:
+      "✨ Desarrollé el sitio web de Expansiva, una plataforma para un evento artístico que fusiona poesía, tecnología y estética visual. El sitio muestra el programa, artistas invitados, imagen generativa y contenido multimedia de una forma inmersiva y moderna.<br/><br/>🧪 Implementé una experiencia interactiva que combina diseño visual con contenido poético, integré galerías de imágenes, programación de actividades y secciones de contenido artístico, prioricé una interfaz responsiva y estilizada para dispositivos móviles y de escritorio y colaboré con el equipo creativo para reflejar el espíritu experimental del proyecto.",
+    repository: "https://github.com/FedeCodeLab/Expansiva",
+    deploy: "https://expansiva.vercel.app/",
+    techs: ["React", "Javascript", "Tailwind"],
+    image: "/portadas/expansiva.png",
+  },
   {
     title: "Deliveloz",
     type: "Proyecto",
@@ -119,7 +130,7 @@ const projects: Project[] = [
 ];
 
 export const Portfolio = forwardRef<HTMLDivElement>((_, ref) => {
-  const [visibleCount, setVisibleCount] = useState(6);
+  const [visibleCount, setVisibleCount] = useState(3);
 
   const handleLoadMore = () => {
     setVisibleCount(projects.length);
@@ -131,7 +142,7 @@ export const Portfolio = forwardRef<HTMLDivElement>((_, ref) => {
       className="w-[90%] max-w-[1250px] mx-auto flex flex-col items-center justify-center gap-8 pt-20"
     >
       <h2 className="heading-3">Proyectos</h2>
-      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 gap-16">
         {projects.slice(0, visibleCount).map((project, idx) => (
           <ProjectCard
             key={idx}
@@ -142,6 +153,7 @@ export const Portfolio = forwardRef<HTMLDivElement>((_, ref) => {
             deploy={project.deploy}
             image={project.image}
             techs={project.techs}
+            list={project.list}
           />
         ))}
       </div>

public/logos/vercel.svg

@@ -11,10 +11,10 @@ export default function Tecnologies() {
       </h2>
       <div className="flex flex-col gap-6">
         <UseVelocity baseVelocity={2}>
-          <ListLogos start={0} end={7} animation="left" position="bottom-2" />
+          <ListLogos start={0} end={8} animation="left" position="bottom-2" />
         </UseVelocity>
         <UseVelocity baseVelocity={-2}>
-          <ListLogos start={7} end={14} animation="right" position="top-2" />
+          <ListLogos start={7} end={17} animation="right" position="top-2" />
         </UseVelocity>
       </div>
     </section>

public/portadas/expansiva.png

@@ -68,5 +68,15 @@
     "id": "logo-14",
     "name": "Motion",
     "image": "/logos/motion.svg"
+  },
+  {
+    "id": "logo-15",
+    "name": "Firebase",
+    "image": "/logos/firebase.svg"
+  },
+  {
+    "id": "logo-15",
+    "name": "Vercel",
+    "image": "/logos/vercel.svg"
   }
 ]

src/components/Portfolio/_components/ProjectCard.tsx

@@ -27,11 +27,13 @@ export type ProjectTech =
   | "MUI"
   | "Cloudinary"
   | "Jquery"
-  | "React";
+  | "React"
+  | "Zustand";
 
 export interface Project {
   title: string;
   type: string;
+  list?: string[];
   repository: string;
   deploy: string;
   content: string;