6 Commits

Author SHA1 Message Date
35be7c7c6d Update src/app/styles/variables.css 2026-03-03 13:58:39 +00:00
d6407eb196 Update src/app/page.tsx 2026-03-03 13:58:38 +00:00
0fc4e1a0ab Update src/app/layout.tsx 2026-03-03 13:58:37 +00:00
0e5b9382f4 Merge version_1 into main
Merge version_1 into main
2026-03-03 13:45:11 +00:00
a7dd29d1a9 Merge version_1 into main
Merge version_1 into main
2026-03-03 13:42:57 +00:00
151ba0db5b Merge version_1 into main
Merge version_1 into main
2026-03-03 13:40:08 +00:00
3 changed files with 98 additions and 129 deletions

View File

@@ -1,37 +1,31 @@
import type { Metadata } from "next";
import { Source_Sans_3 } from "next/font/google";
import { Halant } from "next/font/google";
import { Inter } from "next/font/google";
import { Manrope } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
const sourceSans3 = Source_Sans_3({
variable: "--font-source-sans-3", subsets: ["latin"],
});
const halant = Halant({
variable: "--font-halant", subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
const manrope = Manrope({
variable: "--font-manrope", subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Dev & Strings - Tech Developer & Acoustic Guitarist", description: "Portfolio of a full-stack developer passionate about technology and acoustic music. Explore projects, skills, and collaborations.", keywords: "developer, programmer, acoustic guitar, music, portfolio, full-stack, web development", robots: {
title: "PC & Server Enthusiast - Hardware & Infrastructure", description: "Passionate about building high-performance PC systems and enterprise server infrastructure. Explore my projects, setups, and technical expertise.", keywords: "PC building, servers, hardware, infrastructure, gaming PC, workstation, data center, tech enthusiast", robots: {
index: true,
follow: true,
},
openGraph: {
title: "Dev & Strings - Tech Developer & Acoustic Guitarist", description: "Discover how code and creativity come together", url: "https://devstrings.com", siteName: "Dev & Strings", type: "website", images: [
title: "PC & Server Enthusiast - Hardware & Infrastructure", description: "Discover my passion for building and optimizing computer systems", url: "https://pcserver.com", siteName: "PC & Server Central", type: "website", images: [
{
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-professional-portrait-of-a-tech-enthus-1772545157810-a8854352.png", alt: "Tech enthusiast with acoustic guitar"},
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-professional-portrait-of-a-tech-enthus-1772545157810-a8854352.png", alt: "PC and server hardware"},
],
},
twitter: {
card: "summary_large_image", title: "Dev & Strings - Tech & Music", description: "Full-stack developer and passionate acoustic guitarist", images: [
card: "summary_large_image", title: "PC & Server Enthusiast", description: "Passionate about hardware, infrastructure, and high-performance systems", images: [
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ARAYHcycoyLEmpoLoZFpUdqzJ8/a-professional-portrait-of-a-tech-enthus-1772545157810-a8854352.png"],
},
};
@@ -45,7 +39,7 @@ export default function RootLayout({
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body
className={`${sourceSans3.variable} ${halant.variable} ${inter.variable} antialiased`}
className={`${inter.variable} ${manrope.variable} antialiased`}
>
<Tag />
{children}

View File

@@ -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>

View File

@@ -4,21 +4,21 @@
/* --background: #ffffff;;
--card: #f9f9f9;;
--foreground: #120a00e6;;
--primary-cta: #ff8c42;;
--foreground: #0a0a0a;;
--primary-cta: #0a0a0a;;
--secondary-cta: #f9f9f9;;
--accent: #e2e2e2;;
--background-accent: #c4c4c4;; */
--accent: #4a4a4a;;
--background-accent: #e0e0e0;; */
--background: #ffffff;;
--card: #f9f9f9;;
--foreground: #120a00e6;;
--primary-cta: #ff8c42;;
--foreground: #0a0a0a;;
--primary-cta: #0a0a0a;;
--primary-cta-text: #ffffff;;
--secondary-cta: #f9f9f9;;
--secondary-cta-text: #120a00e6;;
--accent: #e2e2e2;;
--background-accent: #c4c4c4;;
--accent: #4a4a4a;;
--background-accent: #e0e0e0;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);