Merge version_1 into main #2
215
src/app/page.tsx
215
src/app/page.tsx
@@ -33,17 +33,11 @@ export default function LandingPage() {
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Work",
|
||||
id: "works",
|
||||
},
|
||||
name: "Work", id: "works"},
|
||||
{
|
||||
name: "Resume",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Resume", id: "contact"},
|
||||
]}
|
||||
brandName="JA"
|
||||
/>
|
||||
@@ -55,39 +49,17 @@ export default function LandingPage() {
|
||||
description="Designing seamless digital interactions by focusing on the unique nuances which bring systems to life."
|
||||
buttons={[
|
||||
{
|
||||
text: "See Works",
|
||||
href: "#works",
|
||||
},
|
||||
text: "See Works", href: "#works"},
|
||||
{
|
||||
text: "Reach out",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Reach out", href: "#contact"},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/isolated-soap-oil-bubbles-watery-background_23-2148290163.jpg",
|
||||
imageAlt: "dark motion graphics",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-blue-watercolor-background-with-frosted-glass-paint-brushstroke_53876-145514.jpg",
|
||||
imageAlt: "dark motion graphics",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/liquid-purple-art-painting-abstract-colorful-background-with-color-splash-paints-modern-art_1258-99710.jpg",
|
||||
imageAlt: "dark motion graphics",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-background_23-2148132330.jpg",
|
||||
imageAlt: "dark motion graphics",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beauty-digital-art-through-immersive-experiences_23-2151250279.jpg",
|
||||
imageAlt: "dark motion graphics",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-88610.jpg",
|
||||
imageAlt: "dark motion graphics",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/isolated-soap-oil-bubbles-watery-background_23-2148290163.jpg", imageAlt: "dark motion graphics" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-blue-watercolor-background-with-frosted-glass-paint-brushstroke_53876-145514.jpg", imageAlt: "dark motion graphics" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/liquid-purple-art-painting-abstract-colorful-background-with-color-splash-paints-modern-art_1258-99710.jpg", imageAlt: "dark motion graphics" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-background_23-2148132330.jpg", imageAlt: "dark motion graphics" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/beauty-digital-art-through-immersive-experiences_23-2151250279.jpg", imageAlt: "dark motion graphics" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-88610.jpg", imageAlt: "dark motion graphics" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -99,11 +71,10 @@ export default function LandingPage() {
|
||||
title="Creative Technologist"
|
||||
description="Building the future of digital products."
|
||||
subdescription="A scholar and fullstack developer focused on nuances."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-teen-with-cool-pink-hair_23-2148629627.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-teen-with-cool-pink-hair_23-2148629627.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
icon={Code}
|
||||
imageAlt="creative professional headshot"
|
||||
videoSrc="http://img.b2bpic.net/free-photo/medium-shot-teen-with-cool-pink-hair_23-2148629627.jpg?_wi=2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -114,42 +85,12 @@ export default function LandingPage() {
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Automotive Motion",
|
||||
price: "UI/UX",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-empty-room_23-2150528620.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Urban Architecture",
|
||||
price: "Branding",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bauhaus-inspired-pattern-background-illustration_53876-104126.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Human Perspective",
|
||||
price: "Development",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/nail-polish-texture_23-2148111082.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Brand Identity",
|
||||
price: "Strategy",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345447.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Interactive Web",
|
||||
price: "Creative",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-exterior-details-modern-white-car_181624-25227.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Design Systems",
|
||||
price: "Engineering",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/guangzhou-china-nov-22-2015-modern-buildings-modern-buildin_1137-328.jpg",
|
||||
},
|
||||
{ id: "p1", name: "Automotive Motion", price: "UI/UX", imageSrc: "http://img.b2bpic.net/free-photo/modern-empty-room_23-2150528620.jpg" },
|
||||
{ id: "p2", name: "Urban Architecture", price: "Branding", imageSrc: "http://img.b2bpic.net/free-photo/bauhaus-inspired-pattern-background-illustration_53876-104126.jpg" },
|
||||
{ id: "p3", name: "Human Perspective", price: "Development", imageSrc: "http://img.b2bpic.net/free-photo/nail-polish-texture_23-2148111082.jpg" },
|
||||
{ id: "p4", name: "Brand Identity", price: "Strategy", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345447.jpg" },
|
||||
{ id: "p5", name: "Interactive Web", price: "Creative", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-exterior-details-modern-white-car_181624-25227.jpg" },
|
||||
{ id: "p6", name: "Design Systems", price: "Engineering", imageSrc: "http://img.b2bpic.net/free-photo/guangzhou-china-nov-22-2015-modern-buildings-modern-buildin_1137-328.jpg" },
|
||||
]}
|
||||
title="Featured Projects"
|
||||
description="A selection of projects from concept to launch."
|
||||
@@ -164,36 +105,9 @@ export default function LandingPage() {
|
||||
title="Recent Thoughts"
|
||||
description="Explorations in design and technology."
|
||||
blogs={[
|
||||
{
|
||||
id: "b1",
|
||||
category: "Design",
|
||||
title: "The Art of Nuance",
|
||||
excerpt: "How detail shapes perception.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-stylus-pen-tablet-screen-car_53876-95142.jpg",
|
||||
authorName: "Michael",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/startup-project-manager-developing-budget-growth-solutions-while-brainstorming-promoting-strategy-financial-department-team-leader-researching-marketing-ideas-while-analyzing-company-expenses-report_482257-40321.jpg",
|
||||
date: "Oct 2025",
|
||||
},
|
||||
{
|
||||
id: "b2",
|
||||
category: "Tech",
|
||||
title: "Scalable Systems",
|
||||
excerpt: "Lessons from high growth.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/architectural-modern-structure-blue-sky-background_23-2148184258.jpg",
|
||||
authorName: "Michael",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/female-logo-designer-working-her-office-graphic-tablet_23-2149119226.jpg",
|
||||
date: "Nov 2025",
|
||||
},
|
||||
{
|
||||
id: "b3",
|
||||
category: "Founder",
|
||||
title: "Building Teams",
|
||||
excerpt: "Scaling through empathy.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-portrait-digital-art_23-2151197854.jpg",
|
||||
authorName: "Michael",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/closeup-caucasian-man-with-poker-face-wearing-glasses-with-red-light-effect_181624-25965.jpg",
|
||||
date: "Dec 2025",
|
||||
},
|
||||
{ id: "b1", category: "Design", title: "The Art of Nuance", excerpt: "How detail shapes perception.", imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-stylus-pen-tablet-screen-car_53876-95142.jpg", authorName: "Michael", authorAvatar: "http://img.b2bpic.net/free-photo/startup-project-manager-developing-budget-growth-solutions-while-brainstorming-promoting-strategy-financial-department-team-leader-researching-marketing-ideas-while-analyzing-company-expenses-report_482257-40321.jpg", date: "Oct 2025" },
|
||||
{ id: "b2", category: "Tech", title: "Scalable Systems", excerpt: "Lessons from high growth.", imageSrc: "http://img.b2bpic.net/free-photo/architectural-modern-structure-blue-sky-background_23-2148184258.jpg", authorName: "Michael", authorAvatar: "http://img.b2bpic.net/free-photo/female-logo-designer-working-her-office-graphic-tablet_23-2149119226.jpg", date: "Nov 2025" },
|
||||
{ id: "b3", category: "Founder", title: "Building Teams", excerpt: "Scaling through empathy.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-portrait-digital-art_23-2151197854.jpg", authorName: "Michael", authorAvatar: "http://img.b2bpic.net/free-photo/closeup-caucasian-man-with-poker-face-wearing-glasses-with-red-light-effect_181624-25965.jpg", date: "Dec 2025" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -203,21 +117,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Abstract Motion",
|
||||
description: "Kinetic typography studies.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138929.jpg",
|
||||
},
|
||||
{
|
||||
title: "3D Sculptures",
|
||||
description: "Experimental form design.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-glass-skyscrapers-blue-sky_181624-6341.jpg",
|
||||
},
|
||||
{
|
||||
title: "Interactive Labs",
|
||||
description: "Browser-based experiences.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-helping-center-design_460848-9855.jpg",
|
||||
},
|
||||
{ title: "Abstract Motion", description: "Kinetic typography studies.", imageSrc: "http://img.b2bpic.net/free-photo/view-3d-car-model_23-2151138929.jpg" },
|
||||
{ title: "3D Sculptures", description: "Experimental form design.", imageSrc: "http://img.b2bpic.net/free-photo/modern-glass-skyscrapers-blue-sky_181624-6341.jpg" },
|
||||
{ title: "Interactive Labs", description: "Browser-based experiences.", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-helping-center-design_460848-9855.jpg" },
|
||||
]}
|
||||
title="Visual Playground"
|
||||
description="Explorations in form and motion."
|
||||
@@ -230,21 +132,9 @@ export default function LandingPage() {
|
||||
title="Stats & Impact"
|
||||
tag="Trusted"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "20+",
|
||||
description: "Years Experience",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "95+",
|
||||
description: "Projects Done",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "200%",
|
||||
description: "Happy Clients",
|
||||
},
|
||||
{ id: "m1", value: "20+", description: "Years Experience" },
|
||||
{ id: "m2", value: "95+", description: "Projects Done" },
|
||||
{ id: "m3", value: "200%", description: "Happy Clients" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -254,21 +144,9 @@ export default function LandingPage() {
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Are you available?",
|
||||
content: "Always open to new collaborations.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Where are you based?",
|
||||
content: "Chicago, IL.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "How to start?",
|
||||
content: "Reach out via email.",
|
||||
},
|
||||
{ id: "f1", title: "Are you available?", content: "Always open to new collaborations." },
|
||||
{ id: "f2", title: "Where are you based?", content: "Chicago, IL." },
|
||||
{ id: "f3", title: "How to start?", content: "Reach out via email." },
|
||||
]}
|
||||
sideTitle="Questions"
|
||||
faqsAnimation="slide-up"
|
||||
@@ -278,15 +156,10 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "canvas-reveal",
|
||||
}}
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
text="Let's build something extraordinary."
|
||||
buttons={[
|
||||
{
|
||||
text: "hello@michaelsmith.com",
|
||||
href: "mailto:hello@michaelsmith.com",
|
||||
},
|
||||
{ text: "hello@michaelsmith.com", href: "mailto:hello@michaelsmith.com" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -295,30 +168,10 @@ export default function LandingPage() {
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
title: "Social", items: [{ label: "Twitter", href: "#" }, { label: "LinkedIn", href: "#" }],
|
||||
},
|
||||
{
|
||||
title: "Work",
|
||||
items: [
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "#works",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
title: "Work", items: [{ label: "Portfolio", href: "#works" }, { label: "About", href: "#about" }],
|
||||
},
|
||||
]}
|
||||
logoText="Michael Smith © 2026"
|
||||
|
||||
Reference in New Issue
Block a user