Rebrand portfolio as Agentic AI Consultant with new sections and features (#5)

* Initial plan

* Update all references from old username to new username and add redirect

Co-authored-by: AmmarAhm3d <125185290+AmmarAhm3d@users.noreply.github.com>

* Refactor redirect to use DOM manipulation instead of document.write()

Co-authored-by: AmmarAhm3d <125185290+AmmarAhm3d@users.noreply.github.com>

* Rebuild with Astro: new hero tagline, case studies, Calendly booking, WhatsApp button

Co-authored-by: AmmarAhm3d <125185290+AmmarAhm3d@users.noreply.github.com>

* Fix username references in Header, favicon-instructions, and copilot-instructions

Co-authored-by: AmmarAhm3d <125185290+AmmarAhm3d@users.noreply.github.com>

* Improve WhatsApp floating button, reduce hero text size, and enhance typography

Co-authored-by: AmmarAhm3d <125185290+AmmarAhm3d@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: AmmarAhm3d <125185290+AmmarAhm3d@users.noreply.github.com>

Author: Copilot

.github/copilot-instructions.md

@@ -1,58 +1,45 @@
-<!-- Copilot / AI coding agent instructions for AmmarAhmedl200961.github.io -->
-# Quick Agent Guide — AmmarAhmedl200961.github.io
-
-This repository is a simple personal GitHub Pages site. The guidance below is focused, actionable, and specific to this codebase so an AI coding agent can be immediately productive.
-
-1) Big picture
-- Purpose: a static personal site (portfolio/resume) hosted on GitHub Pages.
-- Entry point: `index.html` is the canonical site source (full HTML document). Styling is in `styles.css`.
-- Jekyll hint: `_config.yml` references a `remote_theme: pages-themes/cayman@v0.2.0`. However, the repo contains a full `index.html` which takes precedence for the site's content.
-
-2) Key files and what to change
-- `index.html`: edit content, sections, links, and project entries. Projects live in the `<section id="projects">` list — add `<li>` items there.
-- `styles.css`: site styling and color palette. Keep class names and structure consistent with the HTML.
-- `_config.yml`: contains the remote theme setting. Avoid changing unless you understand GitHub Pages/Jekyll implications.
-- `README.md`: repo description.
-- Static assets (images): referenced from the repository root (e.g., `IMG-20191018-WA0004.jpg`). Add images to repo root or update paths accordingly.
-
-3) Developer workflows (how to preview and validate changes)
-- Fast static preview (no Jekyll required): run from repo root:
-  - `python3 -m http.server 8000` then open `http://localhost:8000`.
-- Jekyll preview (optional): `_config.yml` indicates use of a remote theme. There is no `Gemfile` in this repo, so the Jekyll workflow is optional — if you need theme rendering locally, add a `Gemfile` and install bundler, then:
-  - `bundle install`
-  - `bundle exec jekyll serve --livereload`
-  Note: GitHub Pages will build the site on push; local Jekyll preview requires adding the appropriate dependencies.
-
-4) Conventions & patterns to follow
-- Keep `index.html` as the single-page source; the repo uses direct HTML rather than templates/partials.
-- Use CDN links already present (Bootstrap, shields) unless replacing with local assets — updating CDNs changes load characteristics and should be tested.
-- Images are referenced with relative paths from the repo root. Verify file names and case-sensitivity (Linux filesystem).
-
-5) Integration points, external dependencies, and links
-- External CDNs: Bootstrap CSS and shields (badges) are loaded from external URLs in `index.html`.
-- External projects: project links point to other GitHub repos — do not rewrite those unless intentionally redirecting.
-
-6) Safe, repository-specific edit examples
-- Add a project entry (inside `<section id="projects">`):
-
-```html
-<li>
-  <strong><a href="https://github.com/OWNER/REPO">Project Title</a></strong>
-  <p>One-line description. Keep formatting consistent with existing items.</p>
-</li>
+<!-- Copilot / AI coding agent instructions for AmmarAhm3d.github.io -->
+# Quick Agent Guide — AmmarAhm3d.github.io
+
+Personal portfolio site for Ammar Ahmed - Agentic AI Consultant.
+
+## Tech Stack
+- **Astro** - Fast static site generator
+- **React** - Interactive components
+- **Tailwind CSS** - Styling
+- **Framer Motion** - Animations
+- **Three.js** - 3D graphics
+
+## Project Structure
+- `src/pages/` - Astro pages
+- `src/components/` - React components (Hero, CaseStudies, Skills, Timeline, Projects, Booking, Footer, WhatsAppButton)
+- `src/layouts/` - Layout templates
+- `src/utils/` - Utility functions (GitHub API)
+- `public/` - Static assets
+
+## Key Features
+- Hero section with tagline "I build Agentic AI systems that replace entire teams"
+- Case studies with realistic metrics
+- Tech stack and skills display
+- Education and experience timeline
+- GitHub projects integration
+- Calendly embed for booking consultations
+- WhatsApp floating button
+
+## Development
+```bash
+npm install
+npm run dev
 ```
 
-- Add an image: put the image file at repo root (e.g., `assets/my-photo.jpg` or root), then reference `src="assets/my-photo.jpg"` and commit both the HTML and image together.
-
-7) What to avoid or watch for
-- Don't remove or alter `_config.yml` remote_theme without validating local builds — it can change theme behavior on GitHub Pages.
-- Watch image filenames and paths (case-sensitive). If images show 404 in browser, confirm file is committed and path matches exactly.
-
-8) No tests / CI
-- This repository contains no test suite or CI. Validate changes with a local static server and browser checks (console errors, 404s).
+## Build
+```bash
+npm run build
+```
 
-9) Commit and PR guidance for agents
-- Make small, atomic commits (one logical change per PR). Title PRs clearly (e.g., "Add new project: Film Recommendation System").
-- For content changes, include a screenshot or link to a deployed preview in the PR description when possible.
+Static output to `dist/` directory for GitHub Pages.
 
-If anything here is unclear or you'd like more examples (e.g., sample PR body, suggested `Gemfile` for Jekyll preview), tell me which part to expand and I will iterate.
+## Links
+- Calendly: calendly.com/ammarahm3d
+- WhatsApp: +923365442539
+- GitHub: github.com/AmmarAhm3d

README.md

@@ -1,14 +1,26 @@
-# AmmarAhmedl200961.github.io
+# AmmarAhm3d.github.io
 
-Welcome to my personal portfolio site - built with Astro, React, and Three.js.
+Personal portfolio site - Agentic AI Consultant
+
+**"I build Agentic AI systems that replace entire teams"**
 
 ## Tech Stack
 
-- **Astro** - Static site generator
+- **Astro** - Fast static site generator
 - **React** - Interactive components
 - **Tailwind CSS** - Styling
-- **Three.js** - 3D graphics
 - **Framer Motion** - Animations
+- **Three.js** - 3D graphics
+
+## Features
+
+- Hero with compelling tagline and stats
+- Case studies showcasing AI automation projects
+- Tech stack and skills display
+- Education and experience timeline
+- GitHub projects integration
+- Calendly integration for booking consultations
+- WhatsApp floating button for quick contact
 
 ## Development
 
@@ -23,4 +35,7 @@ npm run dev
 npm run build
 ```
 
