Merge version_1 into main #2
282
src/app/page.tsx
282
src/app/page.tsx
@@ -29,25 +29,15 @@ export default function LandingPage() {
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
name: "Home", id: "#hero"},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
name: "About", id: "#about"},
|
||||
{
|
||||
name: "Projects",
|
||||
id: "#projects",
|
||||
},
|
||||
name: "Projects", id: "#projects"},
|
||||
{
|
||||
name: "Experience",
|
||||
id: "#experience",
|
||||
},
|
||||
name: "Experience", id: "#experience"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
brandName="DevPortfolio"
|
||||
/>
|
||||
@@ -56,108 +46,58 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Full-Stack Developer"
|
||||
description="Building performant, scalable digital solutions for modern businesses. Specializing in React, Node.js, and cloud-native architecture."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex R.",
|
||||
handle: "@alexcode",
|
||||
testimonial: "Exceptional full-stack expertise and attention to detail.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-design-technology-landing-page_23-2149121904.jpg",
|
||||
imageAlt: "Flat design technology landing page",
|
||||
},
|
||||
name: "Alex R.", handle: "@alexcode", testimonial: "Exceptional full-stack expertise and attention to detail.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-design-technology-landing-page_23-2149121904.jpg", imageAlt: "Flat design technology landing page"},
|
||||
{
|
||||
name: "Sarah K.",
|
||||
handle: "@sarahdev",
|
||||
testimonial: "Delivered a complex architecture migration ahead of schedule.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/black-white-landing-page-template-with-photo_23-2149052079.jpg",
|
||||
imageAlt: "Black and white landing page template with photo",
|
||||
},
|
||||
name: "Sarah K.", handle: "@sarahdev", testimonial: "Delivered a complex architecture migration ahead of schedule.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/black-white-landing-page-template-with-photo_23-2149052079.jpg", imageAlt: "Black and white landing page template with photo"},
|
||||
{
|
||||
name: "Mike B.",
|
||||
handle: "@mike_builds",
|
||||
testimonial: "Highly recommended for any high-performance web project.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/future-technology-landing-page-template_23-2148940566.jpg",
|
||||
imageAlt: "Future technology landing page template",
|
||||
},
|
||||
name: "Mike B.", handle: "@mike_builds", testimonial: "Highly recommended for any high-performance web project.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/future-technology-landing-page-template_23-2148940566.jpg", imageAlt: "Future technology landing page template"},
|
||||
{
|
||||
name: "Jessica L.",
|
||||
handle: "@jess_dev",
|
||||
testimonial: "A truly talented developer with great communication skills.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/technology-landing-page-template_23-2149372852.jpg",
|
||||
imageAlt: "Technology landing page template",
|
||||
},
|
||||
name: "Jessica L.", handle: "@jess_dev", testimonial: "A truly talented developer with great communication skills.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/technology-landing-page-template_23-2149372852.jpg", imageAlt: "Technology landing page template"},
|
||||
{
|
||||
name: "Tom P.",
|
||||
handle: "@tom_arch",
|
||||
testimonial: "Expertise in Node.js and scaling makes them a standout choice.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-techno-background-with-low-poly-design_1048-5834.jpg",
|
||||
imageAlt: "Abstract techno background with a low poly design",
|
||||
},
|
||||
name: "Tom P.", handle: "@tom_arch", testimonial: "Expertise in Node.js and scaling makes them a standout choice.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-techno-background-with-low-poly-design_1048-5834.jpg", imageAlt: "Abstract techno background with a low poly design"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "View My Work",
|
||||
href: "#projects",
|
||||
},
|
||||
text: "View My Work", href: "#projects"},
|
||||
{
|
||||
text: "Contact Me",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Contact Me", href: "#contact"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/flat-design-technology-landing-page-template_23-2149200405.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/flat-design-technology-landing-page-template_23-2149200405.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="dark tech abstract background"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-modern-background-with-rainbow-coloured-flowing-particles-design_1048-20453.jpg",
|
||||
alt: "3D modern background with rainbow coloured flowing particles design",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/3d-modern-background-with-rainbow-coloured-flowing-particles-design_1048-20453.jpg", alt: "3D modern background with rainbow coloured flowing particles design"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/3d-render-futuristic-modern-network-communications-design_1048-12969.jpg",
|
||||
alt: "3D render of a futuristic modern network communications design",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/3d-render-futuristic-modern-network-communications-design_1048-12969.jpg", alt: "3D render of a futuristic modern network communications design"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/abstract-neon-lights-background_1017-2666.jpg",
|
||||
alt: "Abstract neon lights background",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/abstract-neon-lights-background_1017-2666.jpg", alt: "Abstract neon lights background"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-vector/flat-design-technology-landing-page_23-2149121904.jpg",
|
||||
alt: "Flat design technology landing page",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-vector/flat-design-technology-landing-page_23-2149121904.jpg", alt: "Flat design technology landing page"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-psd/black-white-landing-page-template-with-photo_23-2149052079.jpg",
|
||||
alt: "Black and white landing page template with photo",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-psd/black-white-landing-page-template-with-photo_23-2149052079.jpg", alt: "Black and white landing page template with photo"},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "React",
|
||||
},
|
||||
type: "text", text: "React"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Node.js",
|
||||
},
|
||||
type: "text", text: "Node.js"},
|
||||
{
|
||||
type: "text",
|
||||
text: "TypeScript",
|
||||
},
|
||||
type: "text", text: "TypeScript"},
|
||||
{
|
||||
type: "text",
|
||||
text: "AWS",
|
||||
},
|
||||
type: "text", text: "AWS"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Docker",
|
||||
},
|
||||
type: "text", text: "Docker"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -170,17 +110,11 @@ export default function LandingPage() {
|
||||
description="With over 5 years of experience in the industry, I bridge the gap between complex engineering and elegant, user-centric experiences."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Frontend Development",
|
||||
description: "Expert in React, TypeScript, and modern UI frameworks.",
|
||||
},
|
||||
title: "Frontend Development", description: "Expert in React, TypeScript, and modern UI frameworks."},
|
||||
{
|
||||
title: "Backend Engineering",
|
||||
description: "Specialized in Node.js, Python, and scalable microservices.",
|
||||
},
|
||||
title: "Backend Engineering", description: "Specialized in Node.js, Python, and scalable microservices."},
|
||||
{
|
||||
title: "Cloud & DevOps",
|
||||
description: "Experienced with AWS, Docker, and CI/CD pipelines.",
|
||||
},
|
||||
title: "Cloud & DevOps", description: "Experienced with AWS, Docker, and CI/CD pipelines."},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/high-angle-designer-working-floor_23-2149930985.jpg"
|
||||
@@ -196,41 +130,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "CloudSync Dashboard",
|
||||
price: "Live Demo",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/nutritional-counter-app-composition_23-2149880620.jpg?_wi=1",
|
||||
},
|
||||
id: "p1", name: "CloudSync Dashboard", price: "Live Demo", imageSrc: "http://img.b2bpic.net/free-photo/nutritional-counter-app-composition_23-2149880620.jpg"},
|
||||
{
|
||||
id: "p2",
|
||||
name: "API Gateway Platform",
|
||||
price: "GitHub Repo",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/binary-numbers_1048-4877.jpg",
|
||||
},
|
||||
id: "p2", name: "API Gateway Platform", price: "GitHub Repo", imageSrc: "http://img.b2bpic.net/free-photo/binary-numbers_1048-4877.jpg"},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Analytics Engine",
|
||||
price: "Live Demo",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-high-end-workspace-with-advanced-tech-tools-enhancing-productivity_482257-119752.jpg",
|
||||
},
|
||||
id: "p3", name: "Analytics Engine", price: "Live Demo", imageSrc: "http://img.b2bpic.net/free-photo/empty-high-end-workspace-with-advanced-tech-tools-enhancing-productivity_482257-119752.jpg"},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Internal Tooling",
|
||||
price: "GitHub Repo",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/goals-habits-tracking-app_23-2148628452.jpg",
|
||||
},
|
||||
id: "p4", name: "Internal Tooling", price: "GitHub Repo", imageSrc: "http://img.b2bpic.net/free-vector/goals-habits-tracking-app_23-2148628452.jpg"},
|
||||
{
|
||||
id: "p5",
|
||||
name: "E-Commerce Microservice",
|
||||
price: "Live Demo",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-blocks-landscape-with-shallow-depth-field_1048-13248.jpg",
|
||||
},
|
||||
id: "p5", name: "E-Commerce Microservice", price: "Live Demo", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-blocks-landscape-with-shallow-depth-field_1048-13248.jpg"},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Real-time Chat Engine",
|
||||
price: "Live Demo",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-editor-using-high-tech-vr-goggles-look-editorial-pictures_482257-82237.jpg",
|
||||
},
|
||||
id: "p6", name: "Real-time Chat Engine", price: "Live Demo", imageSrc: "http://img.b2bpic.net/free-photo/photo-editor-using-high-tech-vr-goggles-look-editorial-pictures_482257-82237.jpg"},
|
||||
]}
|
||||
title="Featured Projects"
|
||||
description="Selected works demonstrating my technical focus."
|
||||
@@ -244,77 +154,35 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Senior Engineer at TechCorp",
|
||||
description: "Led a team in refactoring monolith to microservices.",
|
||||
bentoComponent: "timeline",
|
||||
heading: "2022-Present",
|
||||
subheading: "Senior Engineer",
|
||||
items: [
|
||||
title: "Senior Engineer at TechCorp", description: "Led a team in refactoring monolith to microservices.", bentoComponent: "timeline", heading: "2022-Present", subheading: "Senior Engineer", items: [
|
||||
{
|
||||
label: "Scaling",
|
||||
detail: "Improved response time by 40%",
|
||||
},
|
||||
label: "Scaling", detail: "Improved response time by 40%"},
|
||||
{
|
||||
label: "Leadership",
|
||||
detail: "Mentored 3 juniors",
|
||||
},
|
||||
label: "Leadership", detail: "Mentored 3 juniors"},
|
||||
{
|
||||
label: "Architecture",
|
||||
detail: "Led migration",
|
||||
},
|
||||
label: "Architecture", detail: "Led migration"},
|
||||
],
|
||||
completedLabel: "Active",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/horizontal-detail-no-people-macro-close-up_1122-2363.jpg",
|
||||
imageAlt: "horizontal detail no people macro close up",
|
||||
},
|
||||
completedLabel: "Active"},
|
||||
{
|
||||
title: "Full-Stack Developer at StartUpCo",
|
||||
description: "Developed the core MVP and scaled to 50k users.",
|
||||
bentoComponent: "timeline",
|
||||
heading: "2020-2022",
|
||||
subheading: "Developer",
|
||||
items: [
|
||||
title: "Full-Stack Developer at StartUpCo", description: "Developed the core MVP and scaled to 50k users.", bentoComponent: "timeline", heading: "2020-2022", subheading: "Developer", items: [
|
||||
{
|
||||
label: "Growth",
|
||||
detail: "Scaled user base 10x",
|
||||
},
|
||||
label: "Growth", detail: "Scaled user base 10x"},
|
||||
{
|
||||
label: "Automation",
|
||||
detail: "Automated deployments",
|
||||
},
|
||||
label: "Automation", detail: "Automated deployments"},
|
||||
{
|
||||
label: "Team",
|
||||
detail: "Collaborated with design",
|
||||
},
|
||||
label: "Team", detail: "Collaborated with design"},
|
||||
],
|
||||
completedLabel: "Finished",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-design-technology-landing-page-template_23-2149200405.jpg?_wi=2",
|
||||
imageAlt: "horizontal detail no people macro close up",
|
||||
},
|
||||
completedLabel: "Finished"},
|
||||
{
|
||||
title: "Intern at DevLab",
|
||||
description: "Gained deep insights into CI/CD and automated testing.",
|
||||
bentoComponent: "timeline",
|
||||
heading: "2019-2020",
|
||||
subheading: "Intern",
|
||||
items: [
|
||||
title: "Intern at DevLab", description: "Gained deep insights into CI/CD and automated testing.", bentoComponent: "timeline", heading: "2019-2020", subheading: "Intern", items: [
|
||||
{
|
||||
label: "Testing",
|
||||
detail: "Wrote 200+ unit tests",
|
||||
},
|
||||
label: "Testing", detail: "Wrote 200+ unit tests"},
|
||||
{
|
||||
label: "DevOps",
|
||||
detail: "Learned AWS basics",
|
||||
},
|
||||
label: "DevOps", detail: "Learned AWS basics"},
|
||||
{
|
||||
label: "Support",
|
||||
detail: "Hotfix support",
|
||||
},
|
||||
label: "Support", detail: "Hotfix support"},
|
||||
],
|
||||
completedLabel: "Finished",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/nutritional-counter-app-composition_23-2149880620.jpg?_wi=2",
|
||||
imageAlt: "horizontal detail no people macro close up",
|
||||
},
|
||||
completedLabel: "Finished"},
|
||||
]}
|
||||
title="Experience Timeline"
|
||||
description="Career history and professional growth path."
|
||||
@@ -325,8 +193,7 @@ export default function LandingPage() {
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "rotated-rays-static-grid",
|
||||
}}
|
||||
variant: "rotated-rays-static-grid"}}
|
||||
tag="Let's Connect"
|
||||
title="Ready to build something together?"
|
||||
description="Currently open for new opportunities. Feel free to reach out via the form below or email."
|
||||
@@ -340,50 +207,31 @@ export default function LandingPage() {
|
||||
logoText="DevPortfolio"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
title: "Navigation", items: [
|
||||
{
|
||||
label: "Hero",
|
||||
href: "#hero",
|
||||
},
|
||||
label: "Hero", href: "#hero"},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "Projects",
|
||||
href: "#projects",
|
||||
},
|
||||
label: "Projects", href: "#projects"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Socials",
|
||||
items: [
|
||||
title: "Socials", items: [
|
||||
{
|
||||
label: "GitHub",
|
||||
href: "https://github.com",
|
||||
},
|
||||
label: "GitHub", href: "https://github.com"},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "https://linkedin.com",
|
||||
},
|
||||
label: "LinkedIn", href: "https://linkedin.com"},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "https://twitter.com",
|
||||
},
|
||||
label: "Twitter", href: "https://twitter.com"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy", href: "#"},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
label: "Terms", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user