<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kaif Ali - Interactive Digital Marketing Portfolio</title>
<!-- Chosen Palette: Professional Blue/Cyan Gradient -->
<!-- Application Structure Plan: The application is designed as a top-down narrative portfolio. It starts with a strong value proposition in the hero section. The core is an interactive "Marketing Plan" diagram where users can click each stage to reveal details, transforming a static flowchart into an explorable tool. This is followed by a "Results Dashboard" with interactive charts (filterable by category), allowing users to engage with the data directly. The structure concludes with a clear breakdown of skills and a contact form. This architecture was chosen to guide the user from high-level strategy to tangible data and personal expertise, creating a more compelling and user-friendly experience than a simple slide deck. -->
<!-- Visualization & Content Choices: 1. Marketing Plan (Report Info) -> Goal: Organize/Explain -> Viz: Interactive HTML/CSS Diagram -> Interaction: Click on a stage to show/hide details -> Justification: Makes the strategic process explorable and less static than an image; Method: HTML/Tailwind + JS. 2. Growth/Sales/Social Data (Report Info) -> Goal: Compare/Inform -> Viz: Bar, Donut, Area Charts -> Interaction: Buttons to filter which chart data is displayed -> Justification: Consolidates all data into one dashboard, making it easy to compare metrics without scrolling through multiple sections. This is more engaging and professional; Library: Chart.js/Canvas. -->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f0f4f8;
scroll-behavior: smooth;
}
.gradient-bg {
background: linear-gradient(135deg, #0A369D 0%, #00C9FF 100%);
}
.plan-step {
transition: all 0.3s ease;
cursor: pointer;
}
.plan-step.active, .plan-step:hover {
background-color: #00C9FF;
color: white;
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.plan-step.active .step-circle, .plan-step:hover .step-circle {
background-color: white;
border-color: #00C9FF;
}
.plan-step.active .step-circle::after, .plan-step:hover .step-circle::after {
background-color: #00C9FF;
}
.chart-container {
position: relative;
width: 100%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
height: 350px;
max-height: 400px;
}
@media (min-width: 768px) {
.chart-container {
height: 400px;
}
}
.data-filter-btn.active {
background-color: #0A369D;
color: white;
}
</style>
</head>
<body class="text-gray-800">
<!-- Header -->
<header class="bg-white/80 backdrop-blur-lg sticky top-0 z-50 shadow-md">
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<a href="#" class="text-3xl font-extrabold text-blue-900">Kaif<span class="text-cyan-500">Ali</span>.in</a>
<div class="hidden md:flex space-x-8 font-medium text-gray-700">
<a href="#plan" class="hover:text-cyan-600 transition">The Plan</a>
<a href="#dashboard" class="hover:text-cyan-600 transition">Results Dashboard</a>
<a href="#expertise" class="hover:text-cyan-600 transition">Expertise</a>
</div>
<a href="#contact" class="hidden md:inline-block bg-blue-800 text-white font-bold py-2 px-6 rounded-full hover:bg-blue-700 transition">Contact Me</a>
</nav>
</header>
<!-- Hero Section -->
<section class="gradient-bg text-white py-20 md:py-32">
<div class="container mx-auto px-6 text-center">
<h1 class="text-4xl md:text-6xl font-extrabold leading-tight mb-4">A Solid Social Media & Digital Growth Strategy</h1>
<p class="text-lg md:text-xl max-w-3xl mx-auto text-cyan-200 mb-8">Driving measurable results through data-driven content, targeted advertising, and global market expansion. Let's build and execute a plan that delivers.</p>
<a href="#plan" class="bg-white text-blue-900 font-bold py-3 px-8 rounded-full text-lg hover:bg-gray-100 transition transform hover:scale-105 shadow-lg">Explore the Marketing Plan</a>
</div>
</section>
<!-- The Plan Section -->
<section id="plan" class="py-16 md:py-24">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl md:text-5xl font-extrabold text-gray-900">The Marketing Plan</h2>
<p class="text-lg text-gray-600 mt-2 max-w-2xl mx-auto">This is a proven, ten-step framework for sustainable growth. Click on each step to see the strategic focus for that phase.</p>
</div>
<!-- Interactive Plan Diagram -->
<div id="plan-diagram" class="grid grid-cols-2 md:grid-cols-5 gap-x-4 gap-y-8 text-center relative">
<!-- Connecting Lines (Decorative) -->
<div class="absolute top-1/4 left-0 w-full h-0.5 bg-gray-200 hidden md:block" style="transform: translateY(-50%);"></div>
<div class="absolute top-3/4 left-0 w-full h-0.5 bg-gray-200 hidden md:block" style="transform: translateY(-50%);"></div>
<!-- Steps -->
<div class="plan-step bg-white p-4 rounded-lg shadow-lg" data-target="plan-overview">
<div class="step-circle relative w-12 h-12 mx-auto mb-2 bg-gray-100 rounded-full border-2 border-transparent flex items-center justify-center"><span class="font-bold text-lg text-blue-900">1</span></div>
<h3 class="font-bold">Market Overview</h3>
</div>
<div class="plan-step bg-white p-4 rounded-lg shadow-lg" data-target="plan-research">
<div class="step-circle relative w-12 h-12 mx-auto mb-2 bg-gray-100 rounded-full border-2 border-transparent flex items-center justify-center"><span class="font-bold text-lg text-blue-900">2</span></div>
<h3 class="font-bold">Market Research</h3>
</div>
<div class="plan-step bg-white p-4 rounded-lg shadow-lg" data-target="plan-audience">
<div class="step-circle relative w-12 h-12 mx-auto mb-2 bg-gray-100 rounded-full border-2 border-transparent flex items-center justify-center"><span class="font-bold text-lg text-blue-900">3</span></div>
<h3 class="font-bold">Target Audience</h3>
</div>
<div class="plan-step bg-white p-4 rounded-lg shadow-lg" data-target="plan-objectives">
<div class="step-circle relative w-12 h-12 mx-auto mb-2 bg-gray-100 rounded-full border-2 border-transparent flex items-center justify-center"><span class="font-bold text-lg text-blue-900">4</span></div>
<h3 class="font-bold">Marketing Objectives</h3>
</div>
<div class="plan-step bg-white p-4 rounded-lg shadow-lg" data-target="plan-strategies">
<div class="step-circle relative w-12 h-12 mx-auto mb-2 bg-gray-100 rounded-full border-2 border-transparent flex items-center justify-center"><span class="font-bold text-lg text-blue-900">5</span></div>
<h3 class="font-bold">Marketing Strategies</h3>
</div>
<div class="plan-step bg-white p-4 rounded-lg shadow-lg" data-target="plan-budget">
<div class="step-circle relative w-12 h-12 mx-auto mb-2 bg-gray-100 rounded-full border-2 border-transparent flex items-center justify-center"><span class="font-bold text-lg text-blue-900">6</span></div>
<h3 class="font-bold">Budget Plan</h3>
</div>
<div class="plan-step bg-white p-4 rounded-lg shadow-lg" data-target="plan-digital">
<div class="step-circle relative w-12 h-12 mx-auto mb-2 bg-gray-100 rounded-full border-2 border-transparent flex items-center justify-center"><span class="font-bold text-lg text-blue-900">7</span></div>
<h3 class="font-bold">Digital Marketing</h3>
</div>
<div class="plan-step bg-white p-4 rounded-lg shadow-lg" data-target="plan-social">
<div class="step-circle relative w-12 h-12 mx-auto mb-2 bg-gray-100 rounded-full border-2 border-transparent flex items-center justify-center"><span class="font-bold text-lg text-blue-900">8</span></div>
<h3 class="font-bold">Social Media</h3>
</div>
<div class="plan-step bg-white p-4 rounded-lg shadow-lg" data-target="plan-influencer">
<div class="step-circle relative w-12 h-12 mx-auto mb-2 bg-gray-100 rounded-full border-2 border-transparent flex items-center justify-center"><span class="font-bold text-lg text-blue-900">9</span></div>
<h3 class="font-bold">Influencer Marketing</h3>
</div>
<div class="plan-step bg-white p-4 rounded-lg shadow-lg" data-target="plan-content">
<div class="step-circle relative w-12 h-12 mx-auto mb-2 bg-gray-100 rounded-full border-2 border-transparent flex items-center justify-center"><span class="font-bold text-lg text-blue-900">10</span></div>
<h3 class="font-bold">Content Marketing</h3>
</div>
</div>
<!-- Plan Details Display Area -->
<div id="plan-details" class="mt-12 bg-white p-8 rounded-xl shadow-xl border border-gray-100 min-h-[10rem] transition-all duration-500">
<div id="plan-default" class="plan-content-item text-center text-gray-500">
<p class="text-xl font-medium">Select a step above to see the details.</p>
</div>
<div id="plan-overview" class="plan-content-item hidden">
<h3 class="text-2xl font-bold text-blue-900 mb-2">Market Overview</h3>
<p>Analyze current market trends, competitor landscape, and identify potential opportunities for growth and disruption. This phase sets the strategic foundation.</p>
</div>
<div id="plan-research" class="plan-content-item hidden">
<h3 class="text-2xl font-bold text-blue-900 mb-2">Market Research</h3>
<p>Conduct in-depth qualitative and quantitative research to understand customer needs, pain points, and behaviors. Gather data to inform product positioning and messaging.</p>
</div>
<div id="plan-audience" class="plan-content-item hidden">
<h3 class="text-2xl font-bold text-blue-900 mb-2">Target Audience</h3>
<p>Develop detailed demographic and psychographic profiles of the ideal customer. This ensures all marketing efforts are highly targeted and resonant.</p>
</div>
<div id="plan-objectives" class="plan-content-item hidden">
<h3 class="text-2xl font-bold text-blue-900 mb-2">Marketing Objectives</h3>
<p>Define clear, measurable, achievable, relevant, and time-bound (SMART) goals. Key objectives include increasing brand awareness, entering new markets, growing the customer base, and boosting sales.</p>
</div>
<div id="plan-strategies" class="plan-content-item hidden">
<h3 class="text-2xl font-bold text-blue-900 mb-2">Marketing Strategies</h3>
<p>Formulate high-level strategies for product differentiation, market penetration, and customer engagement. These strategies will guide the tactical execution.</p>
</div>
<div id="plan-budget" class="plan-content-item hidden">
<h3 class="text-2xl font-bold text-blue-900 mb-2">Budget Plan</h3>
<p>Allocate resources effectively across all marketing channels. Develop a comprehensive budget that maximizes ROI and supports strategic objectives.</p>
</div>
<div id="plan-digital" class="plan-content-item hidden">
<h3 class="text-2xl font-bold text-blue-900 mb-2">Digital Marketing</h3>
<p>Execute integrated digital campaigns including SEO, PPC, email marketing, and marketing automation to drive traffic and generate leads.</p>
</div>
<div id="plan-social" class="plan-content-item hidden">
<h3 class="text-2xl font-bold text-blue-900 mb-2">Social Media</h3>
<p>Create a solid social media strategy focusing on consistent posting schedules, adjusting strategy based on feedback, and actively engaging with the audience to build a loyal community.</p>
</div>
<div id="plan-influencer" class="plan-content-item hidden">
<h3 class="text-2xl font-bold text-blue-900 mb-2">Influencer Marketing</h3>
<p>Develop collaboration strategies and integrate influencer campaigns to leverage trusted voices, build authenticity, and reach wider audiences.</p>
</div>
<div id="plan-content" class="plan-content-item hidden">
<h3 class="text-2xl font-bold text-blue-900 mb-2">Content Marketing</h3>
<p>Build trust through quality content. Focus on creating valuable, relevant material that supports marketing goals, increases visibility, and establishes the brand as an industry leader.</p>
</div>
</div>
</div>
</section>
<!-- Results Dashboard Section -->
<section id="dashboard" class="py-16 md:py-24 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl md:text-5xl font-extrabold text-gray-900">Results & Data Dashboard</h2>
<p class="text-lg text-gray-600 mt-2 max-w-2xl mx-auto">Actions are meaningless without results. Here's a look at the data from past campaigns. Use the filters to explore different metrics.</p>
</div>
<!-- Data Filters -->
<div id="data-filters" class="flex justify-center space-x-2 md:space-x-4 mb-8">
<button class="data-filter-btn active font-medium py-2 px-4 rounded-full transition bg-white shadow" data-chart="growth">Growth Rate</button>
<button class="data-filter-btn font-medium py-2 px-4 rounded-full transition bg-white shadow" data-chart="social">Social Media</button>
<button class="data-filter-btn font-medium py-2 px-4 rounded-full transition bg-white shadow" data-chart="sales">Product & Profit</button>
<button class="data-filter-btn font-medium py-2 px-4 rounded-full transition bg-white shadow" data-chart="marketing">Marketing Data</button>
</div>
<!-- Chart Display -->
<div class="bg-white p-4 sm:p-6 rounded-xl shadow-2xl border border-gray-100">
<div class="chart-container">
<canvas id="mainChart"></canvas>
</div>
</div>
</div>
</section>
<!-- Expertise Section -->
<section id="expertise" class="py-16 md:py-24">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-4xl md:text-5xl font-extrabold text-gray-900">Core Expertise</h2>
<p class="text-lg text-gray-600 mt-2 max-w-2xl mx-auto">A multi-faceted skill set focused on delivering tangible business outcomes.</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
<h3 class="text-xl font-bold text-blue-900 mb-2">Social Media Growth (0 to 150k+)</h3>
<p class="text-gray-600">Mastery of reels, influencer collaborations, and trend-driven content to build massive, engaged audiences from the ground up.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
<h3 class="text-xl font-bold text-blue-900 mb-2">Performance Marketing</h3>
<p class="text-gray-600">Expert in Google, Meta & YouTube Ads, building sales funnels that generate qualified leads and reduce cost-per-acquisition.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
<h3 class="text-xl font-bold text-blue-900 mb-2">Global Market Expansion</h3>
<p class="text-gray-600">Experience launching and scaling brands in diverse international markets, including India, Saudi Arabia, UAE, Canada, and Australia.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
<h3 class="text-xl font-bold text-blue-900 mb-2">Creative Storytelling & Data</h3>
<p class="text-gray-600">A unique blend of creative content strategy and data analysis to improve KPIs and maximize campaign performance.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
<h3 class="text-xl font-bold text-blue-900 mb-2">High-Performance Team Leadership</h3>
<p class="text-gray-600">Proven ability to recruit, train, and lead teams in design, content, and ad management to achieve exceptional results.</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-100">
<h3 class="text-xl font-bold text-blue-900 mb-2">Commitment to Results</h3>
<p class="text-gray-600">Dedicated to clear communication, strategic consistency, and delivering marketing efforts that are always measurable.</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="gradient-bg py-16 md:py-24">
<div class="container mx-auto px-6 max-w-xl text-center">
<h2 class="text-4xl md:text-5xl font-extrabold text-white mb-4">Ready to Grow Your Brand?</h2>
<p class="text-lg text-cyan-200 mb-8">Let's connect and discuss how I can help you achieve your marketing objectives. Fill out the form below to get started.</p>
<div class="bg-white p-8 rounded-xl shadow-2xl text-left">
<form>
<div class="mb-4">
<label for="name" class="block text-gray-700 font-medium mb-1">Name</label>
<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500" required>
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 font-medium mb-1">Email</label>
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500" required>
</div>
<div class="mb-6">
<label for="message" class="block text-gray-700 font-medium mb-1">Message</label>
<textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-cyan-500" required></textarea>
</div>
<button type="submit" class="w-full bg-blue-800 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-700 transition text-lg">Send Strategy Request</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-blue-900 text-white py-6">
<div class="container mx-auto px-6 text-center text-blue-200">
<p>© 2025 Kaif Ali. All Rights Reserved.</p>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Interactive Marketing Plan Logic
const planSteps = document.querySelectorAll('.plan-step');
const planDetailsContainer = document.getElementById('plan-details');
const planContentItems = document.querySelectorAll('.plan-content-item');
planSteps.forEach(step => {
step.addEventListener('click', () => {
const targetId = step.dataset.target;
// Update active step
planSteps.forEach(s => s.classList.remove('active'));
step.classList.add('active');
// Show correct content
planContentItems.forEach(item => {
item.classList.add('hidden');
});
document.getElementById(targetId).classList.remove('hidden');
});
});
// Chart.js Dashboard Logic
const ctx = document.getElementById('mainChart').getContext('2d');
let mainChart;
const chartData = {
growth: {
type: 'bar',
data: {
labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4', 'Quarter 5'],
datasets: [{
label: 'Sales Growth Rate',
data: [10, 20, 25, 32, 41],
backgroundColor: 'rgba(0, 201, 255, 0.6)',
borderColor: 'rgba(0, 201, 255, 1)',
borderWidth: 1
}, {
label: 'Investment',
data: [8, 14, 15, 18, 22],
backgroundColor: 'rgba(10, 54, 157, 0.6)',
borderColor: 'rgba(10, 54, 157, 1)',
borderWidth: 1
}]
},
options: {
scales: { y: { beginAtZero: true } },
plugins: { legend: { position: 'top' }, title: { display: true, text: 'Quarterly Sales Growth Rate' }},
}
},
social: {
type: 'doughnut',
data: {
labels: ['Engagement Rate', 'Follower Growth', 'Reach', 'Conversions'],
datasets: [{
label: 'Social Media KPIs',
data: [73.1, 8.8, 30.9, 20.8],
backgroundColor: ['#00C9FF', '#0A369D', '#4F8A8B', '#FBD1A2'],
}]
},
options: {
plugins: { legend: { position: 'top' }, title: { display: true, text: 'Social Media Statistics' }},
}
},
sales: {
type: 'bar',
data: {
labels: ['Product 01', 'Product 02', 'Product 03', 'Product 04', 'Product 05', 'Product 06'],
datasets: [{
label: 'Product Sales %',
data: [82, 56, 87, 50, 48, 44],
backgroundColor: 'rgba(10, 54, 157, 0.7)',
borderColor: 'rgba(10, 54, 157, 1)',
borderWidth: 1,
indexAxis: 'y',
}]
},
options: {
indexAxis: 'y',
plugins: { legend: { display: false }, title: { display: true, text: 'Product Sales Performance' }},
}
},
marketing: {
type: 'line',
data: {
labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6'],
datasets: [{
label: 'Marketing ROI',
data: [20, 40, 90, 80, 100, 120],
borderColor: '#0A369D',
backgroundColor: 'rgba(10, 54, 157, 0.2)',
fill: true,
tension: 0.3
},{
label: 'Ad Spend',
data: [15, 30, 85, 75, 90, 110],
borderColor: '#00C9FF',
backgroundColor: 'rgba(0, 201, 255, 0.2)',
fill: true,
tension: 0.3
}]
},
options: {
plugins: { legend: { position: 'top' }, title: { display: true, text: 'Marketing Data Trends' }},
scales: { y: { beginAtZero: true } },
}
}
};
function renderChart(chartId) {
if (mainChart) {
mainChart.destroy();
}
const config = chartData[chartId];
mainChart = new Chart(ctx, {
type: config.type,
data: config.data,
options: { ...config.options, responsive: true, maintainAspectRatio: false }
});
}
const filterButtons = document.querySelectorAll('.data-filter-btn');
filterButtons.forEach(button => {
button.addEventListener('click', () => {
filterButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
renderChart(button.dataset.chart);
});
});
// Initial chart render
renderChart('growth');
});
</script>
</body>
</html>