“use client”
import Image from “next/image”
import { useEffect, useState, useMemo } from “react”
import { Badge } from “@/components/ui/badge”
import { Button } from “@/components/ui/button”
import { Card, CardContent } from “@/components/ui/card”
import {
Mail,
Phone,
Target,
Users,
BarChart3,
Lightbulb,
Calendar,
CheckCircle,
Zap,
Menu,
X,
Linkedin,
Instagram,
Facebook,
Youtube,
Award,
TrendingUp,
ArrowUpRight,
} from “lucide-react”
export default function ModernPortfolio() {
const [isScrolled, setIsScrolled] = useState(false)
const [activeSection, setActiveSection] = useState(“home”)
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
const [portfolioCategory, setPortfolioCategory] = useState(“All”)
// External links
const WHATSAPP_LINK = “https://wa.me/923136186876?text=Hi%20Shahzaib%2C%20I%27d%20like%20to%20discuss%20a%20project.”
const MAILTO = “mailto:shahzaib934altaf@gmail.com?subject=Project%20Inquiry”
const CALENDLY = “https://www.calendly.com/shahzaib934altaf”
const SOCIALS = [
{ name: “LinkedIn”, href: “https://www.linkedin.com/in/shahzaib-altaf-29695a325/”, icon: Linkedin },
{ name: “Instagram”, href: “https://www.instagram.com/shahzaib.altaf.100/”, icon: Instagram },
{ name: “Facebook”, href: “https://www.facebook.com/shahzaib.altaf.100/?_rdc=1&_rdr#”, icon: Facebook },
{ name: “YouTube”, href: “https://www.youtube.com/@shahzaib934altaf”, icon: Youtube },
]
const navigationItems = [
{ id: “home”, label: “Home” },
{ id: “about”, label: “About” },
{ id: “experience”, label: “Experience” },
{ id: “skills”, label: “Skills” },
{ id: “portfolio”, label: “Portfolio” },
{ id: “contact”, label: “Contact” },
]
const experiences = [
{
role: “Automation Specialist & Business Development Consultant”,
company: “Freelance / Self-Employed”,
location: “Remote”,
period: “December 2025 – Present”,
type: “current”,
points: [
“Specializing in helping businesses grow via high-impact AI automation and strategic marketing consulting.”,
“Designing and deploying custom AI agents and n8n workflows to optimize lead generation and sales pipelines.”,
“Executing end-to-end client acquisition strategies for global brands and local businesses.”,
],
},
{
role: “Business Development Manager”,
company: “Sparc Digital Solutions”,
location: “Rawalpindi (Hybrid)”,
period: “Oct 2025 – Dec 2025”,
type: “past”,
points: [
“Spearheaded business expansion through targeted email advertising and SEO strategies.”,
“Managed a proposal research team to identify high-value sales opportunities.”,
“Optimized sales volume and ensured sustainable growth through comprehensive market strategies.”,
],
},
{
role: “Marketing Campaign Manager”,
company: “Sparccare”,
location: “Remote (Contract)”,
period: “Oct 2025 – Dec 2025”,
type: “past”,
points: [
“Managed medical billing and RCM marketing campaigns, achieving high engagement and conversion rates.”,
“Collaborated with healthcare clients to address specific medical billing challenges via tailored marketing.”,
“Utilized CRM tools to track campaign performance and manage client interactions efficiently.”,
],
},
{
role: “Business Development Specialist”,
company: “Adminix”,
location: “Onsite”,
period: “2024 – July 2025”,
type: “past”,
points: [
“Managed various virtual assistant tasks across marketing, sales, recruitment, IT, and real estate sectors.”,
“Conducted extensive research and data entry, ensuring accurate lead generation and CRM data management.”,
“Utilized advanced tools like Salesforce and LinkedIn Sales Navigator to develop and maintain contact lists.”,
],
},
{
role: “Virtual Assistant”,
company: “WebXmeta”,
location: “Onsite”,
period: “2022 – 2023”,
type: “past”,
points: [
“Operations: Handled data entry, email marketing, and CRM updates.”,
“Coordination: Managed client schedules and coordinated communications.”,
“Market Research: Conducted competitive market research to identify growth opportunities.”,
],
},
]
const competencies = [
{
icon: Target,
title: “Business Development”,
description: “Strategic planning, market research, and deal closure”,
level: 95,
},
{
icon: Mail,
title: “Email Marketing”,
description: “HubSpot, Klaviyo, MailChimp campaigns”,
level: 92,
},
{
icon: Zap,
title: “Automation Tools”,
description: “Make.com, n8n, HubSpot, and Zapier workflows”,
level: 90,
},
{
icon: BarChart3,
title: “SEO Strategies”,
description: “Inbound lead generation and optimization”,
level: 88,
},
{
icon: Users,
title: “CRM Management”,
description: “Client relationship and sales pipeline”,
level: 90,
},
{
icon: Lightbulb,
title: “Team Leadership”,
description: “Proposal research team management”,
level: 85,
},
]
const education = [
{
title: “Bachelor of Science in Applied Psychology”,
institution: “The Islamia University of Bahawalpur”,
period: “2021 – 2025”,
},
{
title: “F.Sc. Pre-Medical”,
institution: “The Leader College, Bahawalpur”,
period: “2018 – 2020”,
},
]
const certifications = [
{ title: “Email Marketing & CRM”, issuer: “HubSpot Academy” },
{ title: “Make.com Automation”, issuer: “Certified” },
{ title: “Intern Psychologist”, issuer: “Alfalah Rehabilitation Center (3 months)” },
{ title: “Intern Psychologist”, issuer: “QAMC (1 month)” },
]
const projects = [
{
id: 1,
title: “AI-Powered Social Media Hub”,
category: “Automation”,
description:
“Complex n8n workflow integrating Google Gemini, Gmail, and GitHub to automate portfolio communications and social media management.”,
image: “/images/ai-automation-hub.png”,
},
{
id: 2,
title: “Google Ads: $20.5K Conv. Value”,
category: “Digital Marketing”,
description:
“High-performance Google Ads campaign achieving 108 conversions with an optimized cost-per-click and 4.12% click-through rate.”,
image: “/images/google-ads-growth.jpeg”,
},
{
id: 3,
title: “Multi-Currency FB Ads Scaling”,
category: “Digital Marketing”,
description:
“Scaling e-commerce brands across PKR and EUR markets using advanced Facebook Ads Manager strategies, tracking website purchases and ROAS.”,
image: “/images/fb-ads-scaling.jpeg”,
},
{
id: 4,
title: “E-commerce FB Performance”,
category: “Digital Marketing”,
description:
“Driving massive website purchases (97+ per campaign) with optimized cost-per-purchase tracking in the Facebook Ads ecosystem.”,
image: “/images/fb-ads-performance.jpeg”,
},
{
id: 5,
title: “Google Ads Campaign Overview”,
category: “Digital Marketing”,
description:
“Delivering over 940K impressions and hundreds of conversions through strategic audience targeting and campaign management.”,
image: “/images/google-ads-dashboard.jpeg”,
},
{
id: 6,
title: “High-Convert Email Campaign”,
category: “Email Marketing”,
description:
“Medical billing services campaign achieving 47.7% open rate and 100% CTR via Brevo (formerly Sendinblue).”,
image: “/images/sparccare-brevo-campaign.jpg”,
},
{
id: 7,
title: “Automated Lead Enrichment”,
category: “Automation”,
description:
“Custom lead enrichment workflow using Clay and n8n, automating decision-maker identification for B2B sales.”,
image: “/images/clay-lead-table.png”,
},
]
const categories = [“All”, “Automation”, “Email Marketing”, “Digital Marketing”, “Business Development”]
const filteredProjects = useMemo(() => {
if (portfolioCategory === “All”) return projects
return projects.filter((p) => p.category === portfolioCategory)
}, [portfolioCategory])
// Skills for display
const skills = [
“HubSpot”,
“Make.com”,
“MailChimp”,
“Zapier”,
“Klaviyo”,
“Client Relationship Management”,
“Sales Management”,
“Lead Generation”,
“Business Development”,
“Strategic Planning”,
“Team Leadership”,
“Email Marketing”,
“Content Creation”,
“Project Management”,
]
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const id = entry.target.id
if (id) {
// Removed setVisibleSections as it wasn’t used
setActiveSection(id)
}
}
})
},
{ threshold: 0.5 }, // Increased threshold for better active section detection
)
document.querySelectorAll(“section[id]”).forEach((section) => observer.observe(section))
return () => observer.disconnect()
}, [])
useEffect(() => {
const handleScroll = () => setIsScrolled(window.scrollY > 50)
window.addEventListener(“scroll”, handleScroll)
return () => window.removeEventListener(“scroll”, handleScroll)
}, [])
return (
Fully Available for Freelance
Scaling Business
via Automation.
I am an Automation Specialist and Business Development Consultant helping companies grow through
high-impact marketing strategies and intelligent workflow design.
{ label: “Accounts Handled”, value: “50+”, color: “bg-blue-500” },
{ label: “ROI Increase”, value: “45%”, color: “bg-green-500” },
].map((stat) => (
{stat.label}
{stat.value}
))}
{/* About Section */}
Professional Summary
Strategic Leader
Spearheading business expansion through targeted email advertising, SEO strategies, and data-driven
decision making.
Revenue Growth
Proven track record of boosting client acquisition and engagement through strategic campaigns and
workflow automation.
Automation Expert
Specialized in Make.com, n8n, HubSpot, and Zapier to streamline workflows and scale operations
efficiently.
{/* Core Competencies */}
Core Competencies
“Business Development”,
“Digital Marketing”,
“Strategic Planning”,
“Email Marketing”,
“Proposal Writing”,
“SEO Strategies”,
“Upwork Bidding”,
“Inbound Lead Generation”,
“Sales Pipeline Management”,
“Content Promotion”,
“Team Leadership”,
“CRM Management”,
].map((item, i) => (
{item}
))}
Recent Experience.
Helping businesses navigate the transition from manual work to intelligent automation systems.
{exp.role}
{exp.company}
{exp.type === “current” && (
)}
-
{exp.points.map((point, pIdx) => (
-
{point}
))}
))}
{/* Skills Section */}
Skills & Tools
const Icon = skill.icon
return (
{skill.title}
{skill.description}
{skill.level}%
)
})}
{/* Tools Grid */}
Tools & Technologies
{skill}
))}
{/* Education Section */}
Education & Certifications
Education
{edu.title}
{edu.institution}
{edu.period}
))}
{/* Certifications */}
Certifications & Internships
{cert.title}
{cert.issuer}
))}
{/* Languages */}
Languages
{ lang: “English”, level: “Fluent” },
{ lang: “Urdu”, level: “Fluent” },
{ lang: “Saraiki”, level: “Fluent” },
].map((item, idx) => (
{item.lang}
{item.level}
))}
Selected Client Work.
Real results delivered across multiple domains.
))}
{project.category}
{project.title}
{project.description}
))}
{/* Contact Section */}
Let’s Work Together
Ready to scale your business? Let’s discuss how I can help.
)
}