|
|
|
|
@@ -8,31 +8,31 @@ import FeatureCardThree from "@/components/sections/feature/featureCardThree/Fea
|
|
|
|
|
import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
|
|
|
|
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
|
|
|
|
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 { Zap, Monitor, Cpu, HardDrive, Gauge, Wrench, Mail, Shield } 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="PC Central"
|
|
|
|
|
navItems={[
|
|
|
|
|
{ name: "About", id: "about" },
|
|
|
|
|
{ name: "Tech", id: "tech" },
|
|
|
|
|
{ name: "Music", id: "music" },
|
|
|
|
|
{ name: "Work", id: "work" },
|
|
|
|
|
{ name: "Builds", id: "builds" },
|
|
|
|
|
{ name: "Servers", id: "servers" },
|
|
|
|
|
{ name: "Projects", id: "projects" },
|
|
|
|
|
{ name: "Contact", id: "contact" },
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
@@ -40,167 +40,167 @@ 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"
|
|
|
|
|
tagIcon={Sparkles}
|
|
|
|
|
title="Welcome to My Hardware Universe"
|
|
|
|
|
description="I'm obsessed with building custom PCs and managing enterprise server infrastructure. From gaming powerhouses to production workstations, discover the rigs that drive my passion."
|
|
|
|
|
tag="Hardware Enthusiast"
|
|
|
|
|
tagIcon={Zap}
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
background={{ variant: "radial-gradient" }}
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Explore My Work", href: "work" },
|
|
|
|
|
{ text: "Explore Builds", href: "builds" },
|
|
|
|
|
{ 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", imageAlt: "Custom PC build showcase"},
|
|
|
|
|
{
|
|
|
|
|
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/a-modern-tech-workspace-with-multiple-mo-1772545156636-fb81dd48.png?_wi=1", imageAlt: "Server rack infrastructure"},
|
|
|
|
|
{
|
|
|
|
|
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/close-up-detail-shot-of-a-beautiful-acou-1772545156387-799b7f7d.png?_wi=1", imageAlt: "High-end GPU and cooling 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/a-home-recording-studio-for-acoustic-gui-1772545158747-96eb7a7d.png?_wi=1", imageAlt: "Cable management and lighting"},
|
|
|
|
|
{
|
|
|
|
|
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/an-acoustic-guitar-performer-in-a-small--1772545156492-1dcdb896.png?_wi=1", imageAlt: "Complete PC ecosystem setup"},
|
|
|
|
|
]}
|
|
|
|
|
mediaAnimation="slide-up"
|
|
|
|
|
ariaLabel="Hero section showcasing tech and music"
|
|
|
|
|
ariaLabel="Hero section showcasing PC and server hardware"
|
|
|
|
|
/>
|
|
|
|
|
</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."
|
|
|
|
|
title="About My Hardware Journey"
|
|
|
|
|
description="My passion for PC building and server infrastructure started years ago with a curiosity about how computers work. Today, I design and maintain high-performance systems for gaming, content creation, and enterprise workloads. Every component matters—from selecting the perfect CPU to optimizing thermal solutions."
|
|
|
|
|
tag="My Story"
|
|
|
|
|
tagIcon={Music}
|
|
|
|
|
tagIcon={Cpu}
|
|
|
|
|
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: "Custom PC Builder", description: "Designing and assembling high-performance gaming and workstation PCs tailored to specific needs and budgets", icon: Monitor,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Music Enthusiast", description: "Dedicated acoustic guitarist with experience in recording and music production", icon: Music,
|
|
|
|
|
title: "Server Infrastructure", description: "Managing enterprise server environments, virtualization, storage solutions, and network optimization", icon: HardDrive,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Problem Solver", description: "Creative thinker who approaches challenges from unique angles, combining technical expertise with artistic vision", icon: Lightbulb,
|
|
|
|
|
title: "Hardware Optimization", description: "Expert in thermal management, cable routing, overclocking, and maximizing system performance", icon: Gauge,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Lifelong Learner", description: "Always exploring new technologies, frameworks, and musical genres to expand my skillset", icon: BookOpen,
|
|
|
|
|
title: "Continuous Learning", description: "Always staying updated with latest hardware releases, benchmarking, and emerging tech trends", icon: Wrench,
|
|
|
|
|
},
|
|
|
|
|
]}
|
|
|
|
|
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"
|
|
|
|
|
imageAlt="My hardware workbench and server setup"
|
|
|
|
|
mediaAnimation="slide-up"
|
|
|
|
|
imagePosition="right"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="tech" data-section="tech">
|
|
|
|
|
<div id="builds" data-section="builds">
|
|
|
|
|
<FeatureCardThree
|
|
|
|
|
title="Tech Skills & Expertise"
|
|
|
|
|
description="My technical toolkit spans across modern web development, cloud infrastructure, and innovative digital solutions."
|
|
|
|
|
tag="Technologies"
|
|
|
|
|
title="Featured PC Builds"
|
|
|
|
|
description="A showcase of my most impressive custom PC builds, each optimized for specific performance goals and aesthetics."
|
|
|
|
|
tag="Hardware Showcase"
|
|
|
|
|
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"},
|
|
|
|
|
id: "01", title: "Ultimate Gaming Rig", description: "Dual GPU setup with high-end processors, custom water cooling loops, and RGB synchronization for maximum performance and visual appeal", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-sleek-web-application-interface-design-1772545157877-d9e4b311.png", imageAlt: "Gaming PC with RGB lighting"},
|
|
|
|
|
{
|
|
|
|
|
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"},
|
|
|
|
|
id: "02", title: "Content Creator Workstation", description: "Multi-core processor powerhouse with massive RAM and high-speed storage for 4K video editing, 3D rendering, and streaming", 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: "Workstation PC with multiple monitors"},
|
|
|
|
|
{
|
|
|
|
|
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: "03", title: "Compact Mini ITX Build", description: "High performance in a small form factor—perfect for LAN parties, portability, and space-constrained environments", 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: "Compact mini ITX gaming PC"},
|
|
|
|
|
{
|
|
|
|
|
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"},
|
|
|
|
|
id: "04", title: "Silent Office PC", description: "Energy-efficient build with fanless cooling, passive components, and silent operation for professional office environments", 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: "Silent office PC build"},
|
|
|
|
|
]}
|
|
|
|
|
gridVariant="bento-grid"
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
ariaLabel="Technology skills section"
|
|
|
|
|
ariaLabel="Featured PC builds section"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="music" data-section="music">
|
|
|
|
|
<div id="servers" data-section="servers">
|
|
|
|
|
<FeatureCardThree
|
|
|
|
|
title="Musical Journey"
|
|
|
|
|
description="My passion for acoustic guitar spans from fingerstyle compositions to jazz-inspired improvisations."
|
|
|
|
|
tag="Acoustic Art"
|
|
|
|
|
title="Server Infrastructure"
|
|
|
|
|
description="My expertise in enterprise-grade server solutions, from dedicated hardware to virtualized environments and cloud management."
|
|
|
|
|
tag="Infrastructure"
|
|
|
|
|
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"},
|
|
|
|
|
id: "01", title: "Dedicated Server Setup", description: "High-performance bare metal servers optimized for gaming servers, hosting platforms, and compute-intensive workloads", 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: "Dedicated server hardware"},
|
|
|
|
|
{
|
|
|
|
|
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"},
|
|
|
|
|
id: "02", title: "Virtualization Infrastructure", description: "VM management, hypervisors, and containerization for efficient resource utilization and scalability", 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: "Server virtualization interface"},
|
|
|
|
|
{
|
|
|
|
|
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: "03", title: "Network & Storage Solutions", description: "NAS, SAN systems, and network infrastructure for high-speed data transfer and reliable backup solutions", 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: "Storage and networking equipment"},
|
|
|
|
|
{
|
|
|
|
|
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"},
|
|
|
|
|
id: "04", title: "Security & Monitoring", description: "Comprehensive security protocols, monitoring systems, and redundancy measures for mission-critical operations", 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: "Security and monitoring systems"},
|
|
|
|
|
]}
|
|
|
|
|
gridVariant="bento-grid-inverted"
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
ariaLabel="Musical projects section"
|
|
|
|
|
ariaLabel="Server infrastructure section"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="work" data-section="work">
|
|
|
|
|
<div id="projects" data-section="projects">
|
|
|
|
|
<ProductCardThree
|
|
|
|
|
title="Featured Projects"
|
|
|
|
|
description="A selection of my most impactful projects combining technology and creativity"
|
|
|
|
|
tag="Portfolio"
|
|
|
|
|
title="Notable Projects"
|
|
|
|
|
description="A collection of my most impactful hardware projects and system implementations"
|
|
|
|
|
tag="Project 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: "1", name: "Gaming Server Cluster", 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: "Gaming server cluster"},
|
|
|
|
|
{
|
|
|
|
|
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: "2", name: "Workstation Configuration", 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: "Professional workstation setup"},
|
|
|
|
|
{
|
|
|
|
|
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"},
|
|
|
|
|
id: "3", name: "Data Center Implementation", 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: "Data center infrastructure"},
|
|
|
|
|
]}
|
|
|
|
|
gridVariant="three-columns-all-equal-width"
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
carouselMode="buttons"
|
|
|
|
|
ariaLabel="Portfolio projects section"
|
|
|
|
|
ariaLabel="Project portfolio section"
|
|
|
|
|
/>
|
|
|
|
|
</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"
|
|
|
|
|
title="What Others Say"
|
|
|
|
|
description="Feedback from clients, colleagues, and the community I've worked with"
|
|
|
|
|
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", name: "Alex Johnson", role: "Gaming Enthusiast", company: "Tech Community", 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: "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", name: "Sarah Chen", role: "Systems Administrator", company: "Enterprise Solutions", rating: 5,
|
|
|
|
|
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: "3", name: "Michael Torres", role: "Content Creator", company: "Media Studios", 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: "Michael Torres"},
|
|
|
|
|
{
|
|
|
|
|
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: "4", name: "Emma Davis", role: "IT Manager", company: "Tech Enterprises", 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: "Emma Davis"},
|
|
|
|
|
{
|
|
|
|
|
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: "5", name: "David Kumar", role: "Network Engineer", company: "Infrastructure Labs", 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: "David Kumar"},
|
|
|
|
|
{
|
|
|
|
|
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: "6", name: "Lisa Wang", role: "Hardware Vendor", company: "Component Specialists", 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: "Lisa Wang"},
|
|
|
|
|
]}
|
|
|
|
|
kpiItems={[
|
|
|
|
|
{ value: "50+", label: "Projects Completed" },
|
|
|
|
|
{ value: "100+", label: "Satisfied Clients" },
|
|
|
|
|
{ value: "15+", label: "Years Experience" },
|
|
|
|
|
{ value: "100+", label: "Systems Built" },
|
|
|
|
|
{ value: "50+", label: "Infrastructure Projects" },
|
|
|
|
|
{ value: "1000+", label: "Hours Optimizing" },
|
|
|
|
|
]}
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
ariaLabel="Testimonials section"
|
|
|
|
|
@@ -210,51 +210,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="Ready to Discuss Hardware?"
|
|
|
|
|
description="Whether you need a custom PC build, server infrastructure consultation, or just want to chat about the latest hardware, I'd love to hear from you. Drop me a message!"
|
|
|
|
|
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 information is safe and secure."
|
|
|
|
|
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="PC Central"
|
|
|
|
|
leftLink={{
|
|
|
|
|
text: "Privacy Policy", href: "#"}}
|
|
|
|
|
rightLink={{
|
|
|
|
|
text: "Terms of Service", href: "#"}}
|
|
|
|
|
ariaLabel="Site footer"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
