About myself
Who am I
Services & Expertise
My Services
Front-End Development
I create fast, responsive, and visually engaging websites that work flawlessly on all devices. My front-end work ensures smooth navigation, clear structure, and a professional look that helps businesses stand out online.
Back-End Development
I build secure and reliable back-end systems that power websites and apps. My work ensures smooth operations, custom functionality, and efficient data management to support your business.
WordPress Development
I design and develop fully customized WordPress websites, offering simple management and full flexibility. Whether for a business site, blog, or online store, I create scalable solutions tailored to your goals.
Graphic & Visual Design
I craft bold, modern visuals that capture attention and reflect your brand identity. From logos and social media content to posters and web graphics, my designs communicate your message and engage your audience.
Digital Marketing
I create and manage targeted ad campaigns that help businesses reach the right audience and increase sales. My expertise in Meta Ads ensures optimized budgets, strong performance, and real growth for your brand.
Web Design
I design clean, modern websites that deliver a professional first impression. With a focus on user experience, I plan layouts, design mockups, and build smooth interfaces that turn visitors into customers.
Portfolio
My Projects
Health Hub
A full-stack PHP & MySQL web app that helps users find nearby doctors, view schedules, and read reviews. Designed and developed from scratch with a clean, responsive UI for easy booking.
Dentist Finder Web Application
- 👤 Role — Full Stack Developer & Web Designer
- 🗓️ Date & Timeline — June 2023 · 2 months
- 🎯 Sector — Healthcare / Local Services
- 👥 Team Size — 1 member
Project Overview
This web application helps users in my city and country find doctors nearby, check their availability schedules, read reviews, and access detailed information about their practice locations.
The goal was to create a reliable, user-friendly platform that simplifies the process of locating and booking dental care.
Technologies & Tools
- 🎨 Design & Planning: Figma, Entity-Relationship Diagrams (MCD, MLD)
- 💻 Frontend: JavaScript, jQuery, Bootstrap, HTML5, CSS3
- 🐘 Backend: PHP (OOP) & MySQL
- 📦 Deliverables: Full source code, project planning documents, presentation
Key Features
Search dentists by location and specialty View real-time availability schedules Access detailed profiles including reviews and contact info Responsive design for desktop and mobile users
Process & Approach
Collaborated with a practicing dentist to understand user needs and dental service logistics Designed database schema using MCD and MLD to manage dentists, schedules, and reviews Developed backend with PHP OOP for clean, maintainable code Implemented frontend interface with Bootstrap and jQuery for a responsive, interactive user experience Created project planning documents and delivered a comprehensive presentation for evaluation
Impact & Benefits
Streamlined the process for patients to find and choose dentists Enhanced local healthcare access through digital means Improved appointment scheduling transparency for dentists and patients
Marzouk Formation
A multilingual WordPress site for a training agency helping people secure jobs in Germany. Custom theme, trilingual content (AR/FR/DE), and fast 3-week delivery with a complete responsive design.
Marzouk Formation
- 👤 Role — Full Stack Developer, UX/UI Designer & Content Creator
- 🗓️ Date & Timeline — April-2024 · 3 weeks
- 🎯 Sector — Education / Vocational Training / International Contracts
- 👥 Team Size — 1 member
Project Overview
*Marzouk Formation* is a WordPress website built entirely by me: design, development, content and project planning. The site offers services to help people secure work contracts in Germany, plus German language training. Users can explore various specialized vocational domains, browse offered courses, select their area of interest, and access tailored resources to apply for jobs or study programs abroad.
The goal was to deliver a polished, multilingual platform in a very short time that satisfied the client’s needs for clarity, aesthetics, and functionality.
Technologies & Tools
- 🎨 Design & Planning: Figma, Wireframes, Sitemap, UX Prototyping
- 🌐 Platform: WordPress (custom theme), PHP, HTML5, CSS3, JavaScript
- 🗣 Languages: Arabic, French, German
- 📦 Deliverables: Full site with responsive design, project roadmap, domain & course structure, SEO-friendly content
Key Features
Fast delivery — website completed and deployed in a very short period.
Eight vocational domains to choose from, for example: Nursing & Elder Care,
Automotive Diagnostics, Hotel & Hospitality, Electric Maintenance, Industrial
Forklifts Operation, Cookery / Culinary Arts, German Language Courses, Home
Health Assistance.
Multilingual content (Arabic / French / German) with translations and language
switcher.
Custom-designed visuals, color scheme, layout, and branded graphics made by
me.
Fully responsive across mobile and desktop; clean navigation to domains &
contact / application forms.
SEO basics implemented: meta tags, clean URL structure, optimized images.
Client feedback loops included: revisions and adjustments until client fully
satisfied.
Process & Approach
I started with a discovery phase: meeting with the client to understand domain
offerings, target audience, branding preferences, and timeline.
Developed site structure & sitemap, mapping all 8 domains and their respective
pages (courses, contracts, how-to apply, contact).
Sketched wireframes and mockups in Figma; selected color palette, typography,
and visuals aligned with education & trust.
Built a custom WordPress theme, integrated multilingual plugin, set up domain
pages, forms, and content management.
Created all content: texts in three languages, course descriptions, client
testimonials, imagery & graphics.
Tested across devices; deployed, trained client to add future content;
delivered all source files and documentation.
Impact & Benefits
Client was very satisfied: site exceeded expectations in design, speed of
delivery, and usability.
Helps potential students / workers clearly see their options and apply /
inquire easily.
Enhances credibility of *Marzouk Formation* online: professional image,
multilingual reach.
Accelerated time-to-market: being able to launch quickly enabled client to
start getting leads sooner.
Gives client autonomy: with WordPress backend and content in multiple
languages, future updates are manageable.
Feathers Nest
A bright, pet-focused e-commerce front-end for food, toys, and accessories. Fully responsive, built with Bootstrap & Tailwind, and includes a blog for SEO and engagement.
Feathers Nest
- 👤 Role — Front-End Developer & Web Designer
- 🗓️ Date & Timeline — September-2024 · 1 month
- 🎯 Sector — E-Commerce / Pets & Animal Care
- 👥 Team Size — 1 member
Project Overview
Feathers Nest is a front-end e-commerce website focused on selling pet supplies such as food, toys, and accessories for animals and birds. The project also includes a blog section featuring educational articles like “How to choose the right bird for you,” designed to engage visitors and boost SEO.
The entire website was designed and developed by me — from layout and visual design to responsive front-end implementation — ensuring a modern, colorful, and friendly user experience that fits the pet care market.
Technologies & Tools
- 🎨 Design & Planning: Figma, Canva, Wireframes, UI Prototypes
- 💻 Frontend: HTML5, CSS3, JavaScript, jQuery, Bootstrap, Tailwind
- 🗂 Project Type: Static front-end prototype prepared for CMS or backend integration
- 📦 Deliverables: Responsive front-end code, full design assets, and documentation
Key Features
Clean and fully responsive e-commerce design for desktop and mobile users
Attractive product sections for pet food, toys, and accessories
Blog area for informative and SEO-oriented articles
Custom color palette and branding created from scratch
Smooth animations and interactivity powered by jQuery
Easy navigation and user-friendly layout focused on conversion
Fast delivery and excellent client feedback upon completion
Process & Approach
Started with a brand identity and market research to determine color palette,
tone, and layout direction
Created the entire visual concept in Figma and refined assets using Canva
Developed a responsive front-end using Bootstrap grid and Tailwind utilities for
flexibility and speed
Implemented interactive components such as dropdowns, sliders, and modals using
jQuery
Focused on clean, maintainable code and optimized file structure for future
scalability
Delivered the project in less than a month with full client satisfaction
Impact & Benefits
Strengthened my portfolio with a creative, visually appealing front-end
project
Provided the client with a ready-to-launch, scalable web interface
Improved brand trust and engagement through a cohesive and warm design
Demonstrated strong UI/UX principles and mastery of multiple front-end
frameworks
Souq Saad
A lifestyle e-commerce store built on YouCan with a custom brand identity. I handled all visuals, banners, and layout for a minimal, trustworthy online shopping experience.
Souq Saad
- 👤 Role — E-Commerce Owner & Store Designer
- 🗓️ Date & Timeline — December-2023 · 2 weeks
- 🎯 Sector — Online Retail / Lifestyle Products
- 👥 Team Size — 1 member
Project Overview
Souq Saad is an e-commerce website I built using YouCan, a Moroccan e-commerce platform. The store was designed to offer a clean, modern shopping experience featuring lifestyle and trending products. My focus was on building a strong visual identity and user-friendly experience that aligned with my brand vision.
Even though YouCan simplifies the technical side, I managed every design detail — from color choices and typography to banners, product images, and layout customization.
Technologies & Tools
- 🛍 Platform: YouCan (customized theme)
- 🎨 Design Tools: Canva, Photoshop, Figma
- 📷 Assets: Custom banners, logos, product visuals, and promotional creatives
- 📦 Deliverables: Fully functional online store with responsive design and marketing visuals
Key Features
Personalized color palette and minimalist layout designed for clarity
Custom logo, banners, and homepage visuals built to enhance trust and
identity
Product sections optimized for quick navigation and conversion
Mobile-friendly responsive design for smooth shopping experience
Simple and fast checkout powered by YouCan’s built-in tools
Integrated SEO-ready product descriptions and metadata
Complete setup delivered within two weeks
Process & Approach
Planned the store’s visual and functional structure focusing on simplicity and
user comfort
Designed brand elements and visual assets using Canva and Photoshop
Customized YouCan’s theme, adjusted layouts, typography, and color scheme
Uploaded and optimized all visuals, product photos, and banners for
performance
Configured store settings, categories, and checkout flow for a seamless user
experience
Tested responsiveness and usability across devices before launch
Impact & Benefits
Gained hands-on e-commerce management experience through YouCan
Strengthened my design and branding skills while building a real-world online
store
Created a consistent and trustworthy online identity that attracted early
customers
Demonstrated ability to design, launch, and manage a complete e-commerce
platform independently
Game Platform
Dynamic gaming web app integrating APIs from Steam and Epic Games to display live data, promotions, and system requirements. Fully responsive with a dark, modern dashboard design.
Game Platform
- 👤 Role — Full Stack Developer & API Integrator
- 🗓️ Date & Timeline — July-2024 · 1 month
- 🎯 Sector — Gaming / Data Aggregation
- 👥 Team Size — 1 member
Project Overview
Game Lab is a personal project designed to centralize and display information about video games and ongoing promotions across multiple stores. It uses various public APIs to fetch detailed game data — including title, developer, publisher, release date, description, and both minimum and recommended system requirements. Additionally, it tracks and lists the latest game deals and free offers from platforms such as Epic Games and Steam.
The project was created from scratch to combine my passion for gaming and web development, serving as a technical experiment in API integration and dynamic front-end interfaces.
Technologies & Tools
- 🎮 Frontend: HTML5, CSS3, JavaScript, jQuery, Bootstrap
- 🐍 Backend: PHP (API handling, JSON parsing)
- 🧩 APIs: RAWG API, Epic Games Store API, Steam API
- 🎨 Design Tools: Figma, Canva (UI mockups and banners)
- 📦 Deliverables: Fully functional web application with real-time API data integration
Key Features
Real-time game information fetched dynamically via multiple APIs
Search system allowing users to find games by name, genre, or developer
Detailed game pages with publisher info, release date, and system
requirements
Live section showcasing latest promotions and free offers from Steam and Epic
Games
Responsive UI designed for both desktop and mobile users
Clean layout and color scheme inspired by modern gaming dashboards
Fully functional but unpublished — developed as a complete personal showcase
project
Process & Approach
Started with API research and documentation analysis to determine endpoints and
data structures
Designed mockups in Figma for a dark, minimal, and gamer-oriented interface
Built the frontend using Bootstrap and jQuery for interactive and dynamic
components
Implemented backend logic in PHP to fetch and merge JSON data from multiple
APIs
Added caching for API responses to improve performance and reduce load time
Tested responsiveness, data accuracy, and API reliability under different
conditions
Finalized a complete working version though it remains unpublished as a personal
project
Impact & Benefits
Demonstrated my ability to design and build a complete data-driven web
application
Strengthened my understanding of REST APIs, JSON handling, and data
synchronization
Developed a strong UI/UX concept tailored for gamers and interactive data
visualization
Expanded my portfolio with a technically advanced and creative personal
project
Showcased versatility in combining design, functionality, and real-time API
integrations
Interior Design
A pixel-perfect mockup reproduction project using HTML5 and CSS3. Showcases responsive design, sticky navigation, and elegant structure for a clean, modern layout.
Interior Design
- 👤 Role — Front-End Developer & UI Designer
- 🗓️ Date & Timeline — October-2022 · 1 week
- 🎯 Sector — Interior Design / Creative Web Development
- 👥 Team Size — 1 member
Project Overview
Interior Design is a web page reproduction project for Showcase Design, a company specializing in modern interior design. The goal was to recreate a provided mockup, analyze its structure, and translate it into a responsive, elegant, and functional HTML & CSS layout following best UI and semantic coding practices.
The project focused on front-end precision, design accuracy, and implementing professional web features such as sticky navigation and social media integration.
Technologies & Tools
- 💻 Frontend: HTML5 (semantic structure), CSS3 (Flexbox, media queries)
- 🧭 Design: Figma (mockup recreation & analysis)
- 🎨 UI Tools: Font Awesome (icons), Google Fonts
- 🧩 Frameworks: Lightweight CSS framework for layout consistency
- 📦 Deliverables: Drive folder / GitHub repo including Figma link, HTML, and CSS files
Key Features
Pixel-perfect reproduction of provided Figma mockup
Sticky navigation bar that remains visible during scroll
Responsive design optimized for both desktop and mobile
Semantic HTML5 elements for clean and organized structure
Integrated Font Awesome icons for company’s social media links
Smooth hover animations on menu navigation links
Well-structured and documented codebase following modern standards
Process & Approach
Recreated the provided mockup in Figma to understand layout and proportions
Analyzed the page structure and divided it into main blocks (header, hero,
about, services, contact, footer)
Implemented HTML5 with semantic tags to ensure accessibility and readability
Styled components with CSS3 using Flexbox for layout and media queries for
responsiveness
Added Font Awesome for social media icons and applied hover effects
Validated and refined code for clean indentation and naming conventions
Delivered final version on time with complete source and documentation
Impact & Benefits
Strengthened mastery of front-end fundamentals including Flexbox and responsive
design
Improved ability to translate static mockups into live, functional web pages
Developed a strong understanding of UI structure and layout organization
Enhanced portfolio with a clean, design-oriented professional project
Showcased attention to detail and precision in design-to-code conversion
Clickhouse
Database design project for a real estate agency using MERISE & UML. Includes use-case diagrams, MCD/MLD models, and a deployable SQL schema for ad management systems.
Clickhouse
- 👤 Role — System Analyst & Database Designer
- 🗓️ Date & Timeline — February-2023 · 1 week
- 🎯 Sector — Real Estate / Information Systems
- 👥 Team Size — 3 members
Project Overview
Click House is a modelling project for an estate agency's ad management system. The goal was to design a complete information system using MERISE and UML to cover public browsing, search & filter, account-based ad publishing, and full ad lifecycle management (add, edit, delete).
The deliverables include use-case diagrams, a data dictionary, the conceptual data model (MCD), the logical data model (MLD), and an SQL script to create the database schema.
Technologies & Tools
- 📐 Methodologies: MERISE, UML (Use-case & activity diagrams)
- 💾 Database: ER modelling, MCD → MLD, SQL script generation
- 🛠 Tools: Draw.io / Figma for diagrams, MySQL / PostgreSQL for SQL scripts
- 📦 Deliverables: Use-case diagram, data dictionary, MCD, MLD, creation SQL script
Key Features
Public browsing of listings with sorting by date or price
Advanced search filters: type, category, city, price range
Account registration to post and manage personal listings
Listing attributes modelled: unique ID, title, price, publish date,
last-modified date, address, category (sale/rent), type (apartment, house,
villa, office, land), image gallery with primary image
Client entity modelled with authentication fields and contact details
Complete relational schema and SQL creation script for immediate deployment
Process & Approach
Collected requirements from the brief and identified actors and use-cases
Built the use-case diagram to capture visitor and client interactions
Created a detailed data dictionary listing attributes, types, and
constraints
Designed the MCD (conceptual ER model) following MERISE conventions
Converted MCD to MLD (relational model) with primary/foreign keys and
normalization
Generated a deployable SQL script to create tables, constraints, and sample
indexes
Impact & Benefits
Delivered a production-ready database design suitable for a full-stack
implementation
Simplified ad management and search performance through normalized schema and
appropriate indexes
Provided clear documentation (data dictionary + diagrams) for developers and
stakeholders
Prepared SQL script to accelerate backend implementation and testing
Recipes
An API-powered web app fetching live meal data via TheMealDB API. Users can search, filter, and view thousands of recipes in an elegant, mobile-friendly interface.
Recipes
- 👤 Role — Front-End Developer
- 🗓️ Date & Timeline — May-2024 · 5 days
- 🎯 Sector — Food / Recipe API
- 👥 Team Size — 1 member
Project Overview
Recipes is a responsive web application built using TheMealDB API to provide users with thousands of global recipes. The project was designed to allow users to search, browse, and filter meals by name, category, or region — all while displaying results in an elegant and fully responsive interface powered by Bootstrap.
Each recipe is displayed as a card with its image and title, and users can click a “More Info” button to view a detailed modal containing ingredients, preparation instructions, and additional metadata about the meal.
Technologies & Tools
- 🧩 Frontend: HTML5, CSS3, JavaScript, Bootstrap
- 🌐 API: TheMealDB API (RESTful JSON data)
- ⚙️ Tools: Postman (API testing), Trello (Kanban project management)
- 🧭 Design: Figma (wireframes), Google Slides (presentation), Google Docs (style guide)
- 📦 Deliverables: GitHub repository, responsive working demo
Key Features
Displays 6 random recipes by default on homepage
Search bar for recipes by name
Dual filtering by category and region (default: Lamb & Moroccan)
Responsive design built with Bootstrap grid and media queries
Recipe cards with images, titles, and “More Info” modals
Modal displaying category, region, ingredients, and full instructions
Pagination to limit results to 6 recipes per page
Clean, user-friendly interface optimized for desktop and mobile
Process & Approach
Started with research and testing of TheMealDB API endpoints using Postman
Created wireframes for desktop and mobile versions in Figma
Developed layout and styling using Bootstrap Grid and Flexbox
Integrated API using fetch() with async/await for asynchronous calls
Implemented pagination and modal windows for detailed recipe display
Validated HTML structure using W3C Validator for best practices
Managed tasks and progress via Trello Kanban board
Impact & Benefits
Strengthened skills in API integration, data fetching, and responsive web
design
Demonstrated ability to build real-world applications from documentation
Improved understanding of dynamic UI creation and user interaction flow
Delivered a complete and polished front-end project in under a week
Expanded portfolio with a professional, API-driven web project
Insolitours
Landing page design for a travel agency promotion. Clean, conversion-focused, and responsive — built in 5 days with a full graphic charter and pixel-perfect layout.
Insolitours
- 👤 Role — Front-End Developer & UI/UX Designer
- 🗓️ Date & Timeline — October-2022 · 5 days
- 🎯 Sector — Travel & Tourism
- 👥 Team Size — 2 members
Project Overview
Insolitours is a travel agency offering curated vacation packages and tours at competitive prices. The director wanted a **Landing Page** dedicated to highlighting a specific service or limited-time offer, such as a last-minute travel promotion. The goal was to design and develop a clean, engaging, and conversion-focused page that attracts users’ attention and encourages them to take action.
The project involved designing both Desktop and Mobile versions of the landing page, ensuring visual harmony, responsiveness, and performance.
Technologies & Tools
- 🎨 Design & Planning: Figma, Trello (Kanban board), Google Docs, Google Slides
- 💻 Development: HTML5, CSS3 (Flexbox & Grid), Media Queries
- 🧩 Validation: W3C Validator for semantic and accessible HTML
- 📦 Deliverables: Presentation, graphic charter, desktop & mobile mockups, and source code
Key Features
Landing Page designed specifically for conversion and lead generation
Custom color palette, logo, icons, and typography defined in a full graphic
charter
Responsive layout adapting seamlessly across desktop, tablet, and mobile
Clean HTML and CSS structure following best practices and W3C validation
Visual hierarchy optimized to direct attention to calls-to-action and
promotions
Collaborative project management using Trello for task tracking and
deadlines
Completed within 5 days with both mockups and code delivered on time
Process & Approach
Defined what makes a landing page distinct from a homepage and established key
goals
Created a detailed Trello Kanban board outlining all tasks, descriptions,
assignments, and deadlines
Designed desktop and mobile wireframes in Figma based on provided structure
Developed a responsive layout using Flexbox and CSS Grid, ensuring pixel-perfect
alignment with the mockups
Applied the chosen graphic charter to maintain brand consistency and strong
visual appeal
Validated the HTML and CSS through W3C tools and performed final testing on
multiple devices
Impact & Benefits
Delivered a professional and responsive landing page ready for real-world
use
Strengthened my teamwork, project management, and front-end development
skills
Gained hands-on experience with Trello workflow and structured deadlines
Produced a complete deliverable package — from concept and design to validated
front-end code
Enhanced my portfolio with a clean and well-executed marketing-oriented project