Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| e4912e9f43 | |||
| 3d9cb81d3f | |||
| 6478c00549 |
380
src/app/page.tsx
380
src/app/page.tsx
@@ -4,14 +4,15 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import { Briefcase, Code, Award, Users } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
export default function PortfolioPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
@@ -26,289 +27,104 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Experience",
|
||||
id: "experience",
|
||||
},
|
||||
{
|
||||
name: "Projects",
|
||||
id: "projects",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Experience", id: "experience" },
|
||||
{ name: "Projects", id: "projects" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Building Digital Excellence"
|
||||
description="Experienced developer dedicated to creating intuitive, scalable, and high-performance software solutions. Let's build your next big thing."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Resume",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
text: "Contact Me",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-modern-corporate-high-end-office-space-designed-ceo_482257-101274.jpg"
|
||||
imageAlt="Professional Portfolio Hero"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/crazy-businessman-worried-expression_1194-3838.jpg",
|
||||
alt: "Team Member",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-young-adult-expertise-smiling-hospital_1134-1350.jpg",
|
||||
alt: "Team Member",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/bearded-man-wearing-white-shirt-with-serious-face-with-arms-crossed-chest-standing-light-wall_141793-56741.jpg",
|
||||
alt: "Team Member",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/confident-businessman-with-beard-smiling-camera-generated-by-ai_188544-33152.jpg",
|
||||
alt: "Team Member",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/senior-businessman_1098-13804.jpg",
|
||||
alt: "Team Member",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by industry experts"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "React.js",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "TypeScript",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Node.js",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Cloud Architecture",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "System Design",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Creative Developer"
|
||||
description="Crafting digital solutions that blend aesthetics with functionality. Turning complex problems into intuitive experiences."
|
||||
mediaItems={[
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bz1b2AeRyCotz14hcA8uNu1UwL/uploaded-1775477316015-42qlt5vo.jpg?_wi=1", imageAlt: "Project 1" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bz1b2AeRyCotz14hcA8uNu1UwL/uploaded-1775477316015-42qlt5vo.jpg?_wi=2", imageAlt: "Project 2" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bz1b2AeRyCotz14hcA8uNu1UwL/uploaded-1775477316015-42qlt5vo.jpg?_wi=3", imageAlt: "Project 3" }
|
||||
]}
|
||||
buttons={[{ text: "Explore Work", href: "#projects" }, { text: "Get in touch", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="About Me"
|
||||
buttons={[
|
||||
{
|
||||
text: "Download CV",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="About Me"
|
||||
useInvertedBackground={false}
|
||||
description={["I am a passionate software developer with a focus on building scalable web applications. My background spans across front-end design and back-end architecture.", "I believe in clean code and collaborative growth, consistently looking for new ways to optimize user experiences."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="experience" data-section="experience">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "5+",
|
||||
description: "Years of experience in software development",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "20+",
|
||||
description: "Successful projects delivered across industries",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "100%",
|
||||
description: "Dedicated commitment to high quality code",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
value: "12+",
|
||||
description: "Global clients supported",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
value: "500k+",
|
||||
description: "Lines of production code written",
|
||||
},
|
||||
]}
|
||||
title="Career Milestones"
|
||||
description="A deep dive into my professional track record and commitment to excellence."
|
||||
/>
|
||||
</div>
|
||||
<div id="experience" data-section="experience">
|
||||
<MetricCardOne
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Technical Expertise"
|
||||
description="A showcase of professional milestones and core competencies."
|
||||
metrics={[
|
||||
{ id: "1", value: "5+", title: "Years Experience", description: "Dedicated software development journey", icon: Briefcase },
|
||||
{ id: "2", value: "50+", title: "Projects Completed", description: "Diverse industry solutions", icon: Code },
|
||||
{ id: "3", value: "100%", title: "Quality Driven", description: "Commitment to clean and performant code", icon: Award },
|
||||
{ id: "4", value: "20+", title: "Global Partners", description: "Collaborating with teams worldwide", icon: Users }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Software Dashboard",
|
||||
price: "SaaS Platform",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-looking-computer-monitor-with-charts-analyzing-statistics-information-data-create-project-report-doing-financial-research-pc-screen-with-network-presentation_482257-46960.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mobile Productivity App",
|
||||
price: "Mobile App",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-illustration-closed-black-gift-box_107791-18203.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Productivity Hub",
|
||||
price: "Web App",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mockup-copy-space-blank-screen-concept_53876-120457.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Analytics Component",
|
||||
price: "UI Kit",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/fitness-mobile-app-infographic-template-flat-style_23-2148219822.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Development Tool",
|
||||
price: "Dev Tool",
|
||||
imageSrc: "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-18937.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Design Concept",
|
||||
price: "Concept",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg",
|
||||
},
|
||||
]}
|
||||
title="Featured Projects"
|
||||
description="A collection of my latest work spanning various industries and technologies."
|
||||
/>
|
||||
</div>
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardThree
|
||||
title="Selected Work"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
description="Curated list of technical projects demonstrating diverse problem-solving skills."
|
||||
products={[
|
||||
{ id: "1", name: "Design System", price: "Web App", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bz1b2AeRyCotz14hcA8uNu1UwL/uploaded-1775477316015-42qlt5vo.jpg?_wi=4" },
|
||||
{ id: "2", name: "E-commerce Platform", price: "SaaS", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bz1b2AeRyCotz14hcA8uNu1UwL/uploaded-1775477316015-42qlt5vo.jpg?_wi=5" },
|
||||
{ id: "3", name: "Fintech Dashboard", price: "Fintech", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bz1b2AeRyCotz14hcA8uNu1UwL/uploaded-1775477316015-42qlt5vo.jpg?_wi=6" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Expertise",
|
||||
quote: "Exceptional development skills and professional approach.",
|
||||
name: "Sarah J.",
|
||||
role: "CEO",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crazy-businessman-worried-expression_1194-3838.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Efficiency",
|
||||
quote: "Delivered high-quality results ahead of schedule.",
|
||||
name: "Michael R.",
|
||||
role: "CTO",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-young-adult-expertise-smiling-hospital_1134-1350.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Innovation",
|
||||
quote: "Always brings creative, modern solutions to problems.",
|
||||
name: "Emily D.",
|
||||
role: "Product Manager",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-wearing-white-shirt-with-serious-face-with-arms-crossed-chest-standing-light-wall_141793-56741.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Communication",
|
||||
quote: "Great to work with, responsive and very clear.",
|
||||
name: "David L.",
|
||||
role: "Marketing Director",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-with-beard-smiling-camera-generated-by-ai_188544-33152.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Reliability",
|
||||
quote: "Solid codebase, highly recommended for any team.",
|
||||
name: "Jessica W.",
|
||||
role: "Founder",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman_1098-13804.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Feedback"
|
||||
description="What partners and colleagues have to say about my work."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
title="Client Stories"
|
||||
textboxLayout="split"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
description="Feedback from clients regarding previous collaborations and project outcomes."
|
||||
testimonials={[
|
||||
{ id: "1", name: "Alex P.", role: "Founder", testimonial: "Fantastic work. Understood the requirements instantly and delivered high-quality results.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bz1b2AeRyCotz14hcA8uNu1UwL/uploaded-1775477316015-42qlt5vo.jpg?_wi=7" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get In Touch"
|
||||
description="Have an exciting project? I'd love to hear from you. Send me a message!"
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Project details...",
|
||||
rows: 4,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994395.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Let's Connect"
|
||||
description="Open for new projects and collaborations. Reach out to discuss how we can work together."
|
||||
useInvertedBackground={false}
|
||||
inputs={[{ name: "name", type: "text", placeholder: "Name" }, { name: "email", type: "email", placeholder: "Email" }]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bz1b2AeRyCotz14hcA8uNu1UwL/uploaded-1775477316015-42qlt5vo.jpg?_wi=8"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Portfolio"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Built by Portfolio",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Portfolio"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "© 2024 Portfolio", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user