├── src
    ├── vite-env.d.ts
    ├── index.css
    ├── assets
    │   └── images
    │   │   ├── f.png
    │   │   ├── under.png
    │   │   ├── fotoCurso.jpg
    │   │   ├── google-sc.png
    │   │   ├── keepInShape.png
    │   │   ├── microsoft-ai.png
    │   │   ├── microsoft-sc.png
    │   │   ├── python-ess.png
    │   │   ├── webScraper.png
    │   │   ├── californiaDreaming.png
    │   │   └── flightFeelAnalizer.png
    ├── main.tsx
    ├── components
    │   ├── UnderConstruction.tsx
    │   ├── Loader.tsx
    │   ├── ProjectsCard.tsx
    │   ├── DetailModal.tsx
    │   ├── Navbar.tsx
    │   ├── FeatureCarrousel.tsx
    │   ├── Footer.tsx
    │   └── ContactForm.tsx
    ├── pages
    │   ├── Contact.tsx
    │   ├── Projects.tsx
    │   ├── Home.tsx
    │   └── About.tsx
    ├── routes
    │   └── Router.tsx
    ├── layout
    │   └── Layout.tsx
    └── data
    │   └── ProjectsData.ts
├── vite.config.ts
├── tsconfig.json
├── .gitignore
├── README.md
├── tsconfig.node.json
├── index.html
├── tsconfig.app.json
├── eslint.config.js
├── LICENSE
└── package.json


/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 | 
3 | html {
4 |   scroll-behavior: smooth;
5 | }
6 | 
7 | 


--------------------------------------------------------------------------------
/src/assets/images/f.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Omarlsant/omarlsant-portfolio/HEAD/src/assets/images/f.png


--------------------------------------------------------------------------------
/src/assets/images/under.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Omarlsant/omarlsant-portfolio/HEAD/src/assets/images/under.png


--------------------------------------------------------------------------------
/src/assets/images/fotoCurso.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Omarlsant/omarlsant-portfolio/HEAD/src/assets/images/fotoCurso.jpg


--------------------------------------------------------------------------------
/src/assets/images/google-sc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Omarlsant/omarlsant-portfolio/HEAD/src/assets/images/google-sc.png


--------------------------------------------------------------------------------
/src/assets/images/keepInShape.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Omarlsant/omarlsant-portfolio/HEAD/src/assets/images/keepInShape.png


--------------------------------------------------------------------------------
/src/assets/images/microsoft-ai.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Omarlsant/omarlsant-portfolio/HEAD/src/assets/images/microsoft-ai.png


--------------------------------------------------------------------------------
/src/assets/images/microsoft-sc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Omarlsant/omarlsant-portfolio/HEAD/src/assets/images/microsoft-sc.png


--------------------------------------------------------------------------------
/src/assets/images/python-ess.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Omarlsant/omarlsant-portfolio/HEAD/src/assets/images/python-ess.png


--------------------------------------------------------------------------------
/src/assets/images/webScraper.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Omarlsant/omarlsant-portfolio/HEAD/src/assets/images/webScraper.png


--------------------------------------------------------------------------------
/src/assets/images/californiaDreaming.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Omarlsant/omarlsant-portfolio/HEAD/src/assets/images/californiaDreaming.png


--------------------------------------------------------------------------------
/src/assets/images/flightFeelAnalizer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Omarlsant/omarlsant-portfolio/HEAD/src/assets/images/flightFeelAnalizer.png


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import tailwindcss from '@tailwindcss/vite'
3 | export default defineConfig({
4 |   plugins: [
5 |     tailwindcss(),
6 |   ],
7 |   base: "/omarlsant-portfolio/",
8 | })


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [],
 3 |   "moduleResolution": "bundler",
 4 |   "skipLibCheck": true,
 5 |   
 6 |   "references": [
 7 |     { "path": "./tsconfig.app.json" },
 8 |     { "path": "./tsconfig.node.json" }
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | public/
27 | .gitignore


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Mi Portafolio Digital 🚀
 2 | 
 3 | ¡Bienvenido/a a mi portafolio! Aquí encontrarás una selección de mis proyectos más recientes y destacados.
 4 | 
 5 | Este portafolio ha sido creado con React + Vite (Tailwind CSS, Router-dom, Zustand) para mostrar mis habilidades y experiencia en desarrollo web.
 6 | 
 7 | **Explora los diferentes proyectos para conocer más sobre mi trabajo.**
 8 | 
 9 | ---
10 | 
11 | ¡Gracias por visitar!


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import { RouterProvider } from 'react-router-dom';
 4 | import { router } from './routes/Router';
 5 | import './index.css'
 6 | 
 7 | const rootElement = document.getElementById("root");
 8 | if (rootElement) {
 9 |   ReactDOM.createRoot(rootElement).render(
10 |     <React.StrictMode>
11 |       <RouterProvider router={router} />
12 |     </React.StrictMode>
13 |   );
14 | } else {
15 |   console.error("Root element not found");
16 | }
17 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
 4 |     "target": "ES2022",
 5 |     "lib": ["ES2023"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "isolatedModules": true,
13 |     "moduleDetection": "force",
14 |     "noEmit": true,
15 | 
16 |     /* Linting */
17 |     "strict": true,
18 |     "noUnusedLocals": true,
19 |     "noUnusedParameters": true,
20 |     "noFallthroughCasesInSwitch": true,
21 |     "noUncheckedSideEffectImports": true
22 |   },
23 |   "include": ["vite.config.ts"]
24 | }
25 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Omar Lengua's Portfolio</title>
 8 |     <script type="text/javascript">
 9 |       (function() {
10 |         const redirectPath = sessionStorage.getItem('redirectPath');
11 |         sessionStorage.removeItem('redirectPath'); 
12 |         
13 |         if (redirectPath) {
14 |           window.history.replaceState(null, '', redirectPath);
15 |         }
16 |       })();
17 |     </script>
18 |   </head>
19 |   <body>
20 |     <div id="root"></div>
21 |     <script type="module" src="/src/main.tsx"></script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 4 |     "target": "ES2020",
 5 |     "useDefineForClassFields": true,
 6 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 7 |     "module": "ESNext",
 8 |     "skipLibCheck": true,
 9 | 
10 |     /* Bundler mode */
11 |     "moduleResolution": "bundler",
12 |     "allowImportingTsExtensions": true,
13 |     "isolatedModules": true,
14 |     "moduleDetection": "force",
15 |     "noEmit": true,
16 |     "jsx": "react-jsx",
17 | 
18 |     /* Linting */
19 |     "strict": true,
20 |     "noUnusedLocals": true,
21 |     "noUnusedParameters": true,
22 |     "noFallthroughCasesInSwitch": true,
23 |     "noUncheckedSideEffectImports": true
24 |   },
25 |   "include": ["src"]
26 | }
27 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import globals from 'globals'
 3 | import reactHooks from 'eslint-plugin-react-hooks'
 4 | import reactRefresh from 'eslint-plugin-react-refresh'
 5 | import tseslint from 'typescript-eslint'
 6 | 
 7 | export default tseslint.config(
 8 |   { ignores: ['dist'] },
 9 |   {
10 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 |     files: ['**/*.{ts,tsx}'],
12 |     languageOptions: {
13 |       ecmaVersion: 2020,
14 |       globals: globals.browser,
15 |     },
16 |     plugins: {
17 |       'react-hooks': reactHooks,
18 |       'react-refresh': reactRefresh,
19 |     },
20 |     rules: {
21 |       ...reactHooks.configs.recommended.rules,
22 |       'react-refresh/only-export-components': [
23 |         'warn',
24 |         { allowConstantExport: true },
25 |       ],
26 |     },
27 |   },
28 | )
29 | 


--------------------------------------------------------------------------------
/src/components/UnderConstruction.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link } from 'react-router-dom';
 3 | import constructionImage from '../assets/images/under.png';
 4 | 
 5 | const UnderConstruction: React.FC = () => {
 6 |     return (
 7 |         <section className="flex items-center justify-center min-h-screen p-4">
 8 |             <div className="text-center">
 9 |                 <img
10 |                     src={constructionImage}
11 |                     alt="Website Under Construction - We are currently working on this page"
12 |                     className="max-w-2xl w-150 h-150 rounded-2xl shadow-xl shadow-gray-300 -mx-auto mb-8"
13 |                 />
14 | 
15 |                 <div className="mt-8">
16 |                     <Link to="/" className="inline-block px-8 py-3 text-gray-100 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 transition duration-300 font-semibold shadow-md">
17 |                         Go Back Home
18 |                     </Link>
19 |                 </div>
20 |             </div>
21 |         </section>
22 |     );
23 | };
24 | 
25 | export default UnderConstruction;


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 Omar Lengua Suárez
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/src/pages/Contact.tsx:
--------------------------------------------------------------------------------
 1 | // src/pages/Contact.tsx
 2 | 
 3 | import React from 'react';
 4 | import ContactForm from '../components/ContactForm'; // Ensure the path is correct
 5 | 
 6 | const Contact: React.FC = () => {
 7 |   return (
 8 |     // Main page/section container
 9 |     <div className="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 flex flex-col items-center justify-center">
10 |       <div className="max-w-xl w-full mx-auto">
11 | 
12 |         {/* Section Title */}
13 |         <h1 className="text-3xl sm:text-4xl font-extrabold text-center text-gray-900 dark:text-gray-100 mb-4">
14 |           Get in Touch
15 |         </h1>
16 |         {/* Optional introductory text */}
17 |         <p className="mt-2 text-center text-sm sm:text-base text-gray-600 dark:text-gray-400 mb-8">
18 |           Have a question or want to work together? Fill out the form, and I'll get back to you as soon as possible.
19 |         </p>
20 | 
21 |         {/* Form container with background and shadow */}
22 |         <div className="bg-white dark:bg-gray-800 overflow-hidden shadow-xl rounded-lg p-6 sm:p-8">
23 |            {/* Render the form component */}
24 |           <ContactForm />
25 |         </div>
26 | 
27 |       </div>
28 |     </div>
29 |   );
30 | };
31 | 
32 | export default Contact;


--------------------------------------------------------------------------------
/src/routes/Router.tsx:
--------------------------------------------------------------------------------
 1 | import { createBrowserRouter } from "react-router-dom";
 2 | import Layout from "../layout/Layout";
 3 | import Home from "../pages/Home";
 4 | import About from "../pages/About";
 5 | import Projects from "../pages/Projects";
 6 | import Contact from "../pages/Contact";
 7 | import UnderConstruction from "../components/UnderConstruction";
 8 | 
 9 | const basename = "/omarlsant-portfolio";
