Feature/add projects

public/locales/en/common.json

@@ -92,21 +92,21 @@
     "projects": [
       {
         "id": "corporate",
-        "title": "Santa Rosa 10K Landing",
+        "title": "Horsy.AI",
         "description": "Modern corporate site featuring a headless CMS, blazing performance, and SEO best practices—easy for the client to manage and perfectly tailored for brand storytelling.",
         "category": "Website",
         "technologies": ["Next.js", "TypeScript", "Tailwind", "S3 Storage"],
-        "image": "portfolio-corporate.jpg",
-        "website": "https://www.santarosa10k.com"
+        "image": "horsy.png",
+        "website": "https://horsy.ai"
       },
       {
         "id": "b2c",
         "title": "Fruga",
         "description": "Comprehensive cashback platform integrating affiliate retail APIs to reward users with rebates, offsetting insurance premiums.",
         "category": "B2C",
         "technologies": ["Vite", "MUI", "AWS Cognito", "Express.js"],
-        "image": "portfolio-restaurant.jpg",
-        "website": "https://fruga.co.uk"
+        "image": "fruga.png",
+        "website": "https://dev.fruga.co.uk"
       }
     ]
   },

public/locales/es/common.json

@@ -92,21 +92,21 @@
     "projects": [
       {
         "id": "corporate",
-        "title": "Santa Rosa 10K Landing",
+        "title": "Horsy.AI",
         "description": "Sitio corporativo moderno con un CMS 'headless', rendimiento asombroso y mejores prácticas de SEO; fácil de administrar para el cliente y perfectamente adaptado para la narrativa de marca.",
         "category": "Sitio Web",
         "technologies": ["Next.js", "TypeScript", "Tailwind", "S3 Storage"],
-        "image": "portfolio-corporate.jpg",
-        "website": "https://www.santarosa10k.com"
+        "image": "horsy.png",
+        "website": "https://horsy.ai"
       },
       {
         "id": "cms",
         "title": "Fruga",
         "description": "Plataforma integral de reembolso que integra APIs de comercio afiliado para recompensar a los usuarios con reembolsos, compensando las primas de seguro.",
         "category": "B2C",
         "technologies": ["Vite", "MUI", "AWS Cognito", "Express.js"],
-        "image": "portfolio-restaurant.jpg",
-        "website": "https://fruga.co.uk"
+        "image": "fruga.png",
+        "website": "https://dev.fruga.co.uk"
       }
     ]
   },

src/components/Contact.tsx

