bender/5802b5b5-cd0d-40a5-b3c3-25460691b6f0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2_1781705119768 into main #2

Merged
bender merged 1 commits from version_2_1781705119768 into main 2026-06-17 14:07:51 +00:00
Conversation 0 Commits 1 Files Changed 9 +221 -142
9 changed files with 221 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/index.css
View File

@@ -5,15 +5,15 @@
:root {
/* @colorThemes/lightTheme/grayNavyBlue */
--background: #050012;
--card: #040121;
--foreground: #f0e6ff;
--primary-cta: #c89bff;
--background: #050505;
--card: #111111;
--foreground: #ffffff;
--primary-cta: #41C0F2;
--primary-cta-text: #050012;
--secondary-cta: #1d123b;
--secondary-cta-text: #f0e6ff;
--accent: #684f7b;
--background-accent: #65417c;
--secondary-cta: #1a1a1a;
--secondary-cta-text: #ffffff;
--accent: #41C0F2;
--background-accent: #0f2b38;
/* @layout/border-radius/rounded */
--radius: 0.5rem;

156
src/pages/HomePage.tsx
View File

@@ -1,145 +1,33 @@
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
import ContactCta from '@/components/sections/contact/ContactCta';
import FeaturesBorderGlow from '@/components/sections/features/FeaturesBorderGlow';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import HeroCenteredLogos from '@/components/sections/hero/HeroCenteredLogos';
import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
import { Box, Code, Layers } from "lucide-react";
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 FeaturesSection from './HomePage/sections/Features';
import WorkSection from './HomePage/sections/Work';
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">
<HeroCenteredLogos
avatarsSrc={[
"http://img.b2bpic.net/free-photo/smiley-woman-office-holding-tablet_23-2148356266.jpg", "http://img.b2bpic.net/free-photo/bearded-young-man-casual-shirt-standing-with-laptop-hands_93675-134479.jpg", "http://img.b2bpic.net/free-photo/happy-bearded-man-brown-suit-wearing-glasses-looking-smiling-cheerfully_141793-111775.jpg", "http://img.b2bpic.net/free-photo/freelancing-is-good-idea-independent-person_329181-12349.jpg"]}
avatarText="Trusted by industry experts"
title="Muhammad Abdullah"
description="Crafting fully immersive, 3D interactive web experiences and high-performance front-end solutions."
primaryButton={{
text: "View Projects", href: "#work"}}
secondaryButton={{
text: "Contact Me", href: "#contact"}}
names={[
"Frontend", "3D Animation", "Web Development", "UI/UX Design"]}
imageSrc="http://img.b2bpic.net/free-photo/3d-render-low-poly-network-communications-background-design_1048-12972.jpg"
/>
</SectionErrorBoundary>
</div>
<>
<HeroSection />
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutMediaOverlay
tag="About Me"
title="Front-End Developer & 3D Specialist"
description="I blend technical precision with artistic 3D animation. My mission is to push the boundaries of the browser, turning static designs into fluid, responsive, and award-winning digital experiences."
imageSrc="http://img.b2bpic.net/free-photo/woman-with-crossed-arms-looking-camera_23-2147762391.jpg"
/>
</SectionErrorBoundary>
</div>
<AboutSection />
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesBorderGlow
tag="Technical Expertise"
title="Built for Modern Performance"
description="I utilize cutting-edge technology stacks to build highly performant, accessible, and interactive web applications."
features={[
{
icon: Code,
title: "React & Next.js", description: "Building scalable, performant frontend architectures."},
{
icon: Box,
title: "Three.js & WebGL", description: "Delivering complex 3D experiences inside the browser."},
{
icon: Layers,
title: "GSAP Animations", description: "Complex motion design and fluid interaction transitions."},
]}
/>
</SectionErrorBoundary>
</div>
<FeaturesSection />
<div id="work" data-section="work">
<SectionErrorBoundary name="work">
<FeaturesImageBento
tag="Selected Work"
title="Portfolio Highlights"
description="A collection of my latest 3D web experiments and client projects."
items={[
{
title: "SaaS Dashboard", description: "Data visualization with 3D elements.", imageSrc: "http://img.b2bpic.net/free-vector/trendy-y2k-design-style-poster-template-set_107791-26292.jpg"},
{
title: "Mobile App UI", description: "Interactive mobile navigation prototype.", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-nutritional-counter-app_23-2149880604.jpg"},
{
title: "Architectural Studio", description: "Minimalist gallery with 3D transitions.", imageSrc: "http://img.b2bpic.net/free-photo/studio-background-concept-abstract-empty-light-gradient-purple-studio-room-background-product-plain-studio-background_1258-54472.jpg"},
{
title: "E-Commerce Store", description: "Interactive 3D product showcase.", imageSrc: "http://img.b2bpic.net/free-photo/ramadan-boxes-front-side_187299-37628.jpg"},
{
title: "Creative Portfolio", description: "Fluid web design with motion effects.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345406.jpg"},
{
title: "Analytics System", description: "High-tech node visualizations.", imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-background-with-low-poly-plexus-design_1048-18244.jpg"},
{
title: "Game Portal", description: "Immersive gaming interactive portal.", imageSrc: "http://img.b2bpic.net/free-photo/adha-signages-front-side-white-background_187299-39129.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
<WorkSection />
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsSimpleCards
tag="Performance"
title="Development Impact"
description="Delivering quality code that drives measurable results."
metrics={[
{
value: "100+", description: "Components built"},
{
value: "99", description: "Lighthouse performance score"},
{
value: "50k+", description: "Active users served"},
]}
/>
</SectionErrorBoundary>
</div>
<MetricsSection />
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialQuoteCards
tag="Feedback"
title="What Clients Say"
description="Transforming creative ideas into reality through collaborative innovation."
testimonials={[
{
name: "Sarah Jenkins", role: "Creative Lead", quote: "Muhammad's 3D animation skills are unmatched in the industry.", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg"},
{
name: "David Vane", role: "CTO", quote: "The most professional frontend developer I've worked with.", imageSrc: "http://img.b2bpic.net/free-photo/company-worker-browsing-internet-research-project-using-computer-create-business-report-with-charts-data-analyzing-network-information-web-presentation-handheld-shot_482257-50935.jpg"},
{
name: "Maria Lopez", role: "Product Designer", quote: "His eye for detail is incredible, he brings designs to life.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-sitting-chair_23-2149241411.jpg"},
{
name: "Kevin Chen", role: "Founder", quote: "Efficient, talented, and highly visionary. Highly recommend.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-woman-couple-blooming-garden_1157-35772.jpg"},
{
name: "Linda Wu", role: "Marketing Director", quote: "Brought our brand presence into the future with 3D magic.", imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-lady-with-short-curly-hair-wireless-earphones_574295-1285.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
<TestimonialsSection />
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Let's Connect"
text="Ready to build the future of the web?"
primaryButton={{
text: "Contact Me", href: "mailto:muhammad@example.com"}}
secondaryButton={{
text: "Download CV", href: "#"}}
/>
</SectionErrorBoundary>
</div>
<ContactSection />
</>
);
}

21
src/pages/HomePage/sections/About.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 "about" section.
import React from 'react';
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function AboutSection(): React.JSX.Element {
return (
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutMediaOverlay
tag="About Me"
title="Front-End Developer & 3D Specialist"
description="I blend technical precision with artistic 3D animation. My mission is to push the boundaries of the browser, turning static designs into fluid, responsive, and award-winning digital experiences."
imageSrc="http://img.b2bpic.net/free-photo/woman-with-crossed-arms-looking-camera_23-2147762391.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

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

@@ -0,0 +1,23 @@
// 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="Let's Connect"
text="Ready to build the future of the web?"
primaryButton={{
text: "Contact Me", href: "mailto:muhammad@example.com"}}
secondaryButton={{
text: "Download CV", href: "#"}}
/>
</SectionErrorBoundary>
</div>
);
}

32
src/pages/HomePage/sections/Features.tsx Normal file
View File

@@ -0,0 +1,32 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "features" section.
import React from 'react';
import FeaturesBorderGlow from '@/components/sections/features/FeaturesBorderGlow';
import { Box, Code, Layers } from "lucide-react";
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function FeaturesSection(): React.JSX.Element {
return (
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesBorderGlow
tag="Technical Expertise"
title="Built for Modern Performance"
description="I utilize cutting-edge technology stacks to build highly performant, accessible, and interactive web applications."
features={[
{
icon: Code,
title: "React & Next.js", description: "Building scalable, performant frontend architectures."},
{
icon: Box,
title: "Three.js & WebGL", description: "Delivering complex 3D experiences inside the browser."},
{
icon: Layers,
title: "GSAP Animations", description: "Complex motion design and fluid interaction transitions."},
]}
/>
</SectionErrorBoundary>
</div>
);
}

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

@@ -0,0 +1,19 @@
// Created by add_section_from_catalog (HeroSplit).
import React from 'react';
import HeroSplit from '@/components/sections/hero/HeroSplit';
export default function HeroSection(): React.JSX.Element {
return (
<div data-webild-section="hero" id="hero">
<HeroSplit
secondaryButton={{"href":"#contact","text":"Contact Me"}}
title="Muhammad Abdullah"
description="Front-End Developer crafting fully immersive, 3D interactive web experiences and high-performance solutions."
primaryButton={{"href":"#work","text":"View Projects"}}
imageSrc="https://storage.googleapis.com/webild/users/user_3BcOL3UbY4IN589MnmC4i4ccLur/uploaded-1781705050378-rx246wlx.jpg"
tag="Front-End Developer"
/>
</div>
);
}

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

@@ -0,0 +1,28 @@
// 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 MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function MetricsSection(): React.JSX.Element {
return (
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsSimpleCards
tag="Performance"
title="Development Impact"
description="Delivering quality code that drives measurable results."
metrics={[
{
value: "100+", description: "Components built"},
{
value: "99", description: "Lighthouse performance score"},
{
value: "50k+", description: "Active users served"},
]}
/>
</SectionErrorBoundary>
</div>
);
}

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

@@ -0,0 +1,32 @@
// 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 TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function TestimonialsSection(): React.JSX.Element {
return (
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialQuoteCards
tag="Feedback"
title="What Clients Say"
description="Transforming creative ideas into reality through collaborative innovation."
testimonials={[
{
name: "Sarah Jenkins", role: "Creative Lead", quote: "Muhammad's 3D animation skills are unmatched in the industry.", imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg"},
{
name: "David Vane", role: "CTO", quote: "The most professional frontend developer I've worked with.", imageSrc: "http://img.b2bpic.net/free-photo/company-worker-browsing-internet-research-project-using-computer-create-business-report-with-charts-data-analyzing-network-information-web-presentation-handheld-shot_482257-50935.jpg"},
{
name: "Maria Lopez", role: "Product Designer", quote: "His eye for detail is incredible, he brings designs to life.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-sitting-chair_23-2149241411.jpg"},
{
name: "Kevin Chen", role: "Founder", quote: "Efficient, talented, and highly visionary. Highly recommend.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-woman-couple-blooming-garden_1157-35772.jpg"},
{
name: "Linda Wu", role: "Marketing Director", quote: "Brought our brand presence into the future with 3D magic.", imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-lady-with-short-curly-hair-wireless-earphones_574295-1285.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
);
}

36
src/pages/HomePage/sections/Work.tsx Normal file
View File

@@ -0,0 +1,36 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "work" section.
import React from 'react';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function WorkSection(): React.JSX.Element {
return (
<div id="work" data-section="work">
<SectionErrorBoundary name="work">
<FeaturesImageBento
tag="Selected Work"
title="Portfolio Highlights"
description="A collection of my latest 3D web experiments and client projects."
items={[
{
title: "SaaS Dashboard", description: "Data visualization with 3D elements.", imageSrc: "http://img.b2bpic.net/free-vector/trendy-y2k-design-style-poster-template-set_107791-26292.jpg"},
{
title: "Mobile App UI", description: "Interactive mobile navigation prototype.", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-nutritional-counter-app_23-2149880604.jpg"},
{
title: "Architectural Studio", description: "Minimalist gallery with 3D transitions.", imageSrc: "http://img.b2bpic.net/free-photo/studio-background-concept-abstract-empty-light-gradient-purple-studio-room-background-product-plain-studio-background_1258-54472.jpg"},
{
title: "E-Commerce Store", description: "Interactive 3D product showcase.", imageSrc: "http://img.b2bpic.net/free-photo/ramadan-boxes-front-side_187299-37628.jpg"},
{
title: "Creative Portfolio", description: "Fluid web design with motion effects.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345406.jpg"},
{
title: "Analytics System", description: "High-tech node visualizations.", imageSrc: "http://img.b2bpic.net/free-photo/3d-abstract-background-with-low-poly-plexus-design_1048-18244.jpg"},
{
title: "Game Portal", description: "Immersive gaming interactive portal.", imageSrc: "http://img.b2bpic.net/free-photo/adha-signages-front-side-white-background_187299-39129.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
);
}