Merge version_1 into main #1
252
src/app/page.tsx
252
src/app/page.tsx
@@ -29,70 +29,35 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Skills",
|
||||
id: "skills",
|
||||
},
|
||||
{
|
||||
name: "Projects",
|
||||
id: "projects",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Skills", id: "skills" },
|
||||
{ name: "Projects", id: "projects" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="DevPortfolio"
|
||||
button={{
|
||||
text: "Contact Me", href: "#contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Crafting Modern Digital Experiences"
|
||||
description="Hi, I'm a junior developer passionate about building clean, efficient, and user-friendly web applications. Eager to contribute and grow."
|
||||
tag="Available for new projects"
|
||||
buttons={[
|
||||
{
|
||||
text: "View My Work",
|
||||
href: "#projects",
|
||||
},
|
||||
{
|
||||
text: "Contact Me",
|
||||
href: "#contact",
|
||||
},
|
||||
{ text: "View My Work", href: "#projects" },
|
||||
{ text: "Contact Me", href: "#contact" }
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/programming-language-digital-device-screen-empty-it-department-office-used-app-development_482257-133402.jpg",
|
||||
imageAlt: "Workspace setup",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-with-flowing-particle-dots-against-bright-blurred-background_1048-10710.jpg",
|
||||
imageAlt: "Abstract tech",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/it-professional-office-training-ai-predictive-models_482257-108479.jpg",
|
||||
imageAlt: "Coding laptop",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-with-flowing-cyber-dots_1048-13630.jpg",
|
||||
imageAlt: "3D geometry",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/neon-purple-lights-with-bokeh-effect_1017-2671.jpg",
|
||||
imageAlt: "Interface elements",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-tidy-workspace-with-laptop_23-2148592296.jpg",
|
||||
imageAlt: "Productive desk",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/programming-language-digital-device-screen-empty-it-department-office-used-app-development_482257-133402.jpg", imageAlt: "developer workstation code desk" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-with-flowing-particle-dots-against-bright-blurred-background_1048-10710.jpg", imageAlt: "tech abstract background" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/it-professional-office-training-ai-predictive-models_482257-108479.jpg", imageAlt: "programmer working on laptop" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-with-flowing-cyber-dots_1048-13630.jpg", imageAlt: "abstract tech 3d background" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/neon-purple-lights-with-bokeh-effect_1017-2671.jpg", imageAlt: "minimal digital interface" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-tidy-workspace-with-laptop_23-2148592296.jpg", imageAlt: "clean productive office desk" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -103,21 +68,12 @@ export default function LandingPage() {
|
||||
title="My Development Journey"
|
||||
description="Passionate about modern web technologies like React, Next.js, and Tailwind CSS. I enjoy turning complex problems into simple, beautiful, and intuitive solutions. Constantly learning to stay updated with industry trends."
|
||||
metrics={[
|
||||
{
|
||||
value: "10+",
|
||||
title: "Projects Completed",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
title: "Years Experience",
|
||||
},
|
||||
{
|
||||
value: "5+",
|
||||
title: "Languages",
|
||||
},
|
||||
{ value: "10+", title: "Projects Completed" },
|
||||
{ value: "2", title: "Years Experience" },
|
||||
{ value: "5+", title: "Languages" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/smiling-man-sitting-home-office-desk-typing-laptop-keyboard_482257-101018.jpg"
|
||||
imageAlt="About Me"
|
||||
imageAlt="young developer portrait"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -131,20 +87,14 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Frontend Development",
|
||||
description: "Expertise in React, Next.js, HTML5, CSS3, and JavaScript, focusing on creating responsive and accessible interfaces.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/data-center-computer-systems-controlling-network-resources-closeup_482257-126065.jpg",
|
||||
title: "Frontend Development", description: "Expertise in React, Next.js, HTML5, CSS3, and JavaScript, focusing on creating responsive and accessible interfaces.", imageSrc: "http://img.b2bpic.net/free-photo/data-center-computer-systems-controlling-network-resources-closeup_482257-126065.jpg"
|
||||
},
|
||||
{
|
||||
title: "Backend Knowledge",
|
||||
description: "Understanding of Node.js, Express, and database management with MongoDB and PostgreSQL for full-stack applications.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/variety-people-multitasking-3d-cartoon-scene_23-2151294555.jpg",
|
||||
title: "Backend Knowledge", description: "Understanding of Node.js, Express, and database management with MongoDB and PostgreSQL for full-stack applications.", imageSrc: "http://img.b2bpic.net/free-photo/variety-people-multitasking-3d-cartoon-scene_23-2151294555.jpg"
|
||||
},
|
||||
{
|
||||
title: "Web Design",
|
||||
description: "Strong design sensibility with Figma, leveraging modern design systems to bridge the gap between design and development.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smartphone-with-user-interface-concept_52683-104211.jpg",
|
||||
},
|
||||
title: "Web Design", description: "Strong design sensibility with Figma, leveraging modern design systems to bridge the gap between design and development.", imageSrc: "http://img.b2bpic.net/free-photo/smartphone-with-user-interface-concept_52683-104211.jpg"
|
||||
}
|
||||
]}
|
||||
title="Technical Skills"
|
||||
description="The toolset I use to build robust digital solutions."
|
||||
@@ -158,48 +108,12 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Analytics Dashboard",
|
||||
price: "View Project",
|
||||
variant: "Web Development",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-architect-using-tablet-with-touch-screen-analyze-building-model-architectural-development-man-engineer-working-with-device-construction-layout-design_482257-39970.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "E-commerce App",
|
||||
price: "View Project",
|
||||
variant: "Mobile App",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-delivering-groceries-customers_23-2149950112.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Social Media Platform",
|
||||
price: "View Project",
|
||||
variant: "Full Stack",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-colorless-apps_23-2148808892.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Travel Landing Page",
|
||||
price: "View Project",
|
||||
variant: "Frontend",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/task-management-app-interface_23-2148655618.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Task Manager",
|
||||
price: "View Project",
|
||||
variant: "Productivity",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/customer-marketing-sales-dashboard-graphics-concept_53876-133831.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Crypto Tracker",
|
||||
price: "View Project",
|
||||
variant: "Finance App",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/digital-assets-business-management-system-concept_53876-121226.jpg",
|
||||
},
|
||||
{ id: "p1", name: "Analytics Dashboard", price: "View Project", variant: "Web Development", imageSrc: "http://img.b2bpic.net/free-photo/close-up-architect-using-tablet-with-touch-screen-analyze-building-model-architectural-development-man-engineer-working-with-device-construction-layout-design_482257-39970.jpg" },
|
||||
{ id: "p2", name: "E-commerce App", price: "View Project", variant: "Mobile App", imageSrc: "http://img.b2bpic.net/free-photo/man-delivering-groceries-customers_23-2149950112.jpg" },
|
||||
{ id: "p3", name: "Social Media Platform", price: "View Project", variant: "Full Stack", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-colorless-apps_23-2148808892.jpg" },
|
||||
{ id: "p4", name: "Travel Landing Page", price: "View Project", variant: "Frontend", imageSrc: "http://img.b2bpic.net/free-vector/task-management-app-interface_23-2148655618.jpg" },
|
||||
{ id: "p5", name: "Task Manager", price: "View Project", variant: "Productivity", imageSrc: "http://img.b2bpic.net/free-photo/customer-marketing-sales-dashboard-graphics-concept_53876-133831.jpg" },
|
||||
{ id: "p6", name: "Crypto Tracker", price: "View Project", variant: "Finance App", imageSrc: "http://img.b2bpic.net/free-photo/digital-assets-business-management-system-concept_53876-121226.jpg" }
|
||||
]}
|
||||
title="My Featured Projects"
|
||||
description="A showcase of my recent work, highlighting technical implementations and design choices."
|
||||
@@ -211,46 +125,11 @@ export default function LandingPage() {
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
title: "Excellent Developer",
|
||||
quote: "Incredibly professional and always met deadlines. A pleasure to work with.",
|
||||
name: "John Smith",
|
||||
role: "Project Manager",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5365.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
title: "Highly Recommend",
|
||||
quote: "Very thorough, clean code, and great attention to detail.",
|
||||
name: "Sarah Lee",
|
||||
role: "Senior Engineer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-standing-bricks-wall-smiling-with-happy-face-looking-pointing-side-with-thumb-up_839833-15096.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
title: "Fast Learner",
|
||||
quote: "Caught on to our stack in no time. Great team player.",
|
||||
name: "Mark Wilson",
|
||||
role: "Team Lead",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
title: "Great Vision",
|
||||
quote: "Understands both design and development, very well-rounded.",
|
||||
name: "Emily Chen",
|
||||
role: "Design Lead",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
title: "Reliable",
|
||||
quote: "Consistently delivered high-quality results. Very promising developer.",
|
||||
name: "David King",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-16435.jpg",
|
||||
},
|
||||
{ id: "t1", title: "Excellent Developer", quote: "Incredibly professional and always met deadlines. A pleasure to work with.", name: "John Smith", role: "Project Manager", imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5365.jpg" },
|
||||
{ id: "t2", title: "Highly Recommend", quote: "Very thorough, clean code, and great attention to detail.", name: "Sarah Lee", role: "Senior Engineer", imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-standing-bricks-wall-smiling-with-happy-face-looking-pointing-side-with-thumb-up_839833-15096.jpg" },
|
||||
{ id: "t3", title: "Fast Learner", quote: "Caught on to our stack in no time. Great team player.", name: "Mark Wilson", role: "Team Lead", imageSrc: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg" },
|
||||
{ id: "t4", title: "Great Vision", quote: "Understands both design and development, very well-rounded.", name: "Emily Chen", role: "Design Lead", imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg" },
|
||||
{ id: "t5", title: "Reliable", quote: "Consistently delivered high-quality results. Very promising developer.", name: "David King", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-16435.jpg" }
|
||||
]}
|
||||
title="Client Feedback"
|
||||
description="What partners and mentors say about my work and attitude."
|
||||
@@ -260,19 +139,11 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
text="Let's work together! I am currently open to new opportunities and exciting collaborations."
|
||||
buttons={[
|
||||
{
|
||||
text: "Email Me",
|
||||
href: "mailto:hello@dev.com",
|
||||
},
|
||||
{
|
||||
text: "Connect on LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
{ text: "Email Me", href: "mailto:hello@dev.com" },
|
||||
{ text: "Connect on LinkedIn", href: "#" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -280,50 +151,9 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Projects",
|
||||
href: "#projects",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "GitHub",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ items: [{ label: "About", href: "#about" }, { label: "Projects", href: "#projects" }, { label: "Contact", href: "#contact" }] },
|
||||
{ items: [{ label: "LinkedIn", href: "#" }, { label: "GitHub", href: "#" }, { label: "Twitter", href: "#" }] },
|
||||
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
|
||||
]}
|
||||
logoText="DevPortfolio"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user