10 | 
11 | export const router = createBrowserRouter([
12 |     {
13 |         path: "/",
14 |         element: <Layout />,
15 |         children: [
16 |             {
17 |                 index: true,
18 |                 element: <Home />
19 |             },
20 |             {
21 |                 path: "about",
22 |                 element: <About />,
23 |             },
24 |             {
25 |                 path: "projects",
26 |                 element: <Projects />,
27 |             },
28 |             {
29 |                 path: "contact",
30 |                 element: <Contact />,
31 |             },
32 |             {
33 |                 path: "in-construction",
34 |                 element: <UnderConstruction />,
35 |             },
36 |            {
37 |                path: "*",
38 |                element: <div>App 404: Page Not Found in Router</div>,
39 |            }
40 |        ]
41 |    }
42 | ],
43 | 
44 | { basename: basename }
45 | 
46 | );


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "omarlsant-porfolio",
 3 |   "private": true,
 4 |   "homepage": "https://omarlsant.github.io/omarlsant-portfolio",
 5 |   "version": "0.0.0",
 6 |   "type": "module",
 7 |   "scripts": {
 8 |     "dev": "vite",
 9 |     "build": "vite build",
10 |     "lint": "eslint .",
11 |     "preview": "vite preview",
12 |     "predeploy": "npm run build",
13 |     "deploy": "gh-pages -d dist"
14 |   },
15 |   "dependencies": {
16 |     "@emotion/react": "^11.14.0",
17 |     "@emotion/styled": "^11.14.0",
18 |     "@mui/icons-material": "^7.0.1",
19 |     "@mui/material": "^7.0.1",
20 |     "@tailwindcss/vite": "^4.0.17",
21 |     "@tsparticles/react": "^3.0.0",
22 |     "gh-pages": "^6.3.0",
23 |     "react": "^19.0.0",
24 |     "react-dom": "^19.0.0",
25 |     "react-hook-form": "^7.55.0",
26 |     "react-icons": "^5.5.0",
27 |     "react-router-dom": "^7.4.0",
28 |     "react-tsparticles": "^2.12.2",
29 |     "react-type-animation": "^3.2.0",
30 |     "swiper": "^11.2.8",
31 |     "tailwindcss": "^4.0.17",
32 |     "tsparticles": "^3.8.1"
33 |   },
34 |   "devDependencies": {
35 |     "@eslint/js": "^9.21.0",
36 |     "@types/node": "^22.14.1",
37 |     "@types/react": "^19.0.10",
38 |     "@types/react-dom": "^19.0.4",
39 |     "@types/react-type-animation": "^1.1.4",
40 |     "@vitejs/plugin-react-swc": "^3.8.0",
41 |     "eslint": "^9.21.0",
42 |     "eslint-plugin-react-hooks": "^5.1.0",
43 |     "eslint-plugin-react-refresh": "^0.4.19",
44 |     "globals": "^15.15.0",
45 |     "typescript": "~5.7.2",
46 |     "typescript-eslint": "^8.24.1",
47 |     "vite": "^6.2.0"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/components/Loader.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | 
 3 | const LOADER_DISPLAY_DURATION = 1000;
 4 | const FADE_OUT_DURATION = 200;
 5 | 
 6 | const Loader: React.FC<{ onFinish: () => void }> = ({ onFinish }) => {
 7 |     const [fadeOut, setFadeOut] = useState(false);
 8 | 
 9 |     useEffect(() => {
10 |         const fadeTimer = setTimeout(() => {
11 |             setFadeOut(true);
12 |         }, LOADER_DISPLAY_DURATION);
13 | 
14 |         const finishTimer = setTimeout(() => {
15 |             onFinish();
16 |         }, LOADER_DISPLAY_DURATION + FADE_OUT_DURATION);
17 | 
18 | 
19 |         return () => {
20 |             clearTimeout(fadeTimer);
21 |             clearTimeout(finishTimer);
22 |         };
23 |     }, [onFinish]);
24 | 
25 |     return (
26 |         <div
27 |             className={`min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-gray-800 via-black to-gray-900 text-white font-mono relative overflow-hidden transition-opacity duration-${FADE_OUT_DURATION} ease-out ${ // Usar variable de duración
28 |                 fadeOut ? 'opacity-0' : 'opacity-100'
29 |             }`}
30 |         >
31 |             {/* Fondo Animado */}
32 |             <div className="absolute inset-0 bg-gradient-to-br from-blue-500 via-teal-500 to-green-500 opacity-20 blur-xl animate-pulse"></div>
33 | 
34 |             {/* Texto "Loading" */}
35 |             <span
36 |                 className="text-3xl sm:text-4xl font-bold tracking-wide animate-pulse z-10"
37 |                 aria-label="Cargando contenido">
38 |                 Loading...
39 |             </span>
40 | 
41 |             {/* Spinner */}
42 |             <div className="mt-8 w-16 h-16 border-4 border-t-blue-400 border-r-teal-400 border-b-green-400 border-l-transparent rounded-full animate-spin z-10"></div> {/* Añadir z-10 */}
43 |         </div>
44 |     );
45 | };
46 | 
47 | export default Loader;


--------------------------------------------------------------------------------
/src/layout/Layout.tsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect, useCallback } from 'react';
 2 | import { Outlet } from 'react-router-dom';
 3 | import Navbar from '../components/Navbar';
 4 | import Footer from '../components/Footer';
 5 | import Loader from '../components/Loader';
 6 | import Particles, { initParticlesEngine } from "@tsparticles/react";
 7 | import { type ISourceOptions } from "@tsparticles/engine";
 8 | import { loadFull } from "tsparticles";
 9 | 
10 | const particleOptions: ISourceOptions = {
11 |     fpsLimit: 60,
12 |     interactivity: {
13 |         events: { onClick: { enable: true, mode: 'push' }, onHover: { enable: true, mode: 'repulse' } },
14 |         modes: { push: { quantity: 4 }, repulse: { distance: 100, duration: 0.4 } },
15 |     },
16 |     particles: {
17 |         color: { value: '#ffffff' },
18 |         links: { color: '#ffffff', distance: 150, enable: true, opacity: 0.2, width: 1 },
19 |         move: { direction: 'none', enable: true, outModes: { default: 'bounce' }, random: false, speed: 1, straight: false },
20 |         number: { density: { enable: true }, value: 50 },
21 |         opacity: { value: 0.3 },
22 |         shape: { type: 'circle' },
23 |         size: { value: { min: 1, max: 3 } },
24 |     },
25 |     detectRetina: true,
26 |     background: {
27 |         color: '#111827',
28 |     }
29 | };
30 | 
31 | const Layout = () => {
32 |   const [showLoader, setShowLoader] = useState(true);
33 |   const [particlesInitialized, setParticlesInitialized] = useState(false);
34 | 
35 |   useEffect(() => {
36 |       if (particlesInitialized) return;
37 |       initParticlesEngine(async (engine) => {
38 |           await loadFull(engine);
39 |       }).then(() => {
40 |           setParticlesInitialized(true);
41 |       }).catch(err => {
42 |           console.error("Error initializing particles engine:", err);
43 |           setParticlesInitialized(true);
44 |       });
45 |   }, [particlesInitialized]);
46 | 
47 |   const handleLoaderFinish = useCallback(() => {
48 |       setShowLoader(false);
49 |   }, []);
50 | 
51 |   const particlesLoaded = useCallback(async () => {
52 |        console.log('Particles container loaded');
53 |   }, []);
54 | 
55 |   if (showLoader || !particlesInitialized) {
56 |       return <Loader onFinish={handleLoaderFinish} />;
57 |   }
58 | 
59 |   return (
60 |     <div className="relative flex flex-col min-h-screen bg-gray-900">
61 |       {particlesInitialized && (
62 |          <Particles
63 |             id="tsparticles-layout"
64 |             options={particleOptions}
65 |             particlesLoaded={particlesLoaded}
66 |             className="absolute inset-0 z-0 pointer-events-none"
67 |          />
68 |       )}
69 |       <div className="relative z-10 flex flex-col flex-grow">
70 |         <Navbar />
71 |         <main className="flex-grow">
72 |               <Outlet />
73 |         </main>
74 |         <Footer />
75 |       </div>
76 |     </div>
77 |   );
78 | };
79 | 
80 | export default Layout;


--------------------------------------------------------------------------------
/src/components/ProjectsCard.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Project } from '../data/ProjectsData';
 3 | import { FaGithub } from 'react-icons/fa';
 4 | 
 5 | interface ProjectCardProps {
 6 |   project: Project;
 7 |   onDetailsClick: (project: Project) => void;
 8 | }
 9 | 
10 | const ProjectCard: React.FC<ProjectCardProps> = ({ project, onDetailsClick }) => {
11 |   const { title, description, repoUrl, type } = project;
12 | 
13 |   const typeBadgeClasses = type === 'Group'
14 |     ? 'bg-teal-400/10 text-teal-300 border-teal-400/30' // Style for Group
15 |     : 'bg-sky-400/10 text-sky-300 border-sky-400/30';   // Style for Individual
16 | 
17 |   return (
18 |     <div className="
19 |       flex flex-col h-full
20 |       bg-slate-800/30 backdrop-blur-md
21 |       border border-slate-700/50 rounded-lg shadow-lg
22 |       p-6 transition-all duration-300 ease-out
23 |       hover:-translate-y-1 hover:shadow-cyan-500/30
24 |       overflow-hidden
25 |     ">
26 |       <h3 className="text-lg font-semibold mb-3 text-cyan-400">{title}</h3>
27 |       <p className="text-slate-300 text-sm mb-5 flex-grow line-clamp-4">
28 |           {description}
29 |       </p>
30 | 
31 |       <div className="mt-auto pt-4 border-t border-slate-700/50 flex flex-col sm:flex-row justify-between items-center gap-3 text-xs">
32 |          <div className="flex flex-wrap gap-3 justify-center sm:justify-start w-full sm:w-auto">
33 |              <a
34 |               href={repoUrl}
35 |               target="_blank"
36 |               rel="noopener noreferrer"
37 |               className="
38 |                 inline-flex items-center justify-center gap-1.5
39 |                 text-xs font-medium text-cyan-300 hover:text-cyan-100
40 |                 border border-cyan-700/50 hover:border-cyan-500/70
41 |                 bg-cyan-900/30 hover:bg-cyan-800/40
42 |                 px-3 py-1 rounded-md transition-all duration-200"
43 |              >
44 |                 <FaGithub className="w-3 h-3" />
45 |                 GitHub Repo
46 |             </a>
47 |             <button
48 |               onClick={() => onDetailsClick(project)}
49 |               className="
50 |                 inline-flex items-center justify-center
51 |                 text-xs font-medium text-slate-200 hover:text-white
52 |                 border border-slate-600/80 hover:border-slate-500
53 |                 bg-slate-700/50 hover:bg-slate-600/60
54 |                 px-3 py-1 rounded-md transition-all duration-200"
55 |             >
56 |               More Details {/* Button text should be English */}
57 |             </button>
58 |          </div>
59 | 
60 |          <span
61 |           className={`px-3 py-0.5 rounded-full font-medium border text-center whitespace-nowrap mt-2 sm:mt-0 ${typeBadgeClasses}`}
62 |          >
63 |           {type} {/* This will now correctly display 'Group' or 'Individual' */}
64 |         </span>
65 |       </div>
66 |     </div>
67 |   );
68 | };
69 | 
70 | export default ProjectCard;


--------------------------------------------------------------------------------
/src/components/DetailModal.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Project, ProjectType } from '../data/ProjectsData';
 3 | 
 4 | interface ProjectDetailModalProps {
 5 |   project: Project;
 6 |   onClose: () => void;
 7 | }
 8 | 
 9 | const ProjectDetailModal: React.FC<ProjectDetailModalProps> = ({ project, onClose }) => {
10 |   if (!project) return null;
11 | 
12 |   const { title, description, repoUrl, type, category, technologies, detailedDescription } = project;
13 | 
14 |   const handleContentClick = (e: React.MouseEvent<HTMLDivElement>) => {
15 |     e.stopPropagation();
16 |   };
17 | 
18 |   // Update conditional check for 'Group'
19 |   const typeBadgeClasses = type === ('Group' as ProjectType)
20 |     ? 'bg-teal-400/10 text-teal-300 border-teal-400/30' // Group style
21 |     : 'bg-sky-400/10 text-sky-300 border-sky-400/30';   // Individual style
22 | 
23 |   return (
24 |     <div
25 |       className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 p-4"
26 |       onClick={onClose}
27 |     >
28 |       <div
29 |         className="
30 |           bg-gradient-to-br from-slate-800 to-slate-900
31 |           border border-slate-700 rounded-xl shadow-2xl
32 |           w-full max-w-2xl max-h-[90vh] overflow-y-auto
33 |           p-6 sm:p-8 relative transition-opacity duration-300 ease-out"
34 |         onClick={handleContentClick}
35 |       >
36 |         <button
37 |           onClick={onClose}
38 |           className="absolute top-4 right-4 text-slate-400 hover:text-white transition-colors z-10"
39 |           aria-label="Close modal"
40 |         >
41 |           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
42 |             <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
43 |           </svg>
44 |         </button>
45 | 
46 |         <div className="mb-5 pr-8">
47 |           <h2 className="text-2xl sm:text-3xl font-bold mb-2 text-cyan-400">{title}</h2>
48 |           <div className="flex flex-wrap items-center gap-3 text-sm">
49 |             <span className={`px-3 py-0.5 rounded-full font-medium border text-xs ${typeBadgeClasses}`}>
50 |               {type}
51 |             </span>
52 |             <span className="text-slate-400 font-medium">
53 |               Category: {category}
54 |             </span>
55 |           </div>
56 |         </div>
57 | 
58 |         <div className="prose prose-invert prose-sm sm:prose-base max-w-none mb-6 text-slate-300 leading-relaxed">
59 |           <p>{detailedDescription || description}</p>
60 |         </div>
61 | 
62 |         {technologies && technologies.length > 0 && (
63 |           <div className="mb-6">
64 |             <h4 className="text-base font-semibold mb-3 text-slate-200 border-b border-slate-700 pb-1">
65 |               Technologies Used:
66 |             </h4>
67 |             <div className="flex flex-wrap gap-2">
68 |               {technologies.map((tech, index) => (
69 |                 <span
70 |                   key={index}
71 |                   className="bg-slate-700/80 text-slate-300 text-xs font-medium px-2.5 py-1 rounded-md shadow-sm"
72 |                 >
73 |                   {tech}
74 |                 </span>
75 |               ))}
76 |             </div>
77 |           </div>
78 |         )}
79 | 
80 |         <div className="mt-auto pt-4 border-t border-slate-700/50">
81 |           <a
82 |             href={repoUrl}
83 |             target="_blank"
84 |             rel="noopener noreferrer"
85 |             className="inline-flex items-center gap-2 text-base font-semibold text-cyan-300 hover:text-cyan-100 hover:underline transition-colors duration-200"
86 |           >
87 |              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
88 |                 <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
89 |             </svg>
90 |             View Code on GitHub
91 |           </a>
92 |         </div>
93 |       </div>
94 |     </div>
95 |   );
96 | };
97 | 
98 | export default ProjectDetailModal;


--------------------------------------------------------------------------------
/src/components/Navbar.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react';
  2 | import { NavLink, Link } from 'react-router-dom';
  3 | import { Menu as MenuIcon, Close as CloseIcon } from '@mui/icons-material';
  4 | import logoimg from '../assets/images/f.png';
  5 | 
  6 | const navLinks = [
  7 |   { name: 'Home', path: '/' },
  8 |   { name: 'About me', path: '/about' },
  9 |   { name: 'Projects', path: '/projects' }
 10 | ];
 11 | 
 12 | const scrollToTop = () => {
 13 |     window.scrollTo({ top: 0, behavior: 'smooth' });
 14 | };
 15 | 
 16 | const Navbar = () => {
 17 |   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 18 | 
 19 |   const toggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen);
 20 |   const closeMobileMenu = () => setIsMobileMenuOpen(false);
 21 | 
 22 |   const handleLogoClick = () => {
 23 |       closeMobileMenu();
 24 |       scrollToTop();
 25 |   };
 26 | 
 27 |   const linkClasses = "px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300 ease-in-out block sm:inline-block";
 28 |   const activeLinkClasses = "bg-gray-700/70 text-white";
 29 |   const inactiveLinkClasses = "text-gray-300 hover:bg-gray-700/50 hover:text-white";
 30 | 
 31 |   return (
 32 |     <nav className="shadow-md sticky top-0 z-50 backdrop-blur-sm bg-gray-900/30">
 33 |       <div className="container mx-auto px-4 sm:px-6 lg:px-8">
 34 |         <div className="relative flex items-center justify-between h-14">
 35 |           <div className="flex-shrink-0">
 36 |             <Link
 37 |                 to="/"
 38 |                 className="block hover:opacity-80 transition-opacity duration-300"
 39 |                 onClick={handleLogoClick}
 40 |                 aria-label="Ir a la página de inicio"
 41 |             >
 42 |              <img
 43 |                 src= {logoimg}
 44 |                 alt="Logo del Portfolio - Ir al inicio"
 45 |                 className="w-[34px] h-[34px]"
 46 |              />
 47 |             </Link>
 48 |           </div>
 49 | 
 50 |           <div className="hidden sm:ml-6 sm:flex sm:items-center sm:space-x-4">
 51 |             {navLinks.map((link) => (
 52 |               <NavLink
 53 |                 key={link.name}
 54 |                 to={link.path}
 55 |                  className={({ isActive }) =>
 56 |                   `${linkClasses} ${isActive ? activeLinkClasses : inactiveLinkClasses}`
 57 |                 }
 58 |               >
 59 |                 {link.name}
 60 |               </NavLink>
 61 |             ))}
 62 |           </div>
 63 | 
 64 |           <div className="absolute inset-y-0 right-0 flex items-center sm:hidden">
 65 |             <button
 66 |               onClick={toggleMobileMenu}
 67 |               type="button"
 68 |               className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700/50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
 69 |               aria-controls="mobile-menu"
 70 |               aria-expanded={isMobileMenuOpen}
 71 |               aria-label={isMobileMenuOpen ? "Cerrar menú principal" : "Abrir menú principal"}
 72 |             >
 73 |               {isMobileMenuOpen ? (
 74 |                 <CloseIcon className="block h-6 w-6" aria-hidden="true" />
 75 |               ) : (
 76 |                 <MenuIcon className="block h-6 w-6" aria-hidden="true" />
 77 |               )}
 78 |             </button>
 79 |           </div>
 80 | 
 81 |         </div>
 82 |       </div>
 83 | 
 84 |       <div
 85 |          className={`sm:hidden transition-all duration-300 ease-in-out overflow-hidden backdrop-blur-sm bg-gray-800/80 ${isMobileMenuOpen ? 'max-h-96 border-t border-gray-700/50' : 'max-h-0 border-t border-transparent'}`}
 86 |          id="mobile-menu"
 87 |       >
 88 |         <div className="px-2 pt-2 pb-3 space-y-1">
 89 |           {navLinks.map((link) => (
 90 |             <NavLink
 91 |               key={link.name}
 92 |               to={link.path}
 93 |               onClick={closeMobileMenu}
 94 |                className={({ isActive }) =>
 95 |                 `block ${linkClasses} ${isActive ? activeLinkClasses : inactiveLinkClasses}`
 96 |               }
 97 |             >
 98 |               {link.name}
 99 |             </NavLink>
100 |           ))}
101 |         </div>
102 |       </div>
103 |     </nav>
104 |   );
105 | };
106 | 
107 | export default Navbar;


--------------------------------------------------------------------------------
/src/pages/Projects.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import { projectsData, Project } from '../data/ProjectsData';
 3 | import ProjectCard from '../components/ProjectsCard';
 4 | import ProjectDetailModal from '../components/DetailModal';
 5 | 
 6 | const ProjectsPage: React.FC = () => {
 7 |     const [showScrollButton, setShowScrollButton] = useState(false);
 8 | 
 9 |     const [selectedProject, setSelectedProject] = useState<Project | null>(null);
10 |     const aiProjects = projectsData.filter(p => p.category === 'AI Developer');
11 |     const fullStackProjects = projectsData.filter(p => p.category === 'Full Stack Developer');
12 | 
13 |     const handleOpenDetails = (project: Project) => {
14 |         setSelectedProject(project);
15 |         document.body.style.overflow = 'hidden';
16 |     };
17 | 
18 |     const handleCloseModal = () => {
19 |         setSelectedProject(null);
20 |         document.body.style.overflow = 'auto';
21 |     };
22 | 
23 |     const renderCategorySection = (title: string, projects: Project[], highlight: string) => (
24 |         <div className="mb-16 last:mb-0">
25 |         <h2 className="text-2xl sm:text-3xl font-bold mb-8 text-left text-slate-100 border-l-4 border-cyan-400 pl-4">
26 |             <span className="text-cyan-400 font-black">{highlight}</span> {title.replace(highlight, '').trim()}
27 |         </h2>
28 |         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
29 |             {projects.map((project) => (
30 |             <ProjectCard
31 |                 key={project.id}
32 |                 project={project}
33 |                 onDetailsClick={handleOpenDetails}
34 |             />
35 |             ))}
36 |         </div>
37 |         </div>
38 |     );
39 | 
40 |     useEffect(() => {
41 |             const checkScrollTop = () => {
42 |                 if (!showScrollButton && window.scrollY > 400) {
43 |                     setShowScrollButton(true);
44 |                 } else if (showScrollButton && window.scrollY <= 400) {
45 |                     setShowScrollButton(false);
46 |                 }
47 |             };
48 |             window.addEventListener('scroll', checkScrollTop);
49 |             return () => window.removeEventListener('scroll', checkScrollTop);
50 |         }, [showScrollButton]);
51 |     
52 |         const scrollToTop = () => {
53 |             window.scrollTo({ top: 0, behavior: 'smooth' });
54 |         };
55 | 
56 |     return (
57 |         <div className="container mx-auto max-w-6xl px-4 py-16 sm:py-24">
58 |         <header className="text-center mb-16">
59 |             <h1 className="text-4xl lg:text-5xl pb-2 font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
60 |             My Projects
61 |             </h1>
62 |             <p className="text-lg text-slate-300 max-w-2xl mx-auto leading-relaxed">
63 |             Explore the projects I've worked on, spanning from Data Analysis and Artificial Intelligence to Full Stack Development.
64 |             </p>
65 |         </header>
66 | 
67 |         <main>
68 |             {/* Render AI section */}
69 |             {renderCategorySection('Developer', aiProjects, 'AI')}
70 |             {/* Render Full Stack section */}
71 |             {renderCategorySection('Developer', fullStackProjects, 'Full Stack')}
72 |         </main>
73 | 
74 |         {selectedProject && (
75 |             <ProjectDetailModal
76 |             project={selectedProject}
77 |             onClose={handleCloseModal}
78 |             />
79 |         )}
80 | 
81 |         {showScrollButton && (
82 |             <button onClick={scrollToTop} aria-label="Scroll to top" 
83 |             className={`fixed bottom-5 right-5 p-3 rounded-full bg-cyan-600 text-white shadow-lg hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 focus:ring-offset-slate-900 transition-all duration-300 ${ showScrollButton ? 'opacity-100 scale-100' : 'opacity-0 scale-90' }`}
84 |                         >
85 |                             {/* Arrow Icon */}
86 |                             <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
87 |                                 <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
88 |                             </svg>
89 |                         </button>
90 |                     )}
91 |         </div>
92 |     );
93 | };
94 | 
95 | export default ProjectsPage;


--------------------------------------------------------------------------------
/src/components/FeatureCarrousel.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Swiper, SwiperSlide } from 'swiper/react';
  3 | import { Navigation, Pagination, Autoplay, EffectCoverflow } from 'swiper/modules';
  4 | import 'swiper/css';
  5 | import 'swiper/css/navigation';
  6 | import 'swiper/css/pagination';
  7 | import 'swiper/css/effect-coverflow';
  8 | import 'swiper/css/autoplay';
  9 | 
 10 | import { FaExternalLinkAlt } from 'react-icons/fa';
 11 | 
 12 | export type ProjectType = 'Group' | 'Individual';
 13 | 
 14 | interface CarouselProject {
 15 |     id: string;
 16 |     title: string;
 17 |     description: string;
 18 |     imageUrl: string;
 19 |     link: string;
 20 |     type: ProjectType;
 21 | }
 22 | 
 23 | interface FeaturedProjectsCarouselProps {
 24 |     projects: CarouselProject[];
 25 | }
 26 | 
 27 | const FeaturedProjectsCarousel: React.FC<FeaturedProjectsCarouselProps> = ({ projects }) => {
 28 |     if (!projects || projects.length === 0) {
 29 |         return <p className="text-center text-slate-400">No projects to display.</p>;
 30 |     }
 31 | 
 32 |     return (
 33 |         <section className="w-full max-w-4xl mt-12 md:mt-16">
 34 |             <h2 className="text-3xl font-semibold text-center mb-8 text-sky-400">Main Projects</h2>
 35 |             <Swiper
 36 |                 modules={[Navigation, Pagination, Autoplay, EffectCoverflow]}
 37 |                 effect={'coverflow'}
 38 |                 grabCursor={true}
 39 |                 centeredSlides={true}
 40 |                 slidesPerView={'auto'}
 41 |                 coverflowEffect={{
 42 |                     rotate: 50,
 43 |                     stretch: 0,
 44 |                     depth: 100,
 45 |                     modifier: 1,
 46 |                     slideShadows: true,
 47 |                 }}
 48 |                 autoplay={{
 49 |                     delay: 4500, // Un poco más de tiempo
 50 |                     disableOnInteraction: false,
 51 |                 }}
 52 |                 pagination={{ clickable: true }}
 53 |                 navigation={true}
 54 |                 loop={projects.length > 1} // Solo activar loop si hay más de un proyecto
 55 |                 className="mySwiper w-full pb-10" // pb-10 para espacio de paginación
 56 |                 breakpoints={{
 57 |                     640: {
 58 |                         slidesPerView: 1,
 59 |                         spaceBetween: 20,
 60 |                     },
 61 |                     768: {
 62 |                         slidesPerView: 2,
 63 |                         spaceBetween: 30,
 64 |                     },
 65 |                     1024: {
 66 |                         slidesPerView: 'auto', // Dejar que el ancho del slide defina cuántos caben
 67 |                         spaceBetween: 40,
 68 |                     },
 69 |                 }}
 70 |             >
 71 |                 {projects.map((project) => (
 72 |                     <SwiperSlide 
 73 |                         key={project.id} 
 74 |                         className="bg-slate-800 rounded-xl shadow-2xl overflow-hidden group !w-[300px] sm:!w-[350px] md:!w-[380px]" // Ancho del slide, rounded-xl, shadow-2xl
 75 |                     >
 76 |                         <img
 77 |                             src={project.imageUrl}
 78 |                             alt={project.title}
 79 |                             className="w-full h-48 sm:h-56 object-contain transition-transform duration-300 ease-in-out group-hover:scale-105"
 80 |                         />
 81 |                         <div className="p-5"> {/* Un poco más de padding */}
 82 |                             <h3 className="text-lg font-semibold text-white mb-2 truncate">{project.title}</h3> {/* truncar título largo */}
 83 |                             <p className="text-sm text-slate-300 mb-4 h-20 overflow-y-auto text-ellipsis scrollbar-thin scrollbar-thumb-slate-600 scrollbar-track-slate-700">
 84 |                                 {project.description}
 85 |                             </p>
 86 |                             <a
 87 |                                 href={project.link}
 88 |                                 target="_blank"
 89 |                                 rel="noopener noreferrer"
 90 |                                 className="inline-flex items-center text-sm font-medium text-cyan-400 hover:text-cyan-300 hover:underline"
 91 |                                 aria-label={`Learn more about ${project.title}`}
 92 |                             >
 93 |                                 Watch the repo <FaExternalLinkAlt className="ml-1.5 w-3 h-3" />
 94 |                             </a>
 95 |                         </div>
 96 |                     </SwiperSlide>
 97 |                 ))}
 98 |             </Swiper>
 99 |         </section>
100 |     );
101 | };
102 | 
103 | export default FeaturedProjectsCarousel;


--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
  1 | import { Link } from 'react-router-dom';
  2 | import { FaGithub, FaLinkedin } from 'react-icons/fa';
  3 | 
  4 | const scrollToTop = () => {
  5 |     window.scrollTo({ top: 0, behavior: 'smooth' });
  6 | };
  7 | 
  8 | interface FooterLink {
  9 |   label: string;
 10 |   href: string;
 11 |   isExternal?: boolean;
 12 |   icon?: React.ElementType;
 13 | }
 14 | 
 15 | const navigationLinks: FooterLink[] = [
 16 |   { label: 'Home', href: '/' },
 17 |   { label: 'About me', href: '/about' },
 18 |   { label: 'Projects', href: '/projects' },
 19 | ];
 20 | 
 21 | const socialLinks: FooterLink[] = [
 22 |   { label: 'GitHub', href: 'https://github.com/Omarlsant', isExternal: true, icon: FaGithub },
 23 |   { label: 'LinkedIn', href: 'https://www.linkedin.com/in/omarlengua/', isExternal: true, icon: FaLinkedin },
 24 | ];
 25 | 
 26 | 
 27 | interface LinkColumnProps {
 28 |   title: string;
 29 |   links: FooterLink[];
 30 | }
 31 | 
 32 | const LinkColumn: React.FC<LinkColumnProps> = ({ title, links }) => (
 33 |   <div>
 34 |     <h3 className="text-sm font-semibold text-gray-300 tracking-wider uppercase mb-4">{title}</h3>
 35 |     <ul className="space-y-2">
 36 |       {links.map((link) => {
 37 |          const isHomeLink = !link.isExternal && link.href === '/';
 38 |          return (
 39 |             <li key={link.label}>
 40 |                 {link.isExternal ? (
 41 |                     <a
 42 |                         href={link.href}
 43 |                         target="_blank"
 44 |                         rel="noopener noreferrer"
 45 |                         className="text-gray-400 hover:text-white transition-colors duration-300 text-sm inline-flex items-center gap-2"
 46 |                         aria-label={link.label}
 47 |                     >
 48 |                         {link.icon && <link.icon className="w-4 h-4 flex-shrink-0" />}
 49 |                         {link.label}
 50 |                     </a>
 51 |                 ) : (
 52 |                     <Link
 53 |                         to={link.href}
 54 |                         className="text-gray-400 hover:text-white transition-colors duration-300 text-sm"
 55 |                         onClick={isHomeLink ? scrollToTop : undefined}
 56 |                     >
 57 |                         {link.label}
 58 |                     </Link>
 59 |                 )}
 60 |             </li>
 61 |          );
 62 |       })}
 63 |     </ul>
 64 |   </div>
 65 | );
 66 | 
 67 | 
 68 | const Footer = () => {
 69 |   return (
 70 |     <footer className="text-white pt-12 pb-8 border-t border-gray-700/30 mt-auto">
 71 |       <div className="container mx-auto px-4">
 72 |         <div className="flex flex-col items-center md:flex-row md:justify-center md:items-start gap-8 lg:gap-14 mb-10">
 73 |            <div className="flex flex-col items-center sm:flex-row sm:items-start gap-10 lg:gap-14 text-center sm:text-left">
 74 |             <LinkColumn title="Navigation" links={navigationLinks} />
 75 |             <div>
 76 |               <h3 className="text-sm font-semibold text-gray-300 tracking-wider uppercase mb-4">Social links</h3>
 77 |               <ul className="space-y-2 inline-flex flex-col items-center sm:items-start">
 78 |                   {socialLinks.map((link) => (
 79 |                       <li key={link.label} className='mt-1'>
 80 |                           <a
 81 |                               href={link.href}
 82 |                               target="_blank"
 83 |                               rel="noopener noreferrer"
 84 |                               className="text-gray-400 hover:text-white transition-colors duration-300 text-sm inline-flex items-center gap-2"
 85 |                               aria-label={link.label}
 86 |                           >
 87 |                               {link.icon && <link.icon className="w-5 h-5 flex-shrink-0" />}
 88 |                               <span>{link.label}</span>
 89 |                           </a>
 90 |                       </li>
 91 |                   ))}
 92 |               </ul>
 93 |             </div>
 94 |           </div>
 95 | 
 96 |           <div className="w-full md:w-auto text-center md:text-left flex-shrink-0 md:ml-14">
 97 |             <h3 className="text-sm font-semibold text-gray-300 tracking-wider uppercase mb-2">Email</h3>
 98 |             <a href="mailto:omarns21@gmail.com" rel="noopener noreferrer" className="block text-gray-400 hover:text-white transition-colors duration-300 text-sm mb-4">
 99 |                 omarns21@gmail.com
100 |             </a>
101 |             <h3 className="text-sm font-semibold text-gray-300 tracking-wider uppercase mb-2">Location</h3>
102 |             <p className="text-gray-400 text-sm">
103 |                 Madrid, Spain.
104 |             </p>
105 |           </div>
106 |         </div>
107 | 
108 |         <div className="border-t border-gray-700/50 pt-6 mt-6">
109 |             <div className="text-center">
110 |                 <p className="text-gray-500 text-sm">
111 |                     © {new Date().getFullYear()} Omar Lengua. All rights reserved.
112 |                 </p>
113 |             </div>
114 |         </div>
115 |       </div>
116 |     </footer>
117 |   );
118 | };
119 | 
120 | export default Footer;


