193 lines
10 KiB
TypeScript
193 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
|
|
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
|
|
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
|
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
|
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { CheckCircle, Code, Github, Linkedin, Mail, Shield, Star, TrendingUp, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmall"
|
|
background="fluid"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "Work", id: "work" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Skills", id: "skills" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
button={{
|
|
text: "Get in Touch", href: "contact"}}
|
|
brandName="Noah Whiteson"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero" className="py-24 md:py-32 w-full">
|
|
<HeroLogoBillboardSplit
|
|
logoText="NOAH WHITESON"
|
|
description="Fullstack engineer crafting elegant solutions in Toronto. Specialized in modern web architecture, real-time systems, and scalable infrastructure. Let's build something exceptional together."
|
|
background={{ variant: "plain" }}
|
|
buttons={[
|
|
{ text: "View Work", href: "#work" },
|
|
{ text: "Get in Touch", href: "#contact" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
layoutOrder="default"
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APIGU08tnyGzq6TUDv0n5AXHxb/an-abstract-tech-inspired-gradient-with--1772492721134-e090dc85.png"
|
|
imageAlt="Abstract tech gradient background"
|
|
mediaAnimation="blur-reveal"
|
|
frameStyle="card"
|
|
className="w-full"
|
|
containerClassName="w-full"
|
|
logoContainerClassName="w-full"
|
|
descriptionClassName="text-lg md:text-3xl font-inter"
|
|
buttonContainerClassName="flex gap-4 flex-wrap"
|
|
buttonClassName="px-6 py-3 rounded-full"
|
|
buttonTextClassName="font-semibold"
|
|
logoClassName="text-6xl md:text-9xl font-extrabold font-public-sans tracking-tighter"
|
|
mediaWrapperClassName="w-full rounded-2xl overflow-hidden"
|
|
imageClassName="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div id="work" data-section="work" className="py-20 md:py-28 w-full">
|
|
<FeatureCardTwentyOne
|
|
title="Featured Projects & Experience"
|
|
description="A selection of projects showcasing my expertise across frontend, backend, and infrastructure. Each represents a unique technical challenge solved with thoughtful engineering and clean code practices."
|
|
tag="Portfolio"
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Explore GitHub", href: "https://github.com" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
accordionItems={[
|
|
{
|
|
id: "1", title: "Real-Time Collaboration Platform", content: "Built a full-stack real-time collaboration tool using WebSockets, React, Node.js, and MongoDB. Implemented operational transformation for concurrent editing, Redis caching for performance optimization, and AWS deployment with auto-scaling."},
|
|
{
|
|
id: "2", title: "Performance-Optimized E-Commerce", content: "Architected and deployed a high-traffic e-commerce platform handling 100k+ daily users. Implemented progressive image loading, lazy code splitting, edge caching with Cloudflare, and database query optimization reducing load times by 65%."},
|
|
{
|
|
id: "3", title: "Microservices Migration", content: "Led migration of monolithic application to microservices architecture using Docker and Kubernetes. Designed service boundaries, implemented API gateway with authentication, and automated CI/CD pipelines reducing deployment time by 80%."},
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APIGU08tnyGzq6TUDv0n5AXHxb/a-clean-code-editor-interface-showing-fu-1772492722244-10e98be2.png"
|
|
imageAlt="Code editor showing fullstack development"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
mediaPosition="left"
|
|
titleClassName="text-5xl md:text-6xl font-extrabold font-public-sans"
|
|
descriptionClassName="text-lg font-inter text-opacity-80"
|
|
accordionTitleClassName="text-xl font-semibold font-public-sans"
|
|
accordionContentClassName="text-base font-inter leading-relaxed"
|
|
/>
|
|
</div>
|
|
|
|
<div id="skills" data-section="skills" className="py-20 md:py-28 w-full">
|
|
<MetricCardOne
|
|
metrics={[
|
|
{
|
|
id: "1", value: "8", title: "Years Experience", description: "Fullstack engineering and system design", icon: Code,
|
|
},
|
|
{
|
|
id: "2", value: "50", title: "Projects Shipped", description: "Production applications and services", icon: CheckCircle,
|
|
},
|
|
{
|
|
id: "3", value: "1M", title: "Lines of Code", description: "Written and maintained professionally", icon: Zap,
|
|
},
|
|
{
|
|
id: "4", value: "99.9", title: "Uptime %", description: "Average system reliability achieved", icon: Shield,
|
|
},
|
|
]}
|
|
carouselMode="buttons"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
title="Technical Metrics"
|
|
description="Quantified impact and expertise across years of professional development"
|
|
tag="Skills"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
titleClassName="text-2xl font-bold font-public-sans mt-2"
|
|
descriptionClassName="text-sm text-opacity-70 font-inter"
|
|
valueClassName="text-7xl md:text-9xl font-extrabold font-public-sans"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials" className="py-20 md:py-28 w-full">
|
|
<TestimonialCardTwelve
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APIGU08tnyGzq6TUDv0n5AXHxb/professional-portrait-photo-of-a-tech-in-1772492721325-b791c72d.png"},
|
|
{
|
|
id: "2", name: "Marcus Rodriguez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APIGU08tnyGzq6TUDv0n5AXHxb/professional-portrait-photo-of-a-product-1772492721154-473e0f93.png"},
|
|
{
|
|
id: "3", name: "Elena Volkov", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APIGU08tnyGzq6TUDv0n5AXHxb/professional-portrait-of-a-software-arch-1772492721292-dfe0728b.png"},
|
|
{
|
|
id: "4", name: "James Patterson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APIGU08tnyGzq6TUDv0n5AXHxb/professional-portrait-of-a-startup-found-1772492721050-91c9ac27.png"},
|
|
]}
|
|
cardTitle="Trusted by innovative teams and leading tech companies across North America"
|
|
cardTag="Testimonials"
|
|
cardTagIcon={Star}
|
|
cardAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
cardTitleClassName="text-3xl md:text-4xl font-extrabold font-public-sans text-center"
|
|
cardTagClassName="text-sm font-semibold text-center"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact" className="py-20 md:py-28 w-full">
|
|
<ContactCenter
|
|
tag="Get Started"
|
|
title="Ready to collaborate on your next project?"
|
|
description="Let's connect and discuss how I can help bring your vision to life. Whether it's a full-stack project, system architecture, or scaling existing infrastructure."
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="noah@example.com"
|
|
buttonText="Connect"
|
|
termsText="I'll get back to you within 24 hours. Privacy respected."
|
|
className="w-full"
|
|
containerClassName="max-w-2xl mx-auto"
|
|
titleClassName="text-4xl md:text-5xl font-extrabold font-public-sans"
|
|
descriptionClassName="text-lg font-inter text-opacity-80"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer" className="py-12 w-full">
|
|
<FooterCard
|
|
logoText="NOAH WHITESON"
|
|
copyrightText="© 2025 Noah Whiteson | Fullstack Engineer | Toronto"
|
|
socialLinks={[
|
|
{
|
|
icon: Github,
|
|
href: "https://github.com", ariaLabel: "GitHub Profile"},
|
|
{
|
|
icon: Linkedin,
|
|
href: "https://linkedin.com", ariaLabel: "LinkedIn Profile"},
|
|
{
|
|
icon: Mail,
|
|
href: "mailto:noah@example.com", ariaLabel: "Send Email"},
|
|
]}
|
|
logoClassName="text-2xl font-extrabold font-public-sans"
|
|
copyrightTextClassName="text-sm font-inter text-opacity-70"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|