Merge version_2 into main #2
467
src/app/page.tsx
467
src/app/page.tsx
@@ -28,338 +28,159 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Work",
|
||||
id: "#work",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
/>
|
||||
</div>
|
||||
<div className="[&>div]:sticky [&>div]:top-0 [&>div]:h-screen [&>div]:overflow-hidden">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Work", id: "#work" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="PORTFOLIO"
|
||||
description="Scroll through layered projects that unfold in real time. Experience design that transcends static display."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore My Work",
|
||||
href: "#work",
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212578.jpg?_wi=1",
|
||||
imageAlt: "Abstract red shapes 1",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/marble-background-digital-art-marbling-texture-ruby-colors-ai-generated-image_511042-576.jpg?_wi=1",
|
||||
imageAlt: "Architecture patterns",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-motion-blur-messy-light-trail-black-background_23-2148055596.jpg",
|
||||
imageAlt: "Liquid red lines",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gypsum-bust-coral-background-with-geometric-shapes_23-2149588229.jpg",
|
||||
imageAlt: "Red sculpture",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/colour-accent-corporate-presentation-background_1048-10245.jpg",
|
||||
imageAlt: "Abstract red grid",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medical-syringe-symbol-vaccination-stop-coronavirus-concept-red-background_559531-10291.jpg",
|
||||
imageAlt: "Typography art",
|
||||
},
|
||||
]}
|
||||
autoplayDelay={4000}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="PORTFOLIO"
|
||||
description="Scroll through layered projects that unfold in real time. Experience design that transcends static display."
|
||||
buttons={[{ text: "Explore My Work", href: "#work" }]}
|
||||
slides={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212578.jpg?_wi=1", imageAlt: "Abstract red shapes 1" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/marble-background-digital-art-marbling-texture-ruby-colors-ai-generated-image_511042-576.jpg?_wi=1", imageAlt: "Architecture patterns" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-motion-blur-messy-light-trail-black-background_23-2148055596.jpg", imageAlt: "Liquid red lines" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/gypsum-bust-coral-background-with-geometric-shapes_23-2149588229.jpg", imageAlt: "Red sculpture" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/colour-accent-corporate-presentation-background_1048-10245.jpg", imageAlt: "Abstract red grid" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/medical-syringe-symbol-vaccination-stop-coronavirus-concept-red-background_559531-10291.jpg", imageAlt: "Typography art" },
|
||||
]}
|
||||
autoplayDelay={4000}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
title="Crafting Digital Experiences That Leave a Mark"
|
||||
description="I believe in the power of interaction. By combining precise code with bold visual storytelling, I create work that doesn't just sit on the screen—it reacts, breathes, and engages users on a deeper, more emotional level."
|
||||
tag="About Me"
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Interaction Design",
|
||||
description: "Creating fluid, responsive animations that guide users.",
|
||||
},
|
||||
{
|
||||
title: "Creative Development",
|
||||
description: "Building performant, high-end web experiences from scratch.",
|
||||
},
|
||||
{
|
||||
title: "Visual Storytelling",
|
||||
description: "Communicating complex ideas through clean, bold layouts.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453354.jpg"
|
||||
imageAlt="Creative designer"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
title="Crafting Digital Experiences That Leave a Mark"
|
||||
description="I believe in the power of interaction. By combining precise code with bold visual storytelling, I create work that doesn't just sit on the screen—it reacts, breathes, and engages users on a deeper, more emotional level."
|
||||
tag="About Me"
|
||||
bulletPoints={[
|
||||
{ title: "Interaction Design", description: "Creating fluid, responsive animations that guide users." },
|
||||
{ title: "Creative Development", description: "Building performant, high-end web experiences from scratch." },
|
||||
{ title: "Visual Storytelling", description: "Communicating complex ideas through clean, bold layouts." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453354.jpg"
|
||||
imageAlt="Creative designer"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Motion Systems",
|
||||
tags: [
|
||||
"GSAP",
|
||||
"Three.js",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/light-streak-lines-background_23-2148133123.jpg",
|
||||
imageAlt: "Light streak lines background",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Responsive Design",
|
||||
tags: [
|
||||
"Tailwind",
|
||||
"Next.js",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212578.jpg?_wi=2",
|
||||
imageAlt: "Light streak lines background",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "UI Architecture",
|
||||
tags: [
|
||||
"Design System",
|
||||
"Accessibility",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/marble-background-digital-art-marbling-texture-ruby-colors-ai-generated-image_511042-576.jpg?_wi=2",
|
||||
imageAlt: "Light streak lines background",
|
||||
},
|
||||
]}
|
||||
title="Core Competencies"
|
||||
description="The technical foundation behind every project I build."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "f1", title: "Motion Systems", tags: ["GSAP", "Three.js"], imageSrc: "http://img.b2bpic.net/free-photo/light-streak-lines-background_23-2148133123.jpg", imageAlt: "Light streak lines background" },
|
||||
{ id: "f2", title: "Responsive Design", tags: ["Tailwind", "Next.js"], imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212578.jpg?_wi=2", imageAlt: "Light streak lines background" },
|
||||
{ id: "f3", title: "UI Architecture", tags: ["Design System", "Accessibility"], imageSrc: "http://img.b2bpic.net/free-photo/marble-background-digital-art-marbling-texture-ruby-colors-ai-generated-image_511042-576.jpg?_wi=2", imageAlt: "Light streak lines background" },
|
||||
]}
|
||||
title="Core Competencies"
|
||||
description="The technical foundation behind every project I build."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="work" data-section="work">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "UI Dashboard",
|
||||
price: "UX Case Study",
|
||||
variant: "Web",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-business-desk-with-virtual-reality-headset_23-2148513458.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Branding Suite",
|
||||
price: "Graphic Design",
|
||||
variant: "Print",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-body-butter-recipient_23-2148543017.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "App Concept",
|
||||
price: "Product Design",
|
||||
variant: "Mobile",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671595.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Gallery Poster",
|
||||
price: "Design System",
|
||||
variant: "Art",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/burning-paper-background-still-life_23-2150093376.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Digital Tool",
|
||||
price: "Tech Innovation",
|
||||
variant: "Web",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-modern-spiral-staircase-lights_181624-26451.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Multimedia Installation",
|
||||
price: "Art Direction",
|
||||
variant: "Mixed",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rectangular-scroll-ribbon-logo-label_53876-13825.jpg",
|
||||
},
|
||||
]}
|
||||
title="Featured Projects"
|
||||
description="A selection of creative work focused on high visual impact."
|
||||
/>
|
||||
</div>
|
||||
<div id="work" data-section="work">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "UI Dashboard", price: "UX Case Study", variant: "Web", imageSrc: "http://img.b2bpic.net/free-photo/modern-business-desk-with-virtual-reality-headset_23-2148513458.jpg" },
|
||||
{ id: "p2", name: "Branding Suite", price: "Graphic Design", variant: "Print", imageSrc: "http://img.b2bpic.net/free-photo/close-up-body-butter-recipient_23-2148543017.jpg" },
|
||||
{ id: "p3", name: "App Concept", price: "Product Design", variant: "Mobile", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671595.jpg" },
|
||||
{ id: "p4", name: "Gallery Poster", price: "Design System", variant: "Art", imageSrc: "http://img.b2bpic.net/free-photo/burning-paper-background-still-life_23-2150093376.jpg" },
|
||||
{ id: "p5", name: "Digital Tool", price: "Tech Innovation", variant: "Web", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-view-modern-spiral-staircase-lights_181624-26451.jpg" },
|
||||
{ id: "p6", name: "Multimedia Installation", price: "Art Direction", variant: "Mixed", imageSrc: "http://img.b2bpic.net/free-photo/rectangular-scroll-ribbon-logo-label_53876-13825.jpg" },
|
||||
]}
|
||||
title="Featured Projects"
|
||||
description="A selection of creative work focused on high visual impact."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="stats" data-section="stats">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "150+",
|
||||
description: "Projects completed worldwide",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "99.9%",
|
||||
description: "Client satisfaction rate",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100+",
|
||||
description: "Unique interactions created",
|
||||
},
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="My commitment to quality and innovation in every build."
|
||||
/>
|
||||
</div>
|
||||
<div id="stats" data-section="stats">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "150+", description: "Projects completed worldwide" },
|
||||
{ id: "m2", value: "99.9%", description: "Client satisfaction rate" },
|
||||
{ id: "m3", value: "100+", description: "Unique interactions created" },
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="My commitment to quality and innovation in every build."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Working with this designer was a game changer for our agency. The attention to detail and interaction design truly elevate the brand experience."
|
||||
rating={5}
|
||||
author="Sarah Miller, Creative Lead"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-beautiful-strict-woman-glasses_1262-1732.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-serious-young-businessman-glasses_1262-3810.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-studio_23-2149411430.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/unknown-man-posing-with-blue-background-medium-shot_23-2149417616.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Working with this designer was a game changer for our agency. The attention to detail and interaction design truly elevate the brand experience."
|
||||
rating={5}
|
||||
author="Sarah Miller, Creative Lead"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-beautiful-strict-woman-glasses_1262-1732.jpg", alt: "Client 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg", alt: "Client 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-serious-young-businessman-glasses_1262-3810.jpg", alt: "Client 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-studio_23-2149411430.jpg", alt: "Client 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/unknown-man-posing-with-blue-background-medium-shot_23-2149417616.jpg", alt: "Client 5" },
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Available for freelance?",
|
||||
content: "Yes, I am currently accepting new projects.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "How do you work?",
|
||||
content: "I start with deep discovery before prototyping.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Do you offer maintenance?",
|
||||
content: "I provide ongoing support for all my projects.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Available for freelance?", content: "Yes, I am currently accepting new projects." },
|
||||
{ id: "q2", title: "How do you work?", content: "I start with deep discovery before prototyping." },
|
||||
{ id: "q3", title: "Do you offer maintenance?", content: "I provide ongoing support for all my projects." },
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "animated-grid",
|
||||
}}
|
||||
tag="Let's Talk"
|
||||
title="Ready to build something together?"
|
||||
description="Let's push the boundaries of digital experience. Send me a message and we'll start the conversation."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-view-man-developing-photos_23-2149893816.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "animated-grid" }}
|
||||
tag="Let's Talk"
|
||||
title="Ready to build something together?"
|
||||
description="Let's push the boundaries of digital experience. Send me a message and we'll start the conversation."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-view-man-developing-photos_23-2149893816.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Work",
|
||||
href: "#work",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="PORTFOLIO"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "Work", href: "#work" }, { label: "About", href: "#about" }] },
|
||||
{ items: [{ label: "Services", href: "#services" }, { label: "Contact", href: "#contact" }] },
|
||||
{ items: [{ label: "Twitter", href: "#" }, { label: "Instagram", href: "#" }] },
|
||||
]}
|
||||
logoText="PORTFOLIO"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user