Merge version_1 into main #1
265
src/app/page.tsx
265
src/app/page.tsx
@@ -31,29 +31,17 @@ export default function LandingPage() {
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
name: "Home", id: "#hero"},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
name: "About", id: "#about"},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
name: "Services", id: "#services"},
|
||||
{
|
||||
name: "Projects",
|
||||
id: "#projects",
|
||||
},
|
||||
name: "Projects", id: "#projects"},
|
||||
{
|
||||
name: "Skills",
|
||||
id: "#skills",
|
||||
},
|
||||
name: "Skills", id: "#skills"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
brandName="Jahanzaib Mahar"
|
||||
/>
|
||||
@@ -62,45 +50,28 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "downward-rays-animated-grid",
|
||||
}}
|
||||
variant: "downward-rays-animated-grid"}}
|
||||
title="Hi, I am Jahanzaib Mahar"
|
||||
description="Full Stack Web Developer. I deliver modern, scalable, and reliable web solutions for businesses and worldwide clients. Specializing in React, Next.js, TypeScript, and Node.js, I turn complex ideas into seamless digital experiences that drive real business growth."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start a Project",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Start a Project", href: "#contact"},
|
||||
{
|
||||
text: "View Projects",
|
||||
href: "#projects",
|
||||
},
|
||||
text: "View Projects", href: "#projects"},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-green-background-from-brilliant-mosaic-pattern-generative-ai_169016-30204.jpg",
|
||||
imageAlt: "Modern web development environment",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-green-background-from-brilliant-mosaic-pattern-generative-ai_169016-30204.jpg", imageAlt: "Modern web development environment"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-with-flowing-cyber-dots_1048-13630.jpg",
|
||||
imageAlt: "Abstract data flow between backend and frontend",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-with-flowing-cyber-dots_1048-13630.jpg", imageAlt: "Abstract data flow between backend and frontend"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038900.jpg",
|
||||
imageAlt: "User-friendly mobile application interface",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038900.jpg", imageAlt: "User-friendly mobile application interface"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-analyzing-checking-finance-graphs-office_23-2150377190.jpg",
|
||||
imageAlt: "Diverse team collaborating on a software project",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-analyzing-checking-finance-graphs-office_23-2150377190.jpg", imageAlt: "Diverse team collaborating on a software project"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/supervisor-overseeing-server-hub_482257-90833.jpg",
|
||||
imageAlt: "Scalable cloud architecture visualization",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/supervisor-overseeing-server-hub_482257-90833.jpg", imageAlt: "Scalable cloud architecture visualization"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/programming-background-collage_23-2149901774.jpg",
|
||||
imageAlt: "Hands typing rapidly on a keyboard, coding",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/programming-background-collage_23-2149901774.jpg", imageAlt: "Hands typing rapidly on a keyboard, coding"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -112,22 +83,16 @@ export default function LandingPage() {
|
||||
description="I’m a full stack web developer who creates clean, scalable sites and applications. My focus is on strong front-end experiences, dependable APIs, and maintainable code that feels natural to work with. From UI polish to server routes and deployment, I keep projects moving with clarity, performance, and a professional finish."
|
||||
metrics={[
|
||||
{
|
||||
value: "5+",
|
||||
title: "Years Experience",
|
||||
},
|
||||
value: "5+", title: "Years Experience"},
|
||||
{
|
||||
value: "Clean",
|
||||
title: "Code Focus",
|
||||
},
|
||||
value: "Clean", title: "Code Focus"},
|
||||
{
|
||||
value: "Scalable",
|
||||
title: "Solutions",
|
||||
},
|
||||
value: "Scalable", title: "Solutions"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/stressed-computer-scientist-praying-eliminate-errors-after-applying-patch_482257-103737.jpg"
|
||||
imageAlt="Jahanzaib Mahar working on a multi-monitor setup"
|
||||
mediaAnimation="background-highlight"
|
||||
metricsAnimation="background-highlight"
|
||||
mediaAnimation="blur-reveal"
|
||||
metricsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -138,32 +103,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "web-applications",
|
||||
title: "Web Applications",
|
||||
descriptions: [
|
||||
"React-based interfaces with strong visual polish, responsive layouts, and smooth interactions.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038906.jpg",
|
||||
imageAlt: "Responsive web application across devices",
|
||||
},
|
||||
id: "web-applications", title: "Web Applications", descriptions: [
|
||||
"React-based interfaces with strong visual polish, responsive layouts, and smooth interactions."],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/representations-user-experience-interface-design_23-2150038906.jpg", imageAlt: "Responsive web application across devices"},
|
||||
{
|
||||
id: "backend-apis",
|
||||
title: "Backend APIs",
|
||||
descriptions: [
|
||||
"Node.js and Express services built for reliability, clean data flow, and fast iteration.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-blockchain-technology_23-2151480171.jpg",
|
||||
imageAlt: "Abstract visualization of backend API architecture",
|
||||
},
|
||||
id: "backend-apis", title: "Backend APIs", descriptions: [
|
||||
"Node.js and Express services built for reliability, clean data flow, and fast iteration."],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-blockchain-technology_23-2151480171.jpg", imageAlt: "Abstract visualization of backend API architecture"},
|
||||
{
|
||||
id: "optimization",
|
||||
title: "Optimization",
|
||||
descriptions: [
|
||||
"Performance tuning, deployment readiness, and front-end improvements that keep products fast.",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",
|
||||
imageAlt: "Website performance optimization illustration",
|
||||
},
|
||||
id: "optimization", title: "Optimization", descriptions: [
|
||||
"Performance tuning, deployment readiness, and front-end improvements that keep products fast."],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg", imageAlt: "Website performance optimization illustration"},
|
||||
]}
|
||||
title="What I Do"
|
||||
description="Services designed to support every stage of your product."
|
||||
@@ -179,53 +129,17 @@ export default function LandingPage() {
|
||||
carouselMode="buttons"
|
||||
products={[
|
||||
{
|
||||
id: "portfolio-launch",
|
||||
name: "Portfolio Launch",
|
||||
price: "Personal Project",
|
||||
variant: "React, CSS, Responsive",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-career-guidance-items-designers_23-2149443518.jpg",
|
||||
imageAlt: "Screenshot of a modern personal website",
|
||||
},
|
||||
id: "portfolio-launch", name: "Portfolio Launch", price: "Personal Project", variant: "React, CSS, Responsive", imageSrc: "http://img.b2bpic.net/free-photo/top-view-career-guidance-items-designers_23-2149443518.jpg", imageAlt: "Screenshot of a modern personal website"},
|
||||
{
|
||||
id: "analytics-dashboard",
|
||||
name: "Analytics Dashboard",
|
||||
price: "Client Project",
|
||||
variant: "UI, API, Charts",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/employee-uses-phone-app-with-greenscreen_482257-81843.jpg",
|
||||
imageAlt: "Screenshot of a data-driven analytics dashboard",
|
||||
},
|
||||
id: "analytics-dashboard", name: "Analytics Dashboard", price: "Client Project", variant: "UI, API, Charts", imageSrc: "http://img.b2bpic.net/free-photo/employee-uses-phone-app-with-greenscreen_482257-81843.jpg", imageAlt: "Screenshot of a data-driven analytics dashboard"},
|
||||
{
|
||||
id: "ecommerce-landing",
|
||||
name: "E-commerce Landing",
|
||||
price: "Client Project",
|
||||
variant: "Frontend, UX, Conversion",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mobile-shopping-experience_23-2151952959.jpg",
|
||||
imageAlt: "Screenshot of an e-commerce landing page",
|
||||
},
|
||||
id: "ecommerce-landing", name: "E-commerce Landing", price: "Client Project", variant: "Frontend, UX, Conversion", imageSrc: "http://img.b2bpic.net/free-photo/mobile-shopping-experience_23-2151952959.jpg", imageAlt: "Screenshot of an e-commerce landing page"},
|
||||
{
|
||||
id: "mobile-task-app",
|
||||
name: "Mobile Task App",
|
||||
price: "Concept Project",
|
||||
variant: "React Native, UI/UX",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-design-fitness-app-template_23-2151088857.jpg",
|
||||
imageAlt: "Mobile task management application",
|
||||
},
|
||||
id: "mobile-task-app", name: "Mobile Task App", price: "Concept Project", variant: "React Native, UI/UX", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-fitness-app-template_23-2151088857.jpg", imageAlt: "Mobile task management application"},
|
||||
{
|
||||
id: "saas-platform",
|
||||
name: "SaaS Collaboration Platform",
|
||||
price: "Client Project",
|
||||
variant: "Next.js, Node.js, PostgreSQL",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-analyzing-company-graph-laptop-computer-working-management-presentation-business-meeting-startup-office-diverse-businesspeople-discussing-collaboration-project_482257-29807.jpg",
|
||||
imageAlt: "SaaS project collaboration platform interface",
|
||||
},
|
||||
id: "saas-platform", name: "SaaS Collaboration Platform", price: "Client Project", variant: "Next.js, Node.js, PostgreSQL", imageSrc: "http://img.b2bpic.net/free-photo/businessman-analyzing-company-graph-laptop-computer-working-management-presentation-business-meeting-startup-office-diverse-businesspeople-discussing-collaboration-project_482257-29807.jpg", imageAlt: "SaaS project collaboration platform interface"},
|
||||
{
|
||||
id: "tech-blog",
|
||||
name: "Developer Blog",
|
||||
price: "Personal Project",
|
||||
variant: "Next.js, Markdown, SEO",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/online-ticket-booking_53876-65475.jpg",
|
||||
imageAlt: "Modern tech blog website homepage",
|
||||
},
|
||||
id: "tech-blog", name: "Developer Blog", price: "Personal Project", variant: "Next.js, Markdown, SEO", imageSrc: "http://img.b2bpic.net/free-photo/online-ticket-booking_53876-65475.jpg", imageAlt: "Modern tech blog website homepage"},
|
||||
]}
|
||||
title="Projects"
|
||||
description="Selected work that demonstrates clean code and polished delivery."
|
||||
@@ -237,15 +151,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"React",
|
||||
"Next.js",
|
||||
"Node.js",
|
||||
"Express",
|
||||
"TypeScript",
|
||||
"MongoDB",
|
||||
"PostgreSQL",
|
||||
"REST API",
|
||||
]}
|
||||
"React", "Next.js", "Node.js", "Express", "TypeScript", "MongoDB", "PostgreSQL", "REST API"]}
|
||||
title="Skills"
|
||||
description="Technologies I use to build products end to end."
|
||||
showCard={true}
|
||||
@@ -259,45 +165,15 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Johnson",
|
||||
handle: "@sarahj",
|
||||
testimonial: "Jahanzaib delivered an outstanding web application that exceeded our expectations. His attention to detail and ability to tackle complex problems was truly impressive. Highly recommended!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-business-woman-looking-up-copy-space_1262-3088.jpg",
|
||||
imageAlt: "Sarah Johnson",
|
||||
},
|
||||
id: "1", name: "Sarah Johnson", handle: "@sarahj", testimonial: "Jahanzaib delivered an outstanding web application that exceeded our expectations. His attention to detail and ability to tackle complex problems was truly impressive. Highly recommended!", imageSrc: "http://img.b2bpic.net/free-photo/smiling-business-woman-looking-up-copy-space_1262-3088.jpg", imageAlt: "Sarah Johnson"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael Chen",
|
||||
handle: "@michaelc",
|
||||
testimonial: "Working with Jahanzaib was a pleasure. He's a skilled developer who consistently delivered high-quality code and valuable insights throughout the project. Our new platform is much more robust.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-brunette-man-eyeglasses-smiles-widely-outside-happy-guy-black-jacket-white-tshirt-poses-near-airport_197531-27123.jpg",
|
||||
imageAlt: "Michael Chen",
|
||||
},
|
||||
id: "2", name: "Michael Chen", handle: "@michaelc", testimonial: "Working with Jahanzaib was a pleasure. He's a skilled developer who consistently delivered high-quality code and valuable insights throughout the project. Our new platform is much more robust.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-brunette-man-eyeglasses-smiles-widely-outside-happy-guy-black-jacket-white-tshirt-poses-near-airport_197531-27123.jpg", imageAlt: "Michael Chen"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Rodriguez",
|
||||
handle: "@emilyr",
|
||||
testimonial: "Jahanzaib transformed our vision into a functional and beautiful product. His expertise in both front-end and back-end development made the entire process seamless and efficient.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg",
|
||||
imageAlt: "Emily Rodriguez",
|
||||
},
|
||||
id: "3", name: "Emily Rodriguez", handle: "@emilyr", testimonial: "Jahanzaib transformed our vision into a functional and beautiful product. His expertise in both front-end and back-end development made the entire process seamless and efficient.", imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg", imageAlt: "Emily Rodriguez"},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Kim",
|
||||
handle: "@davidk",
|
||||
testimonial: "Professional, reliable, and incredibly talented. Jahanzaib's work on our API integration was flawless, ensuring our systems communicated perfectly. A true full-stack expert.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg",
|
||||
imageAlt: "David Kim",
|
||||
},
|
||||
id: "4", name: "David Kim", handle: "@davidk", testimonial: "Professional, reliable, and incredibly talented. Jahanzaib's work on our API integration was flawless, ensuring our systems communicated perfectly. A true full-stack expert.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg", imageAlt: "David Kim"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Olivia White",
|
||||
handle: "@oliviaw",
|
||||
testimonial: "I approached Jahanzaib with a challenging project, and he delivered with exceptional results. His problem-solving skills and commitment to quality are second to none.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/youn-g-bearded-man-working-laptop-bar_1303-19972.jpg",
|
||||
imageAlt: "Olivia White",
|
||||
},
|
||||
id: "5", name: "Olivia White", handle: "@oliviaw", testimonial: "I approached Jahanzaib with a challenging project, and he delivered with exceptional results. His problem-solving skills and commitment to quality are second to none.", imageSrc: "http://img.b2bpic.net/free-photo/youn-g-bearded-man-working-laptop-bar_1303-19972.jpg", imageAlt: "Olivia White"},
|
||||
]}
|
||||
title="Client Testimonials"
|
||||
description="Hear what satisfied clients say about my work and dedication."
|
||||
@@ -308,16 +184,13 @@ export default function LandingPage() {
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
tag="Let's Connect"
|
||||
title="Ready to build something together?"
|
||||
description="I’m available for freelance projects, collaboration, or a full-time role. Send a message and I’ll respond quickly."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get in touch",
|
||||
href: "mailto:mahardeveloper@example.com",
|
||||
},
|
||||
text: "Get in touch", href: "mailto:mahardeveloper@example.com"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -329,63 +202,39 @@ export default function LandingPage() {
|
||||
logoText="Jahanzaib Mahar"
|
||||
columns={[
|
||||
{
|
||||
title: "About Me",
|
||||
items: [
|
||||
title: "About Me", items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
label: "Home", href: "#hero"},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "Skills",
|
||||
href: "#skills",
|
||||
},
|
||||
label: "Skills", href: "#skills"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Quick Links",
|
||||
items: [
|
||||
title: "Quick Links", items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Services", href: "#services"},
|
||||
{
|
||||
label: "Projects",
|
||||
href: "#projects",
|
||||
},
|
||||
label: "Projects", href: "#projects"},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Contact", href: "#contact"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms & Conditions",
|
||||
href: "#",
|
||||
},
|
||||
label: "Terms & Conditions", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect With Me",
|
||||
items: [
|
||||
title: "Connect With Me", items: [
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "https://linkedin.com/in/jahanzaibmahar",
|
||||
},
|
||||
label: "LinkedIn", href: "https://linkedin.com/in/jahanzaibmahar"},
|
||||
{
|
||||
label: "GitHub",
|
||||
href: "https://github.com/jahanzaibmahar",
|
||||
},
|
||||
label: "GitHub", href: "https://github.com/jahanzaibmahar"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user