@@ -67,7 +67,7 @@ const Contact = () => {
                 </div>
                 <div>
                   <h4 className="font-semibold text-foreground">{t('contact.email')}</h4>
-                  <p className="text-muted-foreground">jodaz.business@gmail.com</p>
+                  <p className="text-muted-foreground">jesus@jodaz.xyz</p>
                 </div>
               </div>
 

src/components/Footer.tsx

@@ -1,7 +1,7 @@
 import { FOOTER_LINKS, FOOTER_CREDITS_LINK } from '@/lib/links';
 import jodazLogo from '@/assets/jodaz_isotipo.png';
 import { useTranslation } from 'react-i18next';
-import { Mail } from 'lucide-react';
+// removed unused Mail icon import
 
 const Footer = () => {
   const { t } = useTranslation();

src/components/Header.tsx

@@ -55,27 +55,25 @@ const Header = () => {
     }
   };
 
-  useEffect(() => {
-    const handleScroll = () => {
-      const servicesSection =
-        document.getElementById('services') || document.getElementById('about');
-      if (servicesSection) {
-        const servicesTop = servicesSection.offsetTop;
-        setIsOpaque(window.scrollY >= servicesTop - 100); // Adjust offset as needed
-      }
-    };
+  // useEffect(() => {
+  //   const handleScroll = () => {
+  //     const servicesSection =
+  //       document.getElementById('services') || document.getElementById('about');
+  //     if (servicesSection) {
+  //       const servicesTop = servicesSection.offsetTop;
+  //       setIsOpaque(window.scrollY >= servicesTop - 100); // Adjust offset as needed
+  //     }
+  //   };
 
-    window.addEventListener('scroll', handleScroll);
-    handleScroll(); // Check on mount
+  //   window.addEventListener('scroll', handleScroll);
+  //   handleScroll(); // Check on mount
 
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
+  //   return () => window.removeEventListener('scroll', handleScroll);
+  // }, []);
 
   return (
     <header
-      className={`fixed top-0 left-0 right-0 z-50 ${
-        isOpaque || isMenuOpen ? 'bg-gray-900 backdrop-blur-sm text-blue-600' : 'bg-transparent'
-      }`}
+      className={`fixed top-0 left-0 right-0 z-50 bg-gray-900 backdrop-blur-sm text-blue-600`}
     >
       <div className="container mx-auto px-4 py-3">
         <div className="flex items-center justify-between">

src/components/Portfolio.tsx

@@ -2,16 +2,15 @@ import { ExternalLink, Github } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { useTranslation } from 'react-i18next';
-import portfolioEcommerce from '@/assets/portfolio-ecommerce.jpg';
-import portfolioCorporate from '@/assets/portfolio-corporate.jpg';
-import portfolioRestaurant from '@/assets/portfolio-restaurant.jpg';
+import portfolioRestaurant from '@/assets/fruga.png';
 
 const Portfolio = () => {
   const { t } = useTranslation();
 
   const imageMap: Record<string, string> = {
-    'portfolio-corporate.jpg': portfolioCorporate,
-    'portfolio-restaurant.jpg': portfolioRestaurant,
+    'horsy.png':
+      'https://res.cloudinary.com/jodaz/image/upload/v1727464583/images/projects/horsy.png',
+    'fruga.png': portfolioRestaurant,
   };
 
   const projects = t('portfolio.projects', { returnObjects: true }) as Array<{

src/components/views/About.tsx

@@ -2,6 +2,7 @@ import { ChevronDown } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useTranslation } from 'react-i18next';
 import founder from '@/assets/images/pic.jpg';
+import Hero from '@/assets/hero.jpeg';
 
 const AboutView = () => {
   const { t } = useTranslation();
@@ -14,14 +15,17 @@ const AboutView = () => {
   };
 
   return (
-    <section className="min-h-screen h-full overflow-hidden bg-slate-900">
-      <div className="absolute z-2 inset-0 bg-black opacity-25 w-full h-full"></div>
+    <section
+      className="relative min-h-screen h-full overflow-hidden bg-slate-900 bg-cover bg-center "
+      style={{ backgroundImage: `url(${Hero})` }}
+    >
+      <div className="absolute z-2 inset-0 bg-black opacity-50 w-full h-full"></div>
 
       <div className="absolute container lg:ml-36 px-4 z-10 py-24 lg:py-48">
         <div className="max-w-6xl mx-auto">
           <div className="grid lg:grid-cols-2 gap-12 items-center">
             <div className="text-white space-y-8 animate-fade-in">
-              <h1 className="text-2xl md:text-6xl lg:text-7xl font-bold leading-tight bg-gradient-to-r from-blue-50 to-blue-400 bg-clip-text text-transparent">
+              <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight bg-gradient-to-r from-blue-50 to-blue-400 bg-clip-text text-transparent">
                 {t('about.line1')}
                 <span className="block">{t('about.line2')}</span>
               </h1>

src/lib/links.ts

@@ -1,4 +1,4 @@
-import { Globe, Mail, Github, Instagram, Linkedin } from 'lucide-react';
+import { Globe, Mail, Github, Instagram, Linkedin, Briefcase } from 'lucide-react';
 
 export const FOOTER_LINKS = [
   {
@@ -16,6 +16,11 @@ export const FOOTER_LINKS = [
     href: 'https://github.com/jodaz-dev',
     icon: Github, // Use custom SVG or lucide-react GitHub icon if available
   },
+  {
+    label: 'Upwork',
+    href: 'https://upwork.com/freelancers/jesusordosgoitty4',
+    icon: Briefcase,
+  },
 ];
 
 export const FOOTER_CREDITS_LINK = {

src/pages/NotFound.tsx

@@ -1,22 +1,32 @@
-import { useLocation } from "react-router-dom";
-import { useEffect } from "react";
+import { useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
 
 const NotFound = () => {
   const location = useLocation();
 
   useEffect(() => {
-    console.error("404 Error: User attempted to access non-existent route:", location.pathname);
+    console.error('404 Error: User attempted to access non-existent route:', location.pathname);
   }, [location.pathname]);
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-100">
-      <div className="text-center">
-        <h1 className="mb-4 text-4xl font-bold">404</h1>
-        <p className="mb-4 text-xl text-gray-600">Oops! Page not found</p>
-        <a href="/" className="text-blue-500 underline hover:text-blue-700">
-          Return to Home
-        </a>
-      </div>
+    <div className="flex min-h-[60vh] items-center justify-center">
+      <section className="container mx-auto px-4 py-16 text-center">
+        <p className="text-sm text-muted-foreground">Error 404</p>
+        <h1 className="mt-2 text-5xl font-bold tracking-tight">Page not found</h1>
+        <p className="mt-4 text-muted-foreground max-w-xl mx-auto">
+          The page <span className="font-mono break-all">{location.pathname}</span> doesn’t exist or
+          may have been moved.
+        </p>
+        <div className="mt-8 flex items-center justify-center gap-3">
+          <Button asChild>
+            <Link to="/">Go to homepage</Link>
+          </Button>
+          <Button variant="outline" onClick={() => window.history.back()}>
+            Go back
+          </Button>
+        </div>
+      </section>
     </div>
   );
 };