Interactive Professional Portfolio and Case Study Website

This site. A responsive portfolio built to present AI automation, digital marketing, and growth-operations capabilities in a single, structured place, this is the project you are currently viewing.

A professional profile spanning agency leadership, sales, digital marketing, and AI automation is hard to communicate through a resume alone. A dedicated site was needed to present projects, skills, and experience with enough depth for employers, freelance clients, and consulting prospects to evaluate directly.

A resume format cannot show project reasoning, workflow design, or visual and interaction craft, all of which matter for AI automation and digital-marketing consulting work.

A structured, animated portfolio covering services, skills, featured projects with full case studies, professional experience, certifications, and a working contact system, built with the same technology stack used across the other portfolio projects.

• Hiring managers evaluating AI automation and marketing-operations roles
• Freelance and consulting prospects assessing fit for a project
• Collaborators and agencies looking for a growth-operations partner

1. 1

   A visitor lands on the homepage and reviews the professional summary and services

2. 2

   They explore featured projects and open individual case studies for depth

3. 3

   They review skills, experience, and certifications

4. 4

   They reach the contact section and submit a project inquiry or download the CV

• Structured sections for services, skills, projects, experience, certifications, and contact
• Professional profile image and downloadable CV
• Responsive navigation and motion effects
• Project case-study layouts

Built on Next.js with the App Router and TypeScript, styled with Tailwind CSS, and animated with Framer Motion and GSAP. Content lives in typed data files so sections stay consistent and easy to update, with the project structured for deployment on Vercel.

• The contact form validates input client-side with Zod before submitting to an API route
• The API route is structured to forward messages through an email provider once configured
• Project and blog content render from data files, so new entries do not require touching layout code

• Contact form submissions are validated and sanitized before processing
• Email provider credentials are kept in environment variables and never exposed client-side
• No visitor data is stored beyond what is needed to deliver a contact-form email

• Balancing rich motion and 3D elements against real-world performance targets
• Presenting in-development projects honestly without overstating their completion status
• Structuring content so a future move to multiple languages would not require rebuilding sections

• Gives a single, structured place to evaluate the full professional profile
• Demonstrates hands-on Next.js, TypeScript, and animation implementation directly
• Supports outreach for employment, freelance, and consulting opportunities

• French and Arabic language support is being added after the English version is complete
• The GitHub and testimonials sections are intentionally empty until real links and references are available
• Live analytics are inactive until tracking IDs are configured

• Complete French and Arabic translations with full right-to-left support
• Add real project repositories and live demo links as they become available
• Publish additional case studies and blog articles over time