Languages & Technologies
- HTML5 / CSS3 / Tailwind CSS
- JavaScript / React / TypeScript
- PHP
- SQL/MySQL
- WordPress
- Artificial Intelligence
- Illustrator / PhotoShop / Indesign
About
Passionate about web development and new technologies, I am currently in my first year of a Web Development Bachelor at Digital Campus Paris. My journey has allowed me to acquire solid programming foundations (HTML5, CSS3, JavaScript, PHP, MySQL) and develop a real interest in creating modern and intuitive user interfaces with React and Tailwind CSS.
Holder of an International Scientific Baccalaureate with French option, I chose to specialize in web development to combine creativity and technical skills. My goal is to become a full-stack developer capable of designing high-performance and responsive web applications, mastering both frontend and backend.
Always curious to learn new technologies (TypeScript, WordPress, Artificial Intelligence) and agile methodologies, I am looking for professional opportunities (internship, apprenticeship) to put my skills into practice and continue to progress in this constantly evolving field.
Skills
Languages
- French - Fluent
- English - Intermediate
- Arabic - Native
Tools & Software
- VS Code / Komodo / Cursor (AI)
- Git / GitHub
- XAMPP
- Postman
- Figma / Adobe XD / Canva
- UML / Merise
- Zapier / n8n
Soft Skills
- Teamwork
- Project Management
- Problem Solving
- Adaptability
- Communication
- Problem Solving
- Adaptability
- Communication
Projects
AutoShow - Luxury Car Catalog
AutoShow is a web platform for presenting luxury vehicles developed in PHP/MySQL with an MVC architecture, inspired by the official sites of McLaren, Aston Martin and Ferrari. The project features an interactive gallery of 60+ cars with dynamic filters, technical detail pages, and a premium dark theme design that is 100% responsive, built following standards from MDN Web Docs and CSS Grid / Flexbox patterns from CSS-Tricks. On the administration side, a complete back-office ensures CRUD management of vehicles, a dashboard with real-time statistics, and secure authentication via BCRYPT, following OWASP Top 10 recommendations (protection against XSS, CSRF, SQL injection via PDO). The architecture follows best practices from PHP: The Right Way, with page load times under 1 second thanks to MySQL query optimization and image lazy loading.
Films 2026 - WordPress Platform for Upcoming Films
Films 2026 is a web project built with WordPress, designed for both informational and educational purposes. The site is dedicated to upcoming films in 2026 and offers a mix of content from different film genres. The main focus of this project is to master native WordPress features in depth, as well as the use and configuration of its extensions (plugins) such as Yoast SEO for SEO and Elementor for page building. It allows working on content management, theme customization, category organization, newsletter integration via Mailchimp, and user experience optimization. This project highlights a structured approach, a modern design, and intuitive navigation, while respecting web best practices defined by WordPress Best Practices. Images are optimized with TinyPNG and film data comes from the TMDb API.
AutoSelect - Used Car Sales Platform
AutoSelect is a website project designed for selling and presenting used cars. Created with Figma, this project is part of an educational framework during a course on discovering artificial intelligence and UI/UX design at Digital Campus. The site's objective is both to inform users about available vehicles (price, year, mileage) and to facilitate sales through a clear, modern, and intuitive interface. This project allowed working on structuring an automotive e-commerce platform, information hierarchy, and designing a smooth user journey, while mastering Figma features and AI-assisted design tools. Mockups were inspired by references on Dribbble and UX principles from Nielsen Norman Group. Icons come from Flaticon.
Library Management System (CRUD PHP/MySQL)
Design and development of a dynamic library management website built with PHP and MySQL following best practices from PHP: The Right Way. This site allows catalog and user administration through the following features: Book Management: The site provides an interface for adding new books to the database and modifying existing book information. Member Management: A dedicated section enables complete control of members, including adding new members, modifying their information, and deleting accounts. Borrowing System: The site integrates a functional mechanism to manage book borrowing by users. Security is ensured through the use of PDO prepared statements to prevent SQL injection, and passwords are encrypted via BCRYPT. The project follows security recommendations from OWASP.
VertiNET Showcase Website - Gardening & E-commerce
Integration of a multi-page website for a gardening company. The project includes a homepage with product highlights and advice, an e-commerce catalog, a detailed "About" page, and a functional contact form. The code was unified with a single CSS stylesheet managing all pages. Adherence to branding guidelines and responsive layout via CSS Grid and Flexbox, following recommendations from MDN Web Docs. Icons from Font Awesome and images from Unsplash. The project adheres to web accessibility principles defined by WCAG.
Showcase Website - Meubles & Co
Designed as part of my academic curriculum at Digital Campus, the "Meubles & Co" project is a web integration built entirely in native HTML and CSS, without external frameworks. It is a landing page for a fictional eco-responsible furniture brand featuring a grid-structured product gallery, a detailed presentation of the company's commitments, a FAQ section, and a styled contact form. This work allowed me to practice fundamental concepts learned in class, including semantic code structure according to W3C standards and creating modern, responsive layouts using Flexbox and CSS Grid. Design references come from Awwwards and CSS best practices from CSS-Tricks.
Vector Illustration & Pen Tool Mastery
This project brings together a series of technical exercises created exclusively on Adobe Illustrator, aiming to achieve perfect mastery of the Pen Tool. The work was structured around three levels of progressive difficulty (beginner, intermediate, and expert), requiring increasing precision in managing Bézier curves and anchor points. This achievement demonstrates my ability to vectorize complex shapes with precision, manage stroke thickness, and produce illustrations with clean and fluid paths. Tutorials followed come from Adobe Learn and educational resources on YouTube Adobe.
Conceptual Poster - Mars & Ecology
Designed entirely on Adobe Illustrator, this conceptual poster addresses the theme of climate urgency in parallel with space exploration, illustrated by the slogan "There is no plan B". This work is based on a clean vector composition, playing with strong color contrasts and precise typographic hierarchy using fonts from Google Fonts. The project demonstrates technical mastery of vector drawing tools (pen, pathfinder) and the ability to translate a strong message through a minimalist and impactful visual identity. Inspirations come from environmental awareness campaigns published by Greenpeace and NASA.
Product Advertisement & Photo Montage - Lyre's
This advertising project, designed as part of an image retouching and composition course at Digital Campus, highlights the non-alcoholic spirits brand Lyre's. The exercise consisted of creating a creative photo montage transforming the product into a fruity composition to evoke freshness and summer flavors. I used advanced techniques of clipping, layer blending, and embedding on Adobe Photoshop to harmoniously integrate fruit textures from Adobe Stock onto the bottle shape, while respecting the graphic codes of high-end product marketing. The project is inspired by trends observed on Behance and Ads of the World.
Press Layout - Automotive
Graphic design of a press insert (magazine advertisement) showcasing the technical characteristics of a sports vehicle. This editorial design project focuses on information hierarchy, playing with typographic weights and element positioning to highlight key data (speed, power, engine). The objective was to create a dynamic and readable composition, respecting printing constraints and the visual codes of the luxury automotive sector. The project was created using Adobe Photoshop and InDesign, using high-resolution images from Adobe Stock and layout references inspired by Car Design News.
Visual Identity & Graphic Charter - Personal Branding
Created as part of my first year of Bachelor's degree at Digital Campus, this project focuses on the complete design of my personal visual identity (Personal Branding). The work revolves around a geometric and dynamic logo, symbolizing momentum and precision, accompanied by a complete graphic charter defining color and typographic choices. The final document, created with the Adobe Creative Cloud suite (Illustrator, InDesign), presents the research stages, logo usage rules, and its variations on various stationery supports (business cards, letterhead) and branded products. Typefaces used come from Adobe Fonts and visual inspirations were drawn from Behance.
Education
Web Development Bachelor
2025 - 2030
Digital Campus Paris - 1st year in progress
Comprehensive training in full-stack web development combining scientific rigor, agile methodology, and modern application design. Learning frontend technologies (HTML5, CSS3, JavaScript, React, Tailwind CSS), backend (PHP, MySQL, REST APIs), and software architecture fundamentals. Focus on best practices, responsive design, web accessibility, and teamwork.
International Scientific Baccalaureate
2024
French Option
International scientific education focused on academic rigor, structured analysis, critical thinking, and problem-solving methodology. Curriculum including mathematics, physics, chemistry, and specialization in French (literature and analysis). Development of skills in research, scientific writing, and oral presentation.
Contact
📧 Email
oanouar17@gmail.com