-The built site will be in the `dist/` directory.
+## Links
+
+- Calendly: [calendly.com/ammarahm3d](https://calendly.com/ammarahm3d)
+- WhatsApp: [+92 336 5442539](https://api.whatsapp.com/send/?phone=%2B923365442539)

astro.config.mjs

@@ -4,7 +4,7 @@ import tailwind from '@astrojs/tailwind';
 
 // https://astro.build/config
 export default defineConfig({
-  site: 'https://ammarahmedl200961.github.io',
+  site: 'https://ammarahm3d.github.io',
   integrations: [
     react(),
     tailwind({

public/favicon-instructions.txt

@@ -3,4 +3,4 @@ To see the favicon:
 2. Close and reopen the browser tab
 3. Or use incognito/private mode
 
-The favicon.svg is live at: https://ammarahmedl200961.github.io/favicon.svg
+The favicon.svg is live at: https://ammarahm3d.github.io/favicon.svg

src/components/About.jsx

@@ -59,24 +59,24 @@ const About = () => {
           animate={isInView ? "visible" : "hidden"}
         >
           {/* Section Header */}
-          <motion.div variants={itemVariants} className="text-center mb-16">
-            <h2 className="text-5xl md:text-6xl font-bold text-white mb-6">
+          <motion.div variants={itemVariants} className="text-center mb-12">
+            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-4">
               About <span className="bg-clip-text text-transparent bg-gradient-to-r from-accent to-neon-blue">Me</span>
             </h2>
-            <div className="w-24 h-1 bg-gradient-to-r from-accent to-neon-blue mx-auto mb-8"></div>
+            <div className="w-20 h-1 bg-gradient-to-r from-accent to-neon-blue mx-auto mb-6"></div>
           </motion.div>
 
           {/* Main Bio */}
-          <motion.div variants={itemVariants} className="mb-16">
-            <div className="bg-white/5 backdrop-blur-lg rounded-2xl p-8 md:p-12 border border-white/10 shadow-[0_0_50px_rgba(0,255,136,0.1)]">
-              <p className="text-xl md:text-2xl text-gray-300 leading-relaxed mb-6">
+          <motion.div variants={itemVariants} className="mb-12">
+            <div className="bg-white/5 backdrop-blur-lg rounded-2xl p-6 md:p-10 border border-white/10 shadow-[0_0_50px_rgba(0,255,136,0.1)]">
+              <p className="text-lg md:text-xl text-gray-300 leading-relaxed mb-4">
                 Aspiring <span className="text-accent font-semibold">Data Scientist</span> with expertise in{' '}
                 <span className="text-neon-blue font-semibold">machine learning</span>,{' '}
                 <span className="text-neon-purple font-semibold">deep learning</span>,{' '}
                 <span className="text-accent font-semibold">NLP</span>, and{' '}
                 <span className="text-neon-blue font-semibold">cloud computing</span>.
               </p>
-              <p className="text-lg md:text-xl text-gray-400 leading-relaxed mb-6">
+              <p className="text-base md:text-lg text-gray-400 leading-relaxed mb-4">
                 Passionate about leveraging data to solve complex problems and deliver{' '}
                 <span className="text-accent font-semibold">actionable insights</span> that drive real-world impact.
                 From neural networks to generative models, I transform data into intelligent systems.

src/components/Booking.jsx

@@ -0,0 +1,127 @@
+import { motion, useInView } from 'framer-motion';
+import { useRef, useEffect, useState } from 'react';
+import { Calendar, Clock, CheckCircle } from 'lucide-react';
+
+const Booking = () => {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, margin: "-100px" });
+  const [isCalendlyLoaded, setIsCalendlyLoaded] = useState(false);
+
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.src = 'https://assets.calendly.com/assets/external/widget.js';
+    script.async = true;
+    script.onload = () => setIsCalendlyLoaded(true);
+    document.body.appendChild(script);
+
+    return () => {
+      const existingScript = document.querySelector('script[src="https://assets.calendly.com/assets/external/widget.js"]');
+      if (existingScript) {
+        document.body.removeChild(existingScript);
+      }
+    };
+  }, []);
+
+  const benefits = [
+    "Discover AI automation opportunities in your business",
+    "Get a custom implementation roadmap",
+    "Learn about realistic ROI expectations",
+    "No commitment required"
+  ];
+
+  return (
+    <section id="booking" ref={ref} className="py-24 px-4 bg-gradient-to-br from-secondary via-dark-bg to-primary relative overflow-hidden">
+      <div className="absolute top-0 left-1/4 w-96 h-96 bg-accent/10 rounded-full blur-[150px]" />
+      <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-neon-purple/10 rounded-full blur-[150px]" />
+
+      <div className="max-w-7xl mx-auto relative z-10">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.6 }}
+          className="text-center mb-16"
+        >
+          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-accent/10 border border-accent/30 text-accent text-xs font-medium mb-4">
+            <Calendar size={14} />
+            Free Consultation
+          </div>
+          <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white mb-4">
+            Book Your <span className="bg-clip-text text-transparent bg-gradient-to-r from-accent to-neon-blue">Free 15-min</span> AI Consultation
+          </h2>
+          <p className="text-base md:text-lg text-gray-400 max-w-2xl mx-auto">
+            Let's discuss how AI agents can transform your business operations
+          </p>
+        </motion.div>
+
+        <div className="grid lg:grid-cols-2 gap-12 items-start">
+          {/* Benefits */}
+          <motion.div
+            initial={{ opacity: 0, x: -50 }}
+            animate={isInView ? { opacity: 1, x: 0 } : {}}
+            transition={{ delay: 0.2, duration: 0.6 }}
+          >
+            <h3 className="text-2xl font-bold text-white mb-8">
+              What you'll get from this call:
+            </h3>
+            <div className="space-y-6">
+              {benefits.map((benefit, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={isInView ? { opacity: 1, x: 0 } : {}}
+                  transition={{ delay: 0.3 + index * 0.1, duration: 0.5 }}
+                  className="flex items-start gap-4"
+                >
+                  <div className="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center flex-shrink-0 mt-0.5">
+                    <CheckCircle size={18} className="text-accent" />
+                  </div>
+                  <p className="text-lg text-gray-300">{benefit}</p>
+                </motion.div>
+              ))}
+            </div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={isInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ delay: 0.7, duration: 0.5 }}
+              className="mt-12 p-6 bg-gradient-to-r from-accent/10 to-neon-blue/10 border border-accent/20 rounded-2xl"
+            >
+              <div className="flex items-center gap-3 mb-4">
+                <Clock size={24} className="text-accent" />
+                <span className="text-xl font-bold text-white">15 Minutes</span>
+              </div>
+              <p className="text-gray-400">
+                Quick, focused call to understand your needs and explore possibilities.
+                No sales pitch, just honest advice.
+              </p>
+            </motion.div>
+          </motion.div>
+
+          {/* Calendly Embed */}
+          <motion.div
+            initial={{ opacity: 0, x: 50 }}
+            animate={isInView ? { opacity: 1, x: 0 } : {}}
+            transition={{ delay: 0.4, duration: 0.6 }}
+            className="bg-white/5 backdrop-blur-sm rounded-2xl border border-white/10 overflow-hidden"
+          >
+            <div 
+              className="calendly-inline-widget" 
+              data-url="https://calendly.com/ammarahm3d?hide_gdpr_banner=1&background_color=0a0e27&text_color=ffffff&primary_color=00ff88"
+              style={{ minWidth: '320px', height: '700px' }}
+            />
+            {!isCalendlyLoaded && (
+              <div className="flex items-center justify-center h-[700px]">
+                <div className="text-center">
+                  <div className="w-12 h-12 border-4 border-accent/30 border-t-accent rounded-full animate-spin mx-auto mb-4" />
+                  <p className="text-gray-400">Loading calendar...</p>
+                </div>
+              </div>
+            )}
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Booking;