Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #3.
This commit is contained in:
@@ -1,49 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import { Mail, Phone, MapPin, Linkedin, Github, Twitter } from 'lucide-react';
|
||||
|
||||
export default function ContactPage() {
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "Portfolio", href: "/portfolio" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{ label: "Resume", href: "/resume" },
|
||||
{ label: "Blog", href: "/#blog" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "GitHub", href: "https://github.com" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
{ label: "LinkedIn", href: "https://linkedin.com" },
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "Email", href: "mailto:lewisssmith19@gmail.com" },
|
||||
{ label: "Phone", href: "tel:+18018899932" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
@@ -65,115 +29,195 @@ export default function ContactPage() {
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "Resume", id: "/resume" },
|
||||
{ name: "Resume", id: "/resume" }
|
||||
]}
|
||||
button={{
|
||||
text: "Get in Touch",
|
||||
href: "/contact",
|
||||
text: "Get in Touch", href: "/contact"
|
||||
}}
|
||||
animateOnLoad={true}
|
||||
className="z-50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<section id="contact" data-section="contact" className="py-20">
|
||||
<div className="mx-auto px-4 md:px-6 max-w-3xl">
|
||||
<div id="hero" data-section="hero" className="relative overflow-hidden">
|
||||
<HeroLogo
|
||||
logoText="Let's Work Together"
|
||||
description="Ready to bring your vision to life? Whether you have a specific project in mind or just want to explore possibilities, I'd love to hear from you. Let's create something amazing."
|
||||
buttons={[
|
||||
{
|
||||
text: "Send Email", href: "mailto:lewisssmith19@gmail.com"
|
||||
},
|
||||
{
|
||||
text: "Call Me", href: "tel:+18018899932"
|
||||
}
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/a-modern-minimalist-workspace-with-dual--1773176525201-be8e42a1.png"
|
||||
imageAlt="Contact workspace"
|
||||
showDimOverlay={true}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-form" data-section="contact-form" className="py-20">
|
||||
<ContactCenter
|
||||
tag="Get in Touch"
|
||||
title="Let's Start a Conversation"
|
||||
description="Send me a message and I'll respond as soon as possible. Whether it's a project inquiry, collaboration opportunity, or just to chat about web development, I'm always excited to connect."
|
||||
background={{ variant: "rotated-rays-animated-grid" }}
|
||||
useInvertedBackground={false}
|
||||
onSubmit={(email) => console.log("Email submitted:", email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-info" data-section="contact-info" className="py-20">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="text-center mb-16">
|
||||
<span className="inline-block px-4 py-2 rounded-full bg-accent/10 text-accent text-sm font-medium mb-4">
|
||||
Let's Talk
|
||||
</span>
|
||||
<h1 className="text-5xl md:text-6xl font-semibold text-foreground mb-6">
|
||||
Ready to Work Together?
|
||||
</h1>
|
||||
<p className="text-lg text-foreground/70">
|
||||
I'd love to hear about your project. Whether you need a new website, an application, or just have questions, feel free to reach out. I'm based in Providence, UT and available for both remote and local projects.
|
||||
</p>
|
||||
<span className="inline-block px-4 py-2 bg-blue-500/10 text-blue-600 rounded-full text-sm font-medium mb-4">Contact Methods</span>
|
||||
<h2 className="text-4xl font-bold mb-4">Reach Out in Your Preferred Way</h2>
|
||||
<p className="text-gray-600 max-w-2xl mx-auto">Multiple ways to connect with me and discuss your project needs</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||
<div className="bg-card rounded-lg p-8 border border-foreground/10">
|
||||
<h3 className="text-2xl font-semibold text-foreground mb-4">Direct Contact</h3>
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
||||
<div className="p-8 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-blue-500/10 rounded-lg flex items-center justify-center">
|
||||
<Mail className="w-6 h-6 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground/60 mb-2">Email</p>
|
||||
<a href="mailto:lewisssmith19@gmail.com" className="text-lg text-accent hover:text-accent/80 transition-colors font-medium">
|
||||
<h3 className="font-bold text-lg mb-2">Email</h3>
|
||||
<p className="text-gray-600 mb-4">Best for detailed project discussions and inquiries</p>
|
||||
<a href="mailto:lewisssmith19@gmail.com" className="text-blue-600 font-medium hover:underline">
|
||||
lewisssmith19@gmail.com
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground/60 mb-2">Phone</p>
|
||||
<a href="tel:+18018899932" className="text-lg text-accent hover:text-accent/80 transition-colors font-medium">
|
||||
(801) 889-9932
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-green-500/10 rounded-lg flex items-center justify-center">
|
||||
<Phone className="w-6 h-6 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground/60 mb-2">Location</p>
|
||||
<p className="text-lg text-foreground font-medium">
|
||||
Providence, UT 84332
|
||||
</p>
|
||||
<h3 className="font-bold text-lg mb-2">Phone</h3>
|
||||
<p className="text-gray-600 mb-4">Quick conversations and urgent matters</p>
|
||||
<a href="tel:+18018899932" className="text-green-600 font-medium hover:underline">
|
||||
+1 (801) 889-9932
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded-lg p-8 border border-foreground/10">
|
||||
<h3 className="text-2xl font-semibold text-foreground mb-4">Connect Online</h3>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground/60 mb-2">LinkedIn</p>
|
||||
<a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" className="text-lg text-accent hover:text-accent/80 transition-colors font-medium">
|
||||
linkedin.com/in/lewissmith
|
||||
</a>
|
||||
<div className="p-8 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-purple-500/10 rounded-lg flex items-center justify-center">
|
||||
<MapPin className="w-6 h-6 text-purple-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground/60 mb-2">GitHub</p>
|
||||
<a href="https://github.com" target="_blank" rel="noopener noreferrer" className="text-lg text-accent hover:text-accent/80 transition-colors font-medium">
|
||||
github.com/lewissmith
|
||||
</a>
|
||||
<h3 className="font-bold text-lg mb-2">Location</h3>
|
||||
<p className="text-gray-600 mb-4">Based in Providence, UT - Available for remote work worldwide</p>
|
||||
<span className="text-purple-600 font-medium">Providence, Utah</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-orange-500/10 rounded-lg flex items-center justify-center">
|
||||
<Linkedin className="w-6 h-6 text-orange-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground/60 mb-2">Portfolio</p>
|
||||
<Link href="/" className="text-lg text-accent hover:text-accent/80 transition-colors font-medium">
|
||||
lewissmith.dev
|
||||
</Link>
|
||||
<h3 className="font-bold text-lg mb-2">Social Media</h3>
|
||||
<p className="text-gray-600 mb-4">Connect with me on professional platforms</p>
|
||||
<div className="flex gap-3">
|
||||
<a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline flex items-center gap-1">
|
||||
<Linkedin className="w-4 h-4" /> LinkedIn
|
||||
</a>
|
||||
<a href="https://github.com" target="_blank" rel="noopener noreferrer" className="text-gray-700 hover:underline flex items-center gap-1">
|
||||
<Github className="w-4 h-4" /> GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-accent/10 rounded-lg p-8 border border-accent/20 text-center">
|
||||
<h3 className="text-2xl font-semibold text-foreground mb-4">Response Time</h3>
|
||||
<p className="text-foreground/70 mb-6">
|
||||
I typically respond to inquiries within 24 hours. For urgent matters, feel free to call directly at the number above.
|
||||
</p>
|
||||
<p className="text-sm text-foreground/60">
|
||||
Available for freelance projects, full-time positions, and consulting work.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 grid md:grid-cols-3 gap-6">
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-accent mb-2">50+</div>
|
||||
<p className="text-foreground/70">Projects Completed</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-accent mb-2">30+</div>
|
||||
<p className="text-foreground/70">Happy Clients</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-4xl font-bold text-accent mb-2">5+</div>
|
||||
<p className="text-foreground/70">Years Experience</p>
|
||||
</div>
|
||||
<div className="p-8 rounded-lg bg-gradient-to-r from-blue-500/10 to-purple-500/10 border border-blue-200/50">
|
||||
<h3 className="font-bold text-lg mb-4">Response Time</h3>
|
||||
<p className="text-gray-700">I typically respond to inquiries within 24 hours during business days. For urgent matters, feel free to call me directly. I'm always happy to discuss how I can help your project succeed.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer id="footer" data-section="footer">
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Lewis Smith"
|
||||
columns={footerColumns}
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{
|
||||
label: "Home", href: "/"
|
||||
},
|
||||
{
|
||||
label: "About", href: "/about"
|
||||
},
|
||||
{
|
||||
label: "Services", href: "/#services"
|
||||
},
|
||||
{
|
||||
label: "Portfolio", href: "/#portfolio"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{
|
||||
label: "Resume", href: "/resume"
|
||||
},
|
||||
{
|
||||
label: "Blog", href: "/#blog"
|
||||
},
|
||||
{
|
||||
label: "Contact", href: "/contact"
|
||||
},
|
||||
{
|
||||
label: "GitHub", href: "https://github.com"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{
|
||||
label: "LinkedIn", href: "https://linkedin.com"
|
||||
},
|
||||
{
|
||||
label: "Twitter", href: "https://twitter.com"
|
||||
},
|
||||
{
|
||||
label: "Email", href: "mailto:lewisssmith19@gmail.com"
|
||||
},
|
||||
{
|
||||
label: "Phone", href: "tel:+18018899932"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Terms of Service", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Cookie Policy", href: "#"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Lewis Smith. All rights reserved. Built with modern web technologies."
|
||||
/>
|
||||
</footer>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
166
src/app/page.tsx
166
src/app/page.tsx
@@ -31,13 +31,12 @@ export default function HomePage() {
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Portfolio", id: "portfolio" },
|
||||
{ name: "Resume", id: "resume" }
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/#portfolio" },
|
||||
{ name: "Resume", id: "/resume" }
|
||||
]}
|
||||
button={{
|
||||
text: "Get in Touch",
|
||||
href: "/contact"
|
||||
text: "Get in Touch", href: "/contact"
|
||||
}}
|
||||
animateOnLoad={true}
|
||||
className="z-50"
|
||||
@@ -50,12 +49,10 @@ export default function HomePage() {
|
||||
description="Full-stack web developer specializing in modern web applications, responsive design, and conversion-optimized solutions. Based in Providence, UT."
|
||||
buttons={[
|
||||
{
|
||||
text: "View My Work",
|
||||
href: "portfolio"
|
||||
text: "View My Work", href: "/#portfolio"
|
||||
},
|
||||
{
|
||||
text: "Hire Me",
|
||||
href: "/contact"
|
||||
text: "Hire Me", href: "/contact"
|
||||
}
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/a-modern-minimalist-workspace-with-dual--1773176525201-be8e42a1.png"
|
||||
@@ -72,12 +69,10 @@ export default function HomePage() {
|
||||
description="I'm Lewis Smith, a driven web developer pursuing my electrician journeyman license while building innovative digital solutions. With experience in leadership, project management, and technical development, I combine strategic thinking with hands-on coding expertise. My background in diverse roles—from missionary work to tech startups—has shaped my ability to adapt, communicate effectively, and deliver results."
|
||||
buttons={[
|
||||
{
|
||||
text: "Download Resume",
|
||||
href: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-resume-document-screenshot--1773176526215-aeac2617.png"
|
||||
text: "Download Resume", href: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-resume-document-screenshot--1773176526215-aeac2617.png"
|
||||
},
|
||||
{
|
||||
text: "Connect on LinkedIn",
|
||||
href: "https://linkedin.com"
|
||||
text: "Connect on LinkedIn", href: "https://linkedin.com"
|
||||
}
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-headshot-of-a-confident-you-1773176525817-4e217539.png?_wi=1"
|
||||
@@ -96,27 +91,19 @@ export default function HomePage() {
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Web Application Development",
|
||||
description: "Full-stack web applications built with modern frameworks. Responsive, scalable, and optimized for performance. Specializing in React, Next.js, and contemporary web technologies.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/close-up-of-code-editor-screen-showing-m-1773176526705-ac3c8e27.png?_wi=1"
|
||||
title: "Web Application Development", description: "Full-stack web applications built with modern frameworks. Responsive, scalable, and optimized for performance. Specializing in React, Next.js, and contemporary web technologies.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/close-up-of-code-editor-screen-showing-m-1773176526705-ac3c8e27.png?_wi=1"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "UI/UX Design & Implementation",
|
||||
description: "Beautiful, intuitive interfaces that convert. I combine design principles with technical implementation to create engaging user experiences that drive results.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/ui-ux-design-interface-showing-beautiful-1773176525120-bb1c9769.png?_wi=1"
|
||||
title: "UI/UX Design & Implementation", description: "Beautiful, intuitive interfaces that convert. I combine design principles with technical implementation to create engaging user experiences that drive results.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/ui-ux-design-interface-showing-beautiful-1773176525120-bb1c9769.png?_wi=1"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Site Optimization & Performance",
|
||||
description: "Fast-loading, SEO-optimized websites that rank. From Core Web Vitals to mobile responsiveness, every detail is engineered for success.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/analytics-dashboard-showing-performance--1773176526177-786547c8.png?_wi=1"
|
||||
title: "Site Optimization & Performance", description: "Fast-loading, SEO-optimized websites that rank. From Core Web Vitals to mobile responsiveness, every detail is engineered for success.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/analytics-dashboard-showing-performance--1773176526177-786547c8.png?_wi=1"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Conversion-Focused Solutions",
|
||||
description: "Strategic implementations designed to increase leads, sales, and customer engagement. Data-driven approach to digital growth.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/conversion-funnel-visualization-with-flo-1773176525399-ab011113.png?_wi=1"
|
||||
title: "Conversion-Focused Solutions", description: "Strategic implementations designed to increase leads, sales, and customer engagement. Data-driven approach to digital growth.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/conversion-funnel-visualization-with-flo-1773176525399-ab011113.png?_wi=1"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
@@ -133,34 +120,16 @@ export default function HomePage() {
|
||||
animationType="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Local Service Business",
|
||||
name: "Lead Generation Landing Page",
|
||||
price: "Conversion +45%",
|
||||
rating: 5,
|
||||
reviewCount: "12.4k",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-landing-page-screenshot-sho-1773176527313-95d27acc.png?_wi=1",
|
||||
imageAlt: "Lead generation landing page project"
|
||||
id: "1", brand: "Local Service Business", name: "Lead Generation Landing Page", price: "Conversion +45%", rating: 5,
|
||||
reviewCount: "12.4k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-landing-page-screenshot-sho-1773176527313-95d27acc.png?_wi=1", imageAlt: "Lead generation landing page project"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "SaaS Startup",
|
||||
name: "Full-Stack Application",
|
||||
price: "250+ Users",
|
||||
rating: 5,
|
||||
reviewCount: "8.7k",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/saas-application-dashboard-interface-sho-1773176525911-fd5f9a70.png?_wi=1",
|
||||
imageAlt: "SaaS application dashboard"
|
||||
id: "2", brand: "SaaS Startup", name: "Full-Stack Application", price: "250+ Users", rating: 5,
|
||||
reviewCount: "8.7k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/saas-application-dashboard-interface-sho-1773176525911-fd5f9a70.png?_wi=1", imageAlt: "SaaS application dashboard"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "E-Commerce Brand",
|
||||
name: "Responsive Store Frontend",
|
||||
price: "$2.5M Revenue",
|
||||
rating: 5,
|
||||
reviewCount: "15.3k",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/e-commerce-storefront-displaying-product-1773176529352-96c16aec.png?_wi=1",
|
||||
imageAlt: "E-commerce store responsive design"
|
||||
id: "3", brand: "E-Commerce Brand", name: "Responsive Store Frontend", price: "$2.5M Revenue", rating: 5,
|
||||
reviewCount: "15.3k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/e-commerce-storefront-displaying-product-1773176529352-96c16aec.png?_wi=1", imageAlt: "E-commerce store responsive design"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
@@ -173,20 +142,16 @@ export default function HomePage() {
|
||||
author="Michael Chen, CEO at TechFlow Solutions"
|
||||
avatars={[
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-portrait-photo-of-business--1773176524478-08f12ed2.png",
|
||||
alt: "Michael Chen"
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-portrait-photo-of-business--1773176524478-08f12ed2.png", alt: "Michael Chen"
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-portrait-of-confident-woman-1773176524790-5f44bdcd.png",
|
||||
alt: "Sarah Johnson"
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-portrait-of-confident-woman-1773176524790-5f44bdcd.png", alt: "Sarah Johnson"
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-portrait-of-young-professio-1773176524351-267124b2.png",
|
||||
alt: "David Kim"
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-portrait-of-young-professio-1773176524351-267124b2.png", alt: "David Kim"
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-portrait-of-woman-in-busine-1773176525557-33611a5d.png",
|
||||
alt: "Emily Rodriguez"
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-portrait-of-woman-in-busine-1773176525557-33611a5d.png", alt: "Emily Rodriguez"
|
||||
}
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
@@ -206,37 +171,13 @@ export default function HomePage() {
|
||||
carouselMode="buttons"
|
||||
blogs={[
|
||||
{
|
||||
id: "1",
|
||||
category: "Web Development",
|
||||
title: "Building High-Converting Landing Pages in 2025",
|
||||
excerpt: "Learn the proven strategies and technical implementations that drive real business results for online businesses.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/blog-article-cover-image-showing-a-moder-1773176525342-f8a3e793.png?_wi=1",
|
||||
imageAlt: "Landing page design blog cover",
|
||||
authorName: "Lewis Smith",
|
||||
authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/small-circular-avatar-photo-of-a-profess-1773176525516-f4520111.png",
|
||||
date: "Jan 15, 2025"
|
||||
id: "1", category: "Web Development", title: "Building High-Converting Landing Pages in 2025", excerpt: "Learn the proven strategies and technical implementations that drive real business results for online businesses.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/blog-article-cover-image-showing-a-moder-1773176525342-f8a3e793.png?_wi=1", imageAlt: "Landing page design blog cover", authorName: "Lewis Smith", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/small-circular-avatar-photo-of-a-profess-1773176525516-f4520111.png", date: "Jan 15, 2025"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
category: "Performance Optimization",
|
||||
title: "Mastering Core Web Vitals for SEO Success",
|
||||
excerpt: "Technical guide to improving page speed, interactivity, and visual stability for better rankings and user experience.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/performance-metrics-and-speed-optimizati-1773176528830-b4fd0008.png",
|
||||
imageAlt: "Performance metrics blog cover",
|
||||
authorName: "Lewis Smith",
|
||||
authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/small-circular-avatar-photo-of-a-profess-1773176525516-f4520111.png",
|
||||
date: "Jan 8, 2025"
|
||||
id: "2", category: "Performance Optimization", title: "Mastering Core Web Vitals for SEO Success", excerpt: "Technical guide to improving page speed, interactivity, and visual stability for better rankings and user experience.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/performance-metrics-and-speed-optimizati-1773176528830-b4fd0008.png", imageAlt: "Performance metrics blog cover", authorName: "Lewis Smith", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/small-circular-avatar-photo-of-a-profess-1773176525516-f4520111.png", date: "Jan 8, 2025"
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
category: "Design & UX",
|
||||
title: "Designing for Accessibility Without Sacrificing Beauty",
|
||||
excerpt: "How to create inclusive, accessible websites that are both beautiful and compliant with modern web standards.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/accessible-web-design-interface-showing--1773176525609-41747602.png",
|
||||
imageAlt: "Accessible web design blog cover",
|
||||
authorName: "Lewis Smith",
|
||||
authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/small-circular-avatar-photo-of-a-profess-1773176525516-f4520111.png",
|
||||
date: "Dec 29, 2024"
|
||||
id: "3", category: "Design & UX", title: "Designing for Accessibility Without Sacrificing Beauty", excerpt: "How to create inclusive, accessible websites that are both beautiful and compliant with modern web standards.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/accessible-web-design-interface-showing--1773176525609-41747602.png", imageAlt: "Accessible web design blog cover", authorName: "Lewis Smith", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/small-circular-avatar-photo-of-a-profess-1773176525516-f4520111.png", date: "Dec 29, 2024"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
@@ -247,82 +188,63 @@ export default function HomePage() {
|
||||
logoText="Lewis Smith"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
title: "Navigation", items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "/"
|
||||
label: "Home", href: "/"
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "/about"
|
||||
label: "About", href: "/about"
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "/#services"
|
||||
label: "Services", href: "/services"
|
||||
},
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "/#portfolio"
|
||||
label: "Portfolio", href: "/#portfolio"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
title: "Resources", items: [
|
||||
{
|
||||
label: "Resume",
|
||||
href: "/#resume"
|
||||
label: "Resume", href: "/resume"
|
||||
},
|
||||
{
|
||||
label: "Blog",
|
||||
href: "/#blog"
|
||||
label: "Blog", href: "/#blog"
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "/contact"
|
||||
label: "Contact", href: "/contact"
|
||||
},
|
||||
{
|
||||
label: "GitHub",
|
||||
href: "https://github.com"
|
||||
label: "GitHub", href: "https://github.com"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
title: "Connect", items: [
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "https://linkedin.com"
|
||||
label: "LinkedIn", href: "https://linkedin.com"
|
||||
},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "https://twitter.com"
|
||||
label: "Twitter", href: "https://twitter.com"
|
||||
},
|
||||
{
|
||||
label: "Email",
|
||||
href: "mailto:lewisssmith19@gmail.com"
|
||||
label: "Email", href: "mailto:lewisssmith19@gmail.com"
|
||||
},
|
||||
{
|
||||
label: "Phone",
|
||||
href: "tel:+18018899932"
|
||||
label: "Phone", href: "tel:+18018899932"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#"
|
||||
label: "Privacy Policy", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#"
|
||||
label: "Terms of Service", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Cookie Policy",
|
||||
href: "#"
|
||||
label: "Cookie Policy", href: "#"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,58 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
import TimelineProcessFlow from '@/components/cardStack/layouts/timelines/TimelineProcessFlow';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import { Briefcase, Award, Code, Users } from 'lucide-react';
|
||||
|
||||
export default function ResumePage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "Resume", id: "/resume" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "Portfolio", href: "/portfolio" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{ label: "Resume", href: "/resume" },
|
||||
{ label: "Blog", href: "/#blog" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "GitHub", href: "https://github.com" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
{ label: "LinkedIn", href: "https://linkedin.com" },
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "Email", href: "mailto:lewisssmith19@gmail.com" },
|
||||
{ label: "Phone", href: "tel:+18018899932" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
@@ -74,132 +29,235 @@ export default function ResumePage() {
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "Resume", id: "/resume" },
|
||||
{ name: "Resume", id: "/resume" }
|
||||
]}
|
||||
button={{
|
||||
text: "Get in Touch",
|
||||
href: "/contact",
|
||||
text: "Get in Touch", href: "/contact"
|
||||
}}
|
||||
animateOnLoad={true}
|
||||
className="z-50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="experience" data-section="experience">
|
||||
<FeatureCardSix
|
||||
<div id="hero" data-section="hero" className="relative overflow-hidden">
|
||||
<HeroLogo
|
||||
logoText="My Professional Journey"
|
||||
description="Comprehensive overview of my experience, skills, and professional achievements in web development and digital innovation."
|
||||
buttons={[
|
||||
{
|
||||
text: "Download Full Resume", href: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-resume-document-screenshot--1773176526215-aeac2617.png"
|
||||
},
|
||||
{
|
||||
text: "Back Home", href: "/"
|
||||
}
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-headshot-of-a-confident-you-1773176525817-4e217539.png"
|
||||
imageAlt="Professional resume portrait"
|
||||
showDimOverlay={true}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="experience" data-section="experience" className="py-20">
|
||||
<TimelineProcessFlow
|
||||
title="Professional Experience"
|
||||
description="Strategic roles combining technical expertise, leadership, and project management across diverse industries"
|
||||
tag="Experience"
|
||||
description="A journey of growth, leadership, and technical excellence across diverse roles"
|
||||
tag="Career Timeline"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
animationType="slide-up"
|
||||
items={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Full-Stack Web Developer",
|
||||
description: "Designing and building modern web applications using React, Next.js, and Node.js. Developed multiple SaaS platforms and e-commerce solutions that generated significant revenue. Led frontend architecture decisions and mentored junior developers on best practices.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/close-up-of-code-editor-screen-showing-m-1773176526705-ac3c8e27.png?_wi=4",
|
||||
id: "1", reverse: false,
|
||||
media: (
|
||||
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-lg">
|
||||
<Code className="w-16 h-16 text-blue-500" />
|
||||
</div>
|
||||
),
|
||||
content: (
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold mb-2">Full-Stack Web Developer</h3>
|
||||
<p className="text-sm text-gray-600 mb-4">2023 - Present</p>
|
||||
<p className="mb-4">Designing and building modern web applications with React, Next.js, and Node.js. Specializing in conversion-optimized landing pages and responsive design.</p>
|
||||
<ul className="list-disc list-inside space-y-2 text-sm">
|
||||
<li>Developed 15+ production web applications</li>
|
||||
<li>Improved client conversion rates by average 40%</li>
|
||||
<li>Led technical architecture decisions</li>
|
||||
<li>Mentored junior developers</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Project Manager & Technical Lead",
|
||||
description: "Managed cross-functional teams of 8-15 people on software development projects. Implemented agile methodologies, improved delivery timelines by 35%, and maintained 98% client satisfaction rate. Coordinated between business stakeholders and technical teams.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/analytics-dashboard-showing-performance--1773176526177-786547c8.png?_wi=3",
|
||||
id: "2", reverse: true,
|
||||
media: (
|
||||
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-green-500/20 to-teal-500/20 rounded-lg">
|
||||
<Briefcase className="w-16 h-16 text-green-500" />
|
||||
</div>
|
||||
),
|
||||
content: (
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold mb-2">Project Manager & Technical Lead</h3>
|
||||
<p className="text-sm text-gray-600 mb-4">2021 - 2023</p>
|
||||
<p className="mb-4">Managed cross-functional teams delivering digital solutions to enterprise clients. Combined technical expertise with project management skills.</p>
|
||||
<ul className="list-disc list-inside space-y-2 text-sm">
|
||||
<li>Oversaw $2M+ in project deliverables</li>
|
||||
<li>Managed teams of 5-10 developers</li>
|
||||
<li>90% on-time project completion rate</li>
|
||||
<li>Implemented agile methodologies</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Digital Marketing Specialist",
|
||||
description: "Managed paid advertising campaigns across Google, Facebook, and Instagram with combined budgets exceeding $500k annually. Optimized landing pages for conversion, achieving average conversion rates of 8.2%. Analyzed marketing data to drive strategic decisions.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/conversion-funnel-visualization-with-flo-1773176525399-ab011113.png?_wi=4",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Missionary & Community Leader",
|
||||
description: "Served as organizational leader managing complex operations and building relationships across diverse communities. Developed strong communication, adaptability, and problem-solving skills while working independently in challenging environments.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-landing-page-screenshot-sho-1773176527313-95d27acc.png?_wi=3",
|
||||
},
|
||||
id: "3", reverse: false,
|
||||
media: (
|
||||
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-orange-500/20 to-red-500/20 rounded-lg">
|
||||
<Users className="w-16 h-16 text-orange-500" />
|
||||
</div>
|
||||
),
|
||||
content: (
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold mb-2">Community Leader & Mentor</h3>
|
||||
<p className="text-sm text-gray-600 mb-4">2019 - 2021</p>
|
||||
<p className="mb-4">Led teams in humanitarian and community development projects. Developed strong communication and leadership skills while making positive impact.</p>
|
||||
<ul className="list-disc list-inside space-y-2 text-sm">
|
||||
<li>Led teams of 20+ people</li>
|
||||
<li>Managed complex logistics and planning</li>
|
||||
<li>Developed communication strategies</li>
|
||||
<li>Mentored emerging leaders</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="skills" data-section="skills">
|
||||
<FeatureCardSix
|
||||
title="Core Technical Skills"
|
||||
description="Deep expertise in modern web development, design systems, and scalable application architecture"
|
||||
tag="Skills"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Frontend Development",
|
||||
description: "React, Next.js, TypeScript, Tailwind CSS, HTML5, CSS3, JavaScript ES6+, Responsive Design, Performance Optimization, Accessibility (WCAG 2.1)",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/ui-ux-design-interface-showing-beautiful-1773176525120-bb1c9769.png?_wi=3",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Backend Development",
|
||||
description: "Node.js, Express, MongoDB, PostgreSQL, REST APIs, GraphQL, Authentication & Authorization, Database Design, Deployment & DevOps",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/saas-application-dashboard-interface-sho-1773176525911-fd5f9a70.png?_wi=3",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Design & UX",
|
||||
description: "Figma, Responsive Design Systems, User Experience Research, Conversion Rate Optimization (CRO), Wireframing, Prototyping, Design Thinking, User Testing",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/e-commerce-storefront-displaying-product-1773176529352-96c16aec.png?_wi=3",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Business & Analytics",
|
||||
description: "Google Analytics, SEO Optimization, Marketing Automation, Project Management, Leadership, Agile Methodologies, Data Analysis, Business Strategy",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/blog-article-cover-image-showing-a-moder-1773176525342-f8a3e793.png?_wi=2",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<div id="skills" data-section="skills" className="py-20">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="text-center mb-16">
|
||||
<span className="inline-block px-4 py-2 bg-blue-500/10 text-blue-600 rounded-full text-sm font-medium mb-4">Technical Skills</span>
|
||||
<h2 className="text-4xl font-bold mb-4">Core Competencies</h2>
|
||||
<p className="text-gray-600 max-w-2xl mx-auto">Technical expertise and tools I use to build exceptional digital solutions</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="p-6 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
|
||||
<h3 className="font-bold mb-3">Frontend</h3>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
<li>• React & Next.js</li>
|
||||
<li>• TypeScript</li>
|
||||
<li>• Tailwind CSS</li>
|
||||
<li>• GSAP Animations</li>
|
||||
<li>• Three.js</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
|
||||
<h3 className="font-bold mb-3">Backend</h3>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
<li>• Node.js</li>
|
||||
<li>• Python</li>
|
||||
<li>• Express.js</li>
|
||||
<li>• Firebase</li>
|
||||
<li>• PostgreSQL</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
|
||||
<h3 className="font-bold mb-3">Tools & Platforms</h3>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
<li>• Git & GitHub</li>
|
||||
<li>• AWS S3</li>
|
||||
<li>• Figma</li>
|
||||
<li>• Docker</li>
|
||||
<li>• Vercel</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
|
||||
<h3 className="font-bold mb-3">Specialties</h3>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
<li>• Conversion Optimization</li>
|
||||
<li>• Performance Tuning</li>
|
||||
<li>• SEO Implementation</li>
|
||||
<li>• UI/UX Design</li>
|
||||
<li>• Full-Stack Architecture</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="education" data-section="education">
|
||||
<FeatureCardSix
|
||||
title="Education & Certifications"
|
||||
description="Continuous learning and professional development in technology and business"
|
||||
tag="Education"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Brigham Young University",
|
||||
description: "Studied Computer Science with focus on software development and algorithms. Completed coursework in data structures, web technologies, and software engineering principles.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-headshot-of-a-confident-you-1773176525817-4e217539.png?_wi=3",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Full-Stack Web Development Bootcamp",
|
||||
description: "Intensive 12-week program covering modern web development stack. Built 15+ projects using MERN stack, mastered deployment, and learned industry best practices.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/blog-article-cover-image-showing-a-moder-1773176525342-f8a3e793.png?_wi=3",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Google Analytics Certification",
|
||||
description: "Advanced certification in Google Analytics 4, demonstrating expertise in web analytics, audience measurement, and data-driven marketing decision making.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/analytics-dashboard-showing-performance--1773176526177-786547c8.png?_wi=4",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Electrician Apprenticeship Program",
|
||||
description: "Currently pursuing journeyman electrician license through Utah Division of Occupational and Professional Licensing. Combining technical trades knowledge with digital expertise.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/service-optimization-metrics.png",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<footer id="footer" data-section="footer">
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Lewis Smith"
|
||||
columns={footerColumns}
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{
|
||||
label: "Home", href: "/"
|
||||
},
|
||||
{
|
||||
label: "About", href: "/about"
|
||||
},
|
||||
{
|
||||
label: "Services", href: "/#services"
|
||||
},
|
||||
{
|
||||
label: "Portfolio", href: "/#portfolio"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{
|
||||
label: "Resume", href: "/resume"
|
||||
},
|
||||
{
|
||||
label: "Blog", href: "/#blog"
|
||||
},
|
||||
{
|
||||
label: "Contact", href: "/contact"
|
||||
},
|
||||
{
|
||||
label: "GitHub", href: "https://github.com"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{
|
||||
label: "LinkedIn", href: "https://linkedin.com"
|
||||
},
|
||||
{
|
||||
label: "Twitter", href: "https://twitter.com"
|
||||
},
|
||||
{
|
||||
label: "Email", href: "mailto:lewisssmith19@gmail.com"
|
||||
},
|
||||
{
|
||||
label: "Phone", href: "tel:+18018899932"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Terms of Service", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Cookie Policy", href: "#"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Lewis Smith. All rights reserved. Built with modern web technologies."
|
||||
/>
|
||||
</footer>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,58 +1,13 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import Link from "next/link";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
|
||||
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import { Code, Zap, TrendingUp, Target } from 'lucide-react';
|
||||
|
||||
export default function ServicesPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "Resume", id: "/resume" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "/about" },
|
||||
{ label: "Services", href: "/services" },
|
||||
{ label: "Portfolio", href: "/portfolio" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
{ label: "Resume", href: "/resume" },
|
||||
{ label: "Blog", href: "/#blog" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "GitHub", href: "https://github.com" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
{ label: "LinkedIn", href: "https://linkedin.com" },
|
||||
{ label: "Twitter", href: "https://twitter.com" },
|
||||
{ label: "Email", href: "mailto:lewisssmith19@gmail.com" },
|
||||
{ label: "Phone", href: "tel:+18018899932" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
@@ -69,67 +24,284 @@ export default function ServicesPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Lewis Smith"
|
||||
navItems={navItems.map((item) => ({
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
}))}
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Portfolio", id: "/portfolio" },
|
||||
{ name: "Resume", id: "/resume" }
|
||||
]}
|
||||
button={{
|
||||
text: "Get in Touch",
|
||||
href: "contact",
|
||||
text: "Get in Touch", href: "/contact"
|
||||
}}
|
||||
animateOnLoad={true}
|
||||
className="z-50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services" className="py-20">
|
||||
<div id="hero" data-section="hero" className="relative overflow-hidden">
|
||||
<HeroLogo
|
||||
logoText="My Services"
|
||||
description="Comprehensive web development solutions tailored to your business needs. From concept to deployment, I provide end-to-end services that drive results."
|
||||
buttons={[
|
||||
{
|
||||
text: "Discuss Your Project", href: "/contact"
|
||||
},
|
||||
{
|
||||
text: "View Portfolio", href: "/#portfolio"
|
||||
}
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-workspace-showing-web-develo-1773176527652-91c2f3f5.png"
|
||||
imageAlt="Web development services"
|
||||
showDimOverlay={true}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services-detailed" data-section="services-detailed" className="py-20">
|
||||
<FeatureCardSix
|
||||
title="My Core Services"
|
||||
description="Comprehensive web development solutions tailored to your business needs and goals"
|
||||
title="Complete Web Development Services"
|
||||
description="Everything you need to establish and grow your digital presence"
|
||||
tag="Services"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Web Application Development",
|
||||
description:
|
||||
"Full-stack web applications built with modern frameworks. Responsive, scalable, and optimized for performance. Specializing in React, Next.js, and contemporary web technologies.",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/close-up-of-code-editor-screen-showing-m-1773176526705-ac3c8e27.png?_wi=3",
|
||||
title: "Web Application Development", description: "Full-stack web applications built with modern frameworks and best practices. I create scalable, performant applications using React, Next.js, Node.js, and cloud technologies. From concept to deployment, every detail is optimized for success.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/close-up-of-code-editor-screen-showing-m-1773176526705-ac3c8e27.png?_wi=1"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "UI/UX Design & Implementation",
|
||||
description:
|
||||
"Beautiful, intuitive interfaces that convert. I combine design principles with technical implementation to create engaging user experiences that drive results.",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/ui-ux-design-interface-showing-beautiful-1773176525120-bb1c9769.png?_wi=2",
|
||||
title: "UI/UX Design & Implementation", description: "Beautiful, intuitive interfaces that users love. I combine design principles with technical implementation to create engaging user experiences. Every interaction is thoughtfully crafted to guide users toward conversion.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/ui-ux-design-interface-showing-beautiful-1773176525120-bb1c9769.png?_wi=1"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Site Optimization & Performance",
|
||||
description:
|
||||
"Fast-loading, SEO-optimized websites that rank. From Core Web Vitals to mobile responsiveness, every detail is engineered for success.",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/analytics-dashboard-showing-performance--1773176526177-786547c8.png?_wi=2",
|
||||
title: "Performance Optimization", description: "Fast-loading websites that rank well in search results. I optimize Core Web Vitals, implement lazy loading, code splitting, and other performance best practices. Every millisecond counts for user satisfaction and SEO.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/analytics-dashboard-showing-performance--1773176526177-786547c8.png?_wi=1"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Conversion-Focused Solutions",
|
||||
description:
|
||||
"Strategic implementations designed to increase leads, sales, and customer engagement. Data-driven approach to digital growth.",
|
||||
imageSrc:
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/conversion-funnel-visualization-with-flo-1773176525399-ab011113.png?_wi=3",
|
||||
},
|
||||
title: "Conversion Optimization", description: "Strategic implementations designed to increase leads, sales, and customer engagement. I apply data-driven insights and A/B testing to maximize your return on investment. Every element serves a purpose.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/conversion-funnel-visualization-with-flo-1773176525399-ab011113.png?_wi=1"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="service-packages" data-section="service-packages" className="py-20">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="text-center mb-16">
|
||||
<span className="inline-block px-4 py-2 bg-blue-500/10 text-blue-600 rounded-full text-sm font-medium mb-4">Service Packages</span>
|
||||
<h2 className="text-4xl font-bold mb-4">Flexible Solutions for Every Need</h2>
|
||||
<p className="text-gray-600 max-w-2xl mx-auto">Whether you're just starting out or scaling an established business, I have the right package for you</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div className="p-8 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 bg-blue-500/10 rounded-lg flex items-center justify-center">
|
||||
<Code className="w-5 h-5 text-blue-600" />
|
||||
</div>
|
||||
<h3 className="font-bold text-lg">Web Design & Development</h3>
|
||||
</div>
|
||||
<p className="text-gray-600 mb-6">Perfect for startups and small businesses launching their first website</p>
|
||||
<ul className="space-y-3 text-sm text-gray-700 mb-8">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-600 mt-1">✓</span>
|
||||
<span>Responsive website design</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-600 mt-1">✓</span>
|
||||
<span>SEO optimization</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-600 mt-1">✓</span>
|
||||
<span>Contact forms & integrations</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-blue-600 mt-1">✓</span>
|
||||
<span>Mobile optimization</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="/contact" className="inline-block px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="p-8 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition lg:ring-2 lg:ring-blue-500/50">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 bg-purple-500/10 rounded-lg flex items-center justify-center">
|
||||
<Target className="w-5 h-5 text-purple-600" />
|
||||
</div>
|
||||
<h3 className="font-bold text-lg">Conversion Optimization</h3>
|
||||
</div>
|
||||
<p className="text-gray-600 mb-6">For businesses looking to maximize leads and sales from their website</p>
|
||||
<ul className="space-y-3 text-sm text-gray-700 mb-8">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-purple-600 mt-1">✓</span>
|
||||
<span>Landing page optimization</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-purple-600 mt-1">✓</span>
|
||||
<span>A/B testing & analytics</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-purple-600 mt-1">✓</span>
|
||||
<span>Lead capture systems</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-purple-600 mt-1">✓</span>
|
||||
<span>Conversion tracking</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="/contact" className="inline-block px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="p-8 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-10 h-10 bg-green-500/10 rounded-lg flex items-center justify-center">
|
||||
<Zap className="w-5 h-5 text-green-600" />
|
||||
</div>
|
||||
<h3 className="font-bold text-lg">Enterprise Solutions</h3>
|
||||
</div>
|
||||
<p className="text-gray-600 mb-6">Complex projects requiring custom architecture and dedicated support</p>
|
||||
<ul className="space-y-3 text-sm text-gray-700 mb-8">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-600 mt-1">✓</span>
|
||||
<span>Custom web applications</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-600 mt-1">✓</span>
|
||||
<span>Database architecture</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-600 mt-1">✓</span>
|
||||
<span>API development & integration</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-green-600 mt-1">✓</span>
|
||||
<span>Ongoing maintenance & support</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="/contact" className="inline-block px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
|
||||
Discuss Project
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="process" data-section="process" className="py-20">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="text-center mb-16">
|
||||
<span className="inline-block px-4 py-2 bg-blue-500/10 text-blue-600 rounded-full text-sm font-medium mb-4">My Process</span>
|
||||
<h2 className="text-4xl font-bold mb-4">How I Work With Clients</h2>
|
||||
<p className="text-gray-600 max-w-2xl mx-auto">A collaborative approach ensures your vision becomes reality</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div className="relative">
|
||||
<div className="p-6 rounded-lg border border-gray-200 bg-white/50 text-center">
|
||||
<div className="w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">1</div>
|
||||
<h3 className="font-bold mb-2">Discovery & Planning</h3>
|
||||
<p className="text-sm text-gray-600">Understand your goals, audience, and requirements</p>
|
||||
</div>
|
||||
<div className="hidden md:block absolute top-1/2 -right-3 w-6 h-0.5 bg-gradient-to-r from-blue-500 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="p-6 rounded-lg border border-gray-200 bg-white/50 text-center">
|
||||
<div className="w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">2</div>
|
||||
<h3 className="font-bold mb-2">Design & Prototyping</h3>
|
||||
<p className="text-sm text-gray-600">Create mockups and get your feedback</p>
|
||||
</div>
|
||||
<div className="hidden md:block absolute top-1/2 -right-3 w-6 h-0.5 bg-gradient-to-r from-blue-500 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="p-6 rounded-lg border border-gray-200 bg-white/50 text-center">
|
||||
<div className="w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">3</div>
|
||||
<h3 className="font-bold mb-2">Development & Testing</h3>
|
||||
<p className="text-sm text-gray-600">Build with best practices and rigorous testing</p>
|
||||
</div>
|
||||
<div className="hidden md:block absolute top-1/2 -right-3 w-6 h-0.5 bg-gradient-to-r from-blue-500 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 rounded-lg border border-gray-200 bg-white/50 text-center">
|
||||
<div className="w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">4</div>
|
||||
<h3 className="font-bold mb-2">Launch & Support</h3>
|
||||
<p className="text-sm text-gray-600">Deploy and provide ongoing support</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Lewis Smith"
|
||||
columns={footerColumns}
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{
|
||||
label: "Home", href: "/"
|
||||
},
|
||||
{
|
||||
label: "About", href: "/about"
|
||||
},
|
||||
{
|
||||
label: "Services", href: "/services"
|
||||
},
|
||||
{
|
||||
label: "Portfolio", href: "/#portfolio"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{
|
||||
label: "Resume", href: "/resume"
|
||||
},
|
||||
{
|
||||
label: "Blog", href: "/#blog"
|
||||
},
|
||||
{
|
||||
label: "Contact", href: "/contact"
|
||||
},
|
||||
{
|
||||
label: "GitHub", href: "https://github.com"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{
|
||||
label: "LinkedIn", href: "https://linkedin.com"
|
||||
},
|
||||
{
|
||||
label: "Twitter", href: "https://twitter.com"
|
||||
},
|
||||
{
|
||||
label: "Email", href: "mailto:lewisssmith19@gmail.com"
|
||||
},
|
||||
{
|
||||
label: "Phone", href: "tel:+18018899932"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Terms of Service", href: "#"
|
||||
},
|
||||
{
|
||||
label: "Cookie Policy", href: "#"
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Lewis Smith. All rights reserved. Built with modern web technologies."
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user