Merge version_1 into main #7
285
src/app/page.tsx
285
src/app/page.tsx
@@ -2,183 +2,193 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import HeroLogo from "@/components/sections/hero/HeroLogo";
|
||||
import TextAbout from "@/components/sections/about/TextAbout";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
||||
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
|
||||
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import { Cloud, Code2, Container, Database, GitBranch, Mail, Server, Settings, Zap } from "lucide-react";
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
||||
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
|
||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import Link from 'next/link';
|
||||
import { Package, Code, Zap, Users, MessageSquare, Mail } from 'lucide-react';
|
||||
|
||||
const page = () => {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
];
|
||||
|
||||
const products = [
|
||||
{
|
||||
id: "1", name: "Portfolio Website", price: "$5,000", variant: "Custom Design", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Portfolio Website"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Mobile App", price: "$8,000", variant: "Full Stack", imageSrc: "/placeholders/placeholder2.webp", imageAlt: "Mobile App"
|
||||
},
|
||||
{
|
||||
id: "3", name: "E-Commerce Platform", price: "$12,000", variant: "Enterprise Solution", imageSrc: "/placeholders/placeholder3.webp", imageAlt: "E-Commerce Platform"
|
||||
}
|
||||
];
|
||||
|
||||
const skills = {
|
||||
features: [
|
||||
{
|
||||
title: "Web Development", description: "Build responsive and fast websites", bentoComponent: "globe" as const
|
||||
},
|
||||
{
|
||||
title: "Mobile Apps", description: "Create native and cross-platform applications", bentoComponent: "animated-bar-chart" as const
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const experience = [
|
||||
{
|
||||
id: "1", title: "Senior Developer", subtitle: "Tech Company Inc · Full-time", category: "Engineering", value: "3 years"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Full Stack Engineer", subtitle: "Startup XYZ · Full-time", category: "Development", value: "2 years"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Junior Developer", subtitle: "Agency ABC · Full-time", category: "Development", value: "1 year"
|
||||
}
|
||||
];
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
id: "1", name: "John Smith", role: "CEO", company: "Tech Innovations", rating: 5,
|
||||
imageSrc: "/placeholders/placeholder4.webp"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Sarah Johnson", role: "Product Manager", company: "Digital Solutions", rating: 5,
|
||||
imageSrc: "/placeholders/placeholder5.webp"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Michael Davis", role: "Founder", company: "Creative Agency", rating: 5,
|
||||
imageSrc: "/placeholders/placeholder6.webp"
|
||||
}
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "#skills" },
|
||||
{ label: "Portfolio", href: "#projects" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "Contact", href: "#contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Documentation", href: "#" }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="grid"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="light"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Dev"
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Projects", id: "projects" },
|
||||
{ name: "Experience", id: "experience" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{ text: "View My Work", href: "#projects" }}
|
||||
navItems={navItems}
|
||||
brandName="Portfolio"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="Elegant code Thoughtful design"
|
||||
description="I build scalable applications with clean architecture and user-focused design Explore my recent projects and technical work"
|
||||
logoText="Portfolio"
|
||||
description="Showcase of my work and capabilities"
|
||||
buttons={[
|
||||
{ text: "View My Work", href: "#projects" },
|
||||
{ text: "Get in Touch", href: "#contact" }
|
||||
{ text: "View Projects", href: "#projects" },
|
||||
{ text: "Contact Me", href: "#contact" }
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoLvvgVwvre5EtpX2Ur0N2qcml/a-minimalist-elegant-abstract-background-1773254278536-0acf95fb.png"
|
||||
imageAlt="Minimalist abstract background"
|
||||
showDimOverlay={false}
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="Hero section - Portfolio introduction"
|
||||
imageSrc="/placeholders/placeholder1.webp"
|
||||
imageAlt="Hero background"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
tag="About"
|
||||
title="I'm a full-stack developer passionate about creating elegant solutions to complex problems. With expertise in modern web technologies and a focus on user experience, I bridge the gap between design and engineering."
|
||||
tag="About Me"
|
||||
title="I'm a passionate developer creating digital experiences"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "View Resume", href: "#" }]}
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="About section"
|
||||
buttons={[
|
||||
{ text: "Learn More", href: "#skills" },
|
||||
{ text: "Contact", href: "#contact" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardFour
|
||||
products={products}
|
||||
title="Featured Projects"
|
||||
description="A selection of recent work showcasing my approach to scalable, well-architected solutions"
|
||||
description="Explore some of my recent work and projects"
|
||||
tag="Portfolio"
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "Dashboard Analytics Platform", price: "React + Node.js", variant: "Real-time data visualization", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoLvvgVwvre5EtpX2Ur0N2qcml/a-clean-modern-web-application-interface-1773254280341-7a3116c5.png", imageAlt: "Dashboard Analytics Platform"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Social Collaboration App", price: "Next.js + Supabase", variant: "Mobile-first responsive design", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoLvvgVwvre5EtpX2Ur0N2qcml/a-sleek-mobile-app-interface-displaying--1773254280555-946ca008.png", imageAlt: "Social Collaboration App"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Enterprise SaaS Platform", price: "TypeScript + PostgreSQL", variant: "Microservices architecture", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoLvvgVwvre5EtpX2Ur0N2qcml/a-professional-saas-platform-interface-w-1773254281320-4f0ad153.png", imageAlt: "Enterprise SaaS Platform"
|
||||
}
|
||||
]}
|
||||
tagIcon={Package}
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="Featured projects section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="skills" data-section="skills">
|
||||
<FeatureBento
|
||||
title="Technical Expertise"
|
||||
description="Core technologies and skills that power my development work"
|
||||
tag="Skills"
|
||||
features={[
|
||||
{
|
||||
title: "Frontend Development", description: "React, Next.js, TypeScript, Tailwind CSS", bentoComponent: "marquee", centerIcon: Code2,
|
||||
variant: "text", texts: ["React", "Next.js", "TypeScript", "Tailwind", "Vue.js"]
|
||||
title: "Web Development", description: "Build responsive and fast websites", bentoComponent: "globe" as const
|
||||
},
|
||||
{
|
||||
title: "Backend & Databases", description: "Node.js, PostgreSQL, MongoDB, REST APIs", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Database, label: "Databases", value: "PostgreSQL, MongoDB" },
|
||||
{ icon: Server, label: "Backends", value: "Node.js, Express" },
|
||||
{ icon: Zap, label: "APIs", value: "REST, GraphQL" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "DevOps & Tools", description: "Git, Docker, AWS, CI/CD pipelines", bentoComponent: "orbiting-icons", centerIcon: Settings,
|
||||
items: [
|
||||
{ icon: GitBranch, ring: 1 },
|
||||
{ icon: Container, ring: 1 },
|
||||
{ icon: Cloud, ring: 2 },
|
||||
{ icon: Zap, ring: 2 }
|
||||
]
|
||||
title: "Mobile Apps", description: "Create native and cross-platform applications", bentoComponent: "animated-bar-chart" as const
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="My Skills"
|
||||
description="Technologies and expertise I bring to every project"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="Technical skills section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="experience" data-section="experience">
|
||||
<MetricCardTen
|
||||
title="Professional Experience"
|
||||
description="A track record of delivering high-quality software solutions across diverse domains"
|
||||
tag="Experience"
|
||||
metrics={[
|
||||
{
|
||||
id: "1", title: "Senior Full-Stack Engineer", subtitle: "TechCorp Inc · San Francisco, CA · 2022 - Present", category: "Engineering", value: "$150K - $200K"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Full-Stack Developer", subtitle: "StartupXYZ · Remote · 2020 - 2022", category: "Development", value: "$110K - $145K"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Junior Developer", subtitle: "WebAgency Co · New York, NY · 2019 - 2020", category: "Frontend", value: "$70K - $90K"
|
||||
}
|
||||
]}
|
||||
metrics={experience}
|
||||
title="Experience"
|
||||
description="My professional journey and roles"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
carouselMode="buttons"
|
||||
ariaLabel="Professional experience section"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
title="What Others Say"
|
||||
description="Feedback from colleagues and industry leaders who've experienced my work"
|
||||
tag="Testimonials"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Sarah Johnson", role: "Engineering Manager", company: "TechCorp Inc", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoLvvgVwvre5EtpX2Ur0N2qcml/professional-portrait-photo-of-a-tech-in-1773254278880-8566f19b.png", imageAlt: "Sarah Johnson"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Michael Chen", role: "Product Lead", company: "StartupXYZ", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoLvvgVwvre5EtpX2Ur0N2qcml/professional-portrait-of-a-product-manag-1773254279858-7fa266a6.png", imageAlt: "Michael Chen"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Emily Rodriguez", role: "CTO", company: "InnovateLab", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoLvvgVwvre5EtpX2Ur0N2qcml/professional-portrait-of-a-software-engi-1773254280031-709789da.png", imageAlt: "Emily Rodriguez"
|
||||
},
|
||||
{
|
||||
id: "4", name: "David Kim", role: "CEO", company: "GrowthCo", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoLvvgVwvre5EtpX2Ur0N2qcml/professional-portrait-of-a-startup-found-1773254279469-5572f0c3.png", imageAlt: "David Kim"
|
||||
}
|
||||
]}
|
||||
testimonials={testimonials}
|
||||
title="What Clients Say"
|
||||
description="Feedback from people I've worked with"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
carouselMode="buttons"
|
||||
ariaLabel="Testimonials section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -187,47 +197,24 @@ export default function LandingPage() {
|
||||
tag="Get in Touch"
|
||||
tagIcon={Mail}
|
||||
title="Ready to Work Together?"
|
||||
description="Whether you're looking to hire, collaborate, or discuss a project, I'd love to hear from you. Let's create something amazing together."
|
||||
description="Let's discuss your next project and how I can help bring your ideas to life."
|
||||
buttons={[
|
||||
{ text: "Send an Email", href: "mailto:hello@example.com" },
|
||||
{ text: "Connect on LinkedIn", href: "https://linkedin.com" }
|
||||
{ text: "Send Email", href: "mailto:contact@example.com" },
|
||||
{ text: "Schedule Call", href: "#" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
tagAnimation="slide-up"
|
||||
ariaLabel="Contact section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Projects", href: "#projects" },
|
||||
{ label: "Experience", href: "#experience" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "GitHub", href: "https://github.com" },
|
||||
{ label: "LinkedIn", href: "https://linkedin.com" },
|
||||
{ label: "Twitter", href: "https://twitter.com" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{ label: "Privacy", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Developer Portfolio. All rights reserved."
|
||||
columns={footerColumns}
|
||||
copyrightText="© 2025 Portfolio. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
||||
Reference in New Issue
Block a user