204 lines
11 KiB
TypeScript
204 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
|
|
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
|
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
|
import { Briefcase, Cloud, Code, Database, GitBranch, Mail, Shield, Sparkles, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Dev"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Skills", id: "skills" },
|
|
{ name: "Projects", id: "projects" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
button={{ text: "Get in Touch", href: "#contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
title="Full-Stack Developer & Creative Problem Solver"
|
|
description="I build scalable web applications and robust backends. Specializing in modern JavaScript, cloud infrastructure, and delivering exceptional user experiences. Let's create something impactful together."
|
|
tag="Software Engineer"
|
|
tagIcon={Code}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai5vRNoFH1pwSAQ2OS71p9EcD2/a-modern-software-engineer-workspace-wit-1773062850632-54bd24a5.png", imageAlt: "Modern software engineer workspace with multiple monitors"},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai5vRNoFH1pwSAQ2OS71p9EcD2/close-up-of-hands-typing-on-a-mechanical-1773062852072-35f3f38d.png", imageAlt: "Close-up of coding on a mechanical keyboard"},
|
|
]}
|
|
rating={5}
|
|
ratingText="Trusted by innovative teams"
|
|
buttons={[
|
|
{ text: "View My Work", href: "#projects" },
|
|
{ text: "Get in Touch", href: "#contact" },
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
title="About Me"
|
|
description={[
|
|
"With 6+ years of experience in full-stack development, I've helped startups and established companies build scalable solutions that drive growth. I'm passionate about clean code, system architecture, and mentoring junior developers.", "My expertise spans React, Node.js, Python, and cloud platforms. I focus on writing maintainable code, optimizing performance, and creating seamless experiences. I'm always eager to learn new technologies and solve complex challenges."]}
|
|
buttons={[
|
|
{ text: "Download Resume", href: "#" },
|
|
{ text: "Let's Connect", href: "#contact" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
showBorder={false}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="skills" data-section="skills">
|
|
<FeatureBorderGlow
|
|
title="Technical Expertise"
|
|
description="I combine cutting-edge technologies with proven best practices to deliver high-performance solutions."
|
|
tag="Core Skills"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
icon: Code,
|
|
title: "Full-Stack Development", description: "Expert in React, Vue, and modern JavaScript frameworks paired with Node.js and Python backends for complete end-to-end solutions."},
|
|
{
|
|
icon: Cloud,
|
|
title: "Cloud Infrastructure", description: "Proficient with AWS, Google Cloud, and Docker containerization for scalable, resilient deployments and DevOps practices."},
|
|
{
|
|
icon: Database,
|
|
title: "Database Design", description: "Strong foundation in SQL and NoSQL databases including PostgreSQL, MongoDB, and Redis for optimized data management."},
|
|
{
|
|
icon: Zap,
|
|
title: "Performance Optimization", description: "Specialized in code optimization, caching strategies, and monitoring tools to ensure lightning-fast application performance."},
|
|
{
|
|
icon: Shield,
|
|
title: "Security First", description: "Committed to secure coding practices, authentication systems, and compliance standards to protect user data and privacy."},
|
|
{
|
|
icon: GitBranch,
|
|
title: "Version Control & CI/CD", description: "Expert in Git workflows, automated testing, and continuous integration pipelines for smooth team collaboration."},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<ProductCardFour
|
|
title="Featured Projects"
|
|
description="A selection of recent projects showcasing my ability to deliver scalable, user-focused solutions across different domains."
|
|
tag="Portfolio"
|
|
tagIcon={Briefcase}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", name: "E-Commerce Platform Redesign", price: "React, Node.js, PostgreSQL", variant: "Increased conversion by 45%", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai5vRNoFH1pwSAQ2OS71p9EcD2/modern-e-commerce-platform-interface-wit-1773062851018-4d1ad20b.png", imageAlt: "E-commerce platform interface"},
|
|
{
|
|
id: "2", name: "Real-Time Analytics Dashboard", price: "React, D3.js, Python", variant: "Processing 10M+ events daily", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai5vRNoFH1pwSAQ2OS71p9EcD2/real-time-analytics-dashboard-with-chart-1773062851912-ddd8b960.png", imageAlt: "Analytics dashboard with metrics"},
|
|
{
|
|
id: "3", name: "Mobile Banking Application", price: "React Native, AWS, Firebase", variant: "500K+ active users", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai5vRNoFH1pwSAQ2OS71p9EcD2/mobile-app-interface-design-showcasing-i-1773062851436-744c1e42.png", imageAlt: "Mobile app interface design"},
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
carouselMode="buttons"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="Working with this developer was transformative. They delivered a complex full-stack solution on time and exceeded our performance expectations. Their attention to detail and proactive communication made the entire process seamless."
|
|
rating={5}
|
|
author="Sarah Chen, CTO at TechVentures"
|
|
avatars={[
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai5vRNoFH1pwSAQ2OS71p9EcD2/professional-headshot-of-a-confident-tec-1773062852054-f7b1e40a.png", alt: "Sarah Chen" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai5vRNoFH1pwSAQ2OS71p9EcD2/professional-headshot-of-a-product-manag-1773062849724-61bba6cc.png", alt: "Michael Rodriguez" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai5vRNoFH1pwSAQ2OS71p9EcD2/professional-headshot-of-a-creative-dire-1773062851496-78ec73a0.png", alt: "Emily Watson" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ai5vRNoFH1pwSAQ2OS71p9EcD2/professional-headshot-of-a-software-arch-1773062850844-46ebc7b2.png", alt: "David Kim" },
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Let's Connect"
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
title="Ready to Build Something Great?"
|
|
description="Whether you have a project in mind or just want to chat about tech, I'd love to hear from you. Let's create something amazing together."
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="your@email.com"
|
|
buttonText="Send Message"
|
|
termsText="I'll get back to you within 24 hours. Your information is safe with me."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="Dev"
|
|
copyrightText="© 2025 My Portfolio. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Navigation", items: [
|
|
{ label: "Home", href: "/" },
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Skills", href: "#skills" },
|
|
{ label: "Projects", href: "#projects" },
|
|
],
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "GitHub", href: "https://github.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "Email", href: "#contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Contact", href: "#contact" },
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|