Merge version_1 into main #1
183
src/app/page.tsx
183
src/app/page.tsx
@@ -30,18 +30,9 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Projects",
|
||||
id: "projects",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Projects", id: "projects" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="DJK"
|
||||
/>
|
||||
@@ -49,20 +40,12 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
logoText="Jaffar Kebiri"
|
||||
description="IT • Cybersecurity • Marketing • Music • Storytelling. Building a modern digital identity at the intersection of logic and creativity."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Projects",
|
||||
href: "#projects",
|
||||
},
|
||||
{
|
||||
text: "Contact Me",
|
||||
href: "#contact",
|
||||
},
|
||||
{ text: "View Projects", href: "#projects" },
|
||||
{ text: "Contact Me", href: "#contact" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/person-uses-tablet-governmental-cyber-security-room-working-russian-flag_482257-90680.jpg"
|
||||
imageAlt="Jaffar Kebiri Hero Image"
|
||||
@@ -75,21 +58,9 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="Discipline. Creativity. Ambition."
|
||||
metrics={[
|
||||
{
|
||||
icon: Shield,
|
||||
label: "Security Mindset",
|
||||
value: "100%",
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
label: "Strategic Thinking",
|
||||
value: "Analytical",
|
||||
},
|
||||
{
|
||||
icon: Music,
|
||||
label: "Creative Focus",
|
||||
value: "Endless",
|
||||
},
|
||||
{ icon: Shield, label: "Security Mindset", value: "100%" },
|
||||
{ icon: Star, label: "Strategic Thinking", value: "Analytical" },
|
||||
{ icon: Music, label: "Creative Focus", value: "Endless" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -102,23 +73,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Cybersecurity",
|
||||
description: "Analyzing vulnerabilities and building secure digital infrastructures.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-headphones-working_23-2149370618.jpg",
|
||||
imageAlt: "Cybersecurity Skills",
|
||||
},
|
||||
title: "Cybersecurity", description: "Analyzing vulnerabilities and building secure digital infrastructures.", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-headphones-working_23-2149370618.jpg", imageAlt: "Cybersecurity Skills"},
|
||||
{
|
||||
title: "Audio Creation",
|
||||
description: "Songwriting and sound design for cinematic experiences.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expert-sound-engineer-adjusting-mixer-knobs-performance-generated-by-ai_188544-38035.jpg",
|
||||
imageAlt: "Music Production",
|
||||
},
|
||||
title: "Audio Creation", description: "Songwriting and sound design for cinematic experiences.", imageSrc: "http://img.b2bpic.net/free-photo/expert-sound-engineer-adjusting-mixer-knobs-performance-generated-by-ai_188544-38035.jpg", imageAlt: "Music Production"},
|
||||
{
|
||||
title: "Brand Strategy",
|
||||
description: "Developing digital identity through targeted marketing and storytelling.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-city-building-shadows_23-2149283286.jpg",
|
||||
imageAlt: "Branding Strategy",
|
||||
},
|
||||
title: "Brand Strategy", description: "Developing digital identity through targeted marketing and storytelling.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-city-building-shadows_23-2149283286.jpg", imageAlt: "Branding Strategy"},
|
||||
]}
|
||||
title="Technical & Creative Pillars"
|
||||
description="My skill set blends technical mastery in IT and security with the creative edge of storytelling, branding, and audio design."
|
||||
@@ -129,44 +88,21 @@ export default function LandingPage() {
|
||||
<ProductCardOne
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Network Shield Project",
|
||||
price: "Tech",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241197.jpg",
|
||||
},
|
||||
id: "p1", name: "Network Shield Project", price: "Tech", imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241197.jpg"},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Ambient Soundscapes",
|
||||
price: "Music",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/retro-vhs-packaging-indoors_23-2150172333.jpg",
|
||||
},
|
||||
id: "p2", name: "Ambient Soundscapes", price: "Music", imageSrc: "http://img.b2bpic.net/free-photo/retro-vhs-packaging-indoors_23-2150172333.jpg"},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Brand Identity Case",
|
||||
price: "Creative",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-architectural-marvel-night_23-2152006102.jpg",
|
||||
},
|
||||
id: "p3", name: "Brand Identity Case", price: "Creative", imageSrc: "http://img.b2bpic.net/free-photo/modern-architectural-marvel-night_23-2152006102.jpg"},
|
||||
{
|
||||
id: "p4",
|
||||
name: "IT Infrastructure audit",
|
||||
price: "Tech",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/determined-ceo-works-office-analyzing-infographics-setting-business-goals_482257-123120.jpg",
|
||||
},
|
||||
id: "p4", name: "IT Infrastructure audit", price: "Tech", imageSrc: "http://img.b2bpic.net/free-photo/determined-ceo-works-office-analyzing-infographics-setting-business-goals_482257-123120.jpg"},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Film Score Project",
|
||||
price: "Music",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-piano-keys-blurred-background-with-bokeh_169016-11071.jpg",
|
||||
},
|
||||
id: "p5", name: "Film Score Project", price: "Music", imageSrc: "http://img.b2bpic.net/free-photo/close-up-piano-keys-blurred-background-with-bokeh_169016-11071.jpg"},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Social Identity Build",
|
||||
price: "Creative",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-red-light_1017-2657.jpg",
|
||||
},
|
||||
id: "p6", name: "Social Identity Build", price: "Creative", imageSrc: "http://img.b2bpic.net/free-photo/abstract-red-light_1017-2657.jpg"},
|
||||
]}
|
||||
title="Portfolio Highlights"
|
||||
description="A collection of projects spanning technical and creative domains."
|
||||
@@ -177,21 +113,9 @@ export default function LandingPage() {
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Ambition and Discipline",
|
||||
content: "I believe that true excellence is built on daily persistence and clear vision.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Why IT and Music?",
|
||||
content: "The marriage of logic and art is where originality thrives in the digital age.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "The Now",
|
||||
content: "Focused on deepening my cybersecurity knowledge and expanding my reach as a storyteller.",
|
||||
},
|
||||
{ id: "q1", title: "Ambition and Discipline", content: "I believe that true excellence is built on daily persistence and clear vision." },
|
||||
{ id: "q2", title: "Why IT and Music?", content: "The marriage of logic and art is where originality thrives in the digital age." },
|
||||
{ id: "q3", title: "The Now", content: "Focused on deepening my cybersecurity knowledge and expanding my reach as a storyteller." },
|
||||
]}
|
||||
sideTitle="Mindset & Focus"
|
||||
sideDescription="What drives the work."
|
||||
@@ -206,23 +130,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "IT Strategy",
|
||||
description: "Consulting and technical support for independent projects.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-pc-monitors-desk-used-monitoring-data-center-devices-energy_482257-118092.jpg",
|
||||
imageAlt: "IT Consulting",
|
||||
},
|
||||
title: "IT Strategy", description: "Consulting and technical support for independent projects.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-pc-monitors-desk-used-monitoring-data-center-devices-energy_482257-118092.jpg", imageAlt: "IT Consulting"},
|
||||
{
|
||||
title: "Identity Branding",
|
||||
description: "Crafting unique digital presence for personal and professional brands.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/skyscrapers-moscow-city-international-business-centre_158538-26294.jpg",
|
||||
imageAlt: "Branding Services",
|
||||
},
|
||||
title: "Identity Branding", description: "Crafting unique digital presence for personal and professional brands.", imageSrc: "http://img.b2bpic.net/free-photo/skyscrapers-moscow-city-international-business-centre_158538-26294.jpg", imageAlt: "Branding Services"},
|
||||
{
|
||||
title: "Creative Collaboration",
|
||||
description: "Writing and production for music or narrative-driven film work.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/retro-vinyl-scene_23-2151937368.jpg",
|
||||
imageAlt: "Creative Writing",
|
||||
},
|
||||
title: "Creative Collaboration", description: "Writing and production for music or narrative-driven film work.", imageSrc: "http://img.b2bpic.net/free-photo/retro-vinyl-scene_23-2151937368.jpg", imageAlt: "Creative Writing"},
|
||||
]}
|
||||
title="How I Can Help"
|
||||
description="Collaborate on projects that require precision, intelligence, and creative vision."
|
||||
@@ -235,21 +147,10 @@ export default function LandingPage() {
|
||||
title="Get in Touch"
|
||||
description="Let's build something significant. Direct, authentic conversation is always welcome."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Name",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email Address",
|
||||
},
|
||||
{ name: "name", type: "text", placeholder: "Name" },
|
||||
{ name: "email", type: "email", placeholder: "Email Address" },
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your message",
|
||||
}}
|
||||
textarea={{ name: "message", placeholder: "Your message" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-light-background_23-2148132329.jpg"
|
||||
imageAlt="Contact background"
|
||||
/>
|
||||
@@ -260,29 +161,15 @@ export default function LandingPage() {
|
||||
logoText="Jaffar Kebiri • DJK"
|
||||
columns={[
|
||||
{
|
||||
title: "Network",
|
||||
items: [
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
title: "Network", items: [
|
||||
{ label: "Twitter", href: "#" },
|
||||
{ label: "LinkedIn", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Portfolio",
|
||||
items: [
|
||||
{
|
||||
label: "Projects",
|
||||
href: "#projects",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
title: "Portfolio", items: [
|
||||
{ label: "Projects", href: "#projects" },
|
||||
{ label: "About", href: "#about" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -292,4 +179,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user