bender/4d99d5ab-22e4-4d62-924c-0226972ca5f9
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-06-05 12:45:38 +00:00
parent 9c0377ac08
commit acf124d0f6
1 changed files with 70 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

335
src/app/page.tsx
View File

@@ -32,110 +32,67 @@ export default function LandingPage() {
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "home",
},
name: "Home", id: "home"},
{
name: "About",
id: "about",
},
name: "About", id: "about"},
{
name: "Skills",
id: "skills",
},
name: "Skills", id: "skills"},
{
name: "Work",
id: "work",
},
name: "Work", id: "work"},
{
name: "Achievements",
id: "achievements",
},
name: "Achievements", id: "achievements"},
{
name: "Testimonials",
id: "testimonials",
},
name: "Testimonials", id: "testimonials"},
{
name: "FAQ",
id: "faq",
},
name: "FAQ", id: "faq"},
{
name: "Contact",
id: "contact",
},
name: "Contact", id: "contact"},
]}
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1bjksh"
logoAlt="Mamun's Portfolio Logo"
brandName="Mamun's Portfolio"
button={{
text: "Get in Touch",
href: "#contact",
}}
text: "Get in Touch", href: "#contact"}}
/>
</div>
<div id="home" data-section="home">
<HeroCentered
background={{
variant: "animated-grid",
}}
variant: "animated-grid"}}
title="Interactive 3D portfolio that responds to you"
description="Explore my work through reactive animations and immersive design. Every interaction tells a story about how I build modern web experiences."
avatars={[
{
src: "http://img.b2bpic.net/free-photo/yellow-dummy-head-orange-background_53876-167223.jpg",
alt: "abstract developer avatar modern tech",
},
src: "http://img.b2bpic.net/free-photo/yellow-dummy-head-orange-background_53876-167223.jpg", alt: "abstract developer avatar modern tech"},
{
src: "http://img.b2bpic.net/free-photo/inserting-card-cash-machine_1339-3022.jpg",
alt: "abstract recruiter avatar tech modern",
},
src: "http://img.b2bpic.net/free-photo/inserting-card-cash-machine_1339-3022.jpg", alt: "abstract recruiter avatar tech modern"},
{
src: "http://img.b2bpic.net/free-vector/set-hand-drawn-creativity-doodles_23-2148726306.jpg",
alt: "abstract client avatar modern design",
},
src: "http://img.b2bpic.net/free-vector/set-hand-drawn-creativity-doodles_23-2148726306.jpg", alt: "abstract client avatar modern design"},
{
src: "http://img.b2bpic.net/free-photo/cartoon-woman-wearing-glasses_23-2151136864.jpg",
alt: "abstract developer icon innovative tech",
},
src: "http://img.b2bpic.net/free-photo/cartoon-woman-wearing-glasses_23-2151136864.jpg", alt: "abstract developer icon innovative tech"},
{
src: "http://img.b2bpic.net/free-photo/yellow-dummy-head-orange-background_53876-96744.jpg",
alt: "Yellow dummy head on an orange background",
},
src: "http://img.b2bpic.net/free-photo/yellow-dummy-head-orange-background_53876-96744.jpg", alt: "Yellow dummy head on an orange background"},
]}
avatarText="Connecting with innovative minds"
buttons={[
{
text: "Start exploring",
href: "#work",
},
text: "Start exploring", href: "#work"},
]}
buttonAnimation="blur-reveal"
marqueeItems={[
{
type: "text",
text: "Web Development",
},
type: "text", text: "Web Development"},
{
type: "text",
text: "3D Graphics",
},
type: "text", text: "3D Graphics"},
{
type: "text",
text: "Interactive Design",
},
type: "text", text: "Interactive Design"},
{
type: "text",
text: "AI Integration",
},
type: "text", text: "AI Integration"},
{
type: "text",
text: "Performance Optimization",
},
type: "text", text: "Performance Optimization"},
{
type: "text",
text: "User Experience",
},
type: "text", text: "User Experience"},
]}
marqueeSpeed={30}
showMarqueeCard={true}
@@ -149,22 +106,16 @@ export default function LandingPage() {
description="As a senior developer specializing in interactive 3D web experiences, I combine technical prowess with creative vision. My passion lies in building reactive, high-performance applications that not only function flawlessly but also captivate users with innovative design and engaging animations."
metrics={[
{
value: "10+",
title: "Years of Experience",
},
value: "10+", title: "Years of Experience"},
{
value: "50+",
title: "Projects Delivered",
},
value: "50+", title: "Projects Delivered"},
{
value: "99%",
title: "Client Satisfaction",
},
value: "99%", title: "Client Satisfaction"},
]}
imageSrc="http://img.b2bpic.net/free-photo/portrait-older-man-looking-sell-artwork-internet-using-portable-computer-home-studio-senior-artist-spending-evening-sitting-front-easel-holding-laptop-looking-online-art-gallery_482257-35555.jpg"
imageAlt="developer skills abstract visualization"
mediaAnimation="reveal-blur"
metricsAnimation="reveal-blur"
mediaAnimation="blur-reveal"
metricsAnimation="blur-reveal"
/>
</div>
@@ -173,25 +124,14 @@ export default function LandingPage() {
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
animationType="blur-reveal"
features={[
{
title: "Reactive 3D Environments",
description: "Building immersive 3D web applications that respond dynamically to user input and real-time data.",
imageSrc: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201873.jpg",
imageAlt: "reactive ui element 3d animation",
},
title: "Reactive 3D Environments", description: "Building immersive 3D web applications that respond dynamically to user input and real-time data.", imageSrc: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201873.jpg", imageAlt: "reactive ui element 3d animation"},
{
title: "Advanced Algorithm Implementation",
description: "Developing efficient and complex algorithms for data processing, real-time physics, and interactive simulations.",
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-data-center-cityscape_23-2152020917.jpg",
imageAlt: "complex algorithm 3d visualization data",
},
title: "Advanced Algorithm Implementation", description: "Developing efficient and complex algorithms for data processing, real-time physics, and interactive simulations.", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-data-center-cityscape_23-2152020917.jpg", imageAlt: "complex algorithm 3d visualization data"},
{
title: "Cross-Platform & Responsive Design",
description: "Ensuring seamless and beautiful experiences across all devices and screen sizes, from mobile to desktop VR.",
imageSrc: "http://img.b2bpic.net/free-photo/minimal-style-device-screen_23-2151913301.jpg",
imageAlt: "cross platform compatibility 3d devices",
},
title: "Cross-Platform & Responsive Design", description: "Ensuring seamless and beautiful experiences across all devices and screen sizes, from mobile to desktop VR.", imageSrc: "http://img.b2bpic.net/free-photo/minimal-style-device-screen_23-2151913301.jpg", imageAlt: "cross platform compatibility 3d devices"},
]}
title="Core Skills: Bridging creativity and code"
description="My expertise spans the entire development lifecycle, from conceptualizing dynamic user interfaces to optimizing backend performance and deploying scalable solutions."
@@ -203,67 +143,26 @@ export default function LandingPage() {
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
animationType="blur-reveal"
products={[
{
id: "p1",
brand: "Interactive Portfolio",
name: "Reactive 3D Web App",
price: "Case Study",
rating: 5,
reviewCount: "12 reviews",
imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150104476.jpg",
imageAlt: "3d interactive web application portfolio",
},
id: "p1", brand: "Interactive Portfolio", name: "Reactive 3D Web App", price: "Case Study", rating: 5,
reviewCount: "12 reviews", imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150104476.jpg", imageAlt: "3d interactive web application portfolio"},
{
id: "p2",
brand: "AI Solutions",
name: "Data Visualization Tool",
price: "View Demo",
rating: 5,
reviewCount: "8 reviews",
imageSrc: "http://img.b2bpic.net/free-photo/robots-analyzing-data-computer-screens_23-2151966705.jpg",
imageAlt: "ai powered data visualization 3d",
},
id: "p2", brand: "AI Solutions", name: "Data Visualization Tool", price: "View Demo", rating: 5,
reviewCount: "8 reviews", imageSrc: "http://img.b2bpic.net/free-photo/robots-analyzing-data-computer-screens_23-2151966705.jpg", imageAlt: "ai powered data visualization 3d"},
{
id: "p3",
brand: "XR Experiences",
name: "Immersive VR/AR Web",
price: "Explore",
rating: 5,
reviewCount: "15 reviews",
imageSrc: "http://img.b2bpic.net/free-photo/woman-taking-picture-city_53876-102580.jpg",
imageAlt: "web vr ar experience development",
},
id: "p3", brand: "XR Experiences", name: "Immersive VR/AR Web", price: "Explore", rating: 5,
reviewCount: "15 reviews", imageSrc: "http://img.b2bpic.net/free-photo/woman-taking-picture-city_53876-102580.jpg", imageAlt: "web vr ar experience development"},
{
id: "p4",
brand: "Gaming & Simulation",
name: "Web-Based 3D Game",
price: "Play Now",
rating: 5,
reviewCount: "10 reviews",
imageSrc: "http://img.b2bpic.net/free-photo/science-experiment-laboratory-formula-chemical-concept_53876-125544.jpg",
imageAlt: "web game development interactive simulation",
},
id: "p4", brand: "Gaming & Simulation", name: "Web-Based 3D Game", price: "Play Now", rating: 5,
reviewCount: "10 reviews", imageSrc: "http://img.b2bpic.net/free-photo/science-experiment-laboratory-formula-chemical-concept_53876-125544.jpg", imageAlt: "web game development interactive simulation"},
{
id: "p5",
brand: "Creative Tools",
name: "Generative Art Platform",
price: "Learn More",
rating: 5,
reviewCount: "7 reviews",
imageSrc: "http://img.b2bpic.net/free-vector/geometric-shapes-landing-page-gradient_23-2148266746.jpg",
imageAlt: "creative coding environment ui 3d",
},
id: "p5", brand: "Creative Tools", name: "Generative Art Platform", price: "Learn More", rating: 5,
reviewCount: "7 reviews", imageSrc: "http://img.b2bpic.net/free-vector/geometric-shapes-landing-page-gradient_23-2148266746.jpg", imageAlt: "creative coding environment ui 3d"},
{
id: "p6",
brand: "Performance Apps",
name: "High-Performance SSR",
price: "Read Tech Doc",
rating: 5,
reviewCount: "9 reviews",
imageSrc: "http://img.b2bpic.net/free-photo/office-supplies-red-table_171337-13059.jpg",
imageAlt: "server side rendering web app performance",
},
id: "p6", brand: "Performance Apps", name: "High-Performance SSR", price: "Read Tech Doc", rating: 5,
reviewCount: "9 reviews", imageSrc: "http://img.b2bpic.net/free-photo/office-supplies-red-table_171337-13059.jpg", imageAlt: "server side rendering web app performance"},
]}
title="Featured Projects: Innovating at the intersection of tech and art"
description="A selection of my most impactful projects, showcasing innovative uses of 3D, AI, and interactive web technologies."
@@ -278,25 +177,13 @@ export default function LandingPage() {
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "200%+",
description: "Performance Boost in WebGL Apps",
},
id: "m1", value: "200%+", description: "Performance Boost in WebGL Apps"},
{
id: "m2",
value: "30%",
description: "Reduction in Page Load Times",
},
id: "m2", value: "30%", description: "Reduction in Page Load Times"},
{
id: "m3",
value: "95%",
description: "User Engagement Increase with 3D Interfaces",
},
id: "m3", value: "95%", description: "User Engagement Increase with 3D Interfaces"},
{
id: "m4",
value: "100%",
description: "Cross-Browser Compatibility",
},
id: "m4", value: "100%", description: "Cross-Browser Compatibility"},
]}
title="Quantifiable Impact: My contributions"
description="Driving innovation and delivering tangible results through dedicated development and strategic implementation."
@@ -309,65 +196,15 @@ export default function LandingPage() {
useInvertedBackground={true}
testimonials={[
{
id: "t1",
name: "Sarah Johnson",
date: "Jan 2024",
title: "Visionary Developer",
quote: "Mamun's ability to bring complex 3D concepts to life on the web is truly visionary. His interactive portfolio stood out immediately.",
tag: "Tech CEO",
avatarSrc: "http://img.b2bpic.net/free-photo/closeup-confident-adult-business-leader_1262-4819.jpg",
avatarAlt: "tech CEO avatar stylized digital",
imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-103271.jpg",
imageAlt: "abstract 3d background testimonial card",
},
id: "t1", name: "Sarah Johnson", date: "Jan 2024", title: "Visionary Developer", quote: "Mamun's ability to bring complex 3D concepts to life on the web is truly visionary. His interactive portfolio stood out immediately.", tag: "Tech CEO", avatarSrc: "http://img.b2bpic.net/free-photo/closeup-confident-adult-business-leader_1262-4819.jpg", avatarAlt: "tech CEO avatar stylized digital", imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-103271.jpg", imageAlt: "abstract 3d background testimonial card"},
{
id: "t2",
name: "Michael Chen",
date: "Feb 2024",
title: "Exceptional Problem Solver",
quote: "His analytical approach to challenges and seamless integration of AI in our project were crucial to its success. A top-tier engineer.",
tag: "Product Manager",
avatarSrc: "http://img.b2bpic.net/free-photo/pixel-art-design-portrait-bitmap_23-2149232484.jpg",
avatarAlt: "female product manager avatar digital",
imageSrc: "http://img.b2bpic.net/free-photo/studio-background-concept-abstract-empty-light-gradient-purple-studio-room-background-product-plain-studio-background_1258-87879.jpg",
imageAlt: "abstract 3d background testimonial card",
},
id: "t2", name: "Michael Chen", date: "Feb 2024", title: "Exceptional Problem Solver", quote: "His analytical approach to challenges and seamless integration of AI in our project were crucial to its success. A top-tier engineer.", tag: "Product Manager", avatarSrc: "http://img.b2bpic.net/free-photo/pixel-art-design-portrait-bitmap_23-2149232484.jpg", avatarAlt: "female product manager avatar digital", imageSrc: "http://img.b2bpic.net/free-photo/studio-background-concept-abstract-empty-light-gradient-purple-studio-room-background-product-plain-studio-background_1258-87879.jpg", imageAlt: "abstract 3d background testimonial card"},
{
id: "t3",
name: "Emily Rodriguez",
date: "Mar 2024",
title: "Creative Technologist",
quote: "Mamun consistently delivers not just functional code, but also aesthetically stunning and highly engaging user experiences.",
tag: "CTO",
avatarSrc: "http://img.b2bpic.net/free-photo/pisces-portrait-beautiful-woman_23-2149275130.jpg",
avatarAlt: "male CTO avatar stylized digital",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-blank-card-with-green-buttons_23-2148527922.jpg",
imageAlt: "abstract 3d background testimonial card",
},
id: "t3", name: "Emily Rodriguez", date: "Mar 2024", title: "Creative Technologist", quote: "Mamun consistently delivers not just functional code, but also aesthetically stunning and highly engaging user experiences.", tag: "CTO", avatarSrc: "http://img.b2bpic.net/free-photo/pisces-portrait-beautiful-woman_23-2149275130.jpg", avatarAlt: "male CTO avatar stylized digital", imageSrc: "http://img.b2bpic.net/free-photo/top-view-blank-card-with-green-buttons_23-2148527922.jpg", imageAlt: "abstract 3d background testimonial card"},
{
id: "t4",
name: "David Kim",
date: "Apr 2024",
title: "Responsive and Reliable",
quote: "Working with Mamun is a pleasure. He's incredibly responsive, understands project needs deeply, and consistently exceeds expectations.",
tag: "Marketing Director",
avatarSrc: "http://img.b2bpic.net/free-vector/illustration-people-avatar_53876-44061.jpg",
avatarAlt: "female marketing director avatar digital",
imageSrc: "http://img.b2bpic.net/free-photo/abstract-orange-background-layout-designstudioroom-web-template-business-report-with-smooth-circle-gradient-color_1258-92100.jpg",
imageAlt: "abstract 3d background testimonial card",
},
id: "t4", name: "David Kim", date: "Apr 2024", title: "Responsive and Reliable", quote: "Working with Mamun is a pleasure. He's incredibly responsive, understands project needs deeply, and consistently exceeds expectations.", tag: "Marketing Director", avatarSrc: "http://img.b2bpic.net/free-vector/illustration-people-avatar_53876-44061.jpg", avatarAlt: "female marketing director avatar digital", imageSrc: "http://img.b2bpic.net/free-photo/abstract-orange-background-layout-designstudioroom-web-template-business-report-with-smooth-circle-gradient-color_1258-92100.jpg", imageAlt: "abstract 3d background testimonial card"},
{
id: "t5",
name: "Jessica Lee",
date: "May 2024",
title: "Master of WebGL",
quote: "His command over WebGL and Three.js allowed us to create a truly groundbreaking interactive platform. Highly recommended for complex 3D projects.",
tag: "Lead Developer",
avatarSrc: "http://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18943.jpg",
avatarAlt: "male lead developer avatar digital",
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-flowing-particle-design_1048-13007.jpg",
imageAlt: "abstract 3d background testimonial card",
},
id: "t5", name: "Jessica Lee", date: "May 2024", title: "Master of WebGL", quote: "His command over WebGL and Three.js allowed us to create a truly groundbreaking interactive platform. Highly recommended for complex 3D projects.", tag: "Lead Developer", avatarSrc: "http://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18943.jpg", avatarAlt: "male lead developer avatar digital", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-flowing-particle-design_1048-13007.jpg", imageAlt: "abstract 3d background testimonial card"},
]}
title="What people say about my work"
description="Insights from clients and collaborators on the impact and quality of my development and design contributions."
@@ -380,37 +217,22 @@ export default function LandingPage() {
useInvertedBackground={false}
faqs={[
{
id: "faq1",
title: "What technologies do you specialize in?",
content: "I specialize in modern web technologies, including React, Next.js, TypeScript, WebGL (Three.js, Babylon.js), AI/ML integration, and various cloud platforms.",
},
id: "faq1", title: "What technologies do you specialize in?", content: "I specialize in modern web technologies, including React, Next.js, TypeScript, WebGL (Three.js, Babylon.js), AI/ML integration, and various cloud platforms."},
{
id: "faq2",
title: "Can you work with existing teams and projects?",
content: "Yes, I am experienced in collaborating with existing teams, integrating into ongoing projects, and adopting established workflows and coding standards.",
},
id: "faq2", title: "Can you work with existing teams and projects?", content: "Yes, I am experienced in collaborating with existing teams, integrating into ongoing projects, and adopting established workflows and coding standards."},
{
id: "faq3",
title: "What kind of projects are you most interested in?",
content: "I am most passionate about projects that involve interactive 3D graphics, real-time data visualization, AI-driven features, and complex, performance-critical web applications.",
},
id: "faq3", title: "What kind of projects are you most interested in?", content: "I am most passionate about projects that involve interactive 3D graphics, real-time data visualization, AI-driven features, and complex, performance-critical web applications."},
{
id: "faq4",
title: "What is your process for new projects?",
content: "My process typically involves discovery, planning, design & prototyping, development, testing, deployment, and ongoing support. I prioritize clear communication and iterative feedback.",
},
id: "faq4", title: "What is your process for new projects?", content: "My process typically involves discovery, planning, design & prototyping, development, testing, deployment, and ongoing support. I prioritize clear communication and iterative feedback."},
{
id: "faq5",
title: "How do you ensure performance in 3D applications?",
content: "I focus on optimization techniques like efficient asset loading, geometry optimization, shader performance, smart LODs, and Web Workers to ensure smooth frame rates and responsive interactions.",
},
id: "faq5", title: "How do you ensure performance in 3D applications?", content: "I focus on optimization techniques like efficient asset loading, geometry optimization, shader performance, smart LODs, and Web Workers to ensure smooth frame rates and responsive interactions."},
]}
imageSrc="http://img.b2bpic.net/free-photo/flat-lay-colorful-translucent-geometric-shapes_23-2148830204.jpg"
imageAlt="problem solving concept 3d faq"
mediaAnimation="reveal-blur"
mediaAnimation="blur-reveal"
title="Frequently Asked Questions"
description="Find answers to common questions about my skills, projects, and collaboration process."
faqsAnimation="reveal-blur"
faqsAnimation="blur-reveal"
/>
</div>
@@ -418,8 +240,7 @@ export default function LandingPage() {
<ContactCenter
useInvertedBackground={true}
background={{
variant: "radial-gradient",
}}
variant: "radial-gradient"}}
tag="Get in Touch"
title="Let's build something amazing together"
description="Whether you're looking to hire a senior developer, collaborate on an innovative project, or just connect, I'm eager to hear from you."
@@ -436,41 +257,25 @@ export default function LandingPage() {
logoText="Mamun's Portfolio"
columns={[
{
title: "Navigation",
items: [
title: "Navigation", items: [
{
label: "Home",
href: "#home",
},
label: "Home", href: "#home"},
{
label: "About",
href: "#about",
},
label: "About", href: "#about"},
{
label: "Work",
href: "#work",
},
label: "Work", href: "#work"},
{
label: "Skills",
href: "#skills",
},
label: "Skills", href: "#skills"},
],
},
{
title: "Connect",
items: [
title: "Connect", items: [
{
label: "LinkedIn",
href: "https://linkedin.com/in/mamunfarhat",
},
label: "LinkedIn", href: "https://linkedin.com/in/mamunfarhat"},
{
label: "GitHub",
href: "https://github.com/MamunFarhat",
},
label: "GitHub", href: "https://github.com/MamunFarhat"},
{
label: "Contact",
href: "#contact",
},
label: "Contact", href: "#contact"},
],
},
]}