Merge version_1 into main #1

Merged
bender merged 1 commits from version_1 into main 2026-04-20 13:37:47 +00:00

View File

@@ -29,407 +29,159 @@ export default function LandingPage() {
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "About",
id: "#about",
},
{
name: "Projects",
id: "#projects",
},
{
name: "Experience",
id: "#experience",
},
{
name: "Contact",
id: "#contact",
},
]}
brandName="ZD"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "About", id: "#about" },
{ name: "Projects", id: "#projects" },
{ name: "Experience", id: "#experience" },
{ name: "Contact", id: "#contact" },
]}
brandName="ZD"
button={{ text: "Get Started", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
background={{
variant: "plain",
}}
title="Full-stack Developer & Digital Builder"
description="I'm Zineeddine, a master's student in Algeria. I craft scalable, technical, and practical solutions for healthcare, e-commerce, and enterprise management."
testimonials={[
{
name: "Sarah Ahmed",
handle: "@sarah-a",
testimonial: "Zineeddine's technical depth is impressive. He delivered our inventory system on time and with incredible precision.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-outdoors-successful-business-person_23-2148763862.jpg",
},
{
name: "Omar K.",
handle: "@omark",
testimonial: "A master of systems. Our grade management platform is stable, intuitive, and extremely fast.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/experienced-senior-female-executive-eyeglasses_1262-5027.jpg",
},
{
name: "Layla B.",
handle: "@laylab",
testimonial: "His work on our booking app revolutionized how we handle clients. Professional, efficient, and skilled.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-busy-cheerful-man_329181-14520.jpg",
},
{
name: "Yassine M.",
handle: "@yassinem",
testimonial: "Practical and curious. He solved technical hurdles that other developers ignored for months.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-man-black-shirt-poses-against-dark-background-standing-studio_613910-15100.jpg",
},
{
name: "Kenza F.",
handle: "@kenzaf",
testimonial: "Serious about quality. The diabetes management tool we built is now our clinic's backbone.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-business-leader-window_1262-5674.jpg",
},
]}
buttons={[
{
text: "View Projects",
href: "#projects",
},
{
text: "Contact Me",
href: "#contact",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/3d-network-connections-background-with-low-poly-plexus-design_1048-12346.jpg"
mediaAnimation="blur-reveal"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/portrait-bearded-man-art-studio_23-2149705893.jpg",
alt: "Portrait of bearded man in an art studio",
},
{
src: "http://img.b2bpic.net/free-photo/stylish-handsome-caucasian-man-posing-looking-camera-isolated-dark-background_613910-15062.jpg",
alt: "A stylish handsome caucasian man posing and looking at camera isolated on a dark background.",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-young-man-studio-shot_641386-461.jpg",
alt: "portrait of young man. studio shot",
},
{
src: "http://img.b2bpic.net/free-photo/businessman-close-up_1139-650.jpg",
alt: " businessman close up",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-attractive-young-businesswoman_329181-15813.jpg",
alt: "Portrait of attractive young businesswoman",
},
]}
marqueeItems={[
{
type: "image",
src: "http://img.b2bpic.net/free-photo/connecting-lines-dots-with-floating-particles_1048-12013.jpg",
alt: "connecting lines and dots with floating particles",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/connecting-lines-dots-with-floating-particles_1048-12010.jpg",
alt: "connecting lines and dots with floating particles",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/3d-abstract-dots-lines-connected_1048-11946.jpg",
alt: "3D abstract dots and lines connected",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/3d-network-communications-data-technology-background-with-low-poly-plexus-design_1048-16344.jpg",
alt: "3D network communications data technology background with low poly plexus design",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/abstract-pixelated-background_23-2149547619.jpg",
alt: "Abstract pixelated background",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
background={{ variant: "plain" }}
title="Full-stack Developer & Digital Builder"
description="I'm Zineeddine, a master's student in Algeria. I craft scalable, technical, and practical solutions for healthcare, e-commerce, and enterprise management."
testimonials={[
{ name: "Sarah Ahmed", handle: "@sarah-a", testimonial: "Zineeddine's technical depth is impressive. He delivered our inventory system on time and with incredible precision.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-outdoors-successful-business-person_23-2148763862.jpg" },
{ name: "Omar K.", handle: "@omark", testimonial: "A master of systems. Our grade management platform is stable, intuitive, and extremely fast.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/experienced-senior-female-executive-eyeglasses_1262-5027.jpg" },
{ name: "Layla B.", handle: "@laylab", testimonial: "His work on our booking app revolutionized how we handle clients. Professional, efficient, and skilled.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-busy-cheerful-man_329181-14520.jpg" },
{ name: "Yassine M.", handle: "@yassinem", testimonial: "Practical and curious. He solved technical hurdles that other developers ignored for months.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-man-black-shirt-poses-against-dark-background-standing-studio_613910-15100.jpg" },
{ name: "Kenza F.", handle: "@kenzaf", testimonial: "Serious about quality. The diabetes management tool we built is now our clinic's backbone.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-business-leader-window_1262-5674.jpg" }
]}
buttons={[
{ text: "View Projects", href: "#projects" },
{ text: "Contact Me", href: "#contact" }
]}
imageSrc="http://img.b2bpic.net/free-photo/3d-network-connections-background-with-low-poly-plexus-design_1048-12346.jpg"
mediaAnimation="blur-reveal"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="Technical Focus"
metrics={[
{
icon: Code,
label: "Dev Experience",
value: "4+ Years",
},
{
icon: Server,
label: "Systems Built",
value: "12+",
},
{
icon: GraduationCap,
label: "Academic Focus",
value: "Master's",
},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="Technical Focus"
metrics={[
{ icon: Code, label: "Dev Experience", value: "4+ Years" },
{ icon: Server, label: "Systems Built", value: "12+" },
{ icon: GraduationCap, label: "Academic Focus", value: "Master's" }
]}
metricsAnimation="slide-up"
/>
</div>
<div id="skills" data-section="skills">
<FeatureCardNineteen
textboxLayout="split"
useInvertedBackground={false}
features={[
{
tag: "Backend",
title: "Node.js & Python",
subtitle: "High performance",
description: "Building robust server-side apps, complex APIs, and database structures.",
imageSrc: "http://img.b2bpic.net/free-photo/computer-scientist-server-farm-ensuring-compliance-with-industry-standards_482257-123806.jpg",
},
{
tag: "Frontend",
title: "React & Native",
subtitle: "Modern UI/UX",
description: "Crafting fluid, accessible, and high-performance interfaces across platforms.",
imageSrc: "http://img.b2bpic.net/free-photo/male-graphic-designer-using-digital-tablet_1170-1092.jpg",
},
{
tag: "Tools",
title: "SQL & Supabase",
subtitle: "Data Centric",
description: "Optimizing queries, managing relational databases, and scaling cloud storage.",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-solving-startup-problems-with-laptop-archived-documents-looking-annual-statistics-report-find-issue-young-analyst-reviewing-papers-executive-strategy-plan_482257-65811.jpg",
},
]}
title="Core Technical Stack"
description="Versatile and practical: I combine backend stability with frontend elegance."
/>
</div>
<div id="skills" data-section="skills">
<FeatureCardNineteen
textboxLayout="split"
useInvertedBackground={false}
features={[
{ tag: "Backend", title: "Node.js & Python", subtitle: "High performance", description: "Building robust server-side apps, complex APIs, and database structures.", imageSrc: "http://img.b2bpic.net/free-photo/computer-scientist-server-farm-ensuring-compliance-with-industry-standards_482257-123806.jpg" },
{ tag: "Frontend", title: "React & Native", subtitle: "Modern UI/UX", description: "Crafting fluid, accessible, and high-performance interfaces across platforms.", imageSrc: "http://img.b2bpic.net/free-photo/male-graphic-designer-using-digital-tablet_1170-1092.jpg" },
{ tag: "Tools", title: "SQL & Supabase", subtitle: "Data Centric", description: "Optimizing queries, managing relational databases, and scaling cloud storage.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-solving-startup-problems-with-laptop-archived-documents-looking-annual-statistics-report-find-issue-young-analyst-reviewing-papers-executive-strategy-plan_482257-65811.jpg" }
]}
title="Core Technical Stack"
description="Versatile and practical: I combine backend stability with frontend elegance."
/>
</div>
<div id="projects" data-section="projects">
<ProductCardThree
animationType="slide-up"
textboxLayout="split"
gridVariant="bento-grid"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Clothing E-commerce",
price: "High Scale",
imageSrc: "http://img.b2bpic.net/free-photo/shopping-online-shopaholics-e-commerce-e-shopping-concept_53876-120673.jpg",
},
{
id: "p2",
name: "Healthcare Clinic Dashboard",
price: "Secure",
imageSrc: "http://img.b2bpic.net/free-photo/worker-holding-device-with-greenscreen_482257-76711.jpg",
},
{
id: "p3",
name: "Inventory Desktop App",
price: "Robust",
imageSrc: "http://img.b2bpic.net/free-photo/company-analyst-studying-business-activity-progress-achieving-strategic-goals_482257-91239.jpg",
},
{
id: "p4",
name: "Student Management System",
price: "Automated",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345417.jpg",
},
{
id: "p5",
name: "Barber Booking Website",
price: "UX Optimized",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-laptop-with-shopping-carts-mock-up_23-2148283844.jpg",
},
{
id: "p6",
name: "Clinic Health Tool",
price: "Patient Focused",
imageSrc: "http://img.b2bpic.net/free-photo/scientists-conduct-visual-data-tests-using-chroma-key-smartphone_482257-126579.jpg",
},
]}
title="Selected Case Studies"
description="A glimpse into systems I've built and deployed."
/>
</div>
<div id="projects" data-section="projects">
<ProductCardThree
animationType="slide-up"
textboxLayout="split"
gridVariant="bento-grid"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Clothing E-commerce", price: "High Scale", imageSrc: "http://img.b2bpic.net/free-photo/shopping-online-shopaholics-e-commerce-e-shopping-concept_53876-120673.jpg" },
{ id: "p2", name: "Healthcare Clinic Dashboard", price: "Secure", imageSrc: "http://img.b2bpic.net/free-photo/worker-holding-device-with-greenscreen_482257-76711.jpg" },
{ id: "p3", name: "Inventory Desktop App", price: "Robust", imageSrc: "http://img.b2bpic.net/free-photo/company-analyst-studying-business-activity-progress-achieving-strategic-goals_482257-91239.jpg" },
{ id: "p4", name: "Student Management System", price: "Automated", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345417.jpg" },
{ id: "p5", name: "Barber Booking Website", price: "UX Optimized", imageSrc: "http://img.b2bpic.net/free-photo/front-view-laptop-with-shopping-carts-mock-up_23-2148283844.jpg" },
{ id: "p6", name: "Clinic Health Tool", price: "Patient Focused", imageSrc: "http://img.b2bpic.net/free-photo/scientists-conduct-visual-data-tests-using-chroma-key-smartphone_482257-126579.jpg" }
]}
title="Selected Case Studies"
description="A glimpse into systems I've built and deployed."
/>
</div>
<div id="experience" data-section="experience">
<MetricCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "2020",
title: "Started Dev",
description: "Learned HTML/CSS and JS.",
icon: Rocket,
},
{
id: "m2",
value: "2022",
title: "Full-stack Focus",
description: "React & Node.js mastery.",
icon: Zap,
},
{
id: "m3",
value: "2024",
title: "Master's Degree",
description: "Research in system design.",
icon: GraduationCap,
},
]}
title="Timeline & Growth"
description="My journey from fundamental curiosity to building enterprise systems."
/>
</div>
<div id="experience" data-section="experience">
<MetricCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "2020", title: "Started Dev", description: "Learned HTML/CSS and JS.", icon: Rocket },
{ id: "m2", value: "2022", title: "Full-stack Focus", description: "React & Node.js mastery.", icon: Zap },
{ id: "m3", value: "2024", title: "Master's Degree", description: "Research in system design.", icon: GraduationCap }
]}
title="Timeline & Growth"
description="My journey from fundamental curiosity to building enterprise systems."
/>
</div>
<div id="services" data-section="services">
<FaqDouble
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "Web Development",
content: "Custom responsive web apps with React and Node.js.",
},
{
id: "f2",
title: "Desktop Software",
content: "Powerful desktop apps using C# and .NET.",
},
{
id: "f3",
title: "Healthcare Systems",
content: "Secure, reliable, and compliant healthcare management software.",
},
{
id: "f4",
title: "E-commerce Platforms",
content: "Full-stack stores optimized for performance and conversion.",
},
]}
title="Services Offered"
description="What can I build for you?"
faqsAnimation="slide-up"
/>
</div>
<div id="services" data-section="services">
<FaqDouble
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "Web Development", content: "Custom responsive web apps with React and Node.js." },
{ id: "f2", title: "Desktop Software", content: "Powerful desktop apps using C# and .NET." },
{ id: "f3", title: "Healthcare Systems", content: "Secure, reliable, and compliant healthcare management software." },
{ id: "f4", title: "E-commerce Platforms", content: "Full-stack stores optimized for performance and conversion." }
]}
title="Services Offered"
description="What can I build for you?"
faqsAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Sarah Ahmed",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-wearing-apron_23-2149007471.jpg",
},
{
id: "t2",
name: "Omar K.",
imageSrc: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg",
},
{
id: "t3",
name: "Layla B.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-desk_329181-14546.jpg",
},
{
id: "t4",
name: "Yassine M.",
imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg",
},
{
id: "t5",
name: "Kenza F.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453360.jpg",
},
]}
cardTitle="What They Say"
cardTag="Feedback"
cardAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "Sarah Ahmed", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-wearing-apron_23-2149007471.jpg" },
{ id: "t2", name: "Omar K.", imageSrc: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg" },
{ id: "t3", name: "Layla B.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-desk_329181-14546.jpg" },
{ id: "t4", name: "Yassine M.", imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg" },
{ id: "t5", name: "Kenza F.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453360.jpg" }
]}
cardTitle="What They Say"
cardTag="Feedback"
cardAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "radial-gradient",
}}
tag="Let's Talk"
title="Build Something Remarkable"
description="I'm always open to discussing new projects, technical challenges, or potential collaborations."
buttons={[
{
text: "Email Me",
href: "mailto:zineeddine@example.com",
},
{
text: "GitHub Profile",
href: "https://github.com",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{ variant: "radial-gradient" }}
tag="Let's Talk"
title="Build Something Remarkable"
description="I'm always open to discussing new projects, technical challenges, or potential collaborations."
buttons={[
{ text: "Email Me", href: "mailto:zineeddine@example.com" },
{ text: "GitHub Profile", href: "https://github.com" }
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-301826.jpg"
logoText="ZD"
columns={[
{
title: "Navigate",
items: [
{
label: "About",
href: "#about",
},
{
label: "Projects",
href: "#projects",
},
{
label: "Contact",
href: "#contact",
},
],
},
{
title: "Social",
items: [
{
label: "GitHub",
href: "https://github.com",
},
{
label: "LinkedIn",
href: "https://linkedin.com",
},
],
},
]}
copyrightText="© 2025 Zineeddine Abdelbaki Daoudi."
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/abstract-geometric-background-shapes-texture_1194-301826.jpg"
logoText="ZD"
columns={[
{ title: "Navigate", items: [{ label: "About", href: "#about" }, { label: "Projects", href: "#projects" }, { label: "Contact", href: "#contact" }] },
{ title: "Social", items: [{ label: "GitHub", href: "https://github.com" }, { label: "LinkedIn", href: "https://linkedin.com" }] }
]}
copyrightText="© 2025 Zineeddine Abdelbaki Daoudi."
/>
</div>
</ReactLenis>
</ThemeProvider>
);