Initial commit
This commit is contained in:
285
src/app/page.tsx
Normal file
285
src/app/page.tsx
Normal file
@@ -0,0 +1,285 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user