Merge version_1 into main

Merge version_1 into main
This commit was merged in pull request #2.
This commit is contained in:
2026-05-23 00:54:22 +00:00

View File

@@ -16,366 +16,163 @@ import { Cloud, Code, RefreshCw, Server, ShieldCheck } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="compact"
sizing="mediumLargeSizeLargeTitles"
background="floatingGradient"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="light"
defaultButtonVariant="shift-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="compact"
sizing="mediumLargeSizeLargeTitles"
background="floatingGradient"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "About",
id: "#about",
},
{
name: "Experience",
id: "#experience",
},
{
name: "Skills",
id: "#skills",
},
{
name: "Contact",
id: "#contact",
},
]}
brandName="Rami Zeaiter"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "About", id: "#about" },
{ name: "Experience", id: "#experience" },
{ name: "Skills", id: "#skills" },
{ name: "Contact", id: "#contact" },
]}
brandName="Rami Zeaiter"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{
variant: "plain",
}}
title="Senior Full-Stack Engineer"
description="13+ years of building scalable web systems. Specializing in Java, Node.js, and React architecture. Open to high-impact hybrid and on-site roles in Germany."
kpis={[
{
value: "13+",
label: "Years Experience",
},
{
value: "50+",
label: "Projects Delivered",
},
{
value: "5",
label: "Languages Spoken",
},
]}
enableKpiAnimation={true}
buttons={[
{
text: "View Experience",
href: "#about",
},
{
text: "Contact Me",
href: "#contact",
},
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E6SXp9kUTzHHdscuhBMEZGTEdU/uploaded-1779497600307-296y5fei.jpg?_wi=1"
mediaAnimation="blur-reveal"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/confident-pretty-young-woman-looking-camera_1262-16156.jpg",
alt: "Team member 1",
},
{
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-posing_23-2149271087.jpg",
alt: "Team member 2",
},
{
src: "http://img.b2bpic.net/free-photo/confident-handsome-businessman-suit-glasses-looking-serious_176420-31755.jpg",
alt: "Team member 3",
},
{
src: "http://img.b2bpic.net/free-photo/fashionable-successful-female-entrepreneur-grey-coat-glasses-standing-half-turned-with-hands-pockets-smiling-friendly_176420-24691.jpg",
alt: "Team member 4",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5391.jpg",
alt: "Team member 5",
},
]}
avatarText="Trusted by engineering leads across global teams"
marqueeItems={[
{
type: "text-icon",
text: "Full-Stack Web",
icon: Code,
},
{
type: "text-icon",
text: "Cloud Infra",
icon: Cloud,
},
{
type: "text-icon",
text: "Enterprise Apps",
icon: Server,
},
{
type: "text-icon",
text: "CI/CD Pipeline",
icon: RefreshCw,
},
{
type: "text-icon",
text: "Secure Systems",
icon: ShieldCheck,
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{ variant: "plain" }}
title="Senior Full-Stack Engineer"
description="13+ years of building scalable web systems. Specializing in Java, Node.js, and React architecture. Open to high-impact hybrid and on-site roles in Germany."
kpis={[
{ value: "13+", label: "Years Experience" },
{ value: "50+", label: "Projects Delivered" },
{ value: "5", label: "Languages Spoken" },
]}
enableKpiAnimation={true}
buttons={[
{ text: "View Experience", href: "#about" },
{ text: "Contact Me", href: "#contact" },
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E6SXp9kUTzHHdscuhBMEZGTEdU/uploaded-1779497600307-296y5fei.jpg"
mediaAnimation="blur-reveal"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/confident-pretty-young-woman-looking-camera_1262-16156.jpg", alt: "Team member 1" },
{ src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-posing_23-2149271087.jpg", alt: "Team member 2" },
{ src: "http://img.b2bpic.net/free-photo/confident-handsome-businessman-suit-glasses-looking-serious_176420-31755.jpg", alt: "Team member 3" },
{ src: "http://img.b2bpic.net/free-photo/fashionable-successful-female-entrepreneur-grey-coat-glasses-standing-half-turned-with-hands-pockets-smiling-friendly_176420-24691.jpg", alt: "Team member 4" },
{ src: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5391.jpg", alt: "Team member 5" },
]}
avatarText="Trusted by engineering leads across global teams"
marqueeItems={[
{ type: "text-icon", text: "Full-Stack Web", icon: Code },
{ type: "text-icon", text: "Cloud Infra", icon: Cloud },
{ type: "text-icon", text: "Enterprise Apps", icon: Server },
{ type: "text-icon", text: "CI/CD Pipeline", icon: RefreshCw },
{ type: "text-icon", text: "Secure Systems", icon: ShieldCheck },
]}
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={true}
title="Building Reliable Systems"
description="From Web3 gaming platforms to car rental marketplaces, I design software that scales. My focus is on maintainable architecture and end-to-end product delivery using modern full-stack methodologies."
metrics={[
{
value: "Cloud",
title: "Scalable Infra",
},
{
value: "Web3",
title: "Blockchain Integration",
},
{
value: "SAP",
title: "Enterprise Solutions",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/mature-businesswoman-working-with-documents-while-sitting-her-workplace_171337-5895.jpg?_wi=1"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
useInvertedBackground={true}
title="Building Reliable Systems"
description="From Web3 gaming platforms to car rental marketplaces, I design software that scales. My focus is on maintainable architecture and end-to-end product delivery using modern full-stack methodologies."
metrics={[
{ value: "Cloud", title: "Scalable Infra" },
{ value: "Web3", title: "Blockchain Integration" },
{ value: "SAP", title: "Enterprise Solutions" },
]}
imageSrc="http://img.b2bpic.net/free-photo/mature-businesswoman-working-with-documents-while-sitting-her-workplace_171337-5895.jpg"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
/>
</div>
<div id="skills" data-section="skills">
<FeatureCardTwentyThree
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
id: "s1",
title: "Full-Stack Web",
tags: [
"React",
"Next.js",
"Node.js",
"Java",
],
imageSrc: "http://img.b2bpic.net/free-photo/gear-front-side-white-background_187299-40157.jpg?_wi=1",
},
{
id: "s2",
title: "Mobile & Enterprise",
tags: [
"Flutter",
"React Native",
"SAP S/4HANA",
],
imageSrc: "http://img.b2bpic.net/free-vector/infographic-element-collection_23-2147526468.jpg?_wi=1",
},
{
id: "s3",
title: "DevOps & Data",
tags: [
"Docker",
"CI/CD",
"SQL/NoSQL",
"Git",
],
imageSrc: "http://img.b2bpic.net/free-vector/20-data-management-data-organization-solid-glyph-icon-presentation_1142-25739.jpg?_wi=1",
},
]}
title="Technical Expertise"
description="Comprehensive engineering stack spanning frontend, mobile, backend, and infrastructure."
/>
</div>
<div id="skills" data-section="skills">
<FeatureCardTwentyThree
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{ id: "s1", title: "Full-Stack Web", tags: ["React", "Next.js", "Node.js", "Java"], imageSrc: "http://img.b2bpic.net/free-photo/gear-front-side-white-background_187299-40157.jpg" },
{ id: "s2", title: "Mobile & Enterprise", tags: ["Flutter", "React Native", "SAP S/4HANA"], imageSrc: "http://img.b2bpic.net/free-vector/infographic-element-collection_23-2147526468.jpg" },
{ id: "s3", title: "DevOps & Data", tags: ["Docker", "CI/CD", "SQL/NoSQL", "Git"], imageSrc: "http://img.b2bpic.net/free-vector/20-data-management-data-organization-solid-glyph-icon-presentation_1142-25739.jpg" },
]}
title="Technical Expertise"
description="Comprehensive engineering stack spanning frontend, mobile, backend, and infrastructure."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={true}
metrics={[
{
id: "m1",
value: "100%",
description: "System Availability",
},
{
id: "m2",
value: "30%",
description: "Query Optimization",
},
{
id: "m3",
value: "24/7",
description: "Production Support",
},
]}
title="Professional Impact"
description="Performance-driven results across international projects."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
textboxLayout="default"
gridVariant="bento-grid"
animationType="blur-reveal"
useInvertedBackground={true}
metrics={[
{ id: "m1", value: "100%", description: "System Availability" },
{ id: "m2", value: "30%", description: "Query Optimization" },
{ id: "m3", value: "24/7", description: "Production Support" },
]}
title="Professional Impact"
description="Performance-driven results across international projects."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Alex B.",
date: "2024",
title: "Project Lead",
quote: "Rami's architectural input was instrumental in our platform's scalability.",
tag: "Web3",
avatarSrc: "http://img.b2bpic.net/free-photo/side-view-business-woman-posing_23-2149457762.jpg",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E6SXp9kUTzHHdscuhBMEZGTEdU/uploaded-1779497600307-296y5fei.jpg?_wi=2",
imageAlt: "professional headshot executive studio",
},
{
id: "t2",
name: "Sarah L.",
date: "2023",
title: "Product Owner",
quote: "Reliable, detail-oriented, and a true team player. Highly recommended.",
tag: "Enterprise",
avatarSrc: "http://img.b2bpic.net/free-photo/successful-senior-businesswoman-eyeglasses_1262-5856.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/mature-businesswoman-working-with-documents-while-sitting-her-workplace_171337-5895.jpg?_wi=2",
imageAlt: "professional headshot executive studio",
},
{
id: "t3",
name: "Marcus S.",
date: "2024",
title: "CTO",
quote: "Exceptional full-stack capabilities, especially in complex backend systems.",
tag: "SaaS",
avatarSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/gear-front-side-white-background_187299-40157.jpg?_wi=2",
imageAlt: "professional headshot executive studio",
},
{
id: "t4",
name: "Elena P.",
date: "2023",
title: "Head of Engineering",
quote: "His work on our mobile infrastructure significantly reduced technical debt.",
tag: "Mobile",
avatarSrc: "http://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",
imageSrc: "http://img.b2bpic.net/free-vector/infographic-element-collection_23-2147526468.jpg?_wi=2",
imageAlt: "professional headshot executive studio",
},
{
id: "t5",
name: "John D.",
date: "2024",
title: "Founder",
quote: "A versatile developer who understands both business and technical needs.",
tag: "Consulting",
avatarSrc: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg",
imageSrc: "http://img.b2bpic.net/free-vector/20-data-management-data-organization-solid-glyph-icon-presentation_1142-25739.jpg?_wi=2",
imageAlt: "professional headshot executive studio",
},
]}
title="Professional Validation"
description="Proven track record in leadership and technical delivery."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "Alex B.", date: "2024", title: "Project Lead", quote: "Rami's architectural input was instrumental in our platform's scalability.", tag: "Web3", avatarSrc: "http://img.b2bpic.net/free-photo/side-view-business-woman-posing_23-2149457762.jpg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E6SXp9kUTzHHdscuhBMEZGTEdU/uploaded-1779497600307-296y5fei.jpg", imageAlt: "professional headshot executive studio" },
{ id: "t2", name: "Sarah L.", date: "2023", title: "Product Owner", quote: "Reliable, detail-oriented, and a true team player. Highly recommended.", tag: "Enterprise", avatarSrc: "http://img.b2bpic.net/free-photo/successful-senior-businesswoman-eyeglasses_1262-5856.jpg", imageSrc: "http://img.b2bpic.net/free-photo/mature-businesswoman-working-with-documents-while-sitting-her-workplace_171337-5895.jpg", imageAlt: "professional headshot executive studio" },
{ id: "t3", name: "Marcus S.", date: "2024", title: "CTO", quote: "Exceptional full-stack capabilities, especially in complex backend systems.", tag: "SaaS", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", imageSrc: "http://img.b2bpic.net/free-photo/gear-front-side-white-background_187299-40157.jpg", imageAlt: "professional headshot executive studio" },
{ id: "t4", name: "Elena P.", date: "2023", title: "Head of Engineering", quote: "His work on our mobile infrastructure significantly reduced technical debt.", tag: "Mobile", avatarSrc: "http://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg", imageSrc: "http://img.b2bpic.net/free-vector/infographic-element-collection_23-2147526468.jpg", imageAlt: "professional headshot executive studio" },
{ id: "t5", name: "John D.", date: "2024", title: "Founder", quote: "A versatile developer who understands both business and technical needs.", tag: "Consulting", avatarSrc: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg", imageSrc: "http://img.b2bpic.net/free-vector/20-data-management-data-organization-solid-glyph-icon-presentation_1142-25739.jpg", imageAlt: "professional headshot executive studio" },
]}
title="Professional Validation"
description="Proven track record in leadership and technical delivery."
/>
</div>
<div id="social" data-section="social">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={true}
names={[
"SAP",
"AWS",
"Google Cloud",
"IBM",
"Solana",
"Spring Boot",
"Docker",
]}
title="Ecosystem Exposure"
description="Collaborations and environments experienced throughout my career."
/>
</div>
<div id="social" data-section="social">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={true}
names={["SAP", "AWS", "Google Cloud", "IBM", "Solana", "Spring Boot", "Docker"]}
title="Ecosystem Exposure"
description="Collaborations and environments experienced throughout my career."
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "radial-gradient",
}}
tag="Hire Me"
title="Open to New Opportunities"
description="Currently based in Bochum, Germany. Ready to contribute to your hybrid or on-site engineering team."
buttons={[
{
text: "Email Rami",
href: "mailto:ramizaiter1989@gmail.com",
},
{
text: "LinkedIn Profile",
href: "https://linkedin.com/in/rami-zeaiter-freelancer-software-developer",
},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{ variant: "radial-gradient" }}
tag="Hire Me"
title="Open to New Opportunities"
description="Currently based in Bochum, Germany. Ready to contribute to your hybrid or on-site engineering team."
buttons={[
{ text: "Email Rami", href: "mailto:ramizaiter1989@gmail.com" },
{ text: "LinkedIn Profile", href: "https://linkedin.com/in/rami-zeaiter-freelancer-software-developer" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E6SXp9kUTzHHdscuhBMEZGTEdU/uploaded-1779497600307-296y5fei.jpg?_wi=3"
logoText="Rami Zeaiter"
columns={[
{
title: "Navigation",
items: [
{
label: "About",
href: "#about",
},
{
label: "Skills",
href: "#skills",
},
],
},
{
title: "Connect",
items: [
{
label: "LinkedIn",
href: "https://linkedin.com/in/rami-zeaiter-freelancer-software-developer",
},
{
label: "GitHub",
href: "https://github.com/ramizaiter1989",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3E6SXp9kUTzHHdscuhBMEZGTEdU/uploaded-1779497600307-296y5fei.jpg"
logoText="Rami Zeaiter"
columns={[
{ title: "Navigation", items: [{ label: "About", href: "#about" }, { label: "Skills", href: "#skills" }] },
{ title: "Connect", items: [{ label: "LinkedIn", href: "https://linkedin.com/in/rami-zeaiter-freelancer-software-developer" }, { label: "GitHub", href: "https://github.com/ramizaiter1989" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}