147 lines
7.0 KiB
TypeScript
147 lines
7.0 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import { Cpu, Zap, Palette, BookOpen } from "lucide-react";
|
|
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
|
|
|
export default function PortfolioPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="medium"
|
|
background="noise"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Work", id: "hero" },
|
|
{ name: "Experience", id: "experience" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "features" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
brandName="Portfolio"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
title="Creative Digital Designer"
|
|
description="Crafting meaningful digital experiences that blend aesthetic beauty with functional precision. Focused on building human-centric products that make an impact."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="Available for Hire"
|
|
rating={5}
|
|
ratingText="Over 50+ successful projects completed"
|
|
mediaItems={[
|
|
{ imageSrc: "https://img.b2bpic.net/free-photo/designer-working-office_23-2148494956.jpg", imageAlt: "Hero Image 1" },
|
|
{ imageSrc: "https://img.b2bpic.net/free-photo/workspace-home-office_23-2148494956.jpg", imageAlt: "Hero Image 2" }
|
|
]}
|
|
buttons={[{ text: "View My Work", href: "#features" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="experience" data-section="experience">
|
|
<MetricCardFourteen
|
|
title="Professional Journey"
|
|
tag="Timeline"
|
|
metrics={[
|
|
{ id: "2024", value: "Senior Designer", description: "Leading UX initiatives for enterprise SaaS products." },
|
|
{ id: "2021", value: "UX Lead", description: "Managed design teams and scaled component libraries." },
|
|
{ id: "2018", value: "Front-end Dev", description: "Building accessible interfaces for global clients." }
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
title="My Philosophy"
|
|
description={["I believe that great design is not just about aesthetics, but about solving problems for the user. My approach combines research, creative exploration, and technical execution to deliver solutions that resonate.", "With a background in both front-end engineering and UI/UX design, I bridge the gap between creative vision and implementation excellence."]}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="problems" data-section="problems">
|
|
<MetricCardThree
|
|
title="What I Bring"
|
|
description="Core competencies for digital excellence."
|
|
metrics={[
|
|
{ id: "1", icon: Cpu, title: "Web Development", value: "Modern" },
|
|
{ id: "2", icon: Zap, title: "Performance Optimization", value: "Speed" },
|
|
{ id: "3", icon: Palette, title: "UX Design", value: "Clean" },
|
|
{ id: "4", icon: BookOpen, title: "Technical Writing", value: "Clear" }
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSix
|
|
title="Featured Projects"
|
|
description="A selection of projects where design meets code to solve real-world problems."
|
|
textboxLayout="split"
|
|
features={[
|
|
{ title: "SaaS Dashboard", description: "High-performance interface for financial analytics.", imageSrc: "https://img.b2bpic.net/free-photo/dashboard-ui-concept_23-2148814057.jpg" },
|
|
{ title: "Mobile Design System", description: "Unified component library for scalable apps.", imageSrc: "https://img.b2bpic.net/free-photo/mobile-app-ui_23-2148814057.jpg" }
|
|
]}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="Their work truly transformed our online presence. Professional, creative, and always delivered ahead of schedule. Highly recommended for any product team."
|
|
author="Jane Doe, CEO at TechInnovate"
|
|
rating={5}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="opacity"
|
|
avatars={[{ src: "https://img.b2bpic.net/free-photo/happy-woman_23-2148814057.jpg", alt: "Client" }, { src: "https://img.b2bpic.net/free-photo/professional-man_23-2148814057.jpg", alt: "Partner" }]
|
|
}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Get In Touch"
|
|
title="Portfolio Inquiries"
|
|
description="Interested in collaborating or have a question about my work? I'm always open to discussing new projects and creative opportunities."
|
|
buttons={[{ text: "Send an Email", href: "mailto:hello@portfolio.com" }, { text: "LinkedIn", href: "https://linkedin.com/in/me" }]}
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Portfolio"
|
|
columns={[
|
|
{ title: "Navigation", items: [{ label: "Home", href: "#" }, { label: "Projects", href: "#features" }, { label: "Contact", href: "#contact" }] },
|
|
{ title: "Connect", items: [{ label: "LinkedIn", href: "https://linkedin.com" }, { label: "Email", href: "mailto:hello@portfolio.com" }] }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |