bender/6703ca73-ec95-42e7-8fff-760ee9af3e32
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-06-10 15:20:38 +00:00
parent 88130d0b43
commit db97fa2be1
1 changed files with 92 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

323
src/app/page.tsx
View File

@@ -32,38 +32,23 @@ export default function LandingPage() {
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home",
id: "#home",
},
name: "Home", id: "#home"},
{
name: "About",
id: "#about",
},
name: "About", id: "#about"},
{
name: "Skills",
id: "#skills",
},
name: "Skills", id: "#skills"},
{
name: "Experience",
id: "#experience",
},
name: "Experience", id: "#experience"},
{
name: "Projects",
id: "#projects",
},
name: "Projects", id: "#projects"},
{
name: "Testimonials",
id: "#testimonials",
},
name: "Testimonials", id: "#testimonials"},
{
name: "Contact",
id: "#contact",
},
name: "Contact", id: "#contact"},
]}
brandName="Jérémy Vidocin"
button={{
text: "Download CV",
href: "http://img.b2bpic.net/free-vector/attractive-online-curriculum-template_23-2147818273.jpg",
text: "Download CV", href: "http://img.b2bpic.net/free-vector/attractive-online-curriculum-template_23-2147818273.jpg"
}}
/>
</div>
@@ -71,45 +56,37 @@ export default function LandingPage() {
<div id="home" data-section="home">
<HeroBillboardGallery
background={{
variant: "canvas-reveal",
variant: "canvas-reveal"
}}
title="Code the product Talk to the business"
description="Fullstack developer × business analyst. I build SI solutions that work because I speak both languages—architecture and stakeholder needs. Available for 24-month apprenticeship, September 2026, Île-de-France."
buttons={[
{
text: "View My Projects",
href: "#projects",
text: "View My Projects", href: "#projects"
},
{
text: "Download CV",
href: "http://img.b2bpic.net/free-vector/attractive-online-curriculum-template_23-2147818273.jpg",
},
text: "Download CV", href: "http://img.b2bpic.net/free-vector/attractive-online-curriculum-template_23-2147818273.jpg"
}
]}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-ai-data-visualization_23-2151977857.jpg?_wi=1",
imageAlt: "Modern software dashboard",
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-ai-data-visualization_23-2151977857.jpg", imageAlt: "Modern software dashboard"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139360.jpg?_wi=1",
imageAlt: "Abstract data flow",
imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139360.jpg", imageAlt: "Abstract data flow"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/system-engineers-celebrating-successful-code-compiling-doing-high-five-hand-gesture-with-colleague-coder-analyzing-algorithm-multiple-screens-takes-off-glasses-congratulates-coworker_482257-41855.jpg?_wi=1",
imageAlt: "Developer and business analyst",
imageSrc: "http://img.b2bpic.net/free-photo/system-engineers-celebrating-successful-code-compiling-doing-high-five-hand-gesture-with-colleague-coder-analyzing-algorithm-multiple-screens-takes-off-glasses-congratulates-coworker_482257-41855.jpg", imageAlt: "Developer and business analyst"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/two-creative-designers-working-project-together-sharing-new-ideas-workplace-business-team-work-concept_58466-12412.jpg?_wi=1",
imageAlt: "Collaborative tech meeting",
imageSrc: "http://img.b2bpic.net/free-photo/two-creative-designers-working-project-together-sharing-new-ideas-workplace-business-team-work-concept_58466-12412.jpg", imageAlt: "Collaborative tech meeting"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/data-center-manager-supervising-work-done-by-engineer_482257-126803.jpg",
imageAlt: "Secure server room",
imageSrc: "http://img.b2bpic.net/free-photo/data-center-manager-supervising-work-done-by-engineer_482257-126803.jpg", imageAlt: "Secure server room"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/horizontal-glass-phone-16-pro-max_187299-45887.jpg",
imageAlt: "Sleek web application UI",
},
imageSrc: "http://img.b2bpic.net/free-photo/horizontal-glass-phone-16-pro-max_187299-45887.jpg", imageAlt: "Sleek web application UI"
}
]}
mediaAnimation="blur-reveal"
/>
@@ -122,19 +99,16 @@ export default function LandingPage() {
metrics={[
{
icon: Code,
label: "Fullstack Development",
value: "Expertise",
label: "Fullstack Development", value: "Expertise"
},
{
icon: Briefcase,
label: "Business Analysis",
value: "Acumen",
label: "Business Analysis", value: "Acumen"
},
{
icon: ShieldCheck,
label: "SI Governance",
value: "Mastery",
},
label: "SI Governance", value: "Mastery"
}
]}
metricsAnimation="slide-up"
/>
@@ -147,105 +121,85 @@ export default function LandingPage() {
useInvertedBackground={false}
features={[
{
title: "End-to-End Solution Delivery",
description: "From concept to deployment, I manage the full software lifecycle, ensuring robust and scalable solutions.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/person-using-tablet_53876-163995.jpg",
imageAlt: "End-to-End Solution Delivery",
title: "End-to-End Solution Delivery", description: "From concept to deployment, I manage the full software lifecycle, ensuring robust and scalable solutions.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/person-using-tablet_53876-163995.jpg", imageAlt: "End-to-End Solution Delivery"
},
items: [
{
icon: CheckCircle,
text: "Full lifecycle management",
text: "Full lifecycle management"
},
{
icon: CheckCircle,
text: "Scalable architecture",
text: "Scalable architecture"
},
{
icon: CheckCircle,
text: "Robust deployment",
},
text: "Robust deployment"
}
],
reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-ai-data-visualization_23-2151977857.jpg?_wi=2",
imageAlt: "end to end project delivery lifecycle",
reverse: false
},
{
title: "Stakeholder Communication & UAT",
description: "Translating complex technical details into clear business language, and guiding users through effective User Acceptance Testing.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/male-female-graphic-designers-interacting-with-each-other_1170-2963.jpg",
imageAlt: "Stakeholder Communication & UAT",
title: "Stakeholder Communication & UAT", description: "Translating complex technical details into clear business language, and guiding users through effective User Acceptance Testing.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/male-female-graphic-designers-interacting-with-each-other_1170-2963.jpg", imageAlt: "Stakeholder Communication & UAT"
},
items: [
{
icon: CheckCircle,
text: "Requirements gathering",
text: "Requirements gathering"
},
{
icon: CheckCircle,
text: "User story development",
text: "User story development"
},
{
icon: CheckCircle,
text: "UAT facilitation",
},
text: "UAT facilitation"
}
],
reverse: true,
imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139360.jpg?_wi=2",
imageAlt: "end to end project delivery lifecycle",
reverse: true
},
{
title: "Technical Depth & Modern Stacks",
description: "Proficient in a wide array of modern technologies, ensuring efficient and high-performance development practices.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/jolly-bookkeeper-work-happy-after-finishing-verifying-business-documents_482257-126605.jpg",
imageAlt: "Technical Depth & Modern Stacks",
title: "Technical Depth & Modern Stacks", description: "Proficient in a wide array of modern technologies, ensuring efficient and high-performance development practices.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/jolly-bookkeeper-work-happy-after-finishing-verifying-business-documents_482257-126605.jpg", imageAlt: "Technical Depth & Modern Stacks"
},
items: [
{
icon: CheckCircle,
text: "Frontend frameworks",
text: "Frontend frameworks"
},
{
icon: CheckCircle,
text: "Backend technologies",
text: "Backend technologies"
},
{
icon: CheckCircle,
text: "Database management",
},
text: "Database management"
}
],
reverse: false,
imageSrc: "http://img.b2bpic.net/free-photo/system-engineers-celebrating-successful-code-compiling-doing-high-five-hand-gesture-with-colleague-coder-analyzing-algorithm-multiple-screens-takes-off-glasses-congratulates-coworker_482257-41855.jpg?_wi=2",
imageAlt: "end to end project delivery lifecycle",
reverse: false
},
{
title: "SI Governance & Compliance",
description: "Expertise in managing information system governance, including RGPD compliance and secure data practices.",
media: {
imageSrc: "http://img.b2bpic.net/free-photo/engineer-data-center-coding-laptop-optimizing-resource-utilization_482257-120596.jpg",
imageAlt: "SI Governance & Compliance",
title: "SI Governance & Compliance", description: "Expertise in managing information system governance, including RGPD compliance and secure data practices.", media: {
imageSrc: "http://img.b2bpic.net/free-photo/engineer-data-center-coding-laptop-optimizing-resource-utilization_482257-120596.jpg", imageAlt: "SI Governance & Compliance"
},
items: [
{
icon: CheckCircle,
text: "Data protection",
text: "Data protection"
},
{
icon: CheckCircle,
text: "Regulatory adherence",
text: "Regulatory adherence"
},
{
icon: CheckCircle,
text: "Risk assessment",
},
text: "Risk assessment"
}
],
reverse: true,
imageSrc: "http://img.b2bpic.net/free-photo/two-creative-designers-working-project-together-sharing-new-ideas-workplace-business-team-work-concept_58466-12412.jpg?_wi=2",
imageAlt: "end to end project delivery lifecycle",
},
reverse: true
}
]}
title="Bridging the Gap: Development & Business Insight"
description="My unique dual competency ensures seamless project execution from conception to deployment, aligning technical solutions with strategic business objectives."
@@ -259,37 +213,17 @@ export default function LandingPage() {
useInvertedBackground={false}
metrics={[
{
id: "1",
value: "5+",
title: "Years Experience",
description: "Diverse roles in software development and business analysis.",
imageSrc: "http://img.b2bpic.net/free-photo/words-succecc-notebook-with-handwriting_1357-138.jpg",
imageAlt: "Years of experience",
id: "1", value: "5+", title: "Years Experience", description: "Diverse roles in software development and business analysis.", imageSrc: "http://img.b2bpic.net/free-photo/words-succecc-notebook-with-handwriting_1357-138.jpg", imageAlt: "Years of experience"
},
{
id: "2",
value: "10+",
title: "Projects Delivered",
description: "Successful end-to-end delivery of complex SI projects.",
imageSrc: "http://img.b2bpic.net/free-photo/empty-startup-office-displays-statistics_482257-119484.jpg",
imageAlt: "Projects delivered",
id: "2", value: "10+", title: "Projects Delivered", description: "Successful end-to-end delivery of complex SI projects.", imageSrc: "http://img.b2bpic.net/free-photo/empty-startup-office-displays-statistics_482257-119484.jpg", imageAlt: "Projects delivered"
},
{
id: "3",
value: "7+",
title: "Tech Stacks Mastered",
description: "Proficiency across various modern frontend and backend technologies.",
imageSrc: "http://img.b2bpic.net/free-photo/diagrams-with-connected-icons_1134-403.jpg",
imageAlt: "Tech stacks mastered",
id: "3", value: "7+", title: "Tech Stacks Mastered", description: "Proficiency across various modern frontend and backend technologies.", imageSrc: "http://img.b2bpic.net/free-photo/diagrams-with-connected-icons_1134-403.jpg", imageAlt: "Tech stacks mastered"
},
{
id: "4",
value: "99%",
title: "Successful Deployments",
description: "Consistent track record of smooth and reliable system rollouts.",
imageSrc: "http://img.b2bpic.net/free-photo/press-reporter-fallowing-leads-case_23-2149579746.jpg",
imageAlt: "Successful deployments",
},
id: "4", value: "99%", title: "Successful Deployments", description: "Consistent track record of smooth and reliable system rollouts.", imageSrc: "http://img.b2bpic.net/free-photo/press-reporter-fallowing-leads-case_23-2149579746.jpg", imageAlt: "Successful deployments"
}
]}
title="Impact & Expertise in Numbers"
description="Quantifying my dedication to robust solutions and measurable business value."
@@ -304,47 +238,23 @@ export default function LandingPage() {
useInvertedBackground={false}
products={[
{
id: "proj-ecommerce",
name: "E-commerce Platform Revamp",
price: "Case Study",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-cyber-monday-text_23-2148675029.jpg",
imageAlt: "E-commerce platform screenshot",
id: "proj-ecommerce", name: "E-commerce Platform Revamp", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/top-view-cyber-monday-text_23-2148675029.jpg", imageAlt: "E-commerce platform screenshot"
},
{
id: "proj-pmtool",
name: "SI Project Management Tool",
price: "View Project",
imageSrc: "http://img.b2bpic.net/free-photo/african-american-company-employees-handling-financial-planning_482257-128572.jpg",
imageAlt: "Project management tool interface",
id: "proj-pmtool", name: "SI Project Management Tool", price: "View Project", imageSrc: "http://img.b2bpic.net/free-photo/african-american-company-employees-handling-financial-planning_482257-128572.jpg", imageAlt: "Project management tool interface"
},
{
id: "proj-fintech",
name: "Fintech Analytics Dashboard",
price: "Case Study",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-network-growth-charts_9975-22174.jpg",
imageAlt: "Fintech dashboard screenshot",
id: "proj-fintech", name: "Fintech Analytics Dashboard", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-network-growth-charts_9975-22174.jpg", imageAlt: "Fintech dashboard screenshot"
},
{
id: "proj-medbooking",
name: "Health Clinic Booking System",
price: "View Project",
imageSrc: "http://img.b2bpic.net/free-photo/woman-doctor-meeting-with-patient-medical-cabinet-copy-space_482257-118353.jpg",
imageAlt: "Health clinic booking system",
id: "proj-medbooking", name: "Health Clinic Booking System", price: "View Project", imageSrc: "http://img.b2bpic.net/free-photo/woman-doctor-meeting-with-patient-medical-cabinet-copy-space_482257-118353.jpg", imageAlt: "Health clinic booking system"
},
{
id: "proj-hrportal",
name: "Corporate HR Portal",
price: "Case Study",
imageSrc: "http://img.b2bpic.net/free-photo/owner-getting-ready-reopening_23-2149142188.jpg",
imageAlt: "Corporate HR portal interface",
id: "proj-hrportal", name: "Corporate HR Portal", price: "Case Study", imageSrc: "http://img.b2bpic.net/free-photo/owner-getting-ready-reopening_23-2149142188.jpg", imageAlt: "Corporate HR portal interface"
},
{
id: "proj-supplychain",
name: "Supply Chain Optimizer",
price: "View Project",
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-technology-concept_23-2151908129.jpg",
imageAlt: "Supply chain optimization dashboard",
},
id: "proj-supplychain", name: "Supply Chain Optimizer", price: "View Project", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-technology-concept_23-2151908129.jpg", imageAlt: "Supply chain optimization dashboard"
}
]}
title="My Portfolio: Solutions That Deliver Value"
description="Explore a selection of my fullstack development and business analysis projects, showcasing diverse technical stacks and problem-solving approaches."
@@ -358,53 +268,23 @@ export default function LandingPage() {
useInvertedBackground={false}
testimonials={[
{
id: "test-1",
name: "Elodie Dubois",
handle: "@elodie.techrec",
testimonial: "Jérémy's understanding of both deep tech and business requirements is truly exceptional. A rare find for any SI team.",
imageSrc: "http://img.b2bpic.net/free-photo/smart-businesswoman-with-laptop_23-2147626415.jpg",
imageAlt: "Elodie Dubois",
id: "test-1", name: "Elodie Dubois", handle: "@elodie.techrec", testimonial: "Jérémy's understanding of both deep tech and business requirements is truly exceptional. A rare find for any SI team.", imageSrc: "http://img.b2bpic.net/free-photo/smart-businesswoman-with-laptop_23-2147626415.jpg", imageAlt: "Elodie Dubois"
},
{
id: "test-2",
name: "Marc Lemaire",
handle: "@marc.cto",
testimonial: "His ability to bridge the gap between development and métier teams has been invaluable on complex projects. Highly recommended.",
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-asian-businessman-businesswoman-meeting-brainstorming-some-new-ideas-about-project_7861-2781.jpg",
imageAlt: "Marc Lemaire",
id: "test-2", name: "Marc Lemaire", handle: "@marc.cto", testimonial: "His ability to bridge the gap between development and métier teams has been invaluable on complex projects. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/happy-young-asian-businessman-businesswoman-meeting-brainstorming-some-new-ideas-about-project_7861-2781.jpg", imageAlt: "Marc Lemaire"
},
{
id: "test-3",
name: "Sophie Martin",
handle: "@sophie.hiring",
testimonial: "Jérémy excels in both coding and strategic analysis. He's exactly the hybrid profile we look for in today's digital landscape.",
imageSrc: "http://img.b2bpic.net/free-photo/successful-man-pointing-camera-with-finger_1262-3118.jpg",
imageAlt: "Sophie Martin",
id: "test-3", name: "Sophie Martin", handle: "@sophie.hiring", testimonial: "Jérémy excels in both coding and strategic analysis. He's exactly the hybrid profile we look for in today's digital landscape.", imageSrc: "http://img.b2bpic.net/free-photo/successful-man-pointing-camera-with-finger_1262-3118.jpg", imageAlt: "Sophie Martin"
},
{
id: "test-4",
name: "Pierre Dupont",
handle: "@pierre.sidirector",
testimonial: "With a strong grasp of SI governance and RGPD, Jérémy brings a level of responsibility and foresight crucial for modern enterprises.",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-looking-away-holding-laptop_23-2148308516.jpg",
imageAlt: "Pierre Dupont",
id: "test-4", name: "Pierre Dupont", handle: "@pierre.sidirector", testimonial: "With a strong grasp of SI governance and RGPD, Jérémy brings a level of responsibility and foresight crucial for modern enterprises.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-looking-away-holding-laptop_23-2148308516.jpg", imageAlt: "Pierre Dupont"
},
{
id: "test-5",
name: "Camille Leroy",
handle: "@camille.itlead",
testimonial: "His proactive approach in UAT and clear communication made our project sprints incredibly smooth. A true asset.",
imageSrc: "http://img.b2bpic.net/free-photo/diverse-group-business-professionals-posing-together-monitoring-room_482257-89677.jpg",
imageAlt: "Camille Leroy",
id: "test-5", name: "Camille Leroy", handle: "@camille.itlead", testimonial: "His proactive approach in UAT and clear communication made our project sprints incredibly smooth. A true asset.", imageSrc: "http://img.b2bpic.net/free-photo/diverse-group-business-professionals-posing-together-monitoring-room_482257-89677.jpg", imageAlt: "Camille Leroy"
},
{
id: "test-6",
name: "Antoine Girard",
handle: "@antoine.dev",
testimonial: "Jérémy's technical skills are top-notch, always delivering clean, efficient code that integrates seamlessly with business goals.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg",
imageAlt: "Antoine Girard",
},
id: "test-6", name: "Antoine Girard", handle: "@antoine.dev", testimonial: "Jérémy's technical skills are top-notch, always delivering clean, efficient code that integrates seamlessly with business goals.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg", imageAlt: "Antoine Girard"
}
]}
title="What Leaders Say"
description="Feedback from recruiters, SI directors, and hiring managers on my dual-competency approach and project impact."
@@ -418,29 +298,18 @@ export default function LandingPage() {
description="I'm actively seeking a 24-month apprenticeship starting September 2026 in Île-de-France. Let's discuss how my dual expertise can benefit your team."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
required: true,
name: "name", type: "text", placeholder: "Your Name", required: true
},
{
name: "email",
type: "email",
placeholder: "Your Email",
required: true,
name: "email", type: "email", placeholder: "Your Email", required: true
},
{
name: "subject",
type: "text",
placeholder: "Subject",
required: true,
},
name: "subject", type: "text", placeholder: "Subject", required: true
}
]}
textarea={{
name: "message",
placeholder: "Your Message",
rows: 4,
required: true,
name: "message", placeholder: "Your Message", rows: 4,
required: true
}}
imageSrc="http://img.b2bpic.net/free-photo/high-angle-business-meeting-mock-up_23-2148339336.jpg"
imageAlt="Professional handshake"
@@ -458,47 +327,39 @@ export default function LandingPage() {
{
items: [
{
label: "Home",
href: "#home",
label: "Home", href: "#home"
},
{
label: "About",
href: "#about",
label: "About", href: "#about"
},
{
label: "Skills",
href: "#skills",
},
],
label: "Skills", href: "#skills"
}
]
},
{
items: [
{
label: "Projects",
href: "#projects",
label: "Projects", href: "#projects"
},
{
label: "Testimonials",
href: "#testimonials",
label: "Testimonials", href: "#testimonials"
},
{
label: "Contact",
href: "#contact",
},
],
label: "Contact", href: "#contact"
}
]
},
{
items: [
{
label: "LinkedIn",
href: "https://linkedin.com/in/jeremyvidocin",
label: "LinkedIn", href: "https://linkedin.com/in/jeremyvidocin"
},
{
label: "GitHub",
href: "https://github.com/jeremyvidocin",
},
],
},
label: "GitHub", href: "https://github.com/jeremyvidocin"
}
]
}
]}
logoText="Jérémy Vidocin"
/>