bender/a49f5b5b-af04-4cdd-b525-6e55573d77d8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #1

Merged
bender merged 1 commits from version_1 into main 2026-06-04 03:58:58 +00:00
Conversation 0 Commits 1 Files Changed 1 +65 -260
1 changed files with 65 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

325
src/app/page.tsx
View File

@@ -32,33 +32,19 @@ export default function LandingPage() {
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home",
id: "#hero",
},
name: "Home", id: "#hero"},
{
name: "About",
id: "#about",
},
name: "About", id: "#about"},
{
name: "Skills",
id: "#skills",
},
name: "Skills", id: "#skills"},
{
name: "Projects",
id: "#projects",
},
name: "Projects", id: "#projects"},
{
name: "Services",
id: "#services",
},
name: "Services", id: "#services"},
{
name: "Testimonials",
id: "#testimonials",
},
name: "Testimonials", id: "#testimonials"},
{
name: "Contact",
id: "#contact",
},
name: "Contact", id: "#contact"},
]}
brandName="Elsa Jojo"
/>
@@ -70,35 +56,21 @@ export default function LandingPage() {
description="As a dedicated software developer, I craft seamless digital experiences, leveraging cutting-edge technologies to solve complex challenges and build impactful solutions."
buttons={[
{
text: "View My Projects",
href: "#projects",
},
text: "View My Projects", href: "#projects"},
{
text: "Connect with Me",
href: "#contact",
},
text: "Connect with Me", href: "#contact"},
]}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/portrait-black-freelancer-laying-sofa-texting-phone_482257-126547.jpg",
alt: "Avatar 1",
},
src: "http://img.b2bpic.net/free-photo/portrait-black-freelancer-laying-sofa-texting-phone_482257-126547.jpg", alt: "Avatar 1"},
{
src: "http://img.b2bpic.net/free-photo/smiling-female-staff-airport-terminal_107420-85049.jpg",
alt: "Avatar 2",
},
src: "http://img.b2bpic.net/free-photo/smiling-female-staff-airport-terminal_107420-85049.jpg", alt: "Avatar 2"},
{
src: "http://img.b2bpic.net/free-photo/square-user-profile-front-side_187299-39570.jpg",
alt: "Avatar 3",
},
src: "http://img.b2bpic.net/free-photo/square-user-profile-front-side_187299-39570.jpg", alt: "Avatar 3"},
{
src: "http://img.b2bpic.net/free-photo/user-profile-sign-icon-front-side_187299-39692.jpg",
alt: "Avatar 4",
},
src: "http://img.b2bpic.net/free-photo/user-profile-sign-icon-front-side_187299-39692.jpg", alt: "Avatar 4"},
{
src: "http://img.b2bpic.net/free-photo/front-view-man-developing-photos_23-2149893918.jpg",
alt: "Elsa Jojo team member",
},
src: "http://img.b2bpic.net/free-photo/front-view-man-developing-photos_23-2149893918.jpg", alt: "Elsa Jojo team member"},
]}
avatarText="Collaborating with brilliant minds"
imageSrc="http://img.b2bpic.net/free-photo/abstract-design-with-flowing-lines-hot-cold-colours_1048-8169.jpg"
@@ -111,11 +83,8 @@ export default function LandingPage() {
useInvertedBackground={false}
heading={[
{
type: "text",
content: "About Elsa Jojo: Passionate About Technology and Innovation",
},
type: "text", content: "About Elsa Jojo: Passionate About Technology and Innovation"},
]}
content="I am a passionate and self-motivated technology enthusiast with a strong foundation in software development and a keen interest in modern technologies. My journey involves continuous learning, tackling intricate problems, and creating innovative projects from concept to deployment. I thrive in collaborative environments, valuing teamwork to achieve shared goals and explore emerging technologies that shape our digital future. I believe in writing clean, efficient, and maintainable code to build robust and scalable applications."
/>
</div>
@@ -127,55 +96,17 @@ export default function LandingPage() {
useInvertedBackground={true}
features={[
{
title: "Frontend Development",
description: "Building responsive and dynamic user interfaces with modern frameworks like React and Next.js.",
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-website-hosting-concept_23-2149484782.jpg",
imageAlt: "Frontend development illustration",
titleImageSrc: "http://img.b2bpic.net/free-vector/modern-web-design-concept-with-flat-style_23-2147937777.jpg",
buttonText: "View Projects",
buttonHref: "#projects",
},
title: "Frontend Development", description: "Building responsive and dynamic user interfaces with modern frameworks like React and Next.js.", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-website-hosting-concept_23-2149484782.jpg", imageAlt: "Frontend development illustration", titleImageSrc: "http://img.b2bpic.net/free-vector/modern-web-design-concept-with-flat-style_23-2147937777.jpg", buttonText: "View Projects", buttonHref: "#projects"},
{
title: "Backend Development",
description: "Crafting robust APIs and scalable server-side applications using Node.js, Express, and Python frameworks.",
imageSrc: "http://img.b2bpic.net/free-photo/server-room-computer-controlling-devices-used-high-speed-data-transfers_482257-124282.jpg",
imageAlt: "Backend development illustration",
titleImageSrc: "http://img.b2bpic.net/free-photo/view-puzzle-pieces-blue-background_23-2149299057.jpg",
buttonText: "View Projects",
buttonHref: "#projects",
},
title: "Backend Development", description: "Crafting robust APIs and scalable server-side applications using Node.js, Express, and Python frameworks.", imageSrc: "http://img.b2bpic.net/free-photo/server-room-computer-controlling-devices-used-high-speed-data-transfers_482257-124282.jpg", imageAlt: "Backend development illustration", titleImageSrc: "http://img.b2bpic.net/free-photo/view-puzzle-pieces-blue-background_23-2149299057.jpg", buttonText: "View Projects", buttonHref: "#projects"},
{
title: "Cloud & DevOps",
description: "Leveraging AWS services, Docker, and CI/CD pipelines to build and deploy highly available and scalable applications.",
imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-port-with-cranes_1203-1982.jpg",
imageAlt: "Cloud and DevOps illustration",
titleImageSrc: "http://img.b2bpic.net/free-vector/cloud-with-layers-set_78370-10871.jpg",
buttonText: "Learn More",
},
title: "Cloud & DevOps", description: "Leveraging AWS services, Docker, and CI/CD pipelines to build and deploy highly available and scalable applications.", imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-port-with-cranes_1203-1982.jpg", imageAlt: "Cloud and DevOps illustration", titleImageSrc: "http://img.b2bpic.net/free-vector/cloud-with-layers-set_78370-10871.jpg", buttonText: "Learn More"},
{
title: "Data & AI/ML",
description: "Applying Python for data analysis and implementing foundational machine learning concepts for intelligent solutions.",
imageSrc: "http://img.b2bpic.net/free-photo/blockchain-technology-cartoon-illustration_23-2151572175.jpg",
imageAlt: "Data and AI/ML illustration",
titleImageSrc: "http://img.b2bpic.net/free-vector/artificial-intelligence-elements-collection-flat-style_23-2147868685.jpg",
buttonText: "Learn More",
},
title: "Data & AI/ML", description: "Applying Python for data analysis and implementing foundational machine learning concepts for intelligent solutions.", imageSrc: "http://img.b2bpic.net/free-photo/blockchain-technology-cartoon-illustration_23-2151572175.jpg", imageAlt: "Data and AI/ML illustration", titleImageSrc: "http://img.b2bpic.net/free-vector/artificial-intelligence-elements-collection-flat-style_23-2147868685.jpg", buttonText: "Learn More"},
{
title: "Problem Solving",
description: "Utilizing analytical thinking and algorithmic optimization to efficiently tackle complex technical challenges.",
imageSrc: "http://img.b2bpic.net/free-photo/frame-with-ligh-bulb-paper_23-2148519430.jpg",
imageAlt: "Problem solving illustration",
titleImageSrc: "http://img.b2bpic.net/free-photo/light-bulb-left-side-with-white-background_187299-39887.jpg",
buttonText: "Explore",
},
title: "Problem Solving", description: "Utilizing analytical thinking and algorithmic optimization to efficiently tackle complex technical challenges.", imageSrc: "http://img.b2bpic.net/free-photo/frame-with-ligh-bulb-paper_23-2148519430.jpg", imageAlt: "Problem solving illustration", titleImageSrc: "http://img.b2bpic.net/free-photo/light-bulb-left-side-with-white-background_187299-39887.jpg", buttonText: "Explore"},
{
title: "Collaboration & Agile",
description: "Thriving in team-based environments, contributing to project success through effective communication and Agile methodologies.",
imageSrc: "http://img.b2bpic.net/free-photo/covid-concept-with-cubes-flat-lay_23-2148911543.jpg",
imageAlt: "Collaboration and Agile illustration",
titleImageSrc: "http://img.b2bpic.net/free-photo/family-concept-with-icons-wooden-cubes-red-table-flat-lay_176474-9436.jpg",
buttonText: "Connect",
},
title: "Collaboration & Agile", description: "Thriving in team-based environments, contributing to project success through effective communication and Agile methodologies.", imageSrc: "http://img.b2bpic.net/free-photo/covid-concept-with-cubes-flat-lay_23-2148911543.jpg", imageAlt: "Collaboration and Agile illustration", titleImageSrc: "http://img.b2bpic.net/free-photo/family-concept-with-icons-wooden-cubes-red-table-flat-lay_176474-9436.jpg", buttonText: "Connect"},
]}
title="My Core Skills & Expertise"
description="Proficient in a diverse range of modern technologies, dedicated to continuous learning and delivering robust solutions."
@@ -190,53 +121,17 @@ export default function LandingPage() {
useInvertedBackground={false}
products={[
{
id: "project-ecommerce",
name: "E-commerce Platform",
price: "Full-Stack Dev",
variant: "React, Node.js, Stripe",
imageSrc: "http://img.b2bpic.net/free-photo/buy-fresh-food-marketplace-supermarket-shopping-graphic_53876-120740.jpg",
imageAlt: "Screenshot of an e-commerce platform",
},
id: "project-ecommerce", name: "E-commerce Platform", price: "Full-Stack Dev", variant: "React, Node.js, Stripe", imageSrc: "http://img.b2bpic.net/free-photo/buy-fresh-food-marketplace-supermarket-shopping-graphic_53876-120740.jpg", imageAlt: "Screenshot of an e-commerce platform"},
{
id: "project-chat-app",
name: "Real-time Chat App",
price: "Web Development",
variant: "React, Socket.io, Express",
imageSrc: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201859.jpg",
imageAlt: "Screenshot of a real-time chat application",
},
id: "project-chat-app", name: "Real-time Chat App", price: "Web Development", variant: "React, Socket.io, Express", imageSrc: "http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201859.jpg", imageAlt: "Screenshot of a real-time chat application"},
{
id: "project-blog-cms",
name: "Personal Blog CMS",
price: "Content Platform",
variant: "Next.js, Markdown, Headless CMS",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-computers-data-center-running-server-rigs-diagnostic-tests_482257-123527.jpg",
imageAlt: "Screenshot of a personal blog CMS",
},
id: "project-blog-cms", name: "Personal Blog CMS", price: "Content Platform", variant: "Next.js, Markdown, Headless CMS", imageSrc: "http://img.b2bpic.net/free-photo/close-up-computers-data-center-running-server-rigs-diagnostic-tests_482257-123527.jpg", imageAlt: "Screenshot of a personal blog CMS"},
{
id: "project-ai-reco",
name: "AI Recommendation Engine",
price: "Machine Learning",
variant: "Python, Flask, Basic ML",
imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241207.jpg",
imageAlt: "Dashboard of an AI recommendation engine",
},
id: "project-ai-reco", name: "AI Recommendation Engine", price: "Machine Learning", variant: "Python, Flask, Basic ML", imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241207.jpg", imageAlt: "Dashboard of an AI recommendation engine"},
{
id: "project-task-mgr",
name: "Task Management Tool",
price: "Frontend Focused",
variant: "React, Redux, UI/UX",
imageSrc: "http://img.b2bpic.net/free-photo/digital-business-list-app-interface_53876-15280.jpg",
imageAlt: "Screenshot of a task management tool",
},
id: "project-task-mgr", name: "Task Management Tool", price: "Frontend Focused", variant: "React, Redux, UI/UX", imageSrc: "http://img.b2bpic.net/free-photo/digital-business-list-app-interface_53876-15280.jpg", imageAlt: "Screenshot of a task management tool"},
{
id: "project-serverless-api",
name: "Serverless API Gateway",
price: "Cloud Architecture",
variant: "AWS Lambda, API Gateway, DynamoDB",
imageSrc: "http://img.b2bpic.net/free-photo/drawings-connected-devices_1134-261.jpg",
imageAlt: "Diagram of a serverless API gateway",
},
id: "project-serverless-api", name: "Serverless API Gateway", price: "Cloud Architecture", variant: "AWS Lambda, API Gateway, DynamoDB", imageSrc: "http://img.b2bpic.net/free-photo/drawings-connected-devices_1134-261.jpg", imageAlt: "Diagram of a serverless API gateway"},
]}
title="Featured Projects"
description="Highlighting a selection of my innovative projects that demonstrate my technical expertise and problem-solving abilities."
@@ -250,61 +145,25 @@ export default function LandingPage() {
useInvertedBackground={true}
plans={[
{
id: "consulting",
tag: "Strategy",
tagIcon: Sparkles,
price: "Custom Quote",
period: "/ project",
description: "Expert advice to define your tech strategy, architecture, and optimal technology stack.",
button: {
text: "Inquire Now",
href: "#contact",
},
featuresTitle: "Includes:",
features: [
"Technical Roadmapping",
"Architecture Design",
"Technology Stack Selection",
"Feasibility Analysis",
],
id: "consulting", tag: "Strategy", tagIcon: Sparkles,
price: "Custom Quote", period: "/ project", description: "Expert advice to define your tech strategy, architecture, and optimal technology stack.", button: {
text: "Inquire Now", href: "#contact"},
featuresTitle: "Includes:", features: [
"Technical Roadmapping", "Architecture Design", "Technology Stack Selection", "Feasibility Analysis"],
},
{
id: "fullstack-dev",
tag: "Development",
tagIcon: Code,
price: "Starting at $X",
period: "/ project",
description: "End-to-end development services, bringing your ideas to life from UI/UX to database implementation.",
button: {
text: "Start Your Project",
href: "#contact",
},
featuresTitle: "Includes:",
features: [
"Frontend & Backend Development",
"Database Integration",
"API Development",
"Deployment & Maintenance",
],
id: "fullstack-dev", tag: "Development", tagIcon: Code,
price: "Starting at $X", period: "/ project", description: "End-to-end development services, bringing your ideas to life from UI/UX to database implementation.", button: {
text: "Start Your Project", href: "#contact"},
featuresTitle: "Includes:", features: [
"Frontend & Backend Development", "Database Integration", "API Development", "Deployment & Maintenance"],
},
{
id: "mentorship",
tag: "Growth",
tagIcon: GraduationCap,
price: "Hourly Rate",
period: "/ hour",
description: "Personalized mentorship and code review for aspiring developers looking to enhance their skills.",
button: {
text: "Book a Session",
href: "#contact",
},
featuresTitle: "Includes:",
features: [
"Code Review & Best Practices",
"Career Guidance",
"Technical Problem Solving",
"Learning Path Suggestions",
],
id: "mentorship", tag: "Growth", tagIcon: GraduationCap,
price: "Hourly Rate", period: "/ hour", description: "Personalized mentorship and code review for aspiring developers looking to enhance their skills.", button: {
text: "Book a Session", href: "#contact"},
featuresTitle: "Includes:", features: [
"Code Review & Best Practices", "Career Guidance", "Technical Problem Solving", "Learning Path Suggestions"],
},
]}
title="My Professional Services"
@@ -317,41 +176,17 @@ export default function LandingPage() {
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Sarah Chen",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-business-woman-posing_23-2149457762.jpg",
imageAlt: "Sarah Chen profile picture",
},
id: "1", name: "Sarah Chen", imageSrc: "http://img.b2bpic.net/free-photo/side-view-business-woman-posing_23-2149457762.jpg", imageAlt: "Sarah Chen profile picture"},
{
id: "2",
name: "Michael Lee",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg",
imageAlt: "Michael Lee profile picture",
},
id: "2", name: "Michael Lee", imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg", imageAlt: "Michael Lee profile picture"},
{
id: "3",
name: "Emily Rodriguez",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-teenage-girl-sitting-cafe_1262-3048.jpg",
imageAlt: "Emily Rodriguez profile picture",
},
id: "3", name: "Emily Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-teenage-girl-sitting-cafe_1262-3048.jpg", imageAlt: "Emily Rodriguez profile picture"},
{
id: "4",
name: "David Kim",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-confident-corporate-woman-professional-entrepreneur-smiling-cross-arms-chest-smil_1258-124564.jpg",
imageAlt: "David Kim profile picture",
},
id: "4", name: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/close-up-confident-corporate-woman-professional-entrepreneur-smiling-cross-arms-chest-smil_1258-124564.jpg", imageAlt: "David Kim profile picture"},
{
id: "5",
name: "Jessica White",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-happy-mature-businessman-with-cup-coffee_23-2147955276.jpg",
imageAlt: "Jessica White profile picture",
},
id: "5", name: "Jessica White", imageSrc: "http://img.b2bpic.net/free-photo/close-up-happy-mature-businessman-with-cup-coffee_23-2147955276.jpg", imageAlt: "Jessica White profile picture"},
{
id: "6",
name: "Carlos Rivera",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-pretty-young-woman-posing-camera_1262-18333.jpg",
imageAlt: "Carlos Rivera profile picture",
},
id: "6", name: "Carlos Rivera", imageSrc: "http://img.b2bpic.net/free-photo/smiling-pretty-young-woman-posing-camera_1262-18333.jpg", imageAlt: "Carlos Rivera profile picture"},
]}
cardTitle="What My Clients & Collaborators Say"
cardTag="Trusted Partnerships"
@@ -363,20 +198,15 @@ export default function LandingPage() {
<ContactCTA
useInvertedBackground={true}
background={{
variant: "sparkles-gradient",
}}
variant: "sparkles-gradient"}}
tag="Get In Touch"
title="Let's Connect and Create"
description="Ready to discuss your next project, explore collaboration opportunities, or simply share ideas? Reach out to me. I'm always excited to connect with fellow tech enthusiasts!"
buttons={[
{
text: "Send Email",
href: "mailto:elsa.jojo@example.com",
},
text: "Send Email", href: "mailto:elsa.jojo@example.com"},
{
text: "Connect on LinkedIn",
href: "https://linkedin.com/in/elsajojo",
},
text: "Connect on LinkedIn", href: "https://linkedin.com/in/elsajojo"},
]}
/>
</div>
@@ -385,62 +215,37 @@ export default function LandingPage() {
<FooterBase
columns={[
{
title: "Quick Links",
items: [
title: "Quick Links", items: [
{
label: "Home",
href: "#hero",
},
label: "Home", href: "#hero"},
{
label: "About",
href: "#about",
},
label: "About", href: "#about"},
{
label: "Skills",
href: "#skills",
},
label: "Skills", href: "#skills"},
{
label: "Projects",
href: "#projects",
},
label: "Projects", href: "#projects"},
{
label: "Services",
href: "#services",
},
label: "Services", href: "#services"},
{
label: "Contact",
href: "#contact",
},
label: "Contact", href: "#contact"},
],
},
{
title: "Connect",
items: [
title: "Connect", items: [
{
label: "LinkedIn",
href: "https://linkedin.com/in/elsajojo",
},
label: "LinkedIn", href: "https://linkedin.com/in/elsajojo"},
{
label: "GitHub",
href: "https://github.com/elsajojo",
},
label: "GitHub", href: "https://github.com/elsajojo"},
{
label: "Email",
href: "mailto:elsa.jojo@example.com",
},
label: "Email", href: "mailto:elsa.jojo@example.com"},
],
},
{
title: "Legal",
items: [
title: "Legal", items: [
{
label: "Privacy Policy",
href: "#",
},
label: "Privacy Policy", href: "#"},
{
label: "Terms of Service",
href: "#",
},
label: "Terms of Service", href: "#"},
],
},
]}