Langages & Technologies
- HTML5 / CSS3 / Tailwind CSS
- JavaScript / React / TypeScript
- PHP
- SQL/MySQL
- WordPress
- Intelligence Artificielle
- Illustrator / PhotoShop / Indesign
À propos
Passionné par le développement web et les nouvelles technologies, je suis actuellement en première année de Bachelor Développement Web à Digital Campus Paris. Mon parcours m'a permis d'acquérir des bases solides en programmation (HTML5, CSS3, JavaScript, PHP, MySQL) et de développer un réel intérêt pour la création d'interfaces utilisateur modernes et intuitives avec React et Tailwind CSS.
Titulaire d'un Baccalauréat International scientifique option français, j'ai choisi de me spécialiser dans le développement web pour allier créativité et technique. Mon objectif est de devenir un développeur full-stack capable de concevoir des applications web performantes et responsive, en maîtrisant aussi bien le frontend que le backend.
Toujours curieux d'apprendre de nouvelles technologies (TypeScript, WordPress, Intelligence Artificielle) et méthodologies agiles, je suis à la recherche d'opportunités professionnelles (stage, alternance) pour mettre en pratique mes compétences et continuer à progresser dans ce domaine en constante évolution.
Compétences
Langues
- Français - Courant
- Anglais - Intermédiaire
- Arabe - Langue maternelle
Outils & Logiciels
- VS Code / Komodo / Cursor (IA)
- Git / GitHub
- XAMPP
- Postman
- Figma / Adobe XD / Canva
- UML / Merise
- Zapier / n8n
Compétences Transversales
- Travail en équipe
- Gestion de projet
- Résolution de problèmes
- Adaptabilité
- Communication
- Résolution de problèmes
- Adaptabilité
- Communication
Projets
AutoShow - Catalogue
AutoShow est une plateforme web de présentation de véhicules de luxe développée en PHP/MySQL avec une architecture MVC, inspirée des sites officiels de McLaren, Aston Martin et Ferrari. Le projet propose une galerie interactive de 60+ voitures avec filtres dynamiques, pages de détails techniques et un design dark theme premium 100% responsive, conçu en s'appuyant sur les standards de MDN Web Docs et les patterns CSS Grid / Flexbox de CSS-Tricks. Côté administration, un back-office complet assure la gestion CRUD des véhicules, un dashboard avec statistiques en temps réel et une authentification sécurisée via BCRYPT, en respectant les recommandations de l'OWASP Top 10 (protection XSS, CSRF, injection SQL via PDO). L'architecture suit les bonnes pratiques de PHP: The Right Way, avec un temps de chargement inférieur à 1 seconde grâce à l'optimisation des requêtes MySQL et au lazy loading des images.
Films 2026 – Plateforme WordPress dédiée aux films à venir
Films 2026 est un projet web réalisé avec WordPress, conçu dans un objectif à la fois informatif et pédagogique. Le site est dédié aux films à venir en 2026 et propose un mix de contenus issus de différents genres cinématographiques. L'intérêt principal de ce projet est de maîtriser en profondeur les fonctionnalités natives de WordPress, ainsi que l'utilisation et la configuration de ses extensions (plugins) comme Yoast SEO pour le référencement et Elementor pour la mise en page. Il permet de travailler la gestion du contenu, la personnalisation du thème, l'organisation des catégories, l'intégration d'une newsletter via Mailchimp et l'optimisation de l'expérience utilisateur. Ce projet met en avant une approche structurée, un design moderne et une navigation intuitive, tout en respectant les bonnes pratiques du web définies par WordPress Best Practices. Les images sont optimisées avec TinyPNG et les données cinématographiques proviennent de l'API TMDb.
AutoSelect – Plateforme de vente de voitures d’occasion
AutoSelect est un projet de site web conçu pour la vente et la présentation de voitures d'occasion. Réalisé avec Figma, ce projet s'inscrit dans un cadre pédagogique lors d'un cours de découverte de l'intelligence artificielle et du design UI/UX à Digital Campus. L'objectif du site est à la fois d'informer les utilisateurs sur les véhicules disponibles (prix, année, kilométrage) et de faciliter la vente grâce à une interface claire, moderne et intuitive. Ce projet a permis de travailler la structuration d'une plateforme e-commerce automobile, la hiérarchisation des informations et la conception d'un parcours utilisateur fluide, tout en maîtrisant les fonctionnalités de Figma et les outils d'assistance par l'IA pour le design. Les maquettes ont été inspirées par des références sur Dribbble et les principes d'UX de Nielsen Norman Group. Les icônes proviennent de Flaticon.
Gestion de Bibliothèque (CRUD PHP/MySQL)
Conception et développement d'un site web dynamique de gestion de bibliothèque, réalisé avec PHP et MySQL en suivant les bonnes pratiques de PHP: The Right Way. Ce site permet d'administrer le catalogue et les utilisateurs grâce aux fonctionnalités suivantes : Gestion des livres : Le site dispose d'une interface permettant l'ajout de nouveaux ouvrages dans la base de données ainsi que la modification des informations des livres existants. Gestion des membres : Une section dédiée permet le contrôle complet des adhérents, incluant l'ajout de nouveaux membres, la modification de leurs informations et la suppression des comptes. Système d'emprunt : Le site intègre un mécanisme fonctionnel pour gérer l'action d'emprunt d'un livre par un utilisateur. La sécurité est assurée par l'utilisation de requêtes préparées PDO pour éviter les injections SQL, et les mots de passe sont chiffrés via BCRYPT. Le projet respecte les recommandations de sécurité de l'OWASP.
Site Vitrine VertiNET - Jardinage & E-commerce
Conçu dans le cadre de mon cursus scolaire à Digital Campus. Le projet comprend une page d'accueil avec mise en avant des produits et conseils, un catalogue e-commerce, une page "À propos" détaillée et un formulaire de contact fonctionnel. Le code a été unifié avec une feuille de style CSS unique gérant l'ensemble des pages. Respect de la charte graphique et mise en page responsive via CSS Grid et Flexbox, en suivant les recommandations de MDN Web Docs. Les icônes proviennent de Font Awesome et les images de Unsplash.
Site Vitrine - Meubles & Co
Conçu dans le cadre de mon cursus scolaire à Digital Campus, le projet "Meubles & Co" est une intégration web réalisée entièrement en HTML et CSS natifs, sans recours à des frameworks externes. Il s'agit d'une landing page pour une marque fictive de mobilier éco-responsable qui rassemble une galerie de produits structurée en grille, une présentation détaillée des engagements de l'entreprise, une foire aux questions ainsi qu'un formulaire de contact stylisé. Ce travail m'a permis de mettre en pratique les concepts fondamentaux appris en cours, notamment la structuration sémantique du code selon les standards du W3C et la création de mises en page modernes et réactives utilisant Flexbox et CSS Grid. Les références de design proviennent de Awwwards et les bonnes pratiques CSS de CSS-Tricks.
Illustration Vectorielle & Maîtrise de la Plume
Ce projet regroupe une série d'exercices techniques réalisés exclusivement sur Adobe Illustrator, visant à acquérir une maîtrise parfaite de l'outil Plume. Le travail a été structuré autour de trois niveaux de difficulté progressive (débutant, intermédiaire et expert), imposant une rigueur croissante dans la gestion des courbes de Bézier et des points d'ancrage. Cette réalisation démontre ma capacité à vectoriser des formes complexes avec précision, à gérer l'épaisseur des contours et à produire des illustrations aux tracés nets et fluides. Les tutoriels suivis proviennent de Adobe Learn et de ressources pédagogiques sur YouTube Adobe.
Affiche Conceptuelle - Mars & Écologie
Conçue intégralement sur Adobe Illustrator, cette affiche conceptuelle aborde la thématique de l'urgence climatique en parallèle de l'exploration spatiale, illustrée par le slogan "Il n'y a pas de plan B". Ce travail repose sur une composition vectorielle épurée, jouant sur des contrastes de couleurs forts et une hiérarchie typographique précise. Le projet démontre une maîtrise technique des outils de dessin vectoriel (plume, pathfinder) et une capacité à traduire un message fort par une identité visuelle minimaliste et impactante.
Publicité Produit & Photomontage - Lyre's
Ce projet publicitaire, conçu dans le cadre d'un cours de retouche et composition d'image à Digital Campus, met en avant la marque de spiritueux sans alcool Lyre's. L'exercice consistait à réaliser un photomontage créatif transformant le produit en une composition fruitée pour évoquer la fraîcheur et les saveurs estivales. J'ai utilisé des techniques avancées de détourage, de fusion de calques et d'incrustation sur Adobe Photoshop pour intégrer harmonieusement les textures de fruits provenant de Adobe Stock sur la forme de la bouteille, tout en respectant les codes graphiques du marketing produit haut de gamme. Le projet s'inspire des tendances observées sur Behance et Ads of the World.
Mise en Page Presse - Automobile
Conception graphique d'un encart presse (publicité magazine) mettant en scène les caractéristiques techniques d'un véhicule de sport. Ce projet de design éditorial se concentre sur la hiérarchisation de l'information, en jouant sur les graisses typographiques et la disposition des éléments pour mettre en valeur les données clés (vitesse, puissance, moteur). L'objectif était de créer une composition dynamique et lisible, respectant les contraintes d'impression et les codes visuels du secteur automobile de luxe. Le projet a été réalisé sur Adobe Photoshop et InDesign, en utilisant des images haute résolution issues de Adobe Stock et des références de mise en page inspirées par Car Design News.
Identité Visuelle & Charte Graphique - Personal Branding
Réalisé dans le cadre de ma première année de Bachelor à Digital Campus, ce projet porte sur la conception intégrale de mon identité visuelle personnelle (Personal Branding). Le travail s'articule autour d'un logotype géométrique et dynamique, symbolisant l'élan et la précision, accompagné d'une charte graphique complète définissant les choix colorimétriques et typographiques. Le document final, réalisé avec la suite Adobe Creative Cloud (Illustrator, InDesign), présente les étapes de recherche, les règles d'utilisation du logo ainsi que ses déclinaisons sur divers supports de papeterie (cartes de visite, papier à en-tête) et produits dérivés. Les typographies utilisées proviennent de Adobe Fonts et les inspirations visuelles ont été puisées sur Behance.
Formation
Bachelor Développement Web
2025 - 2030
Digital Campus Paris - 1ère année en cours
Formation approfondie en développement web full-stack alliant rigueur scientifique, méthodologie agile et conception d'applications modernes. Apprentissage des technologies frontend (HTML5, CSS3, JavaScript, React, Tailwind CSS), backend (PHP, MySQL, API REST) et des bases de l'architecture logicielle. Formation axée sur les bonnes pratiques, le responsive design, l'accessibilité web et le travail en équipe.
Baccalauréat International Scientifique
2024
Option Français
Formation scientifique internationale axée sur la rigueur académique, l'analyse structurée, la pensée critique et la méthodologie de résolution de problèmes. Programme comprenant les mathématiques, la physique, la chimie et une spécialisation en français (littérature et analyse). Développement de compétences en recherche, rédaction scientifique et présentation orale.
Contact
📧 Email
oanouar17@gmail.com