--------------------------------------------------------------------------------
/src/components/ContactForm.tsx:
--------------------------------------------------------------------------------
  1 | // src/components/ContactForm.tsx
  2 | import React, { useState } from 'react';
  3 | 
  4 | interface FormData {
  5 |   name: string;
  6 |   email: string;
  7 |   message: string;
  8 | }
  9 | 
 10 | const ContactForm: React.FC = () => {
 11 |   const [formData, setFormData] = useState<FormData>({
 12 |     name: '',
 13 |     email: '',
 14 |     message: '',
 15 |   });
 16 |   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
 17 |   const [submitMessage, setSubmitMessage] = useState<string>('');
 18 |   const [submitSuccess, setSubmitSuccess] = useState<boolean | null>(null);
 19 | 
 20 |   const handleChange = (
 21 |     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
 22 |   ) => {
 23 |     const { name, value } = e.target;
 24 |     setFormData((prevData) => ({
 25 |       ...prevData,
 26 |       [name]: value,
 27 |     }));
 28 |   };
 29 | 
 30 |   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 31 |     e.preventDefault();
 32 |     setIsSubmitting(true);
 33 |     setSubmitMessage('');
 34 |     setSubmitSuccess(null);
 35 | 
 36 |     setTimeout(() => {
 37 |       setSubmitMessage("Thank you for your message! I'll be in touch soon.");
 38 |       setSubmitSuccess(true);
 39 |       setIsSubmitting(false);
 40 |       setFormData({ name: '', email: '', message: '' });
 41 | 
 42 | 
 43 |     }, 2000);
 44 |   };
 45 | 
 46 |   return (
 47 |     <form onSubmit={handleSubmit} className="space-y-6">
 48 |       <div>
 49 |         <label
 50 |           htmlFor="name"
 51 |           className="block text-sm font-medium text-gray-700 dark:text-gray-300"
 52 |         >
 53 |           Full Name
 54 |         </label>
 55 |         <div className="mt-1">
 56 |           <input
 57 |             type="text"
 58 |             name="name"
 59 |             id="name"
 60 |             autoComplete="name"
 61 |             required
 62 |             value={formData.name}
 63 |             onChange={handleChange}
 64 |             disabled={isSubmitting || submitSuccess === true}
 65 |             className="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 disabled:opacity-50"
 66 |             placeholder="Your Name"
 67 |           />
 68 |         </div>
 69 |       </div>
 70 | 
 71 |       <div>
 72 |         <label
 73 |           htmlFor="email"
 74 |           className="block text-sm font-medium text-gray-700 dark:text-gray-300"
 75 |         >
 76 |           Email Address
 77 |         </label>
 78 |         <div className="mt-1">
 79 |           <input
 80 |             id="email"
 81 |             name="email"
 82 |             type="email"
 83 |             autoComplete="email"
 84 |             required
 85 |             value={formData.email}
 86 |             onChange={handleChange}
 87 |             disabled={isSubmitting || submitSuccess === true}
 88 |             className="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 disabled:opacity-50"
 89 |             placeholder="you@example.com"
 90 |           />
 91 |         </div>
 92 |       </div>
 93 | 
 94 |       <div>
 95 |         <label
 96 |           htmlFor="message"
 97 |           className="block text-sm font-medium text-gray-700 dark:text-gray-300"
 98 |         >
 99 |           Message
100 |         </label>
101 |         <div className="mt-1">
102 |           <textarea
103 |             id="message"
104 |             name="message"
105 |             rows={4}
106 |             required
107 |             value={formData.message}
108 |             onChange={handleChange}
109 |             disabled={isSubmitting || submitSuccess === true}
110 |             className="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 disabled:opacity-50"
111 |             placeholder="Your message here..."
112 |           />
113 |         </div>
114 |       </div>
115 | 
116 |       {submitMessage && (
117 |         <div
118 |           className={`p-3 rounded-md text-sm ${
119 |             submitSuccess
120 |               ? 'bg-green-50 dark:bg-green-900 text-green-700 dark:text-green-300'
121 |               : 'bg-red-50 dark:bg-red-900 text-red-700 dark:text-red-300'
122 |           }`}
123 |         >
124 |           {submitMessage}
125 |         </div>
126 |       )}
127 | 
128 |       <div>
129 |         <button
130 |           type="submit"
131 |           disabled={isSubmitting || submitSuccess === true}
132 |           className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-sky-600 hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 dark:focus:ring-offset-gray-800 disabled:opacity-50 disabled:cursor-not-allowed"
133 |         >
134 |           {isSubmitting ? 'Sending...' : 'Send Message'}
135 |         </button>
136 |       </div>
137 |       {submitSuccess === true && (
138 |          <p className="text-sm text-center text-gray-600 dark:text-gray-400 mt-4">
139 |             The form has been submitted. If you wish to send another message, please refresh the page.
140 |          </p>
141 |       )}
142 |     </form>
143 |   );
144 | };
145 | 
146 | export default ContactForm;


