bender/ba7dcdf1-4e60-4c01-a54e-daba3fca74e2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main

Browse Source 
Merge version_1 into main
This commit was merged in pull request #2.
This commit is contained in:
bender
2026-05-17 13:02:00 +00:00
parent 8d4396fbae d20872b70e
commit 1ea7285eac
1 changed files with 66 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

280
src/app/page.tsx
View File

@@ -32,21 +32,13 @@ export default function LandingPage() {
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "hero",
},
name: "Home", id: "hero"},
{
name: "Portfolio",
id: "portfolio",
},
name: "Portfolio", id: "portfolio"},
{
name: "About",
id: "about",
},
name: "About", id: "about"},
{
name: "Contact",
id: "contact",
},
name: "Contact", id: "contact"},
]}
brandName="Jovan"
/>
@@ -55,68 +47,41 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroBillboard
background={{
variant: "sparkles-gradient",
}}
variant: "sparkles-gradient"}}
title="Jovan Markoski"
description="Graphic Designer & Visual Creator. I create bold visual identities and covers that stand out."
buttons={[
{
text: "View Portfolio",
href: "#portfolio",
},
text: "View Portfolio", href: "#portfolio"},
{
text: "Contact Me",
href: "#contact",
},
text: "Contact Me", href: "#contact"},
]}
mediaAnimation="blur-reveal"
imageSrc="http://img.b2bpic.net/free-photo/3d-network-particle-flow-background_1048-12212.jpg?_wi=1"
imageSrc="http://img.b2bpic.net/free-photo/3d-network-particle-flow-background_1048-12212.jpg"
imageAlt="minimal dark background neon lines"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705918.jpg",
alt: "Portrait of handsome bearded man in suit",
},
src: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705918.jpg", alt: "Portrait of handsome bearded man in suit"},
{
src: "http://img.b2bpic.net/free-photo/bearded-man-brown-suit-wearing-glasses-looking-with-smile-happy-face_141793-111811.jpg",
alt: "Bearded man in brown suit wearing glasses looking with smile on happy face",
},
src: "http://img.b2bpic.net/free-photo/bearded-man-brown-suit-wearing-glasses-looking-with-smile-happy-face_141793-111811.jpg", alt: "Bearded man in brown suit wearing glasses looking with smile on happy face"},
{
src: "http://img.b2bpic.net/free-photo/man-portrait_1296-491.jpg",
alt: "Man portrait,",
},
src: "http://img.b2bpic.net/free-photo/man-portrait_1296-491.jpg", alt: "Man portrait,"},
{
src: "http://img.b2bpic.net/free-photo/happy-confident-bearded-man-brown-suit-wearing-glasses-looking-camera-smiling-cheerfully-with-arms-crossed-standing-purple-background_141793-110713.jpg",
alt: "Happy and confident bearded man in brown suit wearing glasses looking at camera smiling cheerfully with arms crossed standing over purple background",
},
src: "http://img.b2bpic.net/free-photo/happy-confident-bearded-man-brown-suit-wearing-glasses-looking-camera-smiling-cheerfully-with-arms-crossed-standing-purple-background_141793-110713.jpg", alt: "Happy and confident bearded man in brown suit wearing glasses looking at camera smiling cheerfully with arms crossed standing over purple background"},
{
src: "http://img.b2bpic.net/free-photo/middle-age-man-with-grey-hair-dark-color-shirt-looking-camera-happy-positive-pointing-with-index-fingers-camera-standing-brown-background_141793-133634.jpg",
alt: "Middle age man with grey hair in dark color shirt looking at camera happy and positive pointing with index fingers at camera standing over brown background",
},
src: "http://img.b2bpic.net/free-photo/middle-age-man-with-grey-hair-dark-color-shirt-looking-camera-happy-positive-pointing-with-index-fingers-camera-standing-brown-background_141793-133634.jpg", alt: "Middle age man with grey hair in dark color shirt looking at camera happy and positive pointing with index fingers at camera standing over brown background"},
]}
marqueeItems={[
{
type: "text",
text: "CREATIVE DIRECTION",
},
type: "text", text: "CREATIVE DIRECTION"},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/3d-plexus-background-with-connecting-lines-dots-network-communications_1048-12336.jpg",
alt: "3D plexus background with connecting lines and dots, network communications",
},
type: "image", src: "http://img.b2bpic.net/free-photo/3d-plexus-background-with-connecting-lines-dots-network-communications_1048-12336.jpg", alt: "3D plexus background with connecting lines and dots, network communications"},
{
type: "text",
text: "BRAND IDENTITY",
},
type: "text", text: "BRAND IDENTITY"},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/3d-render-simplistic-design-with-flowing-particles_1048-13355.jpg",
alt: "3D render of a simplistic design with flowing particles",
},
type: "image", src: "http://img.b2bpic.net/free-photo/3d-render-simplistic-design-with-flowing-particles_1048-13355.jpg", alt: "3D render of a simplistic design with flowing particles"},
{
type: "text",
text: "VISUAL ASSETS",
},
type: "text", text: "VISUAL ASSETS"},
]}
/>
</div>
@@ -124,67 +89,44 @@ export default function LandingPage() {
<div id="services" data-section="services">
<FeatureCardTwentyFive
textboxLayout="split"
animationType="blur-reveal"
useInvertedBackground={false}
features={[
{
title: "Logo Design",
description: "Iconic marks for brands that need to be remembered.",
icon: Sparkles,
title: "Logo Design", description: "Iconic marks for brands that need to be remembered.", icon: Sparkles,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/real-life-zodiac-collage_23-2149588383.jpg",
},
imageSrc: "http://img.b2bpic.net/free-photo/real-life-zodiac-collage_23-2149588383.jpg"},
{
imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543685.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/3d-network-particle-flow-background_1048-12212.jpg?_wi=2",
imageAlt: "album cover art design",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543685.jpg"},
]
},
{
title: "Cover Art",
description: "Captivating designs for albums, singles, and movie projects.",
icon: Music,
title: "Cover Art", description: "Captivating designs for albums, singles, and movie projects.", icon: Music,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/two-poster-frame-mockup-scandinavian-style-living-room-interior_41470-5137.jpg",
},
imageSrc: "http://img.b2bpic.net/free-photo/two-poster-frame-mockup-scandinavian-style-living-room-interior_41470-5137.jpg"},
{
imageSrc: "http://img.b2bpic.net/free-psd/flat-design-creativity-template_23-2150385990.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/stationery-mockup_23-2147730238.jpg",
imageAlt: "album cover art design",
imageSrc: "http://img.b2bpic.net/free-psd/flat-design-creativity-template_23-2150385990.jpg"},
]
},
{
title: "Branding",
description: "Holistic visual systems that elevate your professional presence.",
icon: Shield,
title: "Branding", description: "Holistic visual systems that elevate your professional presence.", icon: Shield,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/prism-dispersing-colorful-lights_23-2148599245.jpg",
},
imageSrc: "http://img.b2bpic.net/free-photo/prism-dispersing-colorful-lights_23-2148599245.jpg"},
{
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320706.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/international-womens-day-beautiful-young-woman-with-tulip-her-hand_169016-67269.jpg?_wi=1",
imageAlt: "album cover art design",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320706.jpg"},
]
},
{
title: "Social Visuals",
description: "Engaging graphics for modern digital platforms and social growth.",
icon: Zap,
title: "Social Visuals", description: "Engaging graphics for modern digital platforms and social growth.", icon: Zap,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-hipster-male-dressed-casual-clothes-with-glasses-full-beard-standing-with-crossed-arms-studio-isolated-dark-background_613910-20093.jpg?_wi=1",
},
imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-hipster-male-dressed-casual-clothes-with-glasses-full-beard-standing-with-crossed-arms-studio-isolated-dark-background_613910-20093.jpg"},
{
imageSrc: "http://img.b2bpic.net/free-photo/urban-double-exposure-collage-concept_23-2149657944.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/upbeat-saleswoman-hired-explain-vehicle-pricing-options-clients_482257-118422.jpg?_wi=1",
imageAlt: "album cover art design",
imageSrc: "http://img.b2bpic.net/free-photo/urban-double-exposure-collage-concept_23-2149657944.jpg"},
]
},
]}
title="My Creative Services"
@@ -200,47 +142,17 @@ export default function LandingPage() {
useInvertedBackground={true}
products={[
{
id: "1",
name: "Album Cover A",
price: "Music",
variant: "2024",
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-shooting-with-projector-medium-shot_23-2149424934.jpg",
},
id: "1", name: "Album Cover A", price: "Music", variant: "2024", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-shooting-with-projector-medium-shot_23-2149424934.jpg"},
{
id: "2",
name: "Poster B",
price: "Print",
variant: "2023",
imageSrc: "http://img.b2bpic.net/free-vector/business-template-abstract-style_23-2148476981.jpg",
},
id: "2", name: "Poster B", price: "Print", variant: "2023", imageSrc: "http://img.b2bpic.net/free-vector/business-template-abstract-style_23-2148476981.jpg"},
{
id: "3",
name: "Brand Identity C",
price: "Corporate",
variant: "2024",
imageSrc: "http://img.b2bpic.net/free-photo/blank-stationery-mockup_23-2147730259.jpg",
},
id: "3", name: "Brand Identity C", price: "Corporate", variant: "2024", imageSrc: "http://img.b2bpic.net/free-photo/blank-stationery-mockup_23-2147730259.jpg"},
{
id: "4",
name: "Social Asset D",
price: "Digital",
variant: "2024",
imageSrc: "http://img.b2bpic.net/free-vector/instagram-post-colorful-template-design_52683-147701.jpg",
},
id: "4", name: "Social Asset D", price: "Digital", variant: "2024", imageSrc: "http://img.b2bpic.net/free-vector/instagram-post-colorful-template-design_52683-147701.jpg"},
{
id: "5",
name: "Logo Redesign E",
price: "Branding",
variant: "2023",
imageSrc: "http://img.b2bpic.net/free-photo/digital-media-expert-working-photo-editing-with-professional-software_482257-125064.jpg",
},
id: "5", name: "Logo Redesign E", price: "Branding", variant: "2023", imageSrc: "http://img.b2bpic.net/free-photo/digital-media-expert-working-photo-editing-with-professional-software_482257-125064.jpg"},
{
id: "6",
name: "Event Poster F",
price: "Print",
variant: "2024",
imageSrc: "http://img.b2bpic.net/free-photo/stylish-scandinavian-living-room-with-design-mint-sofa-furnitures-mock-up-poster-map-plants-eleg_1258-152143.jpg",
},
id: "6", name: "Event Poster F", price: "Print", variant: "2024", imageSrc: "http://img.b2bpic.net/free-photo/stylish-scandinavian-living-room-with-design-mint-sofa-furnitures-mock-up-poster-map-plants-eleg_1258-152143.jpg"},
]}
title="Selected Works"
description="A curated collection of my most impactful design projects."
@@ -254,24 +166,16 @@ export default function LandingPage() {
metrics={[
{
icon: PenTool,
label: "Photoshop",
value: "Expert",
},
label: "Photoshop", value: "Expert"},
{
icon: Palette,
label: "Illustrator",
value: "Master",
},
label: "Illustrator", value: "Master"},
{
icon: Layers,
label: "Figma",
value: "Fluent",
},
label: "Figma", value: "Fluent"},
{
icon: BookOpen,
label: "InDesign",
value: "Fluent",
},
label: "InDesign", value: "Fluent"},
]}
metricsAnimation="slide-up"
/>
@@ -284,45 +188,20 @@ export default function LandingPage() {
useInvertedBackground={true}
testimonials={[
{
id: "1",
name: "Sarah J.",
handle: "@client",
testimonial: "Jovan's work exceeded all our expectations.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/international-womens-day-beautiful-young-woman-with-tulip-her-hand_169016-67269.jpg?_wi=2",
},
id: "1", name: "Sarah J.", handle: "@client", testimonial: "Jovan's work exceeded all our expectations.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/international-womens-day-beautiful-young-woman-with-tulip-her-hand_169016-67269.jpg"},
{
id: "2",
name: "Mark D.",
handle: "@tech",
testimonial: "Exceptional eye for design and branding.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-hipster-male-dressed-casual-clothes-with-glasses-full-beard-standing-with-crossed-arms-studio-isolated-dark-background_613910-20093.jpg?_wi=2",
},
id: "2", name: "Mark D.", handle: "@tech", testimonial: "Exceptional eye for design and branding.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-hipster-male-dressed-casual-clothes-with-glasses-full-beard-standing-with-crossed-arms-studio-isolated-dark-background_613910-20093.jpg"},
{
id: "3",
name: "Emma R.",
handle: "@marketing",
testimonial: "One of the best freelancers we have collaborated with.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/upbeat-saleswoman-hired-explain-vehicle-pricing-options-clients_482257-118422.jpg?_wi=2",
},
id: "3", name: "Emma R.", handle: "@marketing", testimonial: "One of the best freelancers we have collaborated with.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/upbeat-saleswoman-hired-explain-vehicle-pricing-options-clients_482257-118422.jpg"},
{
id: "4",
name: "Leon K.",
handle: "@music",
testimonial: "Fast, creative, and professional.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-festive-plump-male-eyeglasses-bow-tie-dark-grey-background_613910-13747.jpg",
},
id: "4", name: "Leon K.", handle: "@music", testimonial: "Fast, creative, and professional.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-festive-plump-male-eyeglasses-bow-tie-dark-grey-background_613910-13747.jpg"},
{
id: "5",
name: "Alice T.",
handle: "@studio",
testimonial: "His work defined our brand identity perfectly.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-with-camera-looking-away_23-2148503575.jpg",
},
id: "5", name: "Alice T.", handle: "@studio", testimonial: "His work defined our brand identity perfectly.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-with-camera-looking-away_23-2148503575.jpg"},
]}
showRating={true}
title="Client Feedback"
@@ -335,20 +214,11 @@ export default function LandingPage() {
useInvertedBackground={false}
faqs={[
{
id: "1",
title: "How do you start a project?",
content: "I usually start with a discovery phase followed by mood boards.",
},
id: "1", title: "How do you start a project?", content: "I usually start with a discovery phase followed by mood boards."},
{
id: "2",
title: "Do you work with international clients?",
content: "Yes, I collaborate with agencies and brands globally.",
},
id: "2", title: "Do you work with international clients?", content: "Yes, I collaborate with agencies and brands globally."},
{
id: "3",
title: "What is your typical turnaround time?",
content: "It depends on project complexity, usually 1-2 weeks.",
},
id: "3", title: "What is your typical turnaround time?", content: "It depends on project complexity, usually 1-2 weeks."},
]}
sideTitle="Common Questions"
faqsAnimation="slide-up"
@@ -362,22 +232,14 @@ export default function LandingPage() {
description="Ready to bring your vision to life? Get in touch."
inputs={[
{
name: "name",
type: "text",
placeholder: "Name",
required: true,
name: "name", type: "text", placeholder: "Name", required: true,
},
{
name: "email",
type: "email",
placeholder: "Email",
required: true,
name: "email", type: "email", placeholder: "Email", required: true,
},
]}
textarea={{
name: "message",
placeholder: "Describe your project...",
required: true,
name: "message", placeholder: "Describe your project...", required: true,
}}
imageSrc="http://img.b2bpic.net/free-photo/image-bearded-man-stretching-lips-happy-smile-faking-happiness-standing-light-blue-backgr_1258-155337.jpg"
/>
@@ -389,29 +251,19 @@ export default function LandingPage() {
{
items: [
{
label: "Portfolio",
href: "#portfolio",
},
label: "Portfolio", href: "#portfolio"},
{
label: "About",
href: "#about",
},
label: "About", href: "#about"},
{
label: "Contact",
href: "#contact",
},
label: "Contact", href: "#contact"},
],
},
{
items: [
{
label: "Privacy Policy",
href: "#",
},
label: "Privacy Policy", href: "#"},
{
label: "Terms of Service",
href: "#",
},
label: "Terms of Service", href: "#"},
],
},
]}