237 lines
14 KiB
TypeScript
237 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
|
|
import SplitAbout from "@/components/sections/about/SplitAbout";
|
|
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
|
|
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
|
|
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
|
|
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
|
import { Code, Lightbulb, Server, Zap, MapPin, Mail } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
brandName="Noah Whiteson"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Work", id: "work" },
|
|
{ name: "Skills", id: "skills" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Let's Talk", href: "contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
title="Fullstack Engineer & Digital Craftsman"
|
|
description="I build elegant, scalable web applications with meticulous attention to performance, user experience, and clean code. Based in Toronto, passionate about solving complex problems with modern technology."
|
|
tag="Based in Toronto"
|
|
tagIcon={MapPin}
|
|
background={{ variant: "glowing-orb" }}
|
|
testimonials={[
|
|
{
|
|
name: "Sarah Chen", handle: "Product Director, TechFlow Inc", testimonial: "Noah transformed our entire infrastructure. His fullstack expertise and attention to detail elevated our product quality significantly.", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp"
|
|
},
|
|
{
|
|
name: "Marcus Johnson", handle: "CEO, InnovateLab", testimonial: "Working with Noah was a game-changer. His code is clean, his communication is exceptional, and his delivery is always on time.", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp"
|
|
},
|
|
{
|
|
name: "Emma Rodriguez", handle: "Lead Designer, Creative Studios", testimonial: "Noah bridges the gap between design and engineering beautifully. He understands the complete picture and builds with intention.", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp"
|
|
},
|
|
{
|
|
name: "David Kim", handle: "CTO, StartupXYZ", testimonial: "Exceptional fullstack developer. Noah's problem-solving skills and technical depth are remarkable. Highly recommended.", rating: 5,
|
|
imageSrc: "/placeholders/placeholder1.webp"
|
|
}
|
|
]}
|
|
testimonialRotationInterval={5000}
|
|
buttons={[
|
|
{ text: "View My Work", href: "work" },
|
|
{ text: "Get In Touch", href: "contact" }
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
buttonAnimation="blur-reveal"
|
|
tagAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="Fullstack Development Excellence"
|
|
description="With 6+ years of experience crafting digital solutions, I specialize in building scalable applications from database to user interface. My expertise spans modern frameworks, cloud architecture, and agile methodologies."
|
|
tag="About Me"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
bulletPoints={[
|
|
{
|
|
title: "Frontend Mastery", description: "Expert in React, Next.js, and modern UI frameworks. I create responsive, accessible interfaces with attention to animation and performance.", icon: Code
|
|
},
|
|
{
|
|
title: "Backend Architecture", description: "Proficient in Node.js, Python, and cloud platforms. I design scalable APIs, optimize databases, and implement robust security practices.", icon: Server
|
|
},
|
|
{
|
|
title: "DevOps & Infrastructure", description: "Experience with Docker, Kubernetes, AWS, and CI/CD pipelines. I automate deployments and ensure system reliability.", icon: Zap
|
|
},
|
|
{
|
|
title: "Problem Solving", description: "I approach challenges methodically, breaking down complex problems into elegant solutions. Performance and maintainability are paramount.", icon: Lightbulb
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Download Resume", href: "https://example.com/resume.pdf" }
|
|
]}
|
|
mediaAnimation="opacity"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="work" data-section="work">
|
|
<FeatureCardTwentySeven
|
|
title="Featured Projects"
|
|
description="A selection of my most impactful work showcasing fullstack development, architectural decisions, and creative problem-solving."
|
|
tag="Portfolio Highlights"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "1", title: "E-Commerce Platform", description: "Built a full-featured e-commerce platform with real-time inventory, payment processing, and analytics dashboard. Handles 10k+ concurrent users with sub-200ms response times.", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "E-Commerce Platform"
|
|
},
|
|
{
|
|
id: "2", title: "Real-Time Collaboration Tool", description: "Developed a collaborative document editor with WebSocket integration, operational transformation, and granular permissions. Used by 500+ teams.", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Real-Time Collaboration Tool"
|
|
},
|
|
{
|
|
id: "3", title: "Data Analytics Dashboard", description: "Created a comprehensive analytics platform with custom visualizations, real-time data processing, and predictive modeling capabilities.", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Data Analytics Dashboard"
|
|
},
|
|
{
|
|
id: "4", title: "Mobile App Backend", description: "Architected a scalable microservices backend for a social platform mobile app. Implemented caching, load balancing, and automated scaling.", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Mobile App Backend"
|
|
}
|
|
]}
|
|
gridVariant="uniform-4"
|
|
animationType="slide-up"
|
|
buttonAnimation="blur-reveal"
|
|
tagAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="skills" data-section="skills">
|
|
<MetricCardSeven
|
|
title="Technical Expertise"
|
|
description="My skills and specializations refined through years of dedicated practice and real-world application."
|
|
tag="Capabilities"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "1", value: "12+", title: "Languages & Frameworks", items: ["JavaScript/TypeScript mastery", "Python and Go experience", "React, Next.js expertise", "Full database management"]
|
|
},
|
|
{
|
|
id: "2", value: "6+", title: "Years of Experience", items: ["Fullstack development focus", "Startup and enterprise projects", "Team leadership and mentoring", "Open source contributions"]
|
|
},
|
|
{
|
|
id: "3", value: "50+", title: "Projects Delivered", items: ["Production systems at scale", "Mission-critical applications", "Average 98% uptime", "Performance-optimized code"]
|
|
},
|
|
{
|
|
id: "4", value: "24/7", title: "Reliability Commitment", items: ["Responsive communication", "Proactive maintenance", "Emergency support ready", "Continuous improvement"]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="Client Testimonials"
|
|
description="What my clients and colleagues say about working together"
|
|
tag="Feedback"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Transformed Our Product Architecture", quote: "Noah completely redesigned our backend infrastructure. The performance improvements were immediate—30% faster load times and 40% reduction in server costs. His technical insights helped us scale to millions of users.", name: "Sarah Chen", role: "VP Product, TechFlow Inc", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Sarah Chen"
|
|
},
|
|
{
|
|
id: "2", title: "Excellence in Execution", quote: "Working with Noah is effortless. He communicates clearly, delivers on time, and writes beautiful code. He became an integral part of our team from day one. Highly recommended.", name: "Marcus Johnson", role: "CEO, InnovateLab", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Marcus Johnson"
|
|
},
|
|
{
|
|
id: "3", title: "Bridge Between Design and Engineering", quote: "Noah understands both sides of the product equation. His attention to detail in both frontend and backend ensures seamless user experiences backed by solid engineering.", name: "Emma Rodriguez", role: "Lead Designer, Creative Studios", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Emma Rodriguez"
|
|
},
|
|
{
|
|
id: "4", title: "Technical Depth and Leadership", quote: "Exceptional developer with remarkable problem-solving skills. Noah doesn't just write code—he architects solutions. A mentor to junior developers and a technical visionary.", name: "David Kim", role: "CTO, StartupXYZ", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "David Kim"
|
|
},
|
|
{
|
|
id: "5", title: "Reliable Partner for Complex Projects", quote: "We brought Noah on for a mission-critical project. His ability to manage complexity while maintaining code quality was invaluable. He's a true professional.", name: "Jessica Liu", role: "Engineering Manager, CloudNine", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Jessica Liu"
|
|
},
|
|
{
|
|
id: "6", title: "Exceptional Communication Skills", quote: "What sets Noah apart is his ability to explain technical concepts clearly to non-technical stakeholders. His communication skills are as strong as his coding ability.", name: "Robert Walsh", role: "Founder, Digital Ventures", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Robert Walsh"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Let's Connect"
|
|
title="Ready to Build Something Great?"
|
|
description="I'm always interested in hearing about new projects, collaborations, and opportunities. Reach out and let's discuss how I can contribute to your vision."
|
|
tagIcon={Mail}
|
|
background={{ variant: "rotated-rays-animated-grid" }}
|
|
useInvertedBackground={true}
|
|
inputPlaceholder="your@email.com"
|
|
buttonText="Send Message"
|
|
termsText="I'll get back to you within 24 hours. Your privacy is respected."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="Noah Whiteson"
|
|
copyrightText="© 2025 Noah Whiteson. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Navigation", items: [
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Work", href: "#work" },
|
|
{ label: "Skills", href: "#skills" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "GitHub", href: "https://github.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "Email", href: "mailto:noah@example.com" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|