Help
RSS
API
Feed
Maltego
Contact
Domain > www.yassinedev.io
×
More information on this domain is in
AlienVault OTX
Is this malicious?
Yes
No
DNS Resolutions
Date
IP Address
2026-03-01
147.93.92.53
(
ClassC
)
Port 80
HTTP/1.1 301 Moved PermanentlyConnection: Keep-AliveKeep-Alive: timeout5, max100Content-Type: text/htmlContent-Length: 795Date: Sun, 01 Mar 2026 22:15:21 GMTServer: LiteSpeedLocation: https://www.yassinedev.io/platform: hostingerpanel: hpanelContent-Security-Policy: upgrade-insecure-requests !DOCTYPE html>html styleheight:100%>head>meta nameviewport contentwidthdevice-width, initial-scale1, shrink-to-fitno />title> 301 Moved Permanently/title>style>@media (prefers-color-scheme:dark){body{background-color:#000!important}}/style>/head>body stylecolor: #444; margin:0;font: normal 14px/20px Arial, Helvetica, sans-serif; height:100%; background-color: #fff;>div styleheight:auto; min-height:100%; > div styletext-align: center; width:800px; margin-left: -400px; position:absolute; top: 30%; left:50%;> h1 stylemargin:0; font-size:150px; line-height:150px; font-weight:bold;>301/h1>h2 stylemargin-top:20px;font-size: 30px;>Moved Permanently/h2>p>The document has been permanently moved./p>/div>/div>/body>/html>
Port 443
HTTP/1.1 200 OKConnection: Keep-AliveKeep-Alive: timeout5, max100Content-Type: text/htmlLast-Modified: Wed, 07 Jan 2026 09:35:27 GMTEtag: 9a2e-695e28df-e98a8a6a37b9b6d7;;;Accept-Ranges: bytesContent-Length: 39470Date: Sun, 01 Mar 2026 22:15:21 GMTServer: LiteSpeedplatform: hostingerpanel: hpanelContent-Security-Policy: upgrade-insecure-requests !DOCTYPE html>html langfr>head> meta charsetUTF-8> meta nameviewport contentwidthdevice-width, initial-scale1.0> !-- SEO & Meta Tags --> title>Yassine Boutaleb - Développeur Full Stack/title> meta namedescription contentPortfolio de Yassine Boutaleb, Développeur Full Stack basé à Casablanca. Expert en Angular, Spring Boot, React, Microservices et Java.> meta namekeywords contentYassine Boutaleb, Développeur Full Stack, Casablanca, Maroc, Angular, Spring Boot, React, Java> meta nameauthor contentYassine Boutaleb> meta namerobots contentindex, follow> !-- Open Graph --> meta propertyog:type contentprofile> meta propertyog:title contentYassine Boutaleb - Développeur Full Stack> meta propertyog:description contentDéveloppeur passionné créant des solutions ERP robustes et des interfaces modernes.> meta propertyog:image contenthttps://ui-avatars.com/api/?nameYassine+Boutaleb&background0f172a&colorfff&size512> !-- Tailwind CSS --> script srchttps://cdn.tailwindcss.com>/script> !-- React & ReactDOM --> script crossorigin srchttps://unpkg.com/react@18/umd/react.development.js>/script> script crossorigin srchttps://unpkg.com/react-dom@18/umd/react-dom.development.js>/script> !-- Babel --> script srchttps://unpkg.com/@babel/standalone/babel.min.js>/script> !-- Font Awesome --> link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css> !-- Fonts: Inter for a clean, professional look --> link hrefhttps://fonts.googleapis.com/css2?familyInter:wght@300;400;500;600;700;800&displayswap relstylesheet> !-- Markdown Parser --> script srchttps://cdn.jsdelivr.net/npm/marked/marked.min.js>/script> script> tailwind.config { theme: { extend: { fontFamily: { sans: Inter, sans-serif, }, colors: { brand: { 50: #eff6ff, 100: #dbeafe, 500: #3b82f6, // Professional Blue 600: #2563eb, 700: #1d4ed8, 900: #1e3a8a, } }, animation: { fade-in: fadeIn 0.8s ease-out forwards, slide-up: slideUp 0.8s ease-out forwards, }, keyframes: { fadeIn: { 0%: { opacity: 0 }, 100%: { opacity: 1 }, }, slideUp: { 0%: { opacity: 0, transform: translateY(20px) }, 100%: { opacity: 1, transform: translateY(0) }, } } } } } /script> style> body { background-color: #ffffff; color: #1e293b; /* Slate 800 */ -webkit-font-smoothing: antialiased; } .smooth-scroll { scroll-behavior: smooth; } /* Clean Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Minimalist utility classes */ .section-padding { padding-top: 5rem; padding-bottom: 5rem; } .nav-blur { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border-bottom: 1px solid #f1f5f9; } /style>/head>body classbg-white text-slate-800> div idroot>/div> script typetext/babel> const { useState, useEffect, useRef } React; // --- GEMINI API --- const apiKey ; // API Key async function generateGeminiResponse(userQuery, systemContext) { if (!apiKey) { console.error(API Key is missing.); return Erreur : La clé API est manquante.; } const url `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key${apiKey}`; const payload { contents: { parts: { text: userQuery } }, systemInstruction: { parts: { text: systemContext } } }; try { const response await fetch(url, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify(payload) }); const data await response.json(); return data.candidates?.0?.content?.parts?.0?.text || Pas de réponse.; } catch (error) { return Erreur de connexion IA.; } } // --- DATA --- const profile { name: Yassine Boutaleb, title: Développeur Full Stack, location: Casablanca, Maroc, email: yassinebout142@gmail.com, phone: +212 708 799 100, summary: Développeur Full Stack dynamique, spécialisé dans la conception, le développement et la maintenance de solutions logicielles innovantes. Contributeur à des projets stratégiques tels que le développement et la maintenance dun logiciel ERP intégrant les modules achats, ventes et approbations, ainsi que la création dinterfaces administratives pour des systèmes de gestion de syndic et de gestion des ventes., socials: { linkedin: https://www.linkedin.com/in/yassine-boutaleb, github: https://github.com/jassenbt, }, cvLink: /resume.html // Placeholder link for CV }; const skills { category: Langages, items: Java 17, TypeScript, JavaScript, Python, PHP, HTML/CSS }, { category: Frameworks, items: Spring Boot, Angular, React, Microservices, Apache Kafka, WordPress }, { category: Données, items: PostgreSQL, MySQL, MongoDB }, { category: Outils, items: Git, SVN, Jira, Bubble Plan } ; const experience { company: Canelia TOPCHEF, role: Développeur Full Stack, period: Sep 2024 - Présent, location: Casablanca, logo: /topcheflogo.png, description: Développement et maintenance dun logiciel ERP complet intégrant les modules achats, ventes , production et approbations., projectDesc: Développement et maintenance dun logiciel ERP complet intégrant les modules financière., Mise en place dune plateforme centralisée pour la gestion des processus métiers et la fluidité des opérations., Évolution continue de la solution afin de répondre aux besoins fonctionnels et techniques de lentreprise. , tasks: Conception et développement de nouvelles fonctionnalités pour les modules achat, vente et approbation., Maintenance corrective et évolutive afin dassurer la fiabilité et la performance du système ERP., Optimisation des processus métiers et automatisation de certaines tâches pour améliorer la productivité., Débogage et correction des anomalies signalées par les utilisateurs., Rédaction de documentation technique et fonctionnelle pour faciliter la maintenance et lutilisation., Collaboration avec les équipes internes pour recueillir les besoins et proposer des solutions adaptées. , tech: Angular, Spring Boot, PostgreSQL,Microservices,KAFKA }, { company: Digital Progres, role: Développeur Front End (Stage), period: Fév 2024 - Sep 2024, location: Casablanca, logo: /digital.jpeg, description: Développement dinterfaces administratives pour un système de gestion de syndic., projectDesc: Développement dinterfaces administratives pour un système de gestion de syndic, facilitant la gestion des lots, des copropriétaires, des charges et des approbations., Conception dinterfaces pour une plateforme de gestion des ventes, permettant le suivi des clients, des commandes et des transactions. , tasks: Création et intégration dinterfaces back-office ergonomiques et performantes., Développement de fonctionnalités de gestion (ajout, modification, suppression, consultation)., Mise en place de formulaires dynamiques et doutils de validation pour assurer la qualité des données., Optimisation de lexpérience utilisateur et amélioration de la performance des modules., Intégration des interfaces avec les processus métiers existants et la base de données., Tests et correction des anomalies pour garantir la stabilité des applications. , tech: Angular, TypeScript, Tailwind,Microservices }, { company: GOLDSOL SARL, role: Stage Développement Web, period: Août 2023 - Nov 2023, location: Casablanca, logo: https://ui-avatars.com/api/?nameGoldsol+Sarl&backgroundf59e0b&colorfff&size128&font-size0.4, description: Création de sites web et gestion de bases de données., projectDesc: , tasks: Créé et géré des sites web dynamiques., Développé des solutions de gestion de bases de données efficaces., Assuré la maintenance et loptimisation des bases de données., Collaboré sur des projets de développement de logiciels ERP., Conçu des interfaces utilisateurs pour des systèmes de gestion. , tech: HTML, MySQL, PHP,WordPress } ; const projects { title: CompassFX, description: Plateforme danalyse et de prédiction Forex propulsée par lIA., tech: FastAPI, Angular, MySQL, AI, images: /FX.jpg, /FX1.jpg }, { title: Syndicer, description: Système de gestion de syndicat public sécurisé et évolutif., tech: Angular, Spring Boot, Keycloak, MinIO, images: https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?autoformat&fitcrop&q80&w400&h250, https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?autoformat&fitcrop&q80&w400&h250 }, { title: Boostersales, description: Solution complète de gestion : facturation, commandes, livraisons, RH et CRM., tech: Gestion Commerciale, CRM, RH, Privé, images: https://images.unsplash.com/photo-1556742049-0cfed4f7a07d?autoformat&fitcrop&q80&w400&h250, https://images.unsplash.com/photo-1460925895917-afdab827c52f?autoformat&fitcrop&q80&w400&h250 } ; const education { degree: Master Big Data & Cloud Computing, school: École Normale Supérieure de lEnseignement Technique (ENSET), year: 2024-2026 }, { degree: Licence Pro. Développement Web, school: IBEGIS & Université Wesford Genève, year: 2022-2023 }, { degree: Technicien Spécialisé Dév. Informatique, school: Ecole Prive IBEGIS, year: 2020-2022 }, { degree: Baccalauréat en SVT, school: Lycée Allal Ben Abdellah, year: 2019-2020 } ; const certifications { name: OCP Java SE 17, issuer: Oracle, date: Nov 2025, icon: fab fa-java, color: text-orange-600, bg: bg-orange-50, border: border-orange-200 }, { name: English for IT, issuer: Cisco Academy, date: Fév 2025, icon: fas fa-network-wired, color: text-blue-600, bg: bg-blue-50, border: border-blue-200 }, { name: Linux Essentials, issuer: Cisco Academy, date: Jan 2025, icon: fab fa-linux, color: text-slate-700, bg: bg-slate-100, border: border-slate-200 }, { name: Cisco Certified Network Associate (CCNA), issuer: Cisco, date: Jan 2025, icon: fas fa-server, color: text-blue-500, bg: bg-blue-50, border: border-blue-200 } ; const RESUME_CONTEXT JSON.stringify({ profile, skills, experience, projects, education, certifications }); const CHAT_SYSTEM_PROMPT `Tu es lassistant IA de Yassine Boutaleb. Réponds en FRANÇAIS, de manière professionnelle et concise. Infos: ${RESUME_CONTEXT}`; // --- COMPONENTS --- const Navigation () > { const isMenuOpen, setIsMenuOpen useState(false); const links { name: Compétences, href: #skills }, { name: Expérience, href: #experience }, { name: Projets, href: #projects }, ; return ( nav classNamefixed w-full z-50 nav-blur> div classNamemax-w-6xl mx-auto px-6 h-20 flex justify-between items-center> a href# classNametext-xl font-bold text-slate-900 tracking-tight> YassineDevspan classNametext-brand-600>.IO/span> /a> div classNamehidden md:flex space-x-6 items-center> {links.map(link > ( a key{link.name} href{link.href} classNametext-sm font-medium text-slate-600 hover:text-brand-600 transition-colors> {link.name} /a> ))} div classNameh-6 w-px bg-slate-200 mx-2>/div> a href{profile.cvLink} target_blank classNameflex items-center gap-2 px-4 py-2.5 rounded-lg border border-brand-200 text-brand-600 hover:bg-brand-50 text-sm font-medium transition-all > i classNamefas fa-download>/i> CV /a> a href#contact classNamepx-5 py-2.5 rounded-lg bg-slate-900 text-white text-sm font-medium hover:bg-slate-800 transition-all> Me Contacter /a> /div> button onClick{() > setIsMenuOpen(!isMenuOpen)} classNamemd:hidden text-slate-700 text-xl> i className{`fas ${isMenuOpen ? fa-times : fa-bars}`}>/i> /button> /div> {isMenuOpen && ( div classNamemd:hidden bg-white border-b border-gray-100 px-6 py-4 space-y-4 shadow-lg> {links.map(link > ( a key{link.name} href{link.href} onClick{() > setIsMenuOpen(false)} classNameblock text-slate-600 hover:text-brand-600 font-medium> {link.name} /a> ))} hr classNameborder-slate-100/> a href{profile.cvLink} target_blank onClick{() > setIsMenuOpen(false)} classNameblock w-full text-center px-4 py-3 rounded-lg border border-brand-200 text-brand-600 bg-brand-50 font-medium > i classNamefas fa-download mr-2>/i> Télécharger CV /a> a href#contact onClick{() > setIsMenuOpen(false)} classNameblock w-full text-center px-4 py-3 rounded-lg bg-slate-900 text-white font-medium > Me Contacter /a> /div> )} /nav> ); }; const Hero () > { return ( section classNamemin-h-screen flex items-center pt-20> div classNamemax-w-6xl mx-auto px-6 w-full> div classNamegrid md:grid-cols-2 gap-12 items-center> div classNameanimate-slide-up> div classNameinline-flex items-center space-x-2 bg-brand-50 text-brand-700 px-3 py-1 rounded-full text-xs font-semibold mb-6> span classNamew-2 h-2 rounded-full bg-brand-600 animate-pulse>/span> span>Disponible pour de nouvelles opportunités/span> /div> h1 classNametext-5xl md:text-6xl font-extrabold text-slate-900 mb-6 leading-tight> Développeur br /> span classNametext-brand-600>Full Stack/span> /h1> p classNametext-lg text-slate-600 mb-8 leading-relaxed max-w-lg> Je conçois des architectures robustes et des interfaces modernes. Expert en span classNamefont-semibold text-slate-900>Angular/span>, span classNamefont-semibold text-slate-900> Spring Boot/span> et span classNamefont-semibold text-slate-900> Microservices/span>. /p> div classNameflex flex-wrap gap-4> a href#projects classNamepx-6 py-3 rounded-lg bg-brand-600 text-white font-medium hover:bg-brand-700 transition-all shadow-sm> Voir mes projets /a> a href{profile.cvLink} target_blank classNamepx-6 py-3 rounded-lg bg-white text-slate-700 border border-slate-200 font-medium hover:bg-slate-50 transition-all flex items-center gap-2> i classNamefas fa-download text-slate-400>/i> Télécharger CV /a> /div> /div> div classNamehidden md:flex justify-center animate-fade-in> div classNamerelative w-80 h-80 bg-slate-100 rounded-full flex items-center justify-center overflow-hidden> div classNameabsolute inset-0 bg-gradient-to-tr from-brand-100 to-transparent opacity-50>/div> i classNamefas fa-code text-9xl text-brand-200>/i> {/* Minimalist Badges */} div classNameabsolute top-10 right-4 bg-white px-4 py-2 rounded-lg shadow-sm border border-slate-100 text-sm font-semibold text-slate-700 flex items-center> i classNamefab fa-java text-orange-500 mr-2>/i> Java 17 /div> div classNameabsolute bottom-16 left-0 bg-white px-4 py-2 rounded-lg shadow-sm border border-slate-100 text-sm font-semibold text-slate-700 flex items-center> i classNamefab fa-react text-cyan-500 mr-2>/i> React /div> /div> /div> /div> /div> /section> ); }; const SectionHeader ({ title, subtitle }) > ( div classNamemb-12> h2 classNametext-3xl font-bold text-slate-900 mb-4>{title}/h2> div classNamew-12 h-1 bg-brand-600 rounded>/div> {subtitle && p classNamemt-4 text-slate-600>{subtitle}/p>} /div> ); const Skills () > ( section idskills classNamesection-padding bg-slate-50> div classNamemax-w-6xl mx-auto px-6> SectionHeader titleCompétences Techniques /> div classNamegrid md:grid-cols-2 lg:grid-cols-4 gap-6> {skills.map((group, idx) > ( div key{idx} classNamebg-white p-6 rounded-xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow> h3 classNamefont-bold text-slate-900 mb-4 text-lg>{group.category}/h3> div classNameflex flex-wrap gap-2> {group.items.map((skill, i) > ( span key{i} classNamepx-3 py-1 bg-slate-50 text-slate-600 rounded-md text-sm border border-slate-200> {skill} /span> ))} /div> /div> ))} /div> /div> /section> ); const Experience () > ( section idexperience classNamesection-padding> div classNamemax-w-5xl mx-auto px-6> SectionHeader titleExpériences subtitleMon parcours professionnel /> div classNamespace-y-12> {experience.map((job, idx) > ( div key{idx} classNamerelative pl-8 border-l-2 border-slate-200 pb-12 last:pb-0> div classNameabsolute -left-9px top-0 w-4 h-4 bg-white border-2 border-brand-600 rounded-full>/div> div classNamebg-white p-6 rounded-xl border border-slate-100 shadow-sm hover:shadow-md transition-shadow> div classNameflex flex-col sm:flex-row justify-between items-start mb-4> div classNameflex items-center gap-4 mb-2 sm:mb-0> img src{job.logo} alt{job.company} classNamew-10 h-10 rounded-lg /> div> h3 classNamefont-bold text-lg text-slate-900>{job.role}/h3> p classNametext-brand-600 font-medium>{job.company}/p> /div> /div> span classNamebg-slate-100 text-slate-600 px-3 py-1 rounded-full text-xs font-semibold whitespace-nowrap> {job.period} /span> /div> p classNametext-slate-700 mb-4 text-sm leading-relaxed italic>{job.description}/p> {job.projectDesc.length > 0 && ( div classNamemb-4> h4 classNametext-sm font-semibold text-slate-900 mb-2>Projets réalisés :/h4> ul classNamelist-disc pl-5 space-y-1 text-slate-600 text-sm> {job.projectDesc.map((desc, i) > ( li key{i}>{desc}/li> ))} /ul> /div> )} div classNamemb-6> h4 classNametext-sm font-semibold text-slate-900 mb-2>Missions et tâches :/h4> ul classNamespace-y-2> {job.tasks.map((task, i) > ( li key{i} classNameflex items-start text-sm text-slate-600> span classNametext-brand-500 mr-2>•/span> {task} /li> ))} /ul> /div> div classNameflex flex-wrap gap-2> {job.tech.map((t, i) > ( span key{i} classNametext-xs font-semibold text-slate-500 bg-slate-50 px-2 py-1 rounded border border-slate-200> {t} /span> ))} /div> /div> /div> ))} /div> /div> /section> ); const Projects () > ( section idprojects classNamesection-padding bg-slate-50> div classNamemax-w-6xl mx-auto px-6> SectionHeader titleMes Réalisations /> div classNamegrid md:grid-cols-2 lg:grid-cols-3 gap-8> {projects.map((proj, idx) > ( div key{idx} classNamebg-white rounded-xl overflow-hidden border border-slate-100 shadow-sm hover:shadow-lg transition-all group> div classNameh-48 overflow-hidden relative bg-slate-200 group> img src{proj.images0} alt{proj.title} classNamew-full h-full object-cover transition-opacity duration-500 opacity-100 group-hover:opacity-0 absolute inset-0 /> img src{proj.images1} alt{proj.title} classNamew-full h-full object-cover transition-opacity duration-500 opacity-0 group-hover:opacity-100 absolute inset-0 scale-105 /> div classNameabsolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors pointer-events-none>/div> /div> div classNamep-6> h3 classNamefont-bold text-lg text-slate-900 mb-2>{proj.title}/h3> p classNametext-slate-600 text-sm mb-4 h-10 line-clamp-2>{proj.description}/p> div classNameflex flex-wrap gap-2 pt-4 border-t border-slate-50> {proj.tech.map((t, i) > ( span key{i} classNametext-xs font-medium text-brand-600 bg-brand-50 px-2 py-1 rounded> {t} /span> ))} /div> /div> /div> ))} /div> /div> /section> ); const EducationAndCert () > { return ( section classNamesection-padding> div classNamemax-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-16> div> h3 classNametext-xl font-bold text-slate-900 mb-6 flex items-center> span classNamew-8 h-8 bg-brand-100 text-brand-600 rounded-lg flex items-center justify-center mr-3 text-sm>i classNamefas fa-graduation-cap>/i>/span> Formation /h3> div classNamespace-y-6> {education.map((edu, idx) > ( div key{idx} classNamepl-4 border-l-2 border-slate-100 hover:border-brand-500 transition-colors> h4 classNamefont-bold text-slate-800>{edu.degree}/h4> p classNametext-sm text-slate-500 mb-1>{edu.school}/p> span classNametext-xs font-semibold text-slate-400>{edu.year}/span> /div> ))} /div> /div> div> h3 classNametext-xl font-bold text-slate-900 mb-6 flex items-center> span classNamew-8 h-8 bg-emerald-100 text-emerald-600 rounded-lg flex items-center justify-center mr-3 text-sm>i classNamefas fa-certificate>/i>/span> Certifications /h3> div classNamespace-y-4> {certifications.map((cert, idx) > ( div key{idx} className{`flex items-center p-4 rounded-xl border ${cert.border} bg-white shadow-sm hover:shadow-md transition-all`}> div className{`w-10 h-10 rounded-lg flex items-center justify-center mr-4 ${cert.bg} ${cert.color}`}> i className{`${cert.icon} text-lg`}>/i> /div> div classNameflex-1> h4 classNamefont-semibold text-slate-800 text-sm>{cert.name}/h4> p classNametext-xs text-slate-500>{cert.issuer}/p> /div> span classNametext-xs font-bold text-slate-400 bg-slate-50 px-2 py-1 rounded border border-slate-100>{cert.date}/span> /div> ))} /div> /div> /div> /section> ); }; const Contact () > ( section idcontact classNamesection-padding bg-slate-900 text-white text-center> div classNamemax-w-3xl mx-auto px-6> h2 classNametext-3xl font-bold mb-6>Prêt à collaborer ?/h2> p classNametext-slate-400 mb-10 text-lg>Cest le moment idéal pour démarrer un nouveau projet ambitieux./p> div classNameflex flex-col sm:flex-row justify-center gap-4> a href{`mailto:${profile.email}`} classNamepx-8 py-3 rounded-lg bg-white text-slate-900 font-bold hover:bg-brand-50 transition-colors flex items-center justify-center gap-2> i classNamefas fa-envelope>/i> {profile.email} /a> a href{profile.socials.linkedin} classNamepx-8 py-3 rounded-lg bg-slate-800 text-white border border-slate-700 hover:bg-slate-700 transition-colors flex items-center justify-center gap-2> i classNamefab fa-linkedin>/i> LinkedIn /a> a href{profile.socials.github} classNamepx-8 py-3 rounded-lg bg-slate-800 text-white border border-slate-700 hover:bg-slate-700 transition-colors flex items-center justify-center gap-2> i classNamefab fa-github>/i> GitHub /a> /div> /div> /section> ); const Footer () > ( footer classNamepy-8 text-center text-slate-500 text-sm border-t border-slate-100> p>© {new Date().getFullYear()} Yassine Boutaleb. Tous droits réservés./p> /footer> ); const AIChatWidget () > { const isOpen, setIsOpen useState(false); const messages, setMessages useState({ role: model, text: Bonjour ! Je suis lIA de Yassine. Une question ? }); const input, setInput useState(); const loading, setLoading useState(false); const scrollRef useRef(null); const send async (e) > { e.preventDefault(); if (!input.trim()) return; const userMsg { role: user, text: input }; setMessages(p > ...p, userMsg); setInput(); setLoading(true); const res await generateGeminiResponse(userMsg.text, CHAT_SYSTEM_PROMPT); setMessages(p > ...p, { role: model, text: res }); setLoading(false); }; useEffect(() > scrollRef.current?.scrollIntoView({ behavior: smooth }), messages, isOpen); return ( div classNamefixed bottom-6 right-6 z-50 flex flex-col items-end> {isOpen && ( div classNamew-80 h-96 bg-white rounded-xl shadow-2xl border border-slate-200 flex flex-col mb-4 overflow-hidden> div classNamebg-slate-900 p-3 flex justify-between items-center text-white> span classNametext-sm font-bold flex items-center gap-2>i classNamefas fa-robot>/i> Assistant IA/span> button onClick{() > setIsOpen(false)}>i classNamefas fa-times>/i>/button> /div> div classNameflex-1 overflow-y-auto p-4 space-y-3 bg-slate-50> {messages.map((m, i) > ( div key{i} className{`p-3 rounded-lg text-sm max-w-85% ${m.role user ? ml-auto bg-brand-600 text-white : bg-white border border-slate-200 text-slate-700}`}> div dangerouslySetInnerHTML{{ __html: marked.parse(m.text) }} /> /div> ))} {loading && div classNametext-xs text-slate-400>Écriture.../div>} div ref{scrollRef} /> /div> form onSubmit{send} classNamep-3 bg-white border-t border-slate-100 flex gap-2> input value{input} onChange{e > setInput(e.target.value)} placeholderPosez une question... classNameflex-1 text-sm bg-slate-50 border border-slate-200 rounded-md px-3 py-2 outline-none focus:border-brand-500 /> button classNametext-brand-600 hover:text-brand-700>i classNamefas fa-paper-plane>/i>/button> /form> /div> )} button onClick{() > setIsOpen(!isOpen)} classNamew-12 h-12 bg-brand-600 text-white rounded-full shadow-lg hover:bg-brand-700 transition flex items-center justify-center text-xl> {isOpen ? i classNamefas fa-times>/i> : i classNamefas fa-comment>/i>} /button> /div> ); }; const App () > ( div classNamebg-white min-h-screen> Navigation /> Hero /> Skills /> Experience /> Projects /> EducationAndCert /> Contact /> Footer /> AIChatWidget /> /div> ); const root ReactDOM.createRoot(document.getElementById(root)); root.render(App />); /script>/body>/html>
View on OTX
|
View on ThreatMiner
Please enable JavaScript to view the
comments powered by Disqus.
Data with thanks to
AlienVault OTX
,
VirusTotal
,
Malwr
and
others
. [
Sitemap
]