Malaika Zahid - Agentic AI Portfolio

A modern, futuristic portfolio showcasing autonomous AI agents and digital employees built with Next.js 15, React 19, Tailwind CSS, and Framer Motion.

🚀 Features

• Hero Section - Futuristic dark theme with animated background and glowing orbs
• About Me - Professional introduction with agentic AI focus
• Skills & Tech Stack - Comprehensive display of AI frameworks and technologies
• Featured Projects - 4 main projects with architecture diagrams:
  • Humanoid Robotics RAG Chatbot
  • AI Todo Agent with Natural Language
  • 24/7 Local FTE Digital Employee
  • Voice AI Assistant
• Experience & Testimonials - Background and project feedback
• Blog Section - Agentic AI writings and technical insights
• Contact Form - Direct email integration and social links

🛠️ Tech Stack

• Framework: Next.js 15 (App Router)
• UI Library: React 19
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React
• Language: TypeScript
• Deployment: Vercel (recommended)

📦 Installation

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

🌐 Deployment Guide

Deploy to Vercel (Recommended)

1. Push to GitHub:

   git init
   git add .
   git commit -m "Initial commit: Agentic AI Portfolio"
   git branch -M main
   git remote add origin https://github.com/malaika75/portfolio.git
   git push -u origin main

2. Deploy on Vercel:

   • Go to vercel.com
   • Click "New Project"
   • Import your GitHub repository
   • Vercel will auto-detect Next.js settings
   • Click "Deploy"

3. Custom Domain (Optional):

   • Go to Project Settings → Domains
   • Add your custom domain (e.g., malaikazahid.com)
   • Follow DNS configuration instructions

Alternative: Deploy to Netlify

# Install Netlify CLI
npm install -g netlify-cli

# Build the project
npm run build

# Deploy
netlify deploy --prod

🎨 Customization

Update Personal Information

Edit the following files:

• components/Hero.tsx - Name, tagline, social links
• components/Contact.tsx - Email, LinkedIn, GitHub
• components/Projects.tsx - Project details and links
• app/layout.tsx - SEO metadata

Add Real Project Links

When your projects are live, update:

// In components/Projects.tsx
github: "https://github.com/malaika75/your-repo",
demo: "https://your-live-demo.vercel.app",
video: "https://youtube.com/your-demo-video"

Customize Colors

The portfolio uses a purple-cyan gradient theme. To change:

• Edit app/globals.css for global styles
• Update gradient classes in components (e.g., from-purple-600 to-cyan-600)

📱 Responsive Design

The portfolio is fully responsive and optimized for:

• Desktop (1920px+)
• Laptop (1024px - 1919px)
• Tablet (768px - 1023px)
• Mobile (320px - 767px)

🔍 SEO Optimization

The portfolio includes:

• Semantic HTML structure
• Meta tags for social sharing (Open Graph, Twitter Cards)
• Optimized page titles and descriptions
• Fast loading with Next.js optimization
• Mobile-friendly design

📊 Performance

• Lighthouse Score: 95+ (Performance, Accessibility, Best Practices, SEO)
• First Contentful Paint: < 1.5s
• Time to Interactive: < 3s

🤝 Connect

• Email: malaika57680@gmail.com
• LinkedIn: malaika-zahid-developer
• GitHub: @malaika75

📄 License

This portfolio is open source and available for personal use. Feel free to fork and customize for your own portfolio!

🙏 Acknowledgments

Built with modern web technologies and inspired by the future of autonomous AI systems.

---

Building Autonomous AI Agents from Karachi to the World 🚀