Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-04-26 02:51:39 +00:00

View File

@@ -29,397 +29,168 @@ export default function LandingPage() {
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Projects",
id: "projects",
},
{
name: "Skills",
id: "features",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="KAMUI"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Projects", id: "projects" },
{ name: "Skills", id: "features" },
{ name: "Contact", id: "contact" },
]}
brandName="KAMUI"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
useInvertedBackground={false}
background={{
variant: "glowing-orb",
}}
title="Aspiring AI/ML & Software Developer"
description="Building the future, one byte at a time. Exploring the intersection of deep learning and intuitive user experiences."
testimonials={[
{
name: "Alex R.",
handle: "@developer",
testimonial: "Exceptional logic and design sense.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-man-indoors_23-2149734568.jpg",
},
{
name: "Sam K.",
handle: "@architect",
testimonial: "The UI implementation is top-tier.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-girl-with-purple-light_23-2149596286.jpg",
},
{
name: "Jamie L.",
handle: "@engineer",
testimonial: "Delivers seamless, futuristic code.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-posing-with-blue-background_23-2149445819.jpg",
},
{
name: "Taylor P.",
handle: "@designer",
testimonial: "Visionary approach to AI interfaces.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-night-city-lights_23-2149024762.jpg",
},
{
name: "Casey W.",
handle: "@techlead",
testimonial: "A future star in AI development.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/woman-portrait-with-bright-blue-lips_23-2151096449.jpg",
},
]}
buttons={[
{
text: "View Projects",
href: "#projects",
},
{
text: "Contact",
href: "#contact",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/long-exposure-pink-light-trail-black-backdrop_23-2148055586.jpg?_wi=1"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/portrait-young-model-sitting-bed-looking-camera_114579-64935.jpg",
alt: "Portrait young model sitting on bed",
},
{
src: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-spotlight_23-2151915995.jpg",
alt: "Medium shot young man posing",
},
{
src: "http://img.b2bpic.net/free-photo/woman-portrait-with-blue-lights-visual-effects_23-2149419461.jpg",
alt: "Woman portrait with blue lights",
},
{
src: "http://img.b2bpic.net/free-photo/calm-face-bearded-man-with-blue-eyes_8353-1318.jpg",
alt: "Calm face of bearded man",
},
{
src: "http://img.b2bpic.net/free-photo/interior-portrait-woman-vaporwave-style_23-2148950785.jpg",
alt: "Interior portrait of woman",
},
]}
marqueeItems={[
{
type: "text",
text: "Deep Learning",
},
{
type: "text",
text: "React.js",
},
{
type: "text",
text: "Next.js",
},
{
type: "text",
text: "Python",
},
{
type: "text",
text: "Cloud Infrastructure",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
useInvertedBackground={false}
background={{ variant: "glowing-orb" }}
title="Aspiring AI/ML & Software Developer"
description="Building the future, one byte at a time. Exploring the intersection of deep learning and intuitive user experiences."
testimonials={[
{ name: "Alex R.", handle: "@developer", testimonial: "Exceptional logic and design sense.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-man-indoors_23-2149734568.jpg" },
{ name: "Sam K.", handle: "@architect", testimonial: "The UI implementation is top-tier.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-girl-with-purple-light_23-2149596286.jpg" },
{ name: "Jamie L.", handle: "@engineer", testimonial: "Delivers seamless, futuristic code.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-posing-with-blue-background_23-2149445819.jpg" },
{ name: "Taylor P.", handle: "@designer", testimonial: "Visionary approach to AI interfaces.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-night-city-lights_23-2149024762.jpg" },
{ name: "Casey W.", handle: "@techlead", testimonial: "A future star in AI development.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-portrait-with-bright-blue-lips_23-2151096449.jpg" },
]}
buttons={[
{ text: "View Projects", href: "#projects" },
{ text: "Contact", href: "#contact" },
]}
imageSrc="http://img.b2bpic.net/free-photo/long-exposure-pink-light-trail-black-backdrop_23-2148055586.jpg"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/portrait-young-model-sitting-bed-looking-camera_114579-64935.jpg", alt: "Portrait young model sitting on bed" },
{ src: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-spotlight_23-2151915995.jpg", alt: "Medium shot young man posing" },
{ src: "http://img.b2bpic.net/free-photo/woman-portrait-with-blue-lights-visual-effects_23-2149419461.jpg", alt: "Woman portrait with blue lights" },
{ src: "http://img.b2bpic.net/free-photo/calm-face-bearded-man-with-blue-eyes_8353-1318.jpg", alt: "Calm face of bearded man" },
{ src: "http://img.b2bpic.net/free-photo/interior-portrait-woman-vaporwave-style_23-2148950785.jpg", alt: "Interior portrait of woman" },
]}
marqueeItems={[
{ type: "text", text: "Deep Learning" },
{ type: "text", text: "React.js" },
{ type: "text", text: "Next.js" },
{ type: "text", text: "Python" },
{ type: "text", text: "Cloud Infrastructure" },
]}
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={true}
title="Technical Competencies"
metrics={[
{
icon: Database,
label: "ML Models",
value: "15+",
},
{
icon: Code,
label: "Projects Built",
value: "20+",
},
{
icon: Terminal,
label: "Coding Hrs",
value: "2000+",
},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={true}
title="Technical Competencies"
metrics={[
{ icon: Database, label: "ML Models", value: "15+" },
{ icon: Code, label: "Projects Built", value: "20+" },
{ icon: Terminal, label: "Coding Hrs", value: "2000+" },
]}
metricsAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureBento
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Deep Learning",
description: "Tensorflow and PyTorch mastery.",
bentoComponent: "reveal-icon",
icon: Lightbulb,
imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-painting-dark_23-2149627914.jpg",
imageAlt: "neon blue tech icon",
},
{
title: "Web Dev",
description: "React and Next.js specialist.",
bentoComponent: "reveal-icon",
icon: Globe,
imageSrc: "http://img.b2bpic.net/free-photo/long-exposure-pink-light-trail-black-backdrop_23-2148055586.jpg?_wi=2",
imageAlt: "neon blue tech icon",
},
{
title: "Cloud Infra",
description: "AWS and GCP infrastructure.",
bentoComponent: "reveal-icon",
icon: Cloud,
imageSrc: "http://img.b2bpic.net/free-photo/arrow-with-bright-neon-colors_23-2151204992.jpg",
imageAlt: "neon blue tech icon",
},
]}
title="Skill Matrix"
description="Technological arsenal built for the next generation of computing."
/>
</div>
<div id="features" data-section="features">
<FeatureBento
textboxLayout="split"
useInvertedBackground={false}
features={[
{ title: "Deep Learning", description: "Tensorflow and PyTorch mastery.", bentoComponent: "reveal-icon", icon: Lightbulb },
{ title: "Web Dev", description: "React and Next.js specialist.", bentoComponent: "reveal-icon", icon: Globe },
{ title: "Cloud Infra", description: "AWS and GCP infrastructure.", bentoComponent: "reveal-icon", icon: Cloud },
]}
title="Skill Matrix"
description="Technological arsenal built for the next generation of computing."
animationType="slide-up"
/>
</div>
<div id="projects" data-section="projects">
<ProductCardOne
animationType="scale-rotate"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={true}
products={[
{
id: "1",
name: "Quantum Dash",
price: "AI Model",
imageSrc: "http://img.b2bpic.net/free-photo/cool-different-types-buttons_23-2150170585.jpg",
},
{
id: "2",
name: "NeuralNet Sync",
price: "Web App",
imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139249.jpg",
},
{
id: "3",
name: "Aether Bot",
price: "ML Tool",
imageSrc: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201859.jpg",
},
{
id: "4",
name: "Cyber Forge",
price: "Library",
imageSrc: "http://img.b2bpic.net/free-vector/modern-infographic-element-collection_52683-1784.jpg",
},
{
id: "5",
name: "Data Warden",
price: "Security",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-background-concept_1194-617406.jpg",
},
{
id: "6",
name: "Void Render",
price: "Graphics",
imageSrc: "http://img.b2bpic.net/free-photo/pc-desk-empty-photovoltaics-factory-monitoring-system-performance-closeup_482257-118100.jpg",
},
]}
title="Project Vault"
description="Select game-changing implementations."
/>
</div>
<div id="projects" data-section="projects">
<ProductCardOne
animationType="scale-rotate"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={true}
products={[
{ id: "1", name: "Quantum Dash", price: "AI Model", imageSrc: "http://img.b2bpic.net/free-photo/cool-different-types-buttons_23-2150170585.jpg" },
{ id: "2", name: "NeuralNet Sync", price: "Web App", imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139249.jpg" },
{ id: "3", name: "Aether Bot", price: "ML Tool", imageSrc: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201859.jpg" },
{ id: "4", name: "Cyber Forge", price: "Library", imageSrc: "http://img.b2bpic.net/free-vector/modern-infographic-element-collection_52683-1784.jpg" },
{ id: "5", name: "Data Warden", price: "Security", imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-background-concept_1194-617406.jpg" },
{ id: "6", name: "Void Render", price: "Graphics", imageSrc: "http://img.b2bpic.net/free-photo/pc-desk-empty-photovoltaics-factory-monitoring-system-performance-closeup_482257-118100.jpg" },
]}
title="Project Vault"
description="Select game-changing implementations."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="depth-3d"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "99.9%",
description: "Code Uptime",
},
{
id: "m2",
value: "120+",
description: "Commits Weekly",
},
{
id: "m3",
value: "5+",
description: "Global Awards",
},
]}
title="Development Velocity"
description="Impact and growth metrics."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="depth-3d"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "99.9%", description: "Code Uptime" },
{ id: "m2", value: "120+", description: "Commits Weekly" },
{ id: "m3", value: "5+", description: "Global Awards" },
]}
title="Development Velocity"
description="Impact and growth metrics."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{
id: "t1",
title: "Expert",
quote: "Incredible dev flow.",
name: "John Doe",
role: "Senior Eng",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-portrait-man-vaporwave-style_23-2148950748.jpg",
},
{
id: "t2",
title: "Lead",
quote: "Clean architecture.",
name: "Jane Smith",
role: "CTO",
imageSrc: "http://img.b2bpic.net/free-photo/cool-man-with-hoodie_23-2147646523.jpg",
},
{
id: "t3",
title: "Genius",
quote: "Fast implementation.",
name: "Bob Lee",
role: "Architect",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-male-with-curly-hair-dressed-jacket-eyeglasses_613910-567.jpg",
},
{
id: "t4",
title: "Innovator",
quote: "Very innovative.",
name: "Sarah P",
role: "Founder",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-white-hoodie-blue-jeans-posing-against-neon-background_89887-1139.jpg",
},
{
id: "t5",
title: "Partner",
quote: "Great communication.",
name: "Mike R",
role: "PM",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-charismatic-sensual-male-black-sweater-with-wet_613910-11158.jpg",
},
]}
title="Peer Endorsements"
description="Voices from the network."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{ id: "t1", title: "Expert", quote: "Incredible dev flow.", name: "John Doe", role: "Senior Eng", imageSrc: "http://img.b2bpic.net/free-photo/abstract-portrait-man-vaporwave-style_23-2148950748.jpg" },
{ id: "t2", title: "Lead", quote: "Clean architecture.", name: "Jane Smith", role: "CTO", imageSrc: "http://img.b2bpic.net/free-photo/cool-man-with-hoodie_23-2147646523.jpg" },
{ id: "t3", title: "Genius", quote: "Fast implementation.", name: "Bob Lee", role: "Architect", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-male-with-curly-hair-dressed-jacket-eyeglasses_613910-567.jpg" },
{ id: "t4", title: "Innovator", quote: "Very innovative.", name: "Sarah P", role: "Founder", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-white-hoodie-blue-jeans-posing-against-neon-background_89887-1139.jpg" },
{ id: "t5", title: "Partner", quote: "Great communication.", name: "Mike R", role: "PM", imageSrc: "http://img.b2bpic.net/free-photo/portrait-charismatic-sensual-male-black-sweater-with-wet_613910-11158.jpg" },
]}
title="Peer Endorsements"
description="Voices from the network."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{
id: "f1",
title: "Tech Stack?",
content: "React, Next.js, and Python.",
},
{
id: "f2",
title: "Open for work?",
content: "Always open to innovation.",
},
{
id: "f3",
title: "Location?",
content: "Global / Remote.",
},
]}
sideTitle="Q&A Nexus"
sideDescription="Curiosities answered."
faqsAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "Tech Stack?", content: "React, Next.js, and Python." },
{ id: "f2", title: "Open for work?", content: "Always open to innovation." },
{ id: "f3", title: "Location?", content: "Global / Remote." },
]}
sideTitle="Q&A Nexus"
sideDescription="Curiosities answered."
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="Establish Connection"
description="Ready for high-impact collaboration."
inputs={[
{
name: "name",
type: "text",
placeholder: "Identifier",
},
{
name: "email",
type: "email",
placeholder: "Channel",
},
]}
textarea={{
name: "msg",
placeholder: "Transmission text...",
}}
imageSrc="http://img.b2bpic.net/free-photo/chrome-key-tablet-updating-ai-systems_482257-90828.jpg"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="Establish Connection"
description="Ready for high-impact collaboration."
inputs={[
{ name: "name", type: "text", placeholder: "Identifier" },
{ name: "email", type: "email", placeholder: "Channel" },
]}
textarea={{ name: "msg", placeholder: "Transmission text..." }}
imageSrc="http://img.b2bpic.net/free-photo/chrome-key-tablet-updating-ai-systems_482257-90828.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="KAMUI"
columns={[
{
title: "Social",
items: [
{
label: "GitHub",
href: "#",
},
{
label: "LinkedIn",
href: "#",
},
],
},
{
title: "Legacy",
items: [
{
label: "Resume",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="KAMUI"
columns={[
{ title: "Social", items: [{ label: "GitHub", href: "#" }, { label: "LinkedIn", href: "#" }] },
{ title: "Legacy", items: [{ label: "Resume", href: "#" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);