--------------------------------------------------------------------------------
/src/pages/Home.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | import { Link } from 'react-router-dom';
  3 | import { FaProjectDiagram, FaUserAlt, FaPaperPlane, FaLaptopCode, FaBrain, FaDatabase } from 'react-icons/fa';
  4 | import FeaturedProjectsCarousel from '../components/FeatureCarrousel';
  5 | import { projectsData } from '../data/ProjectsData';
  6 | 
  7 | import portfolioImage from '../assets/images/f.png';
  8 | import keepInShape from '../assets/images/keepInShape.png';
  9 | import flightFeelAnalizer from '../assets/images/flightFeelAnalizer.png';
 10 | import californiaDreaming from '../assets/images/californiaDreaming.png';
 11 | import webScraper from '../assets/images/webScraper.png';
 12 | 
 13 | const featuredCarouselConfig: Array<{ projectId: string; image: string; customDescription?: string }> = [
 14 |     { projectId: 'fs-1', image: portfolioImage, customDescription: 'A comprehensive showcase of my professional portfolio, highlighting key projects and skills.' },
 15 |     { projectId: 'ai-1', image: keepInShape, customDescription: 'Machine learning model for predicting BMI and classifying different types of obesity.' },
 16 |     { projectId: 'ai-', image: flightFeelAnalizer, customDescription: 'Analyzing and predicting flight satisfaction using machine learning on a Kaggle dataset.' },
 17 |     { projectId: 'ai-6', image: californiaDreaming, customDescription: 'Predicting housing values for California properties using a machine learning approach.' },
 18 |     { projectId: 'ai-6', image: webScraper, customDescription: 'Automated web scraper for InfoJobs job offers, built with Python and Selenium.' },
 19 | ];
 20 | 
 21 | const Home: React.FC = () => {
 22 |     const [showScrollButton, setShowScrollButton] = useState(false);
 23 |     useEffect(() => {
 24 |         const checkScrollTop = () => {
 25 |             if (!showScrollButton && window.scrollY > 400) {
 26 |                 setShowScrollButton(true);
 27 |             } else if (showScrollButton && window.scrollY <= 400) {
 28 |                 setShowScrollButton(false);
 29 |             }
 30 |         };
 31 |         window.addEventListener('scroll', checkScrollTop);
 32 |         return () => window.removeEventListener('scroll', checkScrollTop);
 33 |     }, [showScrollButton]);
 34 | 
 35 |     const scrollToTop = () => {
 36 |         window.scrollTo({ top: 0, behavior: 'smooth' });
 37 |     };
 38 |     
 39 |     const featuredForCarousel = featuredCarouselConfig
 40 |         .map(config => {
 41 |             const project = projectsData.find(p => p.id === config.projectId);
 42 |             if (!project) {
 43 |                 console.warn(`Project with ID "${config.projectId}" not found in projectsData. Skipping for carousel.`);
 44 |                 return null;
 45 |             }
 46 |             return {
 47 |                 id: project.id,
 48 |                 title: project.title,
 49 |                 description: config.customDescription || (project.description.length > 120 ? project.description.substring(0, 117) + '...' : project.description),
 50 |                 imageUrl: config.image,
 51 |                 link: project.repoUrl,
 52 |                 type: project.type,
 53 |             };
 54 |         })
 55 |         .filter((project): project is NonNullable<typeof project> => project !== null);        
 56 | 
 57 |     return (
 58 |         <div className="flex flex-col items-center justify-center text-white p-4 py-16 md:py-24 min-h-screen">
 59 |             <div className="flex flex-col items-center gap-6 md:gap-10 w-full max-w-5xl">
 60 | 
 61 |                 <header className="flex flex-col items-center text-center max-w-3xl">
 62 |                     <h1 className="text-5xl sm:text-6xl md:text-7xl font-bold tracking-tight mb-5">
 63 |                         Omar Lengua
 64 |                     </h1>
 65 |                     <p className="text-xl sm:text-2xl text-gray-400 mb-6">
 66 |                         Full Stack Developer | AI & Data
 67 |                     </p>
 68 |                     <p className="text-justify sm:text-lg max-w-2xl mx-auto text-slate-300 leading-relaxed mb-8">
 69 |                         Welcome to my digital space! I'm a passionate Full Stack Developer actively broadening my horizons into the exciting fields of AI Development and Data Science. Here, you'll find a showcase of my projects, insights into my journey, and ways to connect with me.
 70 |                     </p>
 71 |                 </header>
 72 | 
 73 |                 {/* Visual Navigation Section */}
 74 |                 <section className="w-full max-w-4xl">
 75 |                     <h2 className="text-3xl font-semibold text-center mb-8 text-sky-400">Explore</h2>
 76 |                     <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
 77 |                         
 78 |                         <Link
 79 |                             to="/projects"
 80 |                             className="group flex flex-col items-center text-center p-6 bg-slate-800 hover:bg-slate-700 rounded-xl shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105"
 81 |                             aria-label="View my projects"
 82 |                         >
 83 |                             <FaProjectDiagram size={40} className="text-cyan-400 mb-4" />
 84 |                             <h3 className="text-xl font-semibold text-white mb-2">
 85 |                                 My Projects
 86 |                             </h3>
 87 |                             <p className="text-slate-300 text-sm mb-3">
 88 |                                 Discover the applications and solutions I've built.
 89 |                             </p>
 90 |                             <span className="mt-auto font-semibold text-cyan-400 group-hover:underline text-sm">
 91 |                                 View Projects →
 92 |                             </span>
 93 |                         </Link>
 94 | 
 95 |                         <Link
 96 |                             to="/about"
 97 |                             className="group flex flex-col items-center text-center p-6 bg-slate-800 hover:bg-slate-700 rounded-xl shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105"
 98 |                             aria-label="Learn more about me"
 99 |                         >
100 |                             <FaUserAlt size={40} className="text-cyan-400 mb-4" />
101 |                             <h3 className="text-xl font-semibold text-white mb-2">
102 |                                 About Me
103 |                             </h3>
104 |                             <p className="text-slate-300 text-sm mb-3">
105 |                                 Learn about my journey, skills, and passion for technology.
106 |                             </p>
107 |                             <span className="mt-auto font-semibold text-cyan-400 group-hover:underline text-sm">
108 |                                 Know Me →
109 |                             </span>
110 |                         </Link>
111 |                         
112 |                         <Link
113 |                             to="/contact"
114 |                             className="group flex flex-col items-center text-center p-6 bg-slate-800 hover:bg-slate-700 rounded-xl shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105"
115 |                             aria-label="Get in touch with me"
116 |                         >
117 |                             <FaPaperPlane size={40} className="text-cyan-400 mb-4" />
118 |                             <h3 className="text-xl font-semibold text-white mb-2">
119 |                                 Let's Talk
120 |                             </h3>
121 |                             <p className="text-slate-300 text-sm mb-3">
122 |                                 Questions, proposals, or just want to say hi? Reach out.
123 |                             </p>
124 |                             <span className="mt-auto font-semibold text-cyan-400 group-hover:underline text-sm">
125 |                                 Contact Me →
126 |                             </span>
127 |                         </Link>
128 |                     </div>
129 |                 </section>
130 | 
131 |                 {/* Renderiza el carrusel con los datos preparados */}
132 |                 {featuredForCarousel.length > 0 && (
133 |                     <FeaturedProjectsCarousel projects={featuredForCarousel} />
134 |                 )}
135 |                 
136 |                 <section className="mt-12 md:mt-16 w-full max-w-3xl text-center">
137 |                     <h3 className="text-2xl font-semibold text-sky-400 mb-4">Bridging Tech Development with Business Strategy</h3>
138 |                     <div className="flex justify-center items-center gap-6 mb-6">
139 |                         <FaBrain size={30} className="text-slate-400" title="Artificial Intelligence"/>
140 |                         <span className="text-slate-400 text-2xl">|</span>
141 |                         <FaDatabase size={30} className="text-slate-400" title="Data Analysis"/>
142 |                         <span className="text-slate-400 text-2xl">|</span>
143 |                         <FaLaptopCode size={30} className="text-slate-400" title="Full Stack Development"/>
144 |                     </div>
145 |                     <p className="text-slate-300 text-justify leading-relaxed">
146 |                         I am committed to leveraging my skills in full stack development, AI, and data analysis to create impactful solutions that drive business success. My goal is to bridge the gap between technology and business strategy, ensuring that every project not only meets technical requirements but also aligns with broader business objectives.
147 |                         Whether it's building robust applications, developing intelligent systems, or analyzing data to extract actionable insights, I strive to deliver high-quality results that make a difference.
148 |                     </p>
149 |                 </section>
150 | 
151 |             </div>
152 |             {showScrollButton && (
153 |             <button onClick={scrollToTop} aria-label="Scroll to top" 
154 |             className={`fixed bottom-5 right-5 p-3 rounded-full bg-cyan-600 text-white shadow-lg hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 focus:ring-offset-slate-900 transition-all duration-300 ${ showScrollButton ? 'opacity-100 scale-100' : 'opacity-0 scale-90' }`}
155 |                         >
156 |                             {/* Arrow Icon */}
157 |                             <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
158 |                                 <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
159 |                             </svg>
160 |                         </button>
161 |                     )}
162 |         </div>
163 |     );
164 | };
165 | 
166 | export default Home;


--------------------------------------------------------------------------------
/src/data/ProjectsData.ts:
--------------------------------------------------------------------------------
  1 | export type ProjectCategory = 'AI Developer' | 'Full Stack Developer';
  2 | export type ProjectType = 'Group' | 'Individual';
  3 | 
  4 | export interface Project {
  5 |     id: string;
  6 |     category: ProjectCategory;
  7 |     title: string;
  8 |     description: string;
  9 |     technologies: string[];
 10 |     detailedDescription?: string;
 11 |     repoUrl: string;
 12 |     type: ProjectType;
 13 | }
 14 | 
 15 | export const projectsData: Project[] = [
 16 |     // === AI Developer Projects ===
 17 |         {
 18 |         id: 'ai-1',
 19 |         category: 'AI Developer',
 20 |         title: 'Keep in Shape',
 21 |         description: 'Predicting the BMI and type of obesity using machine learning.',
 22 |         technologies: ['Python', 'Dash', 'Flask', 'Supabase', 'Docker', 'Docker-compose', 'Jupyter Notebook', 'Pandas', 'Scikit-learn', 'Git', 'Github'],
 23 |         detailedDescription: `This project focuses on predicting the Body Mass Index (BMI) and type of obesity using machine learning techniques. The application is built with Dash and Flask, allowing users to input their physical characteristics and receive predictions on their BMI and obesity type. The data is stored in a Supabase database, and the machine learning model is trained using Scikit-learn. The project is containerized using Docker and Docker-compose for easy deployment.`,
 24 |         repoUrl: 'https://github.com/fergarcat/multiclass_prediction_obesity_risk',
 25 |         type: 'Group'
 26 |     },
 27 |     {
 28 |         id: 'ai-2',
 29 |         category: 'AI Developer',
 30 |         title: 'Flight Satisfaction Prediction',
 31 |         description: 'Predicting flight satisfaction using machine learning (Kaggle dataset).',
 32 |         technologies: ['Python', 'Flask', 'MySQL', 'Docker', 'Docker-compose', 'Jupyter Notebook', 'Pandas', 'Scikit-learn', 'HTML', 'CSS', 'Git', 'Github'],
 33 |         detailedDescription: `This project focuses on predicting flight satisfaction using machine learning techniques. The dataset used is from Kaggle and contains various features related to flight experiences. The project involves data preprocessing, feature selection, model training, and evaluation. A Flask web application is developed to allow users to input flight-related data and receive predictions on passenger satisfaction. The results are stored in a MySQL database for further analysis.`,
 34 |         repoUrl: 'https://github.com/Bootcamp-IA-P4/flight-feel-analyzer',
 35 |         type: 'Group'
 36 |     },
 37 |     {
 38 |         id: 'ai-3',
 39 |         category: 'AI Developer',
 40 |         title: 'Housing Price Prediction',
 41 |         description: 'RESTful API and simple UI with Flask to predict housing values (California Housing dataset).',
 42 |         technologies: ['Python', 'Flask', 'MySQL','Docker', 'Docker-compose', 'Jupyter Notebook', 'Pandas', 'Scikit-learn', 'HTML', 'CSS', 'Git', 'Github'],
 43 |         detailedDescription: `This project implements a RESTful API built with Flask and a simple web interface. It allows users to input characteristics of a residential area (based on the California Housing dataset) and obtain a prediction of the median housing value for that area, generated by a previously trained regression model using Scikit-learn. The application saves each set of input characteristics ('property') and its corresponding prediction in a MySQL database for later analysis.`,
 44 |         repoUrl: 'https://github.com/Bootcamp-IA-P4/e1_regression',
 45 |         type: 'Group'
 46 |     },
 47 |     {
 48 |         id: 'ai-4',
 49 |         category: 'AI Developer',
 50 |         title: 'EDA: Global and Regional Migration',
 51 |         description: 'Exploratory Data Analysis (EDA) on global and regional migration patterns (focus on LatAm).',
 52 |         technologies: ['Python', 'Jupyter Notebook', 'Pandas', 'NumPy', 'Matplotlib', 'Seaborn', 'Git', 'Github'],
 53 |         detailedDescription: `An exhaustive Exploratory Data Analysis (EDA) was performed on global and regional migration patterns, with a particular focus on Latin America. Using World Bank data and tools like Pandas and Matplotlib/Seaborn in Python, the study analyzes the potential causes (economic, social, political) and demographic effects of migration flows in different countries and regions, aiming to identify significant trends and correlations.`,
 54 |         repoUrl: 'https://github.com/Bootcamp-IA-P4/world-population-migration-eda',
 55 |         type: 'Group'
 56 |     },
 57 |     {
 58 |         id: 'ai-5',
 59 |         category: 'AI Developer',
 60 |         title: 'EDA: Synthetic Stock Market Data',
 61 |         description: 'Exploratory Data Analysis (EDA) on a synthetic stock market dataset.',
 62 |         technologies: ['Python', 'Jupyter Notebook', 'Pandas', 'NumPy', 'Matplotlib', 'Seaborn', 'SciPy', 'Git', 'Github'],
 63 |         detailedDescription: `This repository contains the code and findings of an Exploratory Data Analysis (EDA) performed on the synthetic_stock_data.csv dataset. The main objective was to understand the structure, quality, characteristics, and relationships within the data (distributions, correlations, outliers), using Python and libraries like Pandas, NumPy, Matplotlib, Seaborn, and SciPy. This analysis serves as a fundamental basis for potential deeper analyses or the development of predictive models.`,
 64 |         repoUrl: 'https://github.com/Bootcamp-IA-P4/stock-market-eda',
 65 |         type: 'Individual'
 66 |     },
 67 |     {
 68 |         id: 'ai-6',
 69 |         category: 'AI Developer',
 70 |         title: 'Job Scraper (Python)',
 71 |         description: 'Web scraping of job offers from InfoJobs using Python and Selenium.',
 72 |         technologies: ['Python', 'Selenium', 'BeautifulSoup', 'Pandas', 'NumPy', 'Git', 'Github'],
 73 |         detailedDescription: `This project involves web scraping job offers from the InfoJobs website using Python and Selenium. The scraper collects data on job offers, including title, company, location, and other relevant details. The collected data is then processed and stored in a structured format using Pandas and NumPy for further analysis or visualization.`,
 74 |         repoUrl: 'https://github.com/Omarlsant/job-scraper',
 75 |         type: 'Individual'
 76 |     },
 77 |     {
 78 |         id: 'ai-7',
 79 |         category: 'AI Developer',
 80 |         title: 'CRUD App',
 81 |         description: 'CRUD application using Python and Django.',
 82 |         technologies: ['Python', 'Django', 'SQLite', 'Next.js', 'Tailwind CSS', 'Git', 'Github'],
 83 |         detailedDescription: `This project is a CRUD (Create, Read, Update, Delete) application developed using Python and Django. The application allows users to perform basic operations on a database, including creating new records, reading existing records, updating records, and deleting records. The front-end is built with Next.js and styled with Tailwind CSS. The project demonstrates the use of Django's ORM for database interactions and provides a user-friendly interface for managing data.`,
 84 |         repoUrl: 'https://github.com/Omarlsant/job-scraper',
 85 |         type: 'Individual'
 86 |     },
 87 |     {
 88 |         id: 'ai-8',
 89 |         category: 'AI Developer',
 90 |         title: 'Digital Taximeter (Python)',
 91 |         description: 'Digital taximeter application with Tkinter and Docker.',
 92 |         technologies: ['Python', 'Javascript', 'React Vite', 'Tkinter', 'Unittest', 'Git', 'Docker', 'Docker-compose', 'Documentation'],
 93 |         detailedDescription: `This project is a digital taximeter application developed using Python and Tkinter. The application simulates a taximeter, allowing users to input distance and time to calculate fares. The project includes unit tests to ensure the functionality of the application and is containerized using Docker and Docker-compose for easy deployment. Documentation is provided to guide users through the installation and usage of the application.`,
 94 |         repoUrl: 'https://github.com/Omarlsant/app-taximetro',
 95 |         type: 'Individual'
 96 |     },
 97 |     // === Full Stack Developer Projects ===
 98 |     {
 99 |         id: 'fs-1',
100 |         category: 'Full Stack Developer',
101 |         title: 'Omarlsant Portfolio - Front-end',
102 |         description: 'Personal portfolio website showcasing projects and skills.',
103 |         technologies: ['React Js & Vite', 'TypeScript', 'Tailwind CSS', 'Node.js', 'Git', 'Github'],
104 |         detailedDescription: `This is my personal portfolio website, developed using React Vite and TypeScript. The website showcases my projects, skills, and experience as a developer. It is designed to be responsive and user-friendly, providing visitors with an overview of my work and capabilities.`,
105 |         repoUrl: 'https://github.com/Omarlsant/omarlsant-portfolio',
106 |         type: 'Individual'
107 |     },
108 |     {
109 |         id: 'fs-2',
110 |         category: 'Full Stack Developer',
111 |         title: 'Fhios Manager - Full Stack',
112 |         description: 'Full Stack development of a management application, coordinating with PO and stakeholder.',
113 |         technologies: ['React Js & Vite', 'Tailwind CSS', 'Node.js', 'Express', 'MySQL', 'Git', 'Github'],
114 |         detailedDescription: `Full Stack project for a management application. I participated in the planning phase, defining the project scope and functionalities. I collaborated in creating the prototype and worked on the implementation of the front-end and back-end using React Vite and Node.js with Express. I was responsible for testing, bug fixing, and documentation. I also participated in the final project presentation.`,
115 |         repoUrl: 'https://github.com/juanvprada/fhios-manager-client',
116 |         type: 'Group'
117 |     },
118 |     {
119 |       id: 'fs-3',
120 |       category: 'Full Stack Developer',
121 |       title: 'Bio Blog - Full Stack',
122 |       description: 'Planning and Full Stack development of a blog, from prototype to presentation.',
123 |       technologies: ['React Js & Vite', 'Tailwind CSS', 'Node.js', 'Firebase', 'Git' , 'Github'],
124 |       
125 |       detailedDescription: `Full Stack project for a blog application. I participated in the planning phase, defining the project scope and functionalities. I collaborated in creating the prototype and worked on the implementation of the front-end and back-end using React Vite and Firebase. I was responsible for testing, bug fixing, and documentation. I also participated in the final project presentation.`,
126 |       repoUrl: 'https://github.com/Omarlsant/bio-blog',
127 |       type: 'Group'
128 |     },
129 |     {
130 |         id: 'fs-4',
131 |         category: 'Full Stack Developer',
132 |         title: 'Simpson’s Museum - Back-end',
133 |         description: 'Back-end development for a "The Simpsons" themed application.',
134 |         technologies: ['Vanilla JavaScript','Node.js', 'Express', 'Sequelize', 'PostgreSQL', 'JWT', 'Git' , 'Github'],
135 |         detailedDescription: `Contribution to the back-end development for the "Simpson’s Museum" project. I contributed key ideas to define the project's scope and functionalities. I participated in structuring the server, defining the data model, and selecting the technologies to implement (Node.js, Express, Sequelize with PostgreSQL). I was responsible for documenting the work performed and participated in the final project presentation.`,
136 |         repoUrl: 'https://github.com/LorelizDev/simpsons-memeseum-project',
137 |         type: 'Group'
138 |     }
139 | ];


--------------------------------------------------------------------------------
/src/pages/About.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | import profilePicSrc from '../assets/images/fotoCurso.jpg';
  3 | import googleCertBadge from '../assets/images/google-sc.png';
  4 | import microsoftScBadge from '../assets/images/microsoft-sc.png';
  5 | import microsoftAiBadge from '../assets/images/microsoft-ai.png';
  6 | import pythonCertBadge from '../assets/images/python-ess.png';
  7 | 
  8 | const About: React.FC = () => {
  9 |     // State for scroll button remains the same
 10 |     const [showScrollButton, setShowScrollButton] = useState(false);
 11 | 
 12 |     // Data remains the same
 13 |     const professionalSummary = `Banking and Financial Products Administrator currently transitioning into the Technology sector, with one 
 14 |         year of Full Stack web development experience. I am a person with strong values, responsible, committed, 
 15 |         and constantly motivated to learn. My ability to quickly adapt to new challenges, which includes constant 
 16 |         updates on emerging technologies, aligns perfectly with my great passion for programming. `;
 17 |     const technicalSkills = [
 18 |         { category: 'Languages', skills: ['JavaScript', 'TypeScript', 'Python', 'C'] },
 19 |         { category: 'Frontend', skills: ['React', 'Vite', 'Sass', 'Tailwind CSS', 'npm', 'Css'] },
 20 |         { category: 'Backend', skills: ['Node.js', 'Express', 'Django', 'Flask', 'Fast-Api', 'Rest Api', 'Swagger', 'Postman', 'JWT'] },
 21 |         { category: 'Databases', skills: ['MySQL', 'MongoDB', 'Supabase'] },
 22 |         { category: 'Testing', skills: ['Jest', 'Supertest', 'Pytest', 'Unittest'] },
 23 |         { category: 'DevOps & Tools', skills: ['Docker', 'docker-compose', 'CI/CD (GitHub Actions)', 'Git', 'GitHub'] },
 24 |     ];
 25 |     const softSkills = [
 26 |         'Highly Adaptable', 'Problem Solver', 'Proactive', 'Analytical Thinking',
 27 |         'Time Management', 'Quality-Oriented', 'Effective Communication', 'Team player',
 28 |         'Conflict Resolution', 'Accessibility Awareness (WCAG)',
 29 |     ];
 30 |     const education = [
 31 |         { title: 'AI Developer', institution: 'Factoría F5', dates: 'Jan 2025 - Oct 2025', duration: '1250H', current: true },
 32 |         { title: 'Full Stack Developer', institution: 'Factoría F5', dates: 'Jun 2024 - Dec 2024', duration: '850H' },
 33 |         { title: 'Banking Administration', institution: 'IFB Certus', dates: 'Mar 2015 - Oct 2018' },
 34 |     ];
 35 |     const certifications = [
 36 |         { name: 'Cybersecurity of Google', issuer: 'Google (via Coursera)', badgeUrl: googleCertBadge },
 37 |         { name: 'SC-900: Security, Compliance and Identity Fundamentals', issuer: 'Microsoft', badgeUrl: microsoftScBadge },
 38 |         { name: 'AI-900: Azure AI Fundamentals', issuer: 'Microsoft', badgeUrl: microsoftAiBadge },
 39 |         { name: 'Python Essentials 1', issuer: 'Cisco', badgeUrl: pythonCertBadge },
 40 |     ];
 41 |     const experience = [
 42 |         { role: 'Full Stack Developer', company: 'Lima Service Security S.A.C', location: 'Perú', dates: 'Sep 2021 - Oct 2022',
 43 |           description: ['Designed the web application architecture. Used Git and GitHub for version control.', 'Developed the frontend using HTML and Vanilla JavaScript, applying styles with CSS.', 'Implemented the REST API (backend) with Node.js and Express to manage CRUD operations.', 'Modeled the relational database in MySQL to store and manage company information, users, inventory and services', 'Implemented an authentication and authorization system based on JWT (JSON Web Tokens) to protect the API endpoints', 'Developed unit tests with Jest', 'Performed application maintenance and implemented new features as required',  ] },
 44 |         { role: 'Commercial Assistant', company: 'Snowboarding S.A', location: 'Perú', dates: 'Apr 2018 - Aug 2019',
 45 |           description: ['Generated sales performance and trend reports.', 'Presented results to sales teams and management.', 'Processed orders and verified stock levels.', 'Coordinated logistics and maintained CRM.', ] }
 46 |     ];
 47 |     const volunteering = {
 48 |         role: 'User Tester', organization: 'Fundación Telefónica', dates: 'Nov 2024 (8h)', platforms: 'Marte & Saturno',
 49 |         description: 'In a two-day engagement, including an onboarding meeting and a final group meeting, I tested and reviewed two iterations of their platform. As a frontend developer, I leveraged my expertise to identify and document critical bugs across both versions, providing actionable feedback that directly contributed to improvements in the platform performance and usability.',
 50 |     };
 51 |     const languages = [
 52 |         { lang: 'Spanish', level: 'Native' },
 53 |         { lang: 'English', level: 'Intermediate B2' },
 54 |         { lang: 'Italian', level: 'Basic' },
 55 |     ];
 56 | 
 57 |     // Scroll logic remains the same
 58 |     useEffect(() => {
 59 |         const checkScrollTop = () => {
 60 |             if (!showScrollButton && window.scrollY > 400) {
 61 |                 setShowScrollButton(true);
 62 |             } else if (showScrollButton && window.scrollY <= 400) {
 63 |                 setShowScrollButton(false);
 64 |             }
 65 |         };
 66 |         window.addEventListener('scroll', checkScrollTop);
 67 |         return () => window.removeEventListener('scroll', checkScrollTop);
 68 |     }, [showScrollButton]);
 69 | 
 70 |     const scrollToTop = () => {
 71 |         window.scrollTo({ top: 0, behavior: 'smooth' });
 72 |     };
 73 | 
 74 |     // Updated Skill Badge Renderer
 75 |     const renderSkillBadge = (skill: string, index: number) => (
 76 |         <span key={index} className="inline-block bg-cyan-400/10 text-cyan-300 text-sm font-medium px-3 py-1 rounded-full border border-cyan-500/30">
 77 |             {skill}
 78 |         </span>
 79 |     );
 80 | 
 81 |     // Card Container Base Styles (applied via @apply potentially, or repeated)
 82 |     const cardBaseStyles = "bg-slate-800/50 backdrop-blur-sm border border-slate-700/30 rounded-lg shadow-lg p-6";
 83 |     const sectionCardBaseStyles = "bg-slate-800/50 backdrop-blur-sm border border-slate-700/30 rounded-lg shadow-lg p-4"; // Slightly less padding for list items
 84 | 
 85 |     return (
 86 |         // Updated main section styles - assuming dark background from layout
 87 |         <section id="about" className="py-16 md:py-24 text-slate-200 relative"> {/* Base text color */}
 88 |             <div className="container mx-auto px-4 md:px-8 max-w-4xl">
 89 |                 {/* Profile Picture - Updated border */}
 90 |                 <div className="flex justify-center mb-10">
 91 |                     <img
 92 |                         src= {profilePicSrc}
 93 |                         alt="profile-pic"
 94 |                         className="w-32 h-32 sm:w-36 sm:h-36 md:w-40 md:h-40 lg:w-48 lg:h-48 rounded-full object-cover border-4 border-cyan-400 shadow-lg" // Updated border color
 95 |                     />
 96 |                 </div>
 97 | 
 98 |                 {/* Section Title - Gradient like projects */}
 99 |                 <h2 className="text-4xl lg:text-5xl font-bold text-center mb-12 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
100 |                     About Me
101 |                 </h2>
102 | 
103 |                 {/* Professional Summary - Updated card styles */}
104 |                 <div className={`${cardBaseStyles} text-center mb-12`}>
105 |                     <h3 className="text-2xl font-semibold mb-4 text-cyan-400">Summary</h3>
106 |                     <p className="text-base md:text-md leading-relaxed text-slate-300 text-justify mb-2">
107 |                         {professionalSummary}
108 |                     </p>
109 |                 </div>
110 | 
111 |                 {/* Previous Experience Section */}
112 |                 <div className="mb-12">
113 |                      <h3 className="text-3xl font-bold mb-6 text-center text-slate-100">Professional Experience</h3>
114 |                      {experience.map((exp, index) => (
115 |                             // Updated section card styles & different border color
116 |                             <div key={index} className={`${sectionCardBaseStyles} border-l-4 border-slate-500 mb-6`}>
117 |                                 <h4 className="text-lg font-semibold text-slate-100">{exp.role} - {exp.company} ({exp.location})</h4>
118 |                                 <p className="text-sm text-slate-400 mt-2">{exp.dates}</p>
119 |                                 <ul className="list-disc list-inside mt-2 text-slate-300 text-sm space-y-1">
120 |                                     {exp.description.map((item, i) => <li key={i}>{item}</li>)}
121 |                                 </ul>
122 |                             </div>
123 |                         ))}
124 |                  </div>
125 | 
126 |                   {/* Education Section */}
127 |                  <div className="mb-12">
128 |                     <h3 className="text-3xl font-bold mb-6 text-center text-slate-100">Education</h3>
129 |                      <div className="space-y-6">
130 |                         {education.map((edu, index) => (
131 |                             // Updated section card styles & border
132 |                             <div key={index} className={`${sectionCardBaseStyles} border-l-4 border-cyan-500`}>
133 |                                 <h4 className="text-lg font-semibold text-slate-100">{edu.title} {edu.current && <span className="text-xs bg-blue-500/80 text-white px-2 py-0.5 rounded-full ml-2 align-middle">In progress</span>}</h4>
134 |                                 <p className="text-md text-slate-300">{edu.institution}</p>
135 |                                 <p className="text-sm text-slate-400">{edu.dates} {edu.duration && `(${edu.duration})`}</p>
136 |                             </div>
137 |                         ))}
138 |                     </div>
139 |                 </div>
140 | 
141 |                  {/* Skills Section */}
142 |                  <div className="mb-12">
143 |                     <h3 className="text-3xl font-bold mb-8 text-center text-slate-100">Skills</h3>
144 |                     <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
145 |                         {/* Technical Skills - Updated card styles */}
146 |                         <div className={cardBaseStyles}>
147 |                             <h4 className="text-xl font-semibold mb-4 text-cyan-400">Technical</h4>
148 |                             {technicalSkills.map((categoryData, index) => (
149 |                                 <div key={index} className="mb-4 last:mb-0">
150 |                                     <h5 className="font-semibold text-slate-300 mb-2">{categoryData.category}</h5>
151 |                                     <div className="flex flex-wrap gap-2"> {/* Added gap */}
152 |                                         {categoryData.skills.map(renderSkillBadge)}
153 |                                     </div>
154 |                                 </div>
155 |                             ))}
156 |                         </div>
157 |                         {/* Soft Skills - Updated card styles */}
158 |                         <div className={cardBaseStyles}>
159 |                             <h4 className="text-xl font-semibold mb-4 text-cyan-400">Soft</h4>
160 |                             <ul className="list-disc list-inside space-y-1 text-slate-300">
161 |                                 {softSkills.map((skill, index) => (
162 |                                     <li key={index}>{skill}</li>
163 |                                 ))}
164 |                             </ul>
165 |                         </div>
166 |                     </div>
167 |                 </div>
168 | 
169 |                 {/* Certifications Section */}
170 |                 <div className="mb-12">
171 |                     <h3 className="text-3xl font-bold mb-6 text-center text-slate-100">Certifications</h3>
172 |                     <p className="mt-4 text-center text-slate-400 italic mb-4">You can verify my certifications via Credly.</p>
173 |                     <div className="space-y-4">
174 |                         {certifications.map((cert, index) => (
175 |                              // Updated section card styles & border
176 |                             <div key={index} className={`${sectionCardBaseStyles} border-l-4 border-cyan-500 flex flex-col sm:flex-row sm:items-center justify-between`}>
177 |                                 <div className="mb-4 sm:mb-0 sm:mr-4 flex-grow">
178 |                                     <h4 className="text-lg font-semibold text-slate-100">{cert.name}</h4>
179 |                                     <p className="text-md text-slate-300">Issued by: {cert.issuer}</p>
180 |                                 </div>
181 |                                 {cert.badgeUrl && (
182 |                                     // Added background for better visibility if badge is transparent
183 |                                     <div className="p-1 rounded flex-shrink-0 mx-auto sm:mx-0 w-20 h-20 flex items-center justify-center">
184 |                                         <img
185 |                                             src={cert.badgeUrl}
186 |                                             alt={`${cert.name} Badge`}
187 |                                             className="max-w-full max-h-full object-contain"
188 |                                         />
189 |                                     </div>
190 |                                 )}
191 |                             </div>
192 |                         ))}
193 |                     </div>
194 |                 </div>
195 | 
196 |                 {/* Volunteering Section */}
197 |                 <div className="mb-12">
198 |                      <h3 className="text-3xl font-bold mb-6 text-center text-slate-100">Volunteering</h3>
199 |                      <div className={`${sectionCardBaseStyles} border-l-4 border-blue-500`}>
200 |                          <h4 className="text-lg font-semibold text-slate-100">{volunteering.role} - {volunteering.organization}</h4>
201 |                          <p className="text-sm text-slate-400">{volunteering.dates}</p>
202 |                          <p className="mt-2 text-slate-300 text-justify">{volunteering.description} (Platforms: {volunteering.platforms})</p>
203 |                     </div>
204 |                 </div>
205 | 
206 |                 {/* Languages Section */}
207 |                 <div className="mb-12">
208 |                     <h3 className="text-3xl font-bold mb-6 text-center text-slate-100">Languages</h3>
209 |                     <div className="flex justify-center flex-wrap gap-4">
210 |                         {languages.map((lang, index) => (
211 |                             // Updated language box styles
212 |                             <div key={index} className={`${sectionCardBaseStyles} text-center px-4 py-2 w-32`}> {/* Fixed width */}
213 |                                 <p className="font-medium text-slate-100">{lang.lang}</p>
214 |                                 <p className="text-sm text-slate-400">{lang.level}</p>
215 |                             </div>
216 |                         ))}
217 |                     </div>
218 |                 </div>
219 |             </div>
220 | 
221 |             {/* Scroll to Top Button - Updated colors */}
222 |             {showScrollButton && (
223 |                 <button
224 |                     onClick={scrollToTop}
225 |                     aria-label="Scroll to top"
226 |                     className={`fixed bottom-5 right-5 p-3 rounded-full bg-cyan-600 text-white shadow-lg hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 focus:ring-offset-slate-900 transition-all duration-300 ${ // Adjusted offset color
227 |                         showScrollButton ? 'opacity-100 scale-100' : 'opacity-0 scale-90'
228 |                     }`}
229 |                 >
230 |                     {/* Arrow Icon */}
231 |                     <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
232 |                         <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
233 |                     </svg>
234 |                 </button>
235 |             )}
236 |         </section>
237 |     );
238 | }
239 | 
240 | export default About;


--------------------------------------------------------------------------------