|
|
|
|
@@ -4,35 +4,33 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
|
|
|
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";
|
|
|
|
|
import SplitAbout from "@/components/sections/about/SplitAbout";
|
|
|
|
|
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
|
|
|
|
|
import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
|
|
|
|
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
|
|
|
|
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
|
|
|
|
|
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
|
|
|
|
|
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
|
|
|
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
|
|
|
|
import { Sparkles, Music, Code, Lightbulb, BookOpen, Mail } from "lucide-react";
|
|
|
|
|
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
|
|
|
|
import { Code, Guitar, Zap, Music, Laptop, Headphones, Mail, Sparkles } from "lucide-react";
|
|
|
|
|
|
|
|
|
|
export default function LandingPage() {
|
|
|
|
|
return (
|
|
|
|
|
<ThemeProvider
|
|
|
|
|
defaultButtonVariant="hover-bubble"
|
|
|
|
|
defaultTextAnimation="entrance-slide"
|
|
|
|
|
borderRadius="pill"
|
|
|
|
|
borderRadius="rounded"
|
|
|
|
|
contentWidth="compact"
|
|
|
|
|
sizing="largeSmallSizeMediumTitles"
|
|
|
|
|
background="circleGradient"
|
|
|
|
|
cardStyle="gradient-bordered"
|
|
|
|
|
primaryButtonStyle="primary-glow"
|
|
|
|
|
secondaryButtonStyle="glass"
|
|
|
|
|
headingFontWeight="normal"
|
|
|
|
|
headingFontWeight="semibold"
|
|
|
|
|
>
|
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
|
<NavbarStyleApple
|
|
|
|
|
brandName="Dev & Strings"
|
|
|
|
|
brandName="Creative Corner"
|
|
|
|
|
navItems={[
|
|
|
|
|
{ name: "About", id: "about" },
|
|
|
|
|
{ name: "Tech", id: "tech" },
|
|
|
|
|
{ name: "Music", id: "music" },
|
|
|
|
|
{ name: "Work", id: "work" },
|
|
|
|
|
{ name: "Tech Stack", id: "tech" },
|
|
|
|
|
{ name: "Music & Guitar", id: "music" },
|
|
|
|
|
{ name: "Contact", id: "contact" },
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
@@ -40,169 +38,162 @@ export default function LandingPage() {
|
|
|
|
|
|
|
|
|
|
<div id="hero" data-section="hero">
|
|
|
|
|
<HeroBillboardGallery
|
|
|
|
|
title="Tech Enthusiast & Acoustic Guitarist"
|
|
|
|
|
description="I blend my passion for cutting-edge technology with the artistry of acoustic music. Discover how code and creativity come together."
|
|
|
|
|
tag="Welcome"
|
|
|
|
|
title="Code by Day, Guitar by Night"
|
|
|
|
|
description="Welcome to my creative corner. I'm a passionate developer exploring the beautiful intersection between technology and music. Here you'll find my journey, projects, and creative expressions."
|
|
|
|
|
tag="Creative Developer"
|
|
|
|
|
tagIcon={Sparkles}
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
background={{ variant: "radial-gradient" }}
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Explore My Work", href: "work" },
|
|
|
|
|
{ text: "Explore My Work", href: "tech" },
|
|
|
|
|
{ text: "Get In Touch", href: "contact" },
|
|
|
|
|
]}
|
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
|
mediaItems={[
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-professional-portrait-of-a-tech-enthus-1772545157810-a8854352.png", imageAlt: "Tech enthusiast with acoustic guitar"},
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-professional-portrait-of-a-tech-enthus-1772545157810-a8854352.png?_wi=1", imageAlt: "Creative developer portrait"},
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-modern-tech-workspace-with-multiple-mo-1772545156636-fb81dd48.png?_wi=1", imageAlt: "Modern tech workspace"},
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/an-acoustic-guitar-performer-in-a-small--1772545156492-1dcdb896.png?_wi=1", imageAlt: "Acoustic guitar performance"},
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/close-up-detail-shot-of-a-beautiful-acou-1772545156387-799b7f7d.png?_wi=1", imageAlt: "Acoustic guitar detail"},
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-home-recording-studio-for-acoustic-gui-1772545158747-96eb7a7d.png?_wi=1", imageAlt: "Home recording studio setup"},
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-home-recording-studio-for-acoustic-gui-1772545158747-96eb7a7d.png?_wi=1", imageAlt: "Home recording studio"},
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/an-acoustic-guitar-performer-in-a-small--1772545156492-1dcdb896.png?_wi=1", imageAlt: "Live guitar performance"},
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-modern-tech-workspace-with-multiple-mo-1772545156636-fb81dd48.png?_wi=1", imageAlt: "Tech workspace"},
|
|
|
|
|
]}
|
|
|
|
|
mediaAnimation="slide-up"
|
|
|
|
|
ariaLabel="Hero section showcasing tech and music"
|
|
|
|
|
ariaLabel="Hero section introducing creative work"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="about" data-section="about">
|
|
|
|
|
<SplitAbout
|
|
|
|
|
title="About Me"
|
|
|
|
|
description="I'm a full-stack developer with a deep passion for creating elegant solutions to complex problems. When I'm not coding, you'll find me playing acoustic guitar, exploring music production, or contributing to open-source projects."
|
|
|
|
|
tag="My Story"
|
|
|
|
|
tagIcon={Music}
|
|
|
|
|
title="My Story"
|
|
|
|
|
description="I'm a developer who believes that great code and great music share something fundamental—rhythm, structure, and creativity. By day, I build web applications and explore new technologies. By night, I express myself through music and guitar. Both sides fuel my passion for creating meaningful experiences."
|
|
|
|
|
tag="Who I Am"
|
|
|
|
|
tagIcon={Code}
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
bulletPoints={[
|
|
|
|
|
{
|
|
|
|
|
title: "Full-Stack Developer", description: "Proficient in modern web technologies, building scalable and user-friendly applications", icon: Code,
|
|
|
|
|
title: "Web Developer", description: "Building responsive, user-centric applications with modern web technologies", icon: Laptop,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Music Enthusiast", description: "Dedicated acoustic guitarist with experience in recording and music production", icon: Music,
|
|
|
|
|
title: "Passionate Guitarist", description: "Exploring different genres and techniques, from fingerstyle to electric rock", icon: Guitar,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Problem Solver", description: "Creative thinker who approaches challenges from unique angles, combining technical expertise with artistic vision", icon: Lightbulb,
|
|
|
|
|
title: "Creative Problem Solver", description: "Approaching challenges with a blend of technical skill and artistic thinking", icon: Zap,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Lifelong Learner", description: "Always exploring new technologies, frameworks, and musical genres to expand my skillset", icon: BookOpen,
|
|
|
|
|
title: "Music Enthusiast", description: "Deeply interested in music production, composition, and the science of sound", icon: Music,
|
|
|
|
|
},
|
|
|
|
|
]}
|
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-modern-tech-workspace-with-multiple-mo-1772545156636-fb81dd48.png?_wi=2"
|
|
|
|
|
imageAlt="My tech workspace setup"
|
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/close-up-detail-shot-of-a-beautiful-acou-1772545156387-799b7f7d.png?_wi=2"
|
|
|
|
|
imageAlt="My creative space"
|
|
|
|
|
mediaAnimation="slide-up"
|
|
|
|
|
imagePosition="right"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="tech" data-section="tech">
|
|
|
|
|
<FeatureCardThree
|
|
|
|
|
title="Tech Skills & Expertise"
|
|
|
|
|
description="My technical toolkit spans across modern web development, cloud infrastructure, and innovative digital solutions."
|
|
|
|
|
tag="Technologies"
|
|
|
|
|
<FeatureCardTwentyFive
|
|
|
|
|
title="What I Build"
|
|
|
|
|
description="A glimpse into my technical projects and the tools I love working with"
|
|
|
|
|
tag="Technical Stack"
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
features={[
|
|
|
|
|
{
|
|
|
|
|
id: "01", title: "Frontend Development", description: "React, Vue, TypeScript, Tailwind CSS - crafting responsive and interactive user interfaces", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-sleek-web-application-interface-design-1772545157877-d9e4b311.png", imageAlt: "Frontend development showcase"},
|
|
|
|
|
title: "Web Applications", description: "Full-stack development with React, Next.js, and modern tooling for responsive user experiences", icon: Code,
|
|
|
|
|
mediaItems: [
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-sleek-web-application-interface-design-1772545157877-d9e4b311.png?_wi=1", imageAlt: "Web application interface"},
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/an-e-commerce-or-portfolio-website-desig-1772545156831-fa64b612.png?_wi=1", imageAlt: "Portfolio website design"},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "02", title: "Backend Engineering", description: "Node.js, Python, PostgreSQL, APIs - building robust server-side solutions and databases", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-diverse-tech-team-collaborating-on-a-p-1772545156893-a41e6666.png?_wi=1", imageAlt: "Backend engineering team"},
|
|
|
|
|
title: "Creative Development", description: "Interactive experiences blending design and functionality to engage users", icon: Sparkles,
|
|
|
|
|
mediaItems: [
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-creative-music-production-software-or--1772545156868-f41f3418.png?_wi=1", imageAlt: "Creative development showcase"},
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-diverse-tech-team-collaborating-on-a-p-1772545156893-a41e6666.png?_wi=1", imageAlt: "Collaborative development"},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "03", title: "Music Technology", description: "Audio processing, DAW integration, music production software - bridging tech and creativity", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-creative-music-production-software-or--1772545156868-f41f3418.png?_wi=1", imageAlt: "Music production interface"},
|
|
|
|
|
{
|
|
|
|
|
id: "04", title: "DevOps & Cloud", description: "Docker, AWS, CI/CD pipelines - deploying and scaling applications efficiently", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/an-e-commerce-or-portfolio-website-desig-1772545156831-fa64b612.png?_wi=1", imageAlt: "Cloud infrastructure"},
|
|
|
|
|
title: "Learning & Experimentation", description: "Constantly exploring new frameworks, languages, and technologies to stay at the forefront", icon: Zap,
|
|
|
|
|
mediaItems: [
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-modern-tech-workspace-with-multiple-mo-1772545156636-fb81dd48.png?_wi=3", imageAlt: "Learning workspace"},
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-professional-portrait-of-a-tech-enthus-1772545157810-a8854352.png?_wi=2", imageAlt: "Tech exploration"},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
]}
|
|
|
|
|
gridVariant="bento-grid"
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
ariaLabel="Technology skills section"
|
|
|
|
|
ariaLabel="Technical projects and stack"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="music" data-section="music">
|
|
|
|
|
<FeatureCardThree
|
|
|
|
|
title="Musical Journey"
|
|
|
|
|
description="My passion for acoustic guitar spans from fingerstyle compositions to jazz-inspired improvisations."
|
|
|
|
|
tag="Acoustic Art"
|
|
|
|
|
<FeatureCardTwentyFive
|
|
|
|
|
title="Music & Guitar"
|
|
|
|
|
description="My passion for music exploration and how it influences my creative work"
|
|
|
|
|
tag="Creative Expression"
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
features={[
|
|
|
|
|
{
|
|
|
|
|
id: "01", title: "Fingerstyle Compositions", description: "Original acoustic arrangements featuring complex fingerpicking patterns and harmonic depth", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/close-up-detail-shot-of-a-beautiful-acou-1772545156387-799b7f7d.png?_wi=2", imageAlt: "Fingerstyle guitar"},
|
|
|
|
|
title: "Guitar Practice & Performance", description: "Developing skills across multiple genres—fingerstyle, blues, rock, and experimental techniques", icon: Guitar,
|
|
|
|
|
mediaItems: [
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/an-acoustic-guitar-performer-in-a-small--1772545156492-1dcdb896.png?_wi=3", imageAlt: "Acoustic guitar performance"},
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/close-up-detail-shot-of-a-beautiful-acou-1772545156387-799b7f7d.png?_wi=3", imageAlt: "Guitar close-up detail"},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "02", title: "Live Performances", description: "Intimate acoustic sets at local venues, connecting audiences through original and cover music", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/an-acoustic-guitar-performer-in-a-small--1772545156492-1dcdb896.png?_wi=2", imageAlt: "Live performance"},
|
|
|
|
|
title: "Music Production", description: "Recording, arranging, and producing original compositions using modern DAWs and software", icon: Music,
|
|
|
|
|
mediaItems: [
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-home-recording-studio-for-acoustic-gui-1772545158747-96eb7a7d.png?_wi=3", imageAlt: "Home recording studio"},
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-creative-music-production-software-or--1772545156868-f41f3418.png?_wi=3", imageAlt: "Music production setup"},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "03", title: "Music Production", description: "Home studio recording and production of acoustic tracks, experimenting with layering and effects", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-home-recording-studio-for-acoustic-gui-1772545158747-96eb7a7d.png?_wi=2", imageAlt: "Recording studio setup"},
|
|
|
|
|
{
|
|
|
|
|
id: "04", title: "Continuous Learning", description: "Exploring music theory, jazz harmony, and new playing techniques to evolve as a musician", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-diverse-tech-team-collaborating-on-a-p-1772545156893-a41e6666.png?_wi=2", imageAlt: "Musical collaboration"},
|
|
|
|
|
title: "Creative Inspiration", description: "How music fuels creativity and influences my approach to problem-solving and design", icon: Headphones,
|
|
|
|
|
mediaItems: [
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-professional-portrait-of-a-music-industr-1772545155742-959156a9.png", imageAlt: "Music inspiration"},
|
|
|
|
|
{
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-sleek-web-application-interface-design-1772545157877-d9e4b311.png?_wi=2", imageAlt: "Creative workspace"},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
]}
|
|
|
|
|
gridVariant="bento-grid-inverted"
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
ariaLabel="Musical projects section"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="work" data-section="work">
|
|
|
|
|
<ProductCardThree
|
|
|
|
|
title="Featured Projects"
|
|
|
|
|
description="A selection of my most impactful projects combining technology and creativity"
|
|
|
|
|
tag="Portfolio"
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
products={[
|
|
|
|
|
{
|
|
|
|
|
id: "1", name: "Interactive Music Learning Platform", price: "Featured Project", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-creative-music-production-software-or--1772545156868-f41f3418.png?_wi=2", imageAlt: "Music learning platform"},
|
|
|
|
|
{
|
|
|
|
|
id: "2", name: "E-Commerce Dashboard", price: "Featured Project", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/an-e-commerce-or-portfolio-website-desig-1772545156831-fa64b612.png?_wi=2", imageAlt: "E-commerce interface"},
|
|
|
|
|
{
|
|
|
|
|
id: "3", name: "Real-Time Collaboration Tool", price: "Featured Project", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-diverse-tech-team-collaborating-on-a-p-1772545156893-a41e6666.png?_wi=3", imageAlt: "Collaboration interface"},
|
|
|
|
|
]}
|
|
|
|
|
gridVariant="three-columns-all-equal-width"
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
carouselMode="buttons"
|
|
|
|
|
ariaLabel="Portfolio projects section"
|
|
|
|
|
ariaLabel="Music and guitar creative work"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
|
|
|
<TestimonialCardSixteen
|
|
|
|
|
title="What Collaborators Say"
|
|
|
|
|
description="Feedback from clients, colleagues, and fellow musicians I've worked with"
|
|
|
|
|
tag="Testimonials"
|
|
|
|
|
<TestimonialCardTen
|
|
|
|
|
title="Connections & Collaborations"
|
|
|
|
|
description="What others say about working with me and the impact of my creative approach"
|
|
|
|
|
tag="Community"
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
testimonials={[
|
|
|
|
|
{
|
|
|
|
|
id: "1", name: "Sarah Johnson", role: "Product Manager", company: "TechStart Inc", rating: 5,
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/professional-headshot-of-a-satisfied-cli-1772545156153-c30db08c.png", imageAlt: "Sarah Johnson"},
|
|
|
|
|
id: "1", title: "A Developer Who Understands Rhythm", quote: "Working with someone who brings both technical excellence and creative thinking is rare. Their projects aren't just functional—they're beautiful.", name: "Alex Johnson", role: "Product Designer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/professional-headshot-of-a-satisfied-cli-1772545156153-c30db08c.png", imageAlt: "Alex Johnson"},
|
|
|
|
|
{
|
|
|
|
|
id: "2", name: "Marcus Chen", role: "Music Producer", company: "Creative Studios", rating: 5,
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/professional-headshot-of-another-collabo-1772545157703-4fa0c1c9.png", imageAlt: "Marcus Chen"},
|
|
|
|
|
id: "2", title: "Creative Problem Solving", quote: "The blend of technical skills and artistic perspective makes projects feel less like work and more like collaborative art.", name: "Sarah Chen", role: "Creative Director", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/professional-headshot-of-another-collabo-1772545157703-4fa0c1c9.png", imageAlt: "Sarah Chen"},
|
|
|
|
|
{
|
|
|
|
|
id: "3", name: "Elena Rodriguez", role: "Lead Developer", company: "Innovation Labs", rating: 5,
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/professional-headshot-of-a-music-industr-1772545155742-959156a9.png", imageAlt: "Elena Rodriguez"},
|
|
|
|
|
{
|
|
|
|
|
id: "4", name: "James Taylor", role: "Concert Organizer", company: "Live Venues Network", rating: 5,
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/professional-headshot-of-a-fourth-collab-1772545155672-ca8e366e.png", imageAlt: "James Taylor"},
|
|
|
|
|
{
|
|
|
|
|
id: "5", name: "Priya Patel", role: "UX Designer", company: "Design Studio Pro", rating: 5,
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/professional-headshot-of-a-fifth-team-me-1772545157029-ae966e99.png", imageAlt: "Priya Patel"},
|
|
|
|
|
{
|
|
|
|
|
id: "6", name: "David Wu", role: "Musician & Educator", company: "Music Academy", rating: 5,
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/professional-headshot-of-a-sixth-collabo-1772545155997-b52b705e.png", imageAlt: "David Wu"},
|
|
|
|
|
id: "3", title: "Passion Meets Precision", quote: "What stands out is the genuine enthusiasm paired with meticulous attention to detail. Every project reflects both heart and mind.", name: "Michael Torres", role: "Music Producer", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/professional-headshot-of-a-music-industr-1772545155742-959156a9.png", imageAlt: "Michael Torres"},
|
|
|
|
|
]}
|
|
|
|
|
kpiItems={[
|
|
|
|
|
{ value: "50+", label: "Projects Completed" },
|
|
|
|
|
{ value: "100+", label: "Satisfied Clients" },
|
|
|
|
|
{ value: "15+", label: "Years Experience" },
|
|
|
|
|
]}
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
ariaLabel="Testimonials section"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
@@ -210,51 +201,26 @@ export default function LandingPage() {
|
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
|
<ContactCenter
|
|
|
|
|
tag="Let's Connect"
|
|
|
|
|
title="Ready to Collaborate?"
|
|
|
|
|
description="Whether it's a tech project, music collaboration, or just want to chat about development and music, I'd love to hear from you. Drop me a message!"
|
|
|
|
|
title="Interested in Collaborating?"
|
|
|
|
|
description="Whether you want to discuss a project, explore creative ideas, or just chat about music and tech, I'd love to hear from you. Reach out!"
|
|
|
|
|
tagIcon={Mail}
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
background={{ variant: "rotated-rays-animated" }}
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
inputPlaceholder="your@email.com"
|
|
|
|
|
buttonText="Send Message"
|
|
|
|
|
termsText="I'll get back to you within 24 hours. Your information is safe with me."
|
|
|
|
|
termsText="I'll get back to you within 24 hours. Your message is important to me."
|
|
|
|
|
ariaLabel="Contact form section"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="footer" data-section="footer">
|
|
|
|
|
<FooterMedia
|
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/an-acoustic-guitar-performer-in-a-small--1772545156492-1dcdb896.png?_wi=3"
|
|
|
|
|
imageAlt="Background performance imagery"
|
|
|
|
|
logoText="Dev & Strings"
|
|
|
|
|
copyrightText="© 2025 Dev & Strings. All rights reserved."
|
|
|
|
|
columns={[
|
|
|
|
|
{
|
|
|
|
|
title: "Navigation", items: [
|
|
|
|
|
{ label: "Home", href: "/" },
|
|
|
|
|
{ label: "About", href: "#about" },
|
|
|
|
|
{ label: "Tech Skills", href: "#tech" },
|
|
|
|
|
{ label: "Music", href: "#music" },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Projects", items: [
|
|
|
|
|
{ label: "Featured Work", href: "#work" },
|
|
|
|
|
{ label: "GitHub", href: "https://github.com" },
|
|
|
|
|
{ label: "Portfolio", href: "#" },
|
|
|
|
|
{ label: "Case Studies", href: "#" },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Connect", items: [
|
|
|
|
|
{ label: "Contact", href: "#contact" },
|
|
|
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
|
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
|
|
|
{ label: "Email", href: "mailto:hello@devstrings.com" },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
]}
|
|
|
|
|
<FooterLogoReveal
|
|
|
|
|
logoText="Creative Corner"
|
|
|
|
|
leftLink={{
|
|
|
|
|
text: "Privacy Policy", href: "#"}}
|
|
|
|
|
rightLink={{
|
|
|
|
|
text: "Terms of Service", href: "#"}}
|
|
|
|
|
ariaLabel="Site footer"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
