Building high-performance web experiences with precision, craft, and modern AI-powered workflows.
I'm Ismail K., a passionate Frontend & WordPress Developer based in Morocco with 8+ years of experience crafting fast, beautiful, and conversion-focused digital products. I specialize in building high-performance websites and web applications for clients across France, Spain, Morocco, and Turkey.
I leverage modern development workflows — including AI-assisted tooling — to ship polished, production-ready websites faster and smarter, without sacrificing quality or attention to detail.
- 📍 Based in Morocco (available for remote work globally)
- 🗣️ Fluent in Arabic, French & English
- 💼 Currently open to full-time, freelance, and contract opportunities
- ✉️ Reach me: contact form
This portfolio was engineered — not just designed. Every element has a purpose:
| Feature | Implementation |
|---|---|
| ⚡ Zero-dependency stack | Pure HTML5, CSS3, Vanilla JS — no bloat, no build step |
| 🎨 Glassmorphism UI | Custom frosted-glass panels with backdrop-filter and CSS variables |
| 🧩 Bento Grid Layout | Modern editorial grid inspired by top-tier SaaS products |
| 🤖 AI-Assisted Workflow | Built with AI pair-programming for rapid iteration and precision |
| 🖱️ Custom cursor & magnetic buttons | Micro-interactions that make the experience feel premium |
| 👁️ Reveal animations | Intersection Observer API for smooth, scroll-triggered transitions |
| 📱 Mobile-first responsive | Hamburger nav, fluid grids, and adaptive typography |
| 📬 AJAX contact form | Formspree-powered with async submission and success state |
| 📄 11 Case Study pages | Each project has a dedicated, brand-aligned case study |
This project was developed using a modern AI-assisted coding workflow:
- 🤖 AI pair-programming was used throughout the build for rapid prototyping, code review, and debugging
- 🖼️ Automated browser screenshots were captured and integrated for all 11 project cards
- ✍️ AI-generated copy was refined and tailored to accurately represent each client project
- 📐 Design decisions were validated iteratively using AI feedback loops
This approach reflects how modern frontend developers work in 2025 — combining craft and expertise with intelligent tooling to deliver better results, faster.
Frontend → HTML5, CSS3 (Custom Properties, Grid, Flexbox), Vanilla JS (ES6+)
Design System → Glassmorphism, Dark Mode, Custom Animations, Google Fonts (Inter)
CMS / Backend → WordPress, WooCommerce, PHP, Custom Themes & Post Types
Performance → Intersection Observer API, Lazy Loading, Zero npm dependencies
Forms → Formspree AJAX (async submit, success/error state handling)
Tooling → AI-assisted development, Git, GitHub Pages
portfolio-1/
├── index.html # Main page — Bento Grid layout
├── contact.html # AJAX contact form (Formspree)
├── thanks.html # Post-submit thank-you page
├── project-mybodylymph.html # Case Study: My Body Lymph
├── project-lyonmma.html # Case Study: Lyon MMA Center
├── project-alcasserauto.html # Case Study: Alcasser Auto
├── project-yaz.html # Case Study: Yaz Car
├── project-infosystem.html # Case Study: I-Info System
├── project-webdevsite.html # Case Study: WebDevSite
├── project-hikayat.html # Case Study: Hikayat Al Insan
├── project-adsocial.html # Case Study: AdSocial
├── project-flux.html # Case Study: Flux Cinematique
├── project-kliner.html # Case Study: Kliner For Business
├── project-digikma.html # Case Study: Digikma (Archived)
├── css/
│ └── index.css # Full design system — tokens, layout, components
├── js/
│ └── index.js # Custom cursor, magnetic buttons, scroll reveals
└── images/ # Real screenshots from all 11 live projects
| # | Project | Industry | Live URL |
|---|---|---|---|
| 1 | My Body Lymph | Wellness & Spa | mybodylymph.fr |
| 2 | Lyon MMA Center | Sports & Fitness | lyon-mma-center.com |
| 3 | Alcasser Auto | Automotive | alcasserauto.com |
| 4 | Yaz Car | Automotive | yaz.es |
| 5 | I-Info System | E-commerce / IT | iinfosystem.webdevsite.fr |
| 6 | WebDevSite | Agency / Portfolio | webdevsite.fr |
| 7 | Hikayat Al Insan | Culture / Storytelling | hikayatalinsan.com |
| 8 | AdSocial | Digital Marketing | adsocial.ma |
| 9 | Flux Cinematique | Photography / Creative | ismailkraou.github.io/flux |
| 10 | Kliner For Business | B2B Services | ismailkraou.github.io/kliner-V2 |
| 11 | Digikma | Digital Marketing | (Archived) |
- ✅ 8+ years of hands-on experience in frontend & WordPress development
- ✅ Client-facing experience — I've owned projects from brief to live deployment
- ✅ Ability to read, understand, and extend complex codebases quickly
- ✅ Comfortable working remotely with async communication
- ✅ AI-native workflow — I use AI tools intelligently to multiply productivity, not replace thinking
- ✅ Strong design sensibility — I bridge the gap between design and engineering
I'm actively looking for new opportunities. If you're a recruiter or hiring manager, I'd love to connect.
| Channel | Link |
|---|---|
| 🌐 Portfolio | ismailkraou.github.io |
| linkedin.com/in/ismailkraou | |
| 🛒 ComeUp | comeup.com/fr/@ismailk |
| 📧 Contact | Portfolio Contact Form |
| 🐙 GitHub | github.com/ismailkraou |
Built with 💚 precision, modern tooling, and a relentless focus on quality.
© 2025 Ismail K. All rights reserved.