bender/e66982f1-4536-47fa-b248-a704e8d74bea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bob AI: Update hero text, add animated hanging card, and link projec

Browse Source
This commit is contained in:
kudinDmitriyUp
2026-06-14 11:56:18 +00:00
parent a6e672ac83
commit 52411c8122
8 changed files with 351 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
src/pages/HomePage.tsx
View File

@@ -1,224 +1,33 @@
import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
import ContactCta from '@/components/sections/contact/ContactCta';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
import HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
// AUTO-GENERATED shell by per-section-migrate.
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
// files directly. Non-block content (wrappers, non-inlinable sections) is
// preserved inline; extracted section blocks become <XSection/> refs.
export default function HomePage() {
import React from 'react';
import HeroSection from './HomePage/sections/Hero';
import AboutSection from './HomePage/sections/About';
import SkillsSection from './HomePage/sections/Skills';
import ProjectsSection from './HomePage/sections/Projects';
import MetricsSection from './HomePage/sections/Metrics';
import TestimonialsSection from './HomePage/sections/Testimonials';
import ContactSection from './HomePage/sections/Contact';
export default function HomePage(): React.JSX.Element {
return (
<>
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroSplitMediaGrid
tag="Developer's Workshop"
title="Forging Tomorrow's Web Experience"
description="I craft immersive, high-performance digital solutions that bridge the gap between imagination and reality."
primaryButton={{
text: "Explore Projects",
href: "#projects",
}}
secondaryButton={{
text: "Contact Me",
href: "#contact",
}}
items={[
{
imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-expert-working-with-technology-neon-lights_23-2151645569.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/young-manager-standing-up-relieve-back-pain_482257-67482.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<>
<HeroSection />
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutTextSplit
title="The Artisan Behind the Code"
descriptions={[
"Passionate MERN stack developer dedicated to building responsive, user-centric, and scalable web applications. My process blends rigorous technical engineering with a deep aesthetic appreciation for UI/UX.",
"Every line of code I write is an exercise in optimization and clean architecture, ensuring that digital products not only look great but perform flawlessly.",
]}
primaryButton={{
text: "View Journey",
href: "#experience",
}}
/>
</SectionErrorBoundary>
</div>
<AboutSection />
<div id="skills" data-section="skills">
<SectionErrorBoundary name="skills">
<FeaturesRevealCards
tag="Expertise"
title="Tools of the Trade"
description="The technologies I use to forge robust solutions."
items={[
{
title: "Frontend Mastery",
description: "Expert in React, Tailwind, Framer Motion for highly interactive UI experiences.",
imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-website-content-layout-design-illustraion-notebook_53876-167124.jpg",
},
{
title: "Backend Architecture",
description: "Building powerful Node.js and Express APIs that handle scale and performance.",
imageSrc: "http://img.b2bpic.net/free-photo/business-chart-visual-graphics-report-concept_53876-125580.jpg",
},
{
title: "Database Optimization",
description: "Designing clean MongoDB schemas for lightning-fast data retrieval.",
imageSrc: "http://img.b2bpic.net/free-photo/freelancing-developer-hearing-audiobooks-while-building-software_482257-115444.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<SkillsSection />
<div id="projects" data-section="projects">
<SectionErrorBoundary name="projects">
<FeaturesImageBento
tag="Featured Blueprints"
title="The Workshop Projects"
description="A curated collection of my most impactful full-stack developments."
items={[
{
title: "Beautiva",
description: "MERN cosmetics platform with comprehensive user reviews.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-pink-jacket-with-shopping-bags-tablet_23-2148316491.jpg",
},
{
title: "Firasah",
description: "Academic platform showcasing advanced learning modules.",
imageSrc: "http://img.b2bpic.net/free-photo/team-leader-showing-infographics-data-interactive-board_482257-90921.jpg",
},
{
title: "Blog Genie",
description: "Full-stack MERN blog platform with auth and CRUD.",
imageSrc: "http://img.b2bpic.net/free-vector/instagram-stories-interface-template_23-2148422901.jpg",
},
{
title: "Green Cart",
description: "Scalable e-commerce platform with payment integration.",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-supply-chain-representation_23-2149827235.jpg",
},
{
title: "Dashboard UI",
description: "Modern analytical dashboard interface concepts.",
imageSrc: "http://img.b2bpic.net/free-photo/people-using-digital-device-while-meeting_23-2149085920.jpg",
},
{
title: "Security Engine",
description: "Robust authentication and encrypted logic implementation.",
imageSrc: "http://img.b2bpic.net/free-photo/computer-security-data-protection-concept_107791-15659.jpg",
},
{
title: "API Documentation",
description: "Standardized REST API documentation implementation.",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-man-working-late-night_23-2150280992.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<ProjectsSection />
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsMediaCards
tag="Performance Stats"
title="Development Impact"
description="Quantifiable metrics from my recent build sessions."
metrics={[
{
value: "10k+",
title: "Lines of Code",
description: "Written and maintained across all active project repositories.",
imageSrc: "http://img.b2bpic.net/free-vector/gradient-triangle-molecule-logo-technology-design_53876-116026.jpg",
},
{
value: "99.9%",
title: "Uptime",
description: "Ensured through rigorous deployment testing and CI/CD pipelines.",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-studying-infographics-performance-metrics_482257-122632.jpg",
},
{
value: "200ms",
title: "Average Response",
description: "Performance tuning on full-stack API request resolution times.",
imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126353.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<MetricsSection />
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialOverlayCards
tag="Social Proof"
title="Colleague Feedback"
description="What partners and mentors say about my work ethic."
testimonials={[
{
name: "Alex Rivet",
role: "Senior Engineer",
company: "TechInnovate",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-black-working-laptop-cafe_23-2147962625.jpg",
},
{
name: "Sarah Chen",
role: "PM",
company: "StartupFlow",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
},
{
name: "Marcus Thorne",
role: "CTO",
company: "CloudNexus",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-park_23-2148162600.jpg",
},
{
name: "Elena Ross",
role: "Dev Lead",
company: "LogicCore",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/disabled-business-manager-wheelchair-looking-tired-front_482257-2229.jpg",
},
{
name: "David W.",
role: "Founder",
company: "VentureCo",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/positive-hipster-entrepreneur-it-expert-software-developer_74855-3635.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<TestimonialsSection />
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Get in Touch"
text="Ready to discuss your next big project or build something incredible together?"
primaryButton={{
text: "Contact Me",
href: "mailto:hello@example.com",
}}
secondaryButton={{
text: "View GitHub",
href: "https://github.com",
}}
/>
</SectionErrorBoundary>
</div>
<ContactSection />
</>
);
}

26
src/pages/HomePage/sections/About.tsx Normal file
View File

@@ -0,0 +1,26 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "about" section.
import React from 'react';
import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function AboutSection(): React.JSX.Element {
return (
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutTextSplit
title="The Artisan Behind the Code"
descriptions={[
"Passionate MERN stack developer dedicated to building responsive, user-centric, and scalable web applications. My process blends rigorous technical engineering with a deep aesthetic appreciation for UI/UX.",
"Every line of code I write is an exercise in optimization and clean architecture, ensuring that digital products not only look great but perform flawlessly.",
]}
primaryButton={{
text: "View Journey",
href: "#experience",
}}
/>
</SectionErrorBoundary>
</div>
);
}

27
src/pages/HomePage/sections/Contact.tsx Normal file
View File

@@ -0,0 +1,27 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "contact" section.
import React from 'react';
import ContactCta from '@/components/sections/contact/ContactCta';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ContactSection(): React.JSX.Element {
return (
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Get in Touch"
text="Ready to discuss your next big project or build something incredible together?"
primaryButton={{
text: "Contact Me",
href: "mailto:hello@example.com",
}}
secondaryButton={{
text: "View GitHub",
href: "https://github.com",
}}
/>
</SectionErrorBoundary>
</div>
);
}

121
src/pages/HomePage/sections/Hero.tsx Normal file
View File

@@ -0,0 +1,121 @@
/* eslint-disable */
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
import Button from "@/components/ui/Button";
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
import TextAnimation from "@/components/ui/TextAnimation";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
import ScrollReveal from "@/components/ui/ScrollReveal";
import { motion } from "motion/react";
const primaryButton = {
text: "Explore Projects",
href: "#projects"
};
const secondaryButton = {
text: "Contact Me",
href: "#contact"
};
const items = [
{
imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-expert-working-with-technology-neon-lights_23-2151645569.jpg"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/young-manager-standing-up-relieve-back-pain_482257-67482.jpg"
}
];
type HeroSplitMediaGridProps = {
tag: string;
title: string;
description: string;
primaryButton: { text: string; href: string };
secondaryButton: { text: string; href: string };
items: [
{ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never },
{ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never }
];
};
const HeroInline = () => {
return (
<section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0">
<HeroBackgroundSlot />
<div className="flex flex-col md:flex-row items-center gap-12 md:gap-20 w-content-width mx-auto">
<div className="w-full md:w-1/2">
<div className="flex flex-col items-center md:items-start gap-3">
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
<p>{"Mehak Bhutto • Portfolio 2026"}</p>
</div>
<TextAnimation
text={"Designing the Future of Digital Experiences."}
variant="slide-up"
gradientText={true}
tag="h1"
className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance"
/>
<TextAnimation
text={"Creative Developer & UI/UX Engineer crafting immersive, high-performance web applications with a focus on motion and interaction."}
variant="slide-up"
gradientText={false}
tag="p"
className="md:max-w-8/10 text-lg md:text-xl leading-snug text-center md:text-left text-balance"
/>
<div className="flex flex-wrap max-md:justify-center gap-3 mt-2 md:mt-3">
<Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
</div>
</div>
</div>
<div className="w-full md:w-1/2 flex justify-center items-center perspective-[1200px]">
<motion.div
className="relative w-full max-w-sm aspect-[3/4] rounded-2xl border border-border/50 bg-card p-4 shadow-2xl flex flex-col gap-4 origin-top"
animate={{
rotateZ: [-1.5, 1.5, -1.5],
rotateY: [-3, 3, -3],
y: [-8, 8, -8]
}}
transition={{
repeat: Infinity,
duration: 5,
ease: "easeInOut"
}}
style={{ transformStyle: "preserve-3d" }}
>
<div className="absolute -top-16 left-1/2 -translate-x-1/2 w-0.5 h-16 bg-gradient-to-b from-transparent to-border"></div>
<div className="absolute -top-2 left-1/2 -translate-x-1/2 w-4 h-4 rounded-full bg-primary-cta shadow-[0_0_15px_var(--primary-cta)]"></div>
<div className="w-full h-3/5 rounded-xl overflow-hidden relative">
<ImageOrVideo imageSrc={items[0].imageSrc} className="w-full h-full object-cover" />
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
<div className="absolute bottom-4 left-4 text-white font-medium text-lg">Featured Work</div>
</div>
<div className="flex-1 flex flex-col justify-between">
<div>
<h3 className="text-2xl font-semibold text-foreground">Spatial Interface</h3>
<p className="text-base text-muted-foreground mt-1">Next-gen interaction design</p>
</div>
<div className="flex items-center justify-between">
<span className="text-sm font-mono text-primary-cta">2026.01</span>
<div className="w-10 h-10 rounded-full bg-primary-cta/10 flex items-center justify-center text-primary-cta">
↗
</div>
</div>
</div>
</motion.div>
</div>
</div>
</section>
);
};
export default function HeroSection() {
return (
<div data-webild-section="hero" id="hero">
<HeroInline />
</div>
);
}

40
src/pages/HomePage/sections/Metrics.tsx Normal file
View File

@@ -0,0 +1,40 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "metrics" section.
import React from 'react';
import MetricsMediaCards from '@/components/sections/metrics/MetricsMediaCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function MetricsSection(): React.JSX.Element {
return (
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsMediaCards
tag="Performance Stats"
title="Development Impact"
description="Quantifiable metrics from my recent build sessions."
metrics={[
{
value: "10k+",
title: "Lines of Code",
description: "Written and maintained across all active project repositories.",
imageSrc: "http://img.b2bpic.net/free-vector/gradient-triangle-molecule-logo-technology-design_53876-116026.jpg",
},
{
value: "99.9%",
title: "Uptime",
description: "Ensured through rigorous deployment testing and CI/CD pipelines.",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-studying-infographics-performance-metrics_482257-122632.jpg",
},
{
value: "200ms",
title: "Average Response",
description: "Performance tuning on full-stack API request resolution times.",
imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126353.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

21
src/pages/HomePage/sections/Projects.tsx Normal file
View File

@@ -0,0 +1,21 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "projects" section.
import React from 'react';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ProjectsSection(): React.JSX.Element {
return (
<div id="projects" data-section="projects">
<SectionErrorBoundary name="projects">
<FeaturesImageBento
tag="Featured Blueprints"
title="The Workshop Projects"
description="A curated collection of my most impactful full-stack developments."
items={[{"title":"Beautiva","href":"/projects/beautiva","imageSrc":"http://img.b2bpic.net/free-photo/woman-pink-jacket-with-shopping-bags-tablet_23-2148316491.jpg","description":"MERN cosmetics platform with comprehensive user reviews."},{"description":"Academic platform showcasing advanced learning modules.","href":"/projects/firasah","imageSrc":"http://img.b2bpic.net/free-photo/team-leader-showing-infographics-data-interactive-board_482257-90921.jpg","title":"Firasah"},{"href":"/projects/blog-genie","imageSrc":"http://img.b2bpic.net/free-vector/instagram-stories-interface-template_23-2148422901.jpg","description":"Full-stack MERN blog platform with auth and CRUD.","title":"Blog Genie"},{"title":"Green Cart","description":"Scalable e-commerce platform with payment integration.","href":"/projects/green-cart","imageSrc":"http://img.b2bpic.net/free-photo/still-life-supply-chain-representation_23-2149827235.jpg"},{"href":"/projects/dashboard-ui","imageSrc":"http://img.b2bpic.net/free-photo/people-using-digital-device-while-meeting_23-2149085920.jpg","description":"Modern analytical dashboard interface concepts.","title":"Dashboard UI"},{"description":"Robust authentication and encrypted logic implementation.","href":"/projects/security-engine","imageSrc":"http://img.b2bpic.net/free-photo/computer-security-data-protection-concept_107791-15659.jpg","title":"Security Engine"},{"description":"Standardized REST API documentation implementation.","href":"/projects/api-documentation","imageSrc":"http://img.b2bpic.net/free-photo/top-view-man-working-late-night_23-2150280992.jpg","title":"API Documentation"}]}
/>
</SectionErrorBoundary>
</div>
);
}

37
src/pages/HomePage/sections/Skills.tsx Normal file
View File

@@ -0,0 +1,37 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "skills" section.
import React from 'react';
import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function SkillsSection(): React.JSX.Element {
return (
<div id="skills" data-section="skills">
<SectionErrorBoundary name="skills">
<FeaturesRevealCards
tag="Expertise"
title="Tools of the Trade"
description="The technologies I use to forge robust solutions."
items={[
{
title: "Frontend Mastery",
description: "Expert in React, Tailwind, Framer Motion for highly interactive UI experiences.",
imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-website-content-layout-design-illustraion-notebook_53876-167124.jpg",
},
{
title: "Backend Architecture",
description: "Building powerful Node.js and Express APIs that handle scale and performance.",
imageSrc: "http://img.b2bpic.net/free-photo/business-chart-visual-graphics-report-concept_53876-125580.jpg",
},
{
title: "Database Optimization",
description: "Designing clean MongoDB schemas for lightning-fast data retrieval.",
imageSrc: "http://img.b2bpic.net/free-photo/freelancing-developer-hearing-audiobooks-while-building-software_482257-115444.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

57
src/pages/HomePage/sections/Testimonials.tsx Normal file
View File

@@ -0,0 +1,57 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "testimonials" section.
import React from 'react';
import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function TestimonialsSection(): React.JSX.Element {
return (
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialOverlayCards
tag="Social Proof"
title="Colleague Feedback"
description="What partners and mentors say about my work ethic."
testimonials={[
{
name: "Alex Rivet",
role: "Senior Engineer",
company: "TechInnovate",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-black-working-laptop-cafe_23-2147962625.jpg",
},
{
name: "Sarah Chen",
role: "PM",
company: "StartupFlow",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
},
{
name: "Marcus Thorne",
role: "CTO",
company: "CloudNexus",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-park_23-2148162600.jpg",
},
{
name: "Elena Ross",
role: "Dev Lead",
company: "LogicCore",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/disabled-business-manager-wheelchair-looking-tired-front_482257-2229.jpg",
},
{
name: "David W.",
role: "Founder",
company: "VentureCo",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/positive-hipster-entrepreneur-it-expert-software-developer_74855-3635.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}