Merge version_1 into main #2
256
src/app/page.tsx
256
src/app/page.tsx
@@ -31,26 +31,11 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Tech",
|
||||
id: "tech",
|
||||
},
|
||||
{
|
||||
name: "Projects",
|
||||
id: "projects",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Tech", id: "tech" },
|
||||
{ name: "Projects", id: "projects" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="BackendPro"
|
||||
/>
|
||||
@@ -58,38 +43,16 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Architecting Digital Futures"
|
||||
description="Backend Engineer specializing in highly scalable systems, Laravel API development, and microservices architecture."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Projects",
|
||||
href: "#projects",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "View Projects", href: "#projects" }]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-with-futuristic-design_1048-5529.jpg?_wi=1",
|
||||
imageAlt: "digital server cluster purple",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/technology-internet-big-data-background_1387-1012.jpg?_wi=1",
|
||||
imageAlt: "code visualization abstract",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/futuristic-inforgraphic-element-collection_23-2148327982.jpg",
|
||||
imageAlt: "system architecture abstract",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cloud-storage-banner-background-remixed-from-public-domain-by-nasa_53876-124623.jpg",
|
||||
imageAlt: "server room network node",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/circuit-board-close-up-with-different-components_23-2149174340.jpg",
|
||||
imageAlt: "hardware circuit abstract",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-with-futuristic-design_1048-5529.jpg", imageAlt: "digital server cluster purple" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/technology-internet-big-data-background_1387-1012.jpg", imageAlt: "code visualization abstract" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-vector/futuristic-inforgraphic-element-collection_23-2148327982.jpg", imageAlt: "system architecture abstract" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cloud-storage-banner-background-remixed-from-public-domain-by-nasa_53876-124623.jpg", imageAlt: "server room network node" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/circuit-board-close-up-with-different-components_23-2149174340.jpg", imageAlt: "hardware circuit abstract" },
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
@@ -99,19 +62,9 @@ export default function LandingPage() {
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Engineering efficient and robust ",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/flat-lay-desk-with-laptop-copy-space_23-2148219284.jpg",
|
||||
alt: "developer desk clean",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: " backend solutions.",
|
||||
},
|
||||
{ type: "text", content: "Engineering efficient and robust " },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/flat-lay-desk-with-laptop-copy-space_23-2148219284.jpg", alt: "developer desk clean" },
|
||||
{ type: "text", content: " backend solutions." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -123,28 +76,13 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "PHP / Laravel",
|
||||
description: "Expert-level API development and state-of-the-art framework implementation.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Code,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-background-concept-abstract-empty-light-gradient-purple-studio-room-background-product_1258-68082.jpg",
|
||||
imageAlt: "abstract geometric tech",
|
||||
title: "PHP / Laravel", description: "Expert-level API development and state-of-the-art framework implementation.", bentoComponent: "reveal-icon", icon: Code
|
||||
},
|
||||
{
|
||||
title: "NestJS",
|
||||
description: "Building scalable microservices with modular, maintainable architecture.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Server,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-geometric-background-with-futuristic-design_1048-5529.jpg?_wi=2",
|
||||
imageAlt: "abstract geometric tech",
|
||||
title: "NestJS", description: "Building scalable microservices with modular, maintainable architecture.", bentoComponent: "reveal-icon", icon: Server
|
||||
},
|
||||
{
|
||||
title: "Database Optimization",
|
||||
description: "High-concurrency data management with PostgreSQL and Redis.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Database,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/technology-internet-big-data-background_1387-1012.jpg?_wi=2",
|
||||
imageAlt: "abstract geometric tech",
|
||||
title: "Database Optimization", description: "High-concurrency data management with PostgreSQL and Redis.", bentoComponent: "reveal-icon", icon: Database
|
||||
},
|
||||
]}
|
||||
title="Technical Expertise"
|
||||
@@ -159,56 +97,11 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "Laravel",
|
||||
name: "Enterprise CRM API",
|
||||
price: "High Load",
|
||||
rating: 5,
|
||||
reviewCount: "100k+ req/day",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-retro-computer_23-2151004371.jpg",
|
||||
imageAlt: "laravel framework logo",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "NestJS",
|
||||
name: "Real-time Messaging Service",
|
||||
price: "WebSocket",
|
||||
rating: 5,
|
||||
reviewCount: "50k users",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-painting-dark_52683-92735.jpg",
|
||||
imageAlt: "nestjs logo neon",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "Data",
|
||||
name: "Distributed Analytics Engine",
|
||||
price: "PostgreSQL",
|
||||
rating: 5,
|
||||
reviewCount: "TB Scale",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/secure-storage-cloud_1048-2440.jpg",
|
||||
imageAlt: "database icon 3d",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "Caching",
|
||||
name: "High-Throughput Cache",
|
||||
price: "Redis",
|
||||
rating: 5,
|
||||
reviewCount: "Ultra-Low",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-metallic-items-second-hand-market_23-2149338421.jpg",
|
||||
imageAlt: "redis cache logo 3d",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "DevOps",
|
||||
name: "Auto-scaling Microservices",
|
||||
price: "Docker",
|
||||
rating: 5,
|
||||
reviewCount: "Stable",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/green-wall-with-metal-stairs_181624-6845.jpg",
|
||||
imageAlt: "docker icon 3d",
|
||||
},
|
||||
{ id: "p1", brand: "Laravel", name: "Enterprise CRM API", price: "High Load", rating: 5, reviewCount: "100k+ req/day", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-retro-computer_23-2151004371.jpg", imageAlt: "laravel framework logo" },
|
||||
{ id: "p2", brand: "NestJS", name: "Real-time Messaging Service", price: "WebSocket", rating: 5, reviewCount: "50k users", imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-painting-dark_52683-92735.jpg", imageAlt: "nestjs logo neon" },
|
||||
{ id: "p3", brand: "Data", name: "Distributed Analytics Engine", price: "PostgreSQL", rating: 5, reviewCount: "TB Scale", imageSrc: "http://img.b2bpic.net/free-photo/secure-storage-cloud_1048-2440.jpg", imageAlt: "database icon 3d" },
|
||||
{ id: "p4", brand: "Caching", name: "High-Throughput Cache", price: "Redis", rating: 5, reviewCount: "Ultra-Low", imageSrc: "http://img.b2bpic.net/free-photo/top-view-metallic-items-second-hand-market_23-2149338421.jpg", imageAlt: "redis cache logo 3d" },
|
||||
{ id: "p5", brand: "DevOps", name: "Auto-scaling Microservices", price: "Docker", rating: 5, reviewCount: "Stable", imageSrc: "http://img.b2bpic.net/free-photo/green-wall-with-metal-stairs_181624-6845.jpg", imageAlt: "docker icon 3d" },
|
||||
]}
|
||||
title="Recent Projects"
|
||||
description="Showcasing mission-critical systems and application frameworks."
|
||||
@@ -222,28 +115,13 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "99.99%",
|
||||
title: "System Uptime",
|
||||
description: "Maintained extreme stability under peak loads.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/colorful-growth-graph-icon-isolated_53876-71261.jpg",
|
||||
imageAlt: "data analytics bar chart",
|
||||
id: "m1", value: "99.99%", title: "System Uptime", description: "Maintained extreme stability under peak loads.", imageSrc: "http://img.b2bpic.net/free-photo/colorful-growth-graph-icon-isolated_53876-71261.jpg", imageAlt: "data analytics bar chart"
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "45%",
|
||||
title: "Latency Reduction",
|
||||
description: "Improved response times across global services.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/business-analysis-graph-editable-template_53876-114308.jpg",
|
||||
imageAlt: "server performance visualization",
|
||||
id: "m2", value: "45%", title: "Latency Reduction", description: "Improved response times across global services.", imageSrc: "http://img.b2bpic.net/free-vector/business-analysis-graph-editable-template_53876-114308.jpg", imageAlt: "server performance visualization"
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "30%",
|
||||
title: "Resource Efficiency",
|
||||
description: "Optimized CPU and RAM consumption.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/technician-using-green-screen-mockup-pc-data-center-update-servers-tech_482257-126839.jpg",
|
||||
imageAlt: "cpu utilization gauge",
|
||||
id: "m3", value: "30%", title: "Resource Efficiency", description: "Optimized CPU and RAM consumption.", imageSrc: "http://img.b2bpic.net/free-photo/technician-using-green-screen-mockup-pc-data-center-update-servers-tech_482257-126839.jpg", imageAlt: "cpu utilization gauge"
|
||||
},
|
||||
]}
|
||||
title="Impact Driven"
|
||||
@@ -256,51 +134,11 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
title: "Exceptional Code",
|
||||
quote: "The API design was flawless.",
|
||||
name: "Alex Smith",
|
||||
role: "CTO",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-smiling-posing-with-crossed-arms-office_176420-914.jpg",
|
||||
imageAlt: "executive portrait dark",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
title: "Highly Reliable",
|
||||
quote: "Transformed our legacy stack into pure excellence.",
|
||||
name: "Sarah Lee",
|
||||
role: "Founder",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/disabled-business-manager-wheelchair-looking-tired-front_482257-2229.jpg",
|
||||
imageAlt: "tech company founder",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
title: "Fast Delivery",
|
||||
quote: "Delivered beyond our complex project specifications.",
|
||||
name: "Mike Chen",
|
||||
role: "Lead Dev",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-black-working-laptop-cafe_23-2147962625.jpg",
|
||||
imageAlt: "software engineer face",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
title: "Visionary Dev",
|
||||
quote: "Strategic thinking and top-tier implementation.",
|
||||
name: "Jessica Wang",
|
||||
role: "PM",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-successful-entrepreneur_1098-3855.jpg",
|
||||
imageAlt: "product manager face",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
title: "Future Proof",
|
||||
quote: "Architecture that actually grows with our business.",
|
||||
name: "John Doe",
|
||||
role: "CEO",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confused-senior-businessman-wearing-suit_1262-3747.jpg",
|
||||
imageAlt: "ceo portrait cinematic",
|
||||
},
|
||||
{ id: "t1", title: "Exceptional Code", quote: "The API design was flawless.", name: "Alex Smith", role: "CTO", imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-smiling-posing-with-crossed-arms-office_176420-914.jpg", imageAlt: "executive portrait dark" },
|
||||
{ id: "t2", title: "Highly Reliable", quote: "Transformed our legacy stack into pure excellence.", name: "Sarah Lee", role: "Founder", imageSrc: "http://img.b2bpic.net/free-photo/disabled-business-manager-wheelchair-looking-tired-front_482257-2229.jpg", imageAlt: "tech company founder" },
|
||||
{ id: "t3", title: "Fast Delivery", quote: "Delivered beyond our complex project specifications.", name: "Mike Chen", role: "Lead Dev", imageSrc: "http://img.b2bpic.net/free-photo/man-black-working-laptop-cafe_23-2147962625.jpg", imageAlt: "software engineer face" },
|
||||
{ id: "t4", title: "Visionary Dev", quote: "Strategic thinking and top-tier implementation.", name: "Jessica Wang", role: "PM", imageSrc: "http://img.b2bpic.net/free-photo/close-up-successful-entrepreneur_1098-3855.jpg", imageAlt: "product manager face" },
|
||||
{ id: "t5", title: "Future Proof", quote: "Architecture that actually grows with our business.", name: "John Doe", role: "CEO", imageSrc: "http://img.b2bpic.net/free-photo/confused-senior-businessman-wearing-suit_1262-3747.jpg", imageAlt: "ceo portrait cinematic" },
|
||||
]}
|
||||
title="Professional Recognition"
|
||||
description="Building trust with clients and partners through high-quality development."
|
||||
@@ -310,9 +148,7 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Let's Talk"
|
||||
title="Ready for your next challenge?"
|
||||
description="Drop me a message to discuss architecture, development, or consulting opportunities."
|
||||
@@ -325,32 +161,8 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
{
|
||||
label: "GitHub",
|
||||
href: "https://github.com",
|
||||
},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "https://linkedin.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Tech Stack",
|
||||
href: "#tech",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Connect", items: [{ label: "GitHub", href: "https://github.com" }, { label: "LinkedIn", href: "https://linkedin.com" }] },
|
||||
{ title: "Resources", items: [{ label: "Blog", href: "#" }, { label: "Tech Stack", href: "#tech" }] },
|
||||
]}
|
||||
bottomLeftText="© 2024 BackendPro Inc."
|
||||
bottomRightText="Built with passion."
|
||||
|
||||
Reference in New Issue
Block a user