235 lines
17 KiB
TypeScript
235 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
|
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
|
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
|
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
|
import { Sparkles, Code, Briefcase, Zap, MessageCircle } from "lucide-react";
|
|
|
|
export default function PortfolioPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Dev Portfolio"
|
|
navItems={[
|
|
{ name: "Work", id: "projects" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Get In Touch", href: "#contact"
|
|
}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
title="FullStack Developer\n5 Years Real Results"
|
|
description="I build scalable web and mobile applications that solve complex problems. From concept to production, I deliver clean code and seamless user experiences that drive measurable business outcomes."
|
|
tag="Available for Contract & Full-Time"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "canvas-reveal" }}
|
|
buttons={[
|
|
{ text: "View My Work", href: "#projects" },
|
|
{ text: "Let's Talk", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-sleek-fullstack-development-dashboard--1773246286835-83ab44a9.png"
|
|
imageAlt="Modern fullstack development dashboard interface"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
tag="About Me"
|
|
tagIcon={Code}
|
|
title="5 Years of Delivering High-Impact Solutions"
|
|
description="With 5 years of fullstack development experience, I've successfully delivered 30+ projects for midmarket companies, startups, and enterprises. My expertise spans modern JavaScript frameworks, cloud infrastructure, database design, and mobile development. I specialize in building scalable applications that solve real business problems with clean, maintainable code and exceptional user experiences."
|
|
metrics={[
|
|
{ value: "30+", title: "Projects Delivered" },
|
|
{ value: "15+", title: "Happy Clients" },
|
|
{ value: "5+", title: "Years Experience" }
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/modern-developer-workspace-showing-fulls-1773246286809-10373734.png"
|
|
imageAlt="Developer workspace with multiple monitors"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<ProductCardFour
|
|
title="Featured Projects"
|
|
description="Explore a selection of my most impactful work across different industries and technologies."
|
|
tag="Case Studies"
|
|
tagIcon={Briefcase}
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1", name: "E-Commerce Platform", price: "React, Node.js, PostgreSQL", variant: "Scaled to $2M ARR | Full-Stack Build", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-modern-e-commerce-platform-dashboard-w-1773246287005-bc5906bf.png?_wi=1", imageAlt: "E-commerce platform dashboard"
|
|
},
|
|
{
|
|
id: "2", name: "SaaS Team Collaboration App", price: "Next.js, TypeScript, MongoDB", variant: "1000+ Active Users | Real-Time Features", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-collaborative-saas-application-showing-1773246287776-ccfa0b89.png?_wi=1", imageAlt: "SaaS collaboration platform interface"
|
|
},
|
|
{
|
|
id: "3", name: "Fintech Mobile & Web App", price: "React Native, Node.js, AWS", variant: "Multi-Platform | Secure Transactions", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-fintech-mobile-and-web-application-sho-1773246294589-05c1c5d0.png?_wi=1", imageAlt: "Fintech application dashboard"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Clients Say"
|
|
description="Trusted by founders, CTOs, and product leaders to deliver exceptional fullstack solutions."
|
|
tag="Testimonials"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson, CEO of TechCorp", date: "Date: 15 November 2024", tag: "E-Commerce Success", title: "Transformed Our Online Business", quote: "The developer rebuilt our entire platform from legacy code to a modern, scalable architecture. Sales increased 40% within 3 months due to improved performance and user experience. Exceptional technical skills and communication.", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/professional-headshot-of-a-confident-tec-1773246286583-95609ac4.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-modern-e-commerce-platform-dashboard-w-1773246287005-bc5906bf.png?_wi=2", imageAlt: "Client team celebrating success"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen, CTO of InnovateLab", date: "Date: 22 October 2024", tag: "SaaS Development", title: "Best Technical Partner We've Had", quote: "Delivered our SaaS platform on time and under budget. The code quality is exceptional, and the real-time features work flawlessly. This developer understands both the business and technical requirements perfectly.", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/professional-headshot-of-a-female-produc-1773246285995-436d3ab4.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-collaborative-saas-application-showing-1773246287776-ccfa0b89.png?_wi=2", imageAlt: "SaaS platform launch"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Rodriguez, Founder of GrowthCo", date: "Date: 8 September 2024", tag: "Full-Stack Innovation", title: "Scaled From Startup to Scale-up", quote: "Started as a small project, now handling 10x the traffic. The architecture was built to scale from day one. Proactive problem-solving and a true partner in our growth journey.", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/professional-headshot-of-a-male-cto-in-t-1773246286256-87357ee8.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-fintech-mobile-and-web-application-sho-1773246294589-05c1c5d0.png?_wi=2", imageAlt: "Growing startup metrics"
|
|
},
|
|
{
|
|
id: "4", name: "David Kim, Product Manager at StartupXYZ", date: "Date: 25 August 2024", tag: "Mobile Development", title: "Delivered Beyond Expectations", quote: "Not only delivered the requirements but anticipated future needs and built solutions ahead of time. Clean code, excellent documentation, and always available when we needed guidance. Highly recommend.", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/professional-headshot-of-a-female-busine-1773246285688-9a24fabc.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/a-collaborative-saas-application-showing-1773246287776-ccfa0b89.png?_wi=3", imageAlt: "Product team collaboration"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="skills" data-section="skills">
|
|
<FeatureCardTwentyFour
|
|
title="Technical Expertise"
|
|
description="Proven proficiency across the complete fullstack development spectrum"
|
|
tag="Core Competencies"
|
|
tagIcon={Zap}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
features={[
|
|
{
|
|
id: "1", title: "Frontend Development", author: "5 Years Experience", description: "Expert in React, Next.js, TypeScript, Vue.js. Specializing in performance optimization, responsive design, and modern UI/UX implementations with accessibility best practices.", tags: ["React", "Next.js", "TypeScript", "Tailwind CSS"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/abstract-visualization-of-modern-tech-st-1773246287269-7da488e7.png?_wi=1", imageAlt: "Frontend technology stack"
|
|
},
|
|
{
|
|
id: "2", title: "Backend & APIs", author: "5 Years Experience", description: "Node.js, Express, Python, RESTful APIs, GraphQL expertise. Building secure, scalable server architectures with microservices patterns and cloud-native solutions.", tags: ["Node.js", "Express", "Python", "GraphQL"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/abstract-visualization-of-modern-tech-st-1773246287269-7da488e7.png?_wi=2", imageAlt: "Backend technology stack"
|
|
},
|
|
{
|
|
id: "3", title: "Database & Infrastructure", author: "5 Years Experience", description: "PostgreSQL, MongoDB, Firebase, AWS, Docker, Kubernetes. Experience with database design, optimization, caching strategies, and DevOps automation.", tags: ["PostgreSQL", "MongoDB", "AWS", "Docker"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/abstract-visualization-of-modern-tech-st-1773246287269-7da488e7.png?_wi=3", imageAlt: "Infrastructure technology stack"
|
|
},
|
|
{
|
|
id: "4", title: "Mobile Development", author: "3+ Years Experience", description: "React Native and Flutter expertise. Delivering iOS and Android applications with native performance and seamless user experiences for both platforms.", tags: ["React Native", "Flutter", "iOS", "Android"],
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/abstract-visualization-of-modern-tech-st-1773246287269-7da488e7.png?_wi=4", imageAlt: "Mobile development stack"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted By Industry Leaders"
|
|
description="I've partnered with innovative companies across multiple industries"
|
|
tag="Client Portfolio"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={["TechCorp", "InnovateLab", "GrowthCo", "StartupXYZ", "CloudFlow", "DataAnalyst", "SecureNet", "WebPro"]}
|
|
logos={[
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/professional-technology-company-logo-wit-1773246286921-406a5635.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/vibrant-startup-company-logo-with-dynami-1773246286140-7ac8930b.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/professional-innovation-consulting-compa-1773246286384-a71124c8.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/cloud-infrastructure-company-logo-featur-1773246286274-0ab25a73.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/data-analytics-company-logo-with-chart-a-1773246286509-ad26e28e.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/cybersecurity-company-logo-with-shield-a-1773246286896-5005c042.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/web-development-agency-logo-with-clean-w-1773246286707-9662ecaa.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ao5hN8S4nLi8YzFf6tIJghBKwH/mobile-app-development-company-logo-feat-1773246286679-690b332d.png"
|
|
]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
ctaTitle="Ready to Build Something Great?"
|
|
ctaDescription="Let's discuss your project requirements and how I can help bring your vision to life."
|
|
ctaButton={{
|
|
text: "Schedule a Free Consultation", href: "mailto:hello@devportfolio.com"
|
|
}}
|
|
ctaIcon={MessageCircle}
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What is your typical project timeline?", content: "Project timelines vary based on scope and complexity. Small projects (MVP/prototype) typically take 4-8 weeks, while medium projects take 8-16 weeks. I provide detailed timeline estimates after understanding your requirements."
|
|
},
|
|
{
|
|
id: "2", title: "Do you offer ongoing support and maintenance?", content: "Yes, I offer post-launch support packages including bug fixes, performance optimization, feature additions, and technical consulting. I can work on retainer basis or project-based maintenance."
|
|
},
|
|
{
|
|
id: "3", title: "What are your engagement models?", content: "I work on multiple models: project-based fixed-price, time & materials hourly, part-time contract roles, and full-time employment. I'm flexible and can discuss arrangements that work best for your needs."
|
|
},
|
|
{
|
|
id: "4", title: "Can you work with existing code or legacy systems?", content: "Absolutely. I specialize in legacy system modernization, code refactoring, and integrating with existing infrastructure. I can gradually transition systems to modern architectures without disrupting operations."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Navigation", items: [
|
|
{ label: "Work", href: "#projects" },
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Skills", href: "#skills" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "GitHub", href: "https://github.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "Email", href: "mailto:hello@devportfolio.com" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookies", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 FullStack Developer Portfolio. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |