Merge version_1 into main #1
407
src/app/page.tsx
407
src/app/page.tsx
@@ -19,292 +19,149 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Skills",
|
||||
id: "skills",
|
||||
},
|
||||
{
|
||||
name: "Projects",
|
||||
id: "projects",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Francis Yaw Odoom"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Skills", id: "skills" },
|
||||
{ name: "Projects", id: "projects" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Francis Yaw Odoom"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Francis Yaw Odoom"
|
||||
description="Full Stack Developer | Cloud & Systems Engineer | AI Engineer | Network Administrator. Building scalable web, mobile, cloud, and AI systems."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Projects",
|
||||
href: "#projects",
|
||||
},
|
||||
{
|
||||
text: "Contact Me",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/data-network-illustration_24908-57804.jpg"
|
||||
imageAlt="digital technology background"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Francis Yaw Odoom"
|
||||
description="Full Stack Developer | Cloud & Systems Engineer | AI Engineer | Network Administrator. Building scalable web, mobile, cloud, and AI systems."
|
||||
buttons={[
|
||||
{ text: "View Projects", href: "#projects" },
|
||||
{ text: "Contact Me", href: "#contact" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/data-network-illustration_24908-57804.jpg"
|
||||
imageAlt="digital technology background"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Who I Am"
|
||||
description={[
|
||||
"I am a multidisciplinary technology professional with hands-on experience in software engineering, cloud infrastructure, AI engineering, networking, and systems administration.",
|
||||
"I combine development expertise with infrastructure and security knowledge, allowing me to manage complete technology ecosystems from planning to deployment.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Who I Am"
|
||||
description={[
|
||||
"I am a multidisciplinary technology professional with hands-on experience in software engineering, cloud infrastructure, AI engineering, networking, and systems administration.", "I combine development expertise with infrastructure and security knowledge, allowing me to manage complete technology ecosystems from planning to deployment."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="skills" data-section="skills">
|
||||
<FeatureCardTwentySeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "dev",
|
||||
title: "Development",
|
||||
descriptions: [
|
||||
"Full Stack Development",
|
||||
"Mobile App Development",
|
||||
"React/Node Stack",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cloud-database-storage-concept-cloudscape-digital-online-server-global-network-web-database-backup-computer-infrastructure-technology_90220-1331.jpg",
|
||||
},
|
||||
{
|
||||
id: "cloud",
|
||||
title: "Cloud & Infrastructure",
|
||||
descriptions: [
|
||||
"VPS Hosting",
|
||||
"Deployment Management",
|
||||
"CI/CD Orchestration",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/technician-data-center-with-laptop-tablet-integrating-ai-technology_482257-120603.jpg",
|
||||
},
|
||||
{
|
||||
id: "net",
|
||||
title: "Networking & Security",
|
||||
descriptions: [
|
||||
"Systems Administration",
|
||||
"CCNA level networking",
|
||||
"Security best practices",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/server-racks-computer-network-security-server-room-data-center-dark-blue-generative-ai_1258-150857.jpg",
|
||||
},
|
||||
{
|
||||
id: "ai",
|
||||
title: "AI & Automation",
|
||||
descriptions: [
|
||||
"Workflow Automation",
|
||||
"Prompt Engineering",
|
||||
"Operational AI",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dimly-lit-facility-running-deep-learning-platforms-neural-networks-training_482257-124557.jpg",
|
||||
},
|
||||
]}
|
||||
title="Core Technical Areas"
|
||||
description="A diverse stack covering the entire digital ecosystem from hardware networking to AI automation."
|
||||
/>
|
||||
</div>
|
||||
<div id="skills" data-section="skills">
|
||||
<FeatureCardTwentySeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ id: "dev", title: "Development", descriptions: ["Full Stack Development", "Mobile App Development", "React/Node Stack"], imageSrc: "http://img.b2bpic.net/free-photo/cloud-database-storage-concept-cloudscape-digital-online-server-global-network-web-database-backup-computer-infrastructure-technology_90220-1331.jpg" },
|
||||
{ id: "cloud", title: "Cloud & Infrastructure", descriptions: ["VPS Hosting", "Deployment Management", "CI/CD Orchestration"], imageSrc: "http://img.b2bpic.net/free-photo/technician-data-center-with-laptop-tablet-integrating-ai-technology_482257-120603.jpg" },
|
||||
{ id: "net", title: "Networking & Security", descriptions: ["Systems Administration", "CCNA level networking", "Security best practices"], imageSrc: "http://img.b2bpic.net/free-photo/server-racks-computer-network-security-server-room-data-center-dark-blue-generative-ai_1258-150857.jpg" },
|
||||
{ id: "ai", title: "AI & Automation", descriptions: ["Workflow Automation", "Prompt Engineering", "Operational AI"], imageSrc: "http://img.b2bpic.net/free-photo/dimly-lit-facility-running-deep-learning-platforms-neural-networks-training_482257-124557.jpg" },
|
||||
]}
|
||||
title="Core Technical Areas"
|
||||
description="A diverse stack covering the entire digital ecosystem from hardware networking to AI automation."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardTwo
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "E-commerce",
|
||||
name: "Damsyn Platform",
|
||||
price: "Live",
|
||||
rating: 5,
|
||||
reviewCount: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/online-handbag-shopping_23-2151952981.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "Logistics",
|
||||
name: "SwiftDrift GH",
|
||||
price: "Live",
|
||||
rating: 5,
|
||||
reviewCount: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671567.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "Enterprise",
|
||||
name: "MEO Tech Solutions",
|
||||
price: "Live",
|
||||
rating: 5,
|
||||
reviewCount: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/web-template-layout-draft-sketch_53876-167110.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "Analytics",
|
||||
name: "Referral Tracker",
|
||||
price: "Live",
|
||||
rating: 5,
|
||||
reviewCount: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/colorful-overloaded-bullet-journal_23-2150248154.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "Operations",
|
||||
name: "Inventory Systems",
|
||||
price: "Live",
|
||||
rating: 5,
|
||||
reviewCount: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-with-smartphone-cute-sheep_187299-47431.jpg",
|
||||
},
|
||||
]}
|
||||
title="Featured Projects"
|
||||
description="Innovative solutions developed for enterprise and mobile ecosystems."
|
||||
/>
|
||||
</div>
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardTwo
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{ id: "p1", brand: "E-commerce", name: "Damsyn Platform", price: "Live", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/online-handbag-shopping_23-2151952981.jpg" },
|
||||
{ id: "p2", brand: "Logistics", name: "SwiftDrift GH", price: "Live", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-smartphone_23-2150671567.jpg" },
|
||||
{ id: "p3", brand: "Enterprise", name: "MEO Tech Solutions", price: "Live", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/web-template-layout-draft-sketch_53876-167110.jpg" },
|
||||
{ id: "p4", brand: "Analytics", name: "Referral Tracker", price: "Live", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/colorful-overloaded-bullet-journal_23-2150248154.jpg" },
|
||||
{ id: "p5", brand: "Operations", name: "Inventory Systems", price: "Live", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-with-smartphone-cute-sheep_187299-47431.jpg" },
|
||||
]}
|
||||
title="Featured Projects"
|
||||
description="Innovative solutions developed for enterprise and mobile ecosystems."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "5+",
|
||||
title: "Production Systems",
|
||||
description: "Deployed and maintained scalable ecosystems.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/repairman-mainframes_482257-80111.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "2021",
|
||||
title: "Industry Career",
|
||||
description: "Start of my journey in full stack & cloud architecture.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman-studying-infographics-performance-metrics_482257-122632.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "CCNA",
|
||||
title: "Certifications",
|
||||
description: "Continuous learning in security and network tech.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-broker-looking-real-time-stock-market-sales-analyzing-global-trade-exchange-statistics-capital-money-investment-working-with-hegde-fund-index-profit-forex-trading-night_482257-46966.jpg",
|
||||
},
|
||||
]}
|
||||
title="Professional Impact"
|
||||
description="Measurable milestones in my technical journey."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", value: "5+", title: "Production Systems", description: "Deployed and maintained scalable ecosystems.", imageSrc: "http://img.b2bpic.net/free-photo/repairman-mainframes_482257-80111.jpg" },
|
||||
{ id: "m2", value: "2021", title: "Industry Career", description: "Start of my journey in full stack & cloud architecture.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-studying-infographics-performance-metrics_482257-122632.jpg" },
|
||||
{ id: "m3", value: "CCNA", title: "Certifications", description: "Continuous learning in security and network tech.", imageSrc: "http://img.b2bpic.net/free-photo/woman-broker-looking-real-time-stock-market-sales-analyzing-global-trade-exchange-statistics-capital-money-investment-working-with-hegde-fund-index-profit-forex-trading-night_482257-46966.jpg" },
|
||||
]}
|
||||
title="Professional Impact"
|
||||
description="Measurable milestones in my technical journey."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="experience" data-section="experience">
|
||||
<TeamCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{
|
||||
id: "ex1",
|
||||
name: "Software Developer",
|
||||
role: "Damsyn",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/analyst-conducts-research-into-global-economies-deliver-knowledge-company-advancements-finance-before-investing-capital-investor-prepares-simulations-studies-laws_482257-73482.jpg",
|
||||
},
|
||||
{
|
||||
id: "ex2",
|
||||
name: "Co-Founder",
|
||||
role: "MEO Tech Solution",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/influencer-studio-films-wireless-speaker-video-review-tech-enthusiasts_482257-123068.jpg",
|
||||
},
|
||||
{
|
||||
id: "ex3",
|
||||
name: "E-Banking Unit",
|
||||
role: "GCB Bank PLC",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interior-designer-working-out-office_52683-112924.jpg",
|
||||
},
|
||||
]}
|
||||
title="Professional Experience"
|
||||
description="Leading technology strategy and implementation across sectors."
|
||||
/>
|
||||
</div>
|
||||
<div id="experience" data-section="experience">
|
||||
<TeamCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{ id: "ex1", name: "Software Developer", role: "Damsyn", imageSrc: "http://img.b2bpic.net/free-photo/analyst-conducts-research-into-global-economies-deliver-knowledge-company-advancements-finance-before-investing-capital-investor-prepares-simulations-studies-laws_482257-73482.jpg" },
|
||||
{ id: "ex2", name: "Co-Founder", role: "MEO Tech Solution", imageSrc: "http://img.b2bpic.net/free-photo/influencer-studio-films-wireless-speaker-video-review-tech-enthusiasts_482257-123068.jpg" },
|
||||
{ id: "ex3", name: "E-Banking Unit", role: "GCB Bank PLC", imageSrc: "http://img.b2bpic.net/free-photo/interior-designer-working-out-office_52683-112924.jpg" },
|
||||
]}
|
||||
title="Professional Experience"
|
||||
description="Leading technology strategy and implementation across sectors."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Cisco Networking",
|
||||
content: "Cisco Networking & Data Analytics + CCNA 1 Completed.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "CompTIA Security+",
|
||||
content: "Currently in progress.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Education",
|
||||
content: "BBA (Accounting), University of Education, Winneba.",
|
||||
},
|
||||
]}
|
||||
title="Professional Credentials"
|
||||
description="Key certifications and qualifications."
|
||||
faqsAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-work-environment-empty-office-business-industry-enterprise-culture_482257-118995.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Cisco Networking", content: "Cisco Networking & Data Analytics + CCNA 1 Completed." },
|
||||
{ id: "f2", title: "CompTIA Security+", content: "Currently in progress." },
|
||||
{ id: "f3", title: "Education", content: "BBA (Accounting), University of Education, Winneba." },
|
||||
]}
|
||||
title="Professional Credentials"
|
||||
description="Key certifications and qualifications."
|
||||
faqsAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-work-environment-empty-office-business-industry-enterprise-culture_482257-118995.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Let's Talk"
|
||||
title="Get In Touch"
|
||||
description="Ready to discuss your next technical challenge? Reach out via email or connect on LinkedIn."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Let's Talk"
|
||||
title="Get In Touch"
|
||||
description="Ready to discuss your next technical challenge? Reach out via email or connect on LinkedIn."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Francis Yaw Odoom"
|
||||
leftLink={{
|
||||
text: "Contact",
|
||||
href: "#contact",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Projects",
|
||||
href: "#projects",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Francis Yaw Odoom"
|
||||
leftLink={{ text: "Contact", href: "#contact" }}
|
||||
rightLink={{ text: "Projects", href: "#projects" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user