Merge version_1 into main #2
361
src/app/page.tsx
361
src/app/page.tsx
@@ -2,6 +2,7 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { Zap, Code, Database, Palette } from "lucide-react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
@@ -25,272 +26,112 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Skills",
|
||||
id: "#skills",
|
||||
},
|
||||
{
|
||||
name: "Projects",
|
||||
id: "#projects",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Hero", id: "#hero" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Skills", id: "#skills" },
|
||||
{ name: "Projects", id: "#projects" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Building Digital Excellence"
|
||||
description="Full-stack developer focused on creating performant, scalable, and user-centric web experiences."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex Smith",
|
||||
handle: "@alexs",
|
||||
testimonial: "Exceptional development skills and attention to detail.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pc-display-startup-office-desk-showing-programming-languages_482257-120128.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah Chen",
|
||||
handle: "@sarahc",
|
||||
testimonial: "Delivered project ahead of schedule with clean, maintainable code.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/artificial-intelligence-startup-coworkers-doing-brainstorming-optimizing-code_482257-125922.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mike Ross",
|
||||
handle: "@miker",
|
||||
testimonial: "Fantastic collaborator with deep technical knowledge.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/technology-venture-workspace-using-machine-learning-streamline-coding-process_482257-120287.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jane Doe",
|
||||
handle: "@janed",
|
||||
testimonial: "Transformed our complex requirements into a beautiful application.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-businessman-working-office_158595-1170.jpg",
|
||||
},
|
||||
{
|
||||
name: "Kevin J.",
|
||||
handle: "@kevinj",
|
||||
testimonial: "The best developer I have worked with in years.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-minimalist-arrangement-office-desk_23-2148488685.jpg",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Hire Me",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/technology-unicorn-venture-workspace-with-pc-used-conduct-code-reviews_482257-118729.jpg?_wi=1"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/technology-unicorn-venture-workspace-with-pc-used-conduct-code-reviews_482257-118729.jpg",
|
||||
alt: "Alex",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/financial-graph-stock-market-tablet_53876-98076.jpg",
|
||||
alt: "Sarah",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/outline-responsive-design_1134-80.jpg",
|
||||
alt: "Mike",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543698.jpg",
|
||||
alt: "Jane",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/computers-data-center-running-server-rigs-diagnostic-tests_482257-118495.jpg",
|
||||
alt: "Kevin",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "React.js",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Next.js",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "TypeScript",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Flutter",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Node.js",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Building Digital Excellence"
|
||||
description="Full-stack developer focused on creating performant, scalable, and user-centric web experiences."
|
||||
testimonials={[
|
||||
{ name: "Alex Smith", handle: "@alexs", testimonial: "Exceptional development skills and attention to detail.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pc-display-startup-office-desk-showing-programming-languages_482257-120128.jpg" },
|
||||
{ name: "Sarah Chen", handle: "@sarahc", testimonial: "Delivered project ahead of schedule with clean, maintainable code.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/artificial-intelligence-startup-coworkers-doing-brainstorming-optimizing-code_482257-125922.jpg" },
|
||||
{ name: "Mike Ross", handle: "@miker", testimonial: "Fantastic collaborator with deep technical knowledge.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/technology-venture-workspace-using-machine-learning-streamline-coding-process_482257-120287.jpg" },
|
||||
{ name: "Jane Doe", handle: "@janed", testimonial: "Transformed our complex requirements into a beautiful application.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-businessman-working-office_158595-1170.jpg" },
|
||||
{ name: "Kevin J.", handle: "@kevinj", testimonial: "The best developer I have worked with in years.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/high-angle-minimalist-arrangement-office-desk_23-2148488685.jpg" },
|
||||
]}
|
||||
buttons={[{ text: "Hire Me", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/technology-unicorn-venture-workspace-with-pc-used-conduct-code-reviews_482257-118729.jpg"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/technology-unicorn-venture-workspace-with-pc-used-conduct-code-reviews_482257-118729.jpg", alt: "Alex" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/financial-graph-stock-market-tablet_53876-98076.jpg", alt: "Sarah" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/outline-responsive-design_1134-80.jpg", alt: "Mike" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543698.jpg", alt: "Jane" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/computers-data-center-running-server-rigs-diagnostic-tests_482257-118495.jpg", alt: "Kevin" },
|
||||
]}
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "React.js" },
|
||||
{ type: "text", text: "Next.js" },
|
||||
{ type: "text", text: "TypeScript" },
|
||||
{ type: "text", text: "Flutter" },
|
||||
{ type: "text", text: "Node.js" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="About Me"
|
||||
buttons={[
|
||||
{
|
||||
text: "Download CV",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="About Me"
|
||||
buttons={[{ text: "Download CV", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="skills" data-section="skills">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Flutter/Dart",
|
||||
description: "Building cross-platform apps with native performance.",
|
||||
buttonIcon: "Zap",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-switching-bulbs-using-voice-command-tablet_482257-8730.jpg",
|
||||
imageAlt: "Man switching on bulbs using voice command on tablet",
|
||||
},
|
||||
{
|
||||
title: "Web Development",
|
||||
description: "Expertise in React, Next.js, and modern CSS patterns.",
|
||||
buttonIcon: "Code",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/technology-unicorn-venture-workspace-with-pc-used-conduct-code-reviews_482257-118729.jpg?_wi=2",
|
||||
imageAlt: "Man switching on bulbs using voice command on tablet",
|
||||
},
|
||||
{
|
||||
title: "State Management",
|
||||
description: "Efficient data handling with Riverpod and Provider.",
|
||||
buttonIcon: "Database",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/financial-graph-stock-market-tablet_53876-98076.jpg?_wi=1",
|
||||
imageAlt: "Man switching on bulbs using voice command on tablet",
|
||||
},
|
||||
{
|
||||
title: "UI/UX Design",
|
||||
description: "Creating intuitive and aesthetically pleasing interfaces.",
|
||||
buttonIcon: "Palette",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/outline-responsive-design_1134-80.jpg?_wi=1",
|
||||
imageAlt: "Man switching on bulbs using voice command on tablet",
|
||||
},
|
||||
]}
|
||||
title="Core Skills"
|
||||
description="Proficient in modern web technologies and development lifecycles."
|
||||
/>
|
||||
</div>
|
||||
<div id="skills" data-section="skills">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Flutter/Dart", description: "Building cross-platform apps with native performance.", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/free-photo/man-switching-bulbs-using-voice-command-tablet_482257-8730.jpg" },
|
||||
{ title: "Web Development", description: "Expertise in React, Next.js, and modern CSS patterns.", buttonIcon: Code, imageSrc: "http://img.b2bpic.net/free-photo/technology-unicorn-venture-workspace-with-pc-used-conduct-code-reviews_482257-118729.jpg" },
|
||||
{ title: "State Management", description: "Efficient data handling with Riverpod and Provider.", buttonIcon: Database, imageSrc: "http://img.b2bpic.net/free-photo/financial-graph-stock-market-tablet_53876-98076.jpg" },
|
||||
{ title: "UI/UX Design", description: "Creating intuitive and aesthetically pleasing interfaces.", buttonIcon: Palette, imageSrc: "http://img.b2bpic.net/free-photo/outline-responsive-design_1134-80.jpg" },
|
||||
]}
|
||||
title="Core Skills"
|
||||
description="Proficient in modern web technologies and development lifecycles."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Task Manager",
|
||||
price: "View Project",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/financial-graph-stock-market-tablet_53876-98076.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Analytics Platform",
|
||||
price: "View Project",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/outline-responsive-design_1134-80.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Modern Storefront",
|
||||
price: "View Project",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543698.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Portfolio Site",
|
||||
price: "View Project",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/computers-data-center-running-server-rigs-diagnostic-tests_482257-118495.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Weather App",
|
||||
price: "View Project",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/working-with-apps-cup-coffee_1134-93.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Fitness Tracker",
|
||||
price: "View Project",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/e-commerce-shop-online-homepage-sale-concept_53876-120965.jpg",
|
||||
},
|
||||
]}
|
||||
title="Featured Projects"
|
||||
/>
|
||||
</div>
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
title="Featured Projects"
|
||||
description="A selection of my professional and personal work."
|
||||
products={[
|
||||
{ id: "p1", name: "Task Manager", price: "View Project", imageSrc: "http://img.b2bpic.net/free-photo/financial-graph-stock-market-tablet_53876-98076.jpg" },
|
||||
{ id: "p2", name: "Analytics Platform", price: "View Project", imageSrc: "http://img.b2bpic.net/free-photo/outline-responsive-design_1134-80.jpg" },
|
||||
{ id: "p3", name: "Modern Storefront", price: "View Project", imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543698.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get in Touch"
|
||||
description="Have a project in mind? Let's discuss."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your Message",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
buttonText="Submit"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/software-web-developer-coding-html-script-with-online-cloud-server-programming-firewall-security-learning-new-user-interface-terminal-window-with-code-language-application_482257-48034.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get in Touch"
|
||||
description="Have a project in mind? Let's discuss."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Your Message", rows: 4, required: true }}
|
||||
buttonText="Submit"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/software-web-developer-coding-html-script-with-online-cloud-server-programming-firewall-security-learning-new-user-interface-terminal-window-with-code-language-application_482257-48034.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="© 2024 Portfolio. All rights reserved."
|
||||
leftLink={{
|
||||
text: "Twitter",
|
||||
href: "https://twitter.com",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "GitHub",
|
||||
href: "https://github.com",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="© 2024 Portfolio. All rights reserved."
|
||||
leftLink={{ text: "Twitter", href: "https://twitter.com" }}
|
||||
rightLink={{ text: "GitHub", href: "https://github.com" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user