285 lines
11 KiB
TypeScript
285 lines
11 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
import TagAbout from '@/components/sections/about/TagAbout';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import FeatureCardEleven from '@/components/sections/feature/FeatureCardEleven';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterSocial from '@/components/sections/footer/FooterSocial';
|
|
import { Github, Linkedin, Twitter, Sparkles, Mail } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmall"
|
|
background="noiseGradient"
|
|
cardStyle="spotlight"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleMinimal
|
|
brandName="Dev Portfolio"
|
|
button={{
|
|
text: "Get in touch",
|
|
href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
title="Frontend Developer & UI Engineer"
|
|
description="Crafting beautiful, performant web experiences with React, TypeScript, and modern web technologies. Let's build something amazing together."
|
|
tag="Available for hire"
|
|
tagIcon={Sparkles}
|
|
buttons={[
|
|
{
|
|
text: "View my work",
|
|
href: "#featured-projects"
|
|
},
|
|
{
|
|
text: "Download resume",
|
|
href: "#contact"
|
|
}
|
|
]}
|
|
carouselItems={[
|
|
{
|
|
id: "1",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320177542-9om9tyxf.jpg",
|
|
imageAlt: "Featured project interface"
|
|
},
|
|
{
|
|
id: "2",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766906259746-fj9rua5c.jpg",
|
|
imageAlt: "React component showcase"
|
|
},
|
|
{
|
|
id: "3",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399062140-rc60mgt0.png",
|
|
imageAlt: "Responsive web design"
|
|
},
|
|
{
|
|
id: "4",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890620807-l4c3d1a4.jpg",
|
|
imageAlt: "Dashboard interface"
|
|
},
|
|
{
|
|
id: "5",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890620033-sckgfvwd.jpg",
|
|
imageAlt: "Design system components"
|
|
},
|
|
{
|
|
id: "6",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140099604-32oyqj9b.jpg",
|
|
imageAlt: "Portfolio projects"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TagAbout
|
|
tag="About me"
|
|
description="I'm a frontend developer with 5+ years of experience building responsive, accessible web applications. I specialize in React and modern JavaScript, with a passion for clean code, performance optimization, and creating intuitive user interfaces that solve real problems."
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="featured-projects" data-section="featured-projects">
|
|
<ProductCardOne
|
|
title="Featured Projects"
|
|
description="A selection of my recent work showcasing my skills in frontend development, UI design, and performance optimization."
|
|
tag="Portfolio"
|
|
products={[
|
|
{
|
|
id: "1",
|
|
name: "E-Commerce Platform",
|
|
price: "React • Next.js",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766906259746-fj9rua5c.jpg",
|
|
imageAlt: "E-commerce platform with product filtering and checkout"
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Analytics Dashboard",
|
|
price: "TypeScript • Tailwind",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766906259746-fj9rua5c.jpg",
|
|
imageAlt: "Real-time analytics dashboard with charts"
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Design System",
|
|
price: "Component Library",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890620033-sckgfvwd.jpg",
|
|
imageAlt: "Reusable UI component library"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="expertise" data-section="expertise">
|
|
<FeatureCardEleven
|
|
title="Skills & Expertise"
|
|
description="My journey building high-quality frontend applications"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Frontend Development",
|
|
description: "Expert in React, TypeScript, and modern JavaScript. Building scalable component architectures and performant applications using best practices.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766906259746-fj9rua5c.jpg"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "UI/UX Implementation",
|
|
description: "Translating design into pixel-perfect, responsive interfaces. Proficient with Tailwind CSS, CSS-in-JS, and accessibility standards (WCAG).",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766890620033-sckgfvwd.jpg"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Performance Optimization",
|
|
description: "Optimizing bundle sizes, implementing code splitting, and improving Core Web Vitals. Experience with Next.js, lazy loading, and caching strategies.",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766906259746-fj9rua5c.jpg"
|
|
}
|
|
]}
|
|
animationType="opacity"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
usePrimaryButtonImage={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="What clients say"
|
|
description="Feedback from colleagues and clients I've worked with"
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
title: "Exceptional frontend expertise",
|
|
quote: "Working with this developer was a game-changer. They delivered a responsive, high-performance interface that exceeded our expectations. Their attention to detail and code quality is outstanding.",
|
|
name: "Sarah Chen",
|
|
role: "Product Manager",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg"
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Great communication and delivery",
|
|
quote: "Professional, reliable, and always willing to go the extra mile. They took our design mockups and brought them to life beautifully. Highly recommend for any frontend projects.",
|
|
name: "Michael Rodriguez",
|
|
role: "Design Director",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg"
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Improved our entire codebase",
|
|
quote: "Brought in fresh perspectives and best practices that significantly improved our application's performance and maintainability. A pleasure to collaborate with.",
|
|
name: "Emma Thompson",
|
|
role: "Tech Lead",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163677896-h7vfowg5.jpg"
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "Problem-solving mindset",
|
|
quote: "Not just a developer, but a problem-solver. They understood our business needs and delivered solutions that were both elegant and practical. Exceeded our timeline expectations.",
|
|
name: "James Wilson",
|
|
role: "CEO",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766163678723-295psgl3.jpg"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get in touch"
|
|
title="Ready to collaborate?"
|
|
description="Have a project in mind or want to discuss frontend development? I'd love to hear about your ideas and how we can work together."
|
|
tagIcon={Mail}
|
|
useInvertedBackground="noInvert"
|
|
inputPlaceholder="your.email@example.com"
|
|
buttonText="Let's connect"
|
|
termsText="I'll get back to you within 24 hours. I respect your privacy."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSocial
|
|
logoText="Dev Portfolio"
|
|
columns={[
|
|
{
|
|
title: "Work",
|
|
items: [
|
|
{
|
|
label: "Projects",
|
|
href: "#featured-projects"
|
|
},
|
|
{
|
|
label: "Skills",
|
|
href: "#expertise"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "About",
|
|
items: [
|
|
{
|
|
label: "Bio",
|
|
href: "#about"
|
|
},
|
|
{
|
|
label: "Testimonials",
|
|
href: "#testimonials"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "Connect",
|
|
items: [
|
|
{
|
|
label: "Email",
|
|
href: "#contact"
|
|
},
|
|
{
|
|
label: "Resume",
|
|
href: "#contact"
|
|
}
|
|
]
|
|
}
|
|
]}
|
|
socialLinks={[
|
|
{
|
|
icon: Github,
|
|
href: "https://github.com",
|
|
ariaLabel: "GitHub profile"
|
|
},
|
|
{
|
|
icon: Linkedin,
|
|
href: "https://linkedin.com",
|
|
ariaLabel: "LinkedIn profile"
|
|
},
|
|
{
|
|
icon: Twitter,
|
|
href: "https://twitter.com",
|
|
ariaLabel: "Twitter profile"
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Frontend Developer. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |