Je suis Rayane Badi

Développeur Full Stack Junior, en recherche de stage ou alternance

Qui suis-je ?

À propos de moi

Étudiant en développement B1 à , je transforme les idées en expériences numériques captivantes, en alliant créativité, performance et ergonomie pour donner vie aux projets.

Mon parcours m’a permis de développer une maîtrise complète du cycle de création d’applications web, de la phase de conception jusqu’à la mise en production. J’accorde une attention particulière à la performance, à l’accessibilité et à la qualité visuelle des interfaces que je réalise.

Curieux et toujours en veille sur les nouvelles technologies, j’aime relever des défis techniques et contribuer à des projets ambitieux où je peux mettre mes compétences au service de solutions utiles et bien pensées.

Télécharger mon CV

Compétences

Ma Stack Technique

HTML

CSS

PHP

MySQL

Git

JavaScript

ReactJs

Wordpress

Infographie et Design

InDesign

Photoshop

Illustrator

Canva

Réalisations

Mes Projets

AutoOccasion

Auto0ccasion est une plateforme innovante d’achat et de revente de voitures, entièrement pensée et conçue avec l’intelligence artificielle. De l’expérience utilisateur jusqu’au design de l’interface, chaque détail a été optimisé pour rendre la recherche, la comparaison et la vente de véhicules plus simples, rapides et intelligentes.Conçue sur Figma, la plateforme met l’accent sur une navigation fluide, une présentation claire des véhicules et des recommandations personnalisées basées sur les besoins des utilisateurs. AutoOccasion combine technologie, design moderne et IA pour transformer la manière d’acheter et de vendre une voiture en ligne.

figma

Jeu

MiniGame Hub

Ce mini‑jeu interactif combine Pierre-Feuille-Ciseaux et un jeu de devinette de nombre, offrant une expérience ludique directement dans le navigateur. Développé en PHP, HTML et CSS, il propose une interface simple et responsive, avec des parties rapides et dynamiques pour affronter l’ordinateur et tester vos réflexes et votre logique. Un projet idéal pour s’amuser tout en découvrant la programmation web de manière pratique.

PHP HTML CSS

Mobilier

Meuble&Co

Ce projet est un site web de type e-commerce mettant en valeur une sélection de meubles durables pour la maison. Il se compose de fiches produits claires avec images, descriptions, prix et catégories (tables, canapés, chaises, rangements), offrant une navigation simple et intuitive.Développé avec HTML, CSS, le design est responsive et privilégie l’esthétique tout en facilitant la consultation des produits. La section “À propos” présente les valeurs de la marque, axées sur la durabilité, les matériaux écoresponsables (bois certifié, finitions non toxiques) et l’engagement pour une consommation responsable.Ce projet illustre ta capacité à structurer un site attractif, à organiser des listings de produits efficaces et à communiquer une identité visuelle cohérente et professionnelle.

HTML CSS

Outil Mathématique

Calculatrice & Traceur

Projet front-end en vanilla JS combinant évaluation d'expressions mathématiques, génération procédurale de questions et rendu graphique sur canvas HTML5. Calculatrice avancée avec historique, quiz génératif à 3 niveaux de difficulté et traceur de fonctions f(x) interactif. Architecture modulaire, zéro bibliothèque externe.

HTML CSS JavaScript Canvas API

Sites pour les prochains films & series

RBCine

RB Ciné est une application web de découverte de films et séries, alimentée par l'API TMDB. Elle affiche les tendances de la semaine, permet de rechercher n'importe quel titre, et présente chaque contenu avec sa note, son année, ses genres et son synopsis. Interface sombre/claire, bannière hero animée, et fiches détaillées en modal.

HTML CSS JavaScript REST API TMDB API

Charte Graphique

Projet d'identité visuelle du Portfolio

Document de référence complet définissant l'identité visuelle et les standards techniques du portfolio de Rayane Badi. Cette charte couvre l'ensemble des aspects du développement web moderne : palette de couleurs avec variables CSS, hiérarchie typographique, règles SEO (meta tags, Open Graph, sitemap), sémantique HTML5, accessibilité WCAG 2.1, optimisation des performances (Core Web Vitals, lazy loading, minification) et composants UI responsive.Conçue pour garantir une cohérence visuelle, une excellente expérience utilisateur et un référencement optimal, cette charte sert de guide technique pour le développement et la maintenance du site. Elle intègre les bonnes pratiques du web : balises sémantiques, attributs ARIA, contraste des couleurs, navigation clavier, et optimisation des images.Un outil indispensable pour tout développeur web souhaitant comprendre les fondamentaux du design system, de l'accessibilité et de la performance web.Version courte (meta description) :Charte graphique complète de rayanebadi.fr : couleurs, typographie, SEO, HTML sémantique, accessibilité WCAG, performance web et composants UI responsive. Guide technique pour un développement web moderne et optimisé..

Base44

Creation Photoshop

Creation Photoshop Rainbow Six Siege

Création réalisée entièrement avec Adobe Photoshop, inspirée de Rainbow Six Siege. Les personnages semblent littéralement sortir de l’écran, donnant un effet 3D immersif qui capture toute l’intensité et la tension du jeu. Chaque détail — armes, expressions, textures — a été travaillé pour offrir un rendu dynamique et spectaculaire. Une mise en scène qui illustre parfaitement l’action et la stratégie emblématiques du jeu, tout en mettant en avant le travail numérique et créatif réalisé sur Photoshop.

PhotoShop

Contactez-moi

Envoyez-moi un message, je vous réponds rapidement !

Questions fréquentes

FAQ

Quel type de projets développes-tu ?

Je crée des sites web modernes, des portfolios, des applications dynamiques avec base de données ainsi que des interfaces interactives. Mon objectif est de proposer des solutions rapides, ergonomiques et optimisées pour le SEO et la performance.

Quelles technologies utilises-tu ?

Je travaille principalement avec HTML, CSS, JavaScript, PHP et MySQL. J’utilise aussi Git pour le versioning et React pour des interfaces dynamiques. J’accorde une attention particulière à l’accessibilité, à la structure du code et aux performances web.

Es-tu disponible pour un stage ou une alternance ?

Oui, je suis actuellement à la recherche d’un stage ou d’une alternance en développement web. Je souhaite rejoindre une équipe dynamique pour progresser, participer à des projets concrets et développer davantage mes compétences.

Peux-tu améliorer un site existant ?

Bien sûr. Je peux corriger des bugs, optimiser la vitesse, améliorer le design, renforcer le SEO ou ajouter de nouvelles fonctionnalités. Je m’adapte facilement à une base de code existante.

Comment te contacter pour un projet ?

Tu peux utiliser le formulaire de contact, me contacter via LinkedIn ou consulter mon GitHub pour voir mes projets. Je réponds rapidement aux messages.