Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 65a26d7c51 | |||
| 18725ce112 | |||
| fdf95eaa7f | |||
| 8f9b03abe6 | |||
| 11e3241947 |
@@ -7,6 +7,7 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
|
|||||||
import Tag from "@/tag/Tag";
|
import Tag from "@/tag/Tag";
|
||||||
import { getVisualEditScript } from "@/utils/visual-edit-script";
|
import { getVisualEditScript } from "@/utils/visual-edit-script";
|
||||||
import { Archivo } from "next/font/google";
|
import { Archivo } from "next/font/google";
|
||||||
|
import { DM_Sans } from "next/font/google";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -21,8 +22,13 @@ export const metadata: Metadata = {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const archivo = Archivo({
|
|
||||||
variable: "--font-archivo",
|
const dmSans = DM_Sans({
|
||||||
|
variable: "--font-dm-sans",
|
||||||
|
subsets: ["latin"],
|
||||||
|
});
|
||||||
|
const inter = Inter({
|
||||||
|
variable: "--font-inter",
|
||||||
subsets: ["latin"],
|
subsets: ["latin"],
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -34,7 +40,7 @@ export default function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en" suppressHydrationWarning>
|
||||||
<ServiceWrapper>
|
<ServiceWrapper>
|
||||||
<body className={`${archivo.variable} antialiased`}>
|
<body className={`${dmSans.variable} ${inter.variable} antialiased`}>
|
||||||
<Tag />
|
<Tag />
|
||||||
{children}
|
{children}
|
||||||
<script
|
<script
|
||||||
|
|||||||
312
src/app/page.tsx
312
src/app/page.tsx
@@ -2,17 +2,16 @@
|
|||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import ReactLenis from "lenis/react";
|
import ReactLenis from "lenis/react";
|
||||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||||
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
|
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
|
||||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||||
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
||||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||||
import { Award, CheckCircle, Star } from "lucide-react";
|
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
@@ -32,327 +31,108 @@ export default function LandingPage() {
|
|||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleCentered
|
<NavbarStyleCentered
|
||||||
navItems={[
|
navItems={[
|
||||||
{
|
{ name: "Home", id: "hero" },
|
||||||
name: "Home",
|
{ name: "About", id: "about" },
|
||||||
id: "hero",
|
{ name: "Projects", id: "projects" },
|
||||||
},
|
{ name: "Contact", id: "contact" },
|
||||||
{
|
|
||||||
name: "About",
|
|
||||||
id: "about",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Projects",
|
|
||||||
id: "projects",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Contact",
|
|
||||||
id: "contact",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
brandName="PORTFOLIO"
|
brandName="PORTFOLIO"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroBillboardGallery
|
<HeroBillboardScroll
|
||||||
background={{
|
background={{ variant: "radial-gradient" }}
|
||||||
variant: "radial-gradient",
|
|
||||||
}}
|
|
||||||
title="Crafting Digital Experiences"
|
title="Crafting Digital Experiences"
|
||||||
description="I build minimalist, high-performance web applications with a focus on clean design and seamless interactions."
|
description="I build minimalist, high-performance web applications with a focus on clean design and seamless interactions."
|
||||||
mediaItems={[
|
imageSrc="http://img.b2bpic.net/free-photo/top-view-vinyl-record-assortment_23-2149075991.jpg"
|
||||||
{
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-vinyl-record-assortment_23-2149075991.jpg",
|
|
||||||
imageAlt: "Minimal Abstract",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/leaf-shaped-dark-plate-with-eggs-dark-plate_23-2148340402.jpg",
|
|
||||||
imageAlt: "Dark Studio",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/natural-abstract-shadow-details_23-2149210755.jpg",
|
|
||||||
imageAlt: "Architectural Light",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/black-wall-paint-textured-background_53876-133019.jpg",
|
|
||||||
imageAlt: "Black wall paint textured background",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/black-watercolor-background_53876-101915.jpg",
|
|
||||||
imageAlt: "Black watercolor background",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
mediaAnimation="slide-up"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="about" data-section="about">
|
<div id="about" data-section="about">
|
||||||
<AboutMetric
|
<InlineImageSplitTextAbout
|
||||||
|
heading={[{ type: "text", content: "The Numbers Behind My Work" }]}
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
title="The Numbers Behind My Work"
|
|
||||||
metrics={[
|
|
||||||
{
|
|
||||||
icon: CheckCircle,
|
|
||||||
label: "Projects Completed",
|
|
||||||
value: "50+",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Award,
|
|
||||||
label: "Years Experience",
|
|
||||||
value: "5",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
icon: Star,
|
|
||||||
label: "Happy Clients",
|
|
||||||
value: "30+",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
metricsAnimation="slide-up"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="skills" data-section="skills">
|
<div id="skills" data-section="skills">
|
||||||
<FeatureCardSixteen
|
<FeatureCardOne
|
||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
|
gridVariant="uniform-all-items-equal"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
negativeCard={{
|
features={[
|
||||||
items: [
|
{ title: "Performance", description: "Optimized web stack", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vg91tk&_wi=1" },
|
||||||
"Legacy codebase maintenance",
|
{ title: "Design", description: "Clean component-driven UI", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vg91tk&_wi=2" }
|
||||||
"Slow page load times",
|
]}
|
||||||
"Monolithic architectures",
|
|
||||||
],
|
|
||||||
}}
|
|
||||||
positiveCard={{
|
|
||||||
items: [
|
|
||||||
"Modern React/Next.js stack",
|
|
||||||
"Optimized performance patterns",
|
|
||||||
"Component-driven design",
|
|
||||||
],
|
|
||||||
}}
|
|
||||||
title="Technical Expertise"
|
title="Technical Expertise"
|
||||||
description="Balancing complex architecture with intuitive user experiences."
|
description="Balancing complex architecture with intuitive user experiences."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="projects" data-section="projects">
|
<div id="projects" data-section="projects">
|
||||||
<ProductCardThree
|
<ProductCardFour
|
||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
gridVariant="bento-grid"
|
gridVariant="bento-grid"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
products={[
|
|
||||||
{
|
|
||||||
id: "p1",
|
|
||||||
name: "SaaS Platform",
|
|
||||||
price: "Case Study",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-vector/flat-design-geometric-pattern-mobile-design-template_23-2149980070.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p2",
|
|
||||||
name: "Brand Identity",
|
|
||||||
price: "Case Study",
|
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vg91tk",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p3",
|
|
||||||
name: "Mobile App",
|
|
||||||
price: "Case Study",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/person-looking-smartphone-with-smart-home-lights-app-sitting-kitchen-house-with-automation-lighting-system-turning-bulbs-with-voice-command_482257-2256.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p4",
|
|
||||||
name: "E-Commerce",
|
|
||||||
price: "Case Study",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-comfortable-workplace-home-there-are-computer-laptop-table_613910-13270.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p5",
|
|
||||||
name: "Web Tool",
|
|
||||||
price: "Case Study",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/laptop-dark-night-desktop_169016-53733.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p6",
|
|
||||||
name: "Landing Page",
|
|
||||||
price: "Case Study",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320710.jpg",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
title="Selected Work"
|
title="Selected Work"
|
||||||
description="A collection of digital projects and design case studies."
|
description="A collection of digital projects and design case studies."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<TestimonialCardSix
|
<TestimonialCardFifteen
|
||||||
animationType="slide-up"
|
testimonial="Exceptional attention to detail and design execution."
|
||||||
textboxLayout="default"
|
rating={5}
|
||||||
|
author="Alice Chen"
|
||||||
|
avatars={[{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vg91tk", alt: "Alice" }]}
|
||||||
|
ratingAnimation="slide-up"
|
||||||
|
avatarsAnimation="slide-up"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
testimonials={[
|
|
||||||
{
|
|
||||||
id: "1",
|
|
||||||
name: "Alice Chen",
|
|
||||||
handle: "@alice",
|
|
||||||
testimonial: "Exceptional attention to detail and design execution.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-black-sweater-standing-posing_114579-58756.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
name: "Bob Smith",
|
|
||||||
handle: "@bob",
|
|
||||||
testimonial: "Delivered high-quality results ahead of schedule.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3",
|
|
||||||
name: "Clara Wu",
|
|
||||||
handle: "@clara",
|
|
||||||
testimonial: "Innovative solutions to complex UI challenges.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/joyful-woman-black-jacket-liking-lip-posing-isolated-background-charming-lady-dark-suit-smiling-white-backdrop_197531-18516.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "4",
|
|
||||||
name: "David Zuo",
|
|
||||||
handle: "@david",
|
|
||||||
testimonial: "A master of modern web frameworks.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-posing-with-flowers_52683-87229.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "5",
|
|
||||||
name: "Eve Li",
|
|
||||||
handle: "@eve",
|
|
||||||
testimonial: "Transformed our digital presence completely.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021789.jpg",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
title="What Clients Say"
|
|
||||||
description="Collaborative success stories and professional feedback."
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="blog" data-section="blog">
|
<div id="blog" data-section="blog">
|
||||||
<BlogCardThree
|
<BlogCardTwo
|
||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
title="Design Insights"
|
title="Design Insights"
|
||||||
description="Thoughts on web development, design systems, and tech."
|
description="Thoughts on web development and design systems."
|
||||||
blogs={[
|
blogs={[]}
|
||||||
{
|
|
||||||
id: "b1",
|
|
||||||
category: "Design",
|
|
||||||
title: "Minimalism in Web Design",
|
|
||||||
excerpt: "Why less is often more in modern interfaces.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-smartphone-display-mockup-white-background_9975-134379.jpg",
|
|
||||||
authorName: "Author",
|
|
||||||
authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-middle-aged-man-with-beard-hairstyle-dressed-elegant-formal-suit-textured-dark-background-studio_613910-19887.jpg",
|
|
||||||
date: "Oct 12",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "b2",
|
|
||||||
category: "Tech",
|
|
||||||
title: "Next.js Best Practices",
|
|
||||||
excerpt: "Streamlining your development workflow.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/glasses-near-laptop-reflect-light-from-screen-dark-copy-space_169016-14893.jpg",
|
|
||||||
authorName: "Author",
|
|
||||||
authorAvatar: "http://img.b2bpic.net/free-photo/bearded-man-red-tie-shirt-wearing-glasses-looking-camera-smiling-presenting-copy-space-with-arm-his-handstanding-orange-background_141793-110723.jpg",
|
|
||||||
date: "Oct 15",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "b3",
|
|
||||||
category: "Dev",
|
|
||||||
title: "CSS Performance",
|
|
||||||
excerpt: "Optimizing visual rendering in browsers.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-keys-drawing-arrangement_23-2149386326.jpg",
|
|
||||||
authorName: "Author",
|
|
||||||
authorAvatar: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-business-woman_158595-4746.jpg",
|
|
||||||
date: "Oct 20",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="faq" data-section="faq">
|
<div id="faq" data-section="faq">
|
||||||
<FaqDouble
|
<FaqBase
|
||||||
|
faqsAnimation="slide-up"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
faqs={[
|
faqs={[{ id: "1", title: "How do you handle projects?", content: "Iterative design and development." }]}
|
||||||
{
|
|
||||||
id: "1",
|
|
||||||
title: "How do you handle projects?",
|
|
||||||
content: "I follow an iterative design and development process.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
title: "Are you taking new clients?",
|
|
||||||
content: "I am currently accepting select new projects.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3",
|
|
||||||
title: "Where are you based?",
|
|
||||||
content: "I operate remotely globally.",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
title="Common Questions"
|
title="Common Questions"
|
||||||
description="Everything you need to know about working with me."
|
description="Everything you need to know about working with me."
|
||||||
faqsAnimation="slide-up"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactSplitForm
|
<ContactSplit
|
||||||
useInvertedBackground={false}
|
tag="Contact"
|
||||||
|
background={{ variant: "plain" }}
|
||||||
title="Get In Touch"
|
title="Get In Touch"
|
||||||
description="Interested in working together? Let's discuss your next project."
|
description="Interested in working together? Let's discuss your next project."
|
||||||
inputs={[
|
mediaAnimation="slide-up"
|
||||||
{
|
useInvertedBackground={false}
|
||||||
name: "name",
|
|
||||||
type: "text",
|
|
||||||
placeholder: "Name",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "email",
|
|
||||||
type: "email",
|
|
||||||
placeholder: "Email",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/working-desk-businessman_23-2147833279.jpg"
|
imageSrc="http://img.b2bpic.net/free-photo/working-desk-businessman_23-2147833279.jpg"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterBaseReveal
|
<FooterLogoReveal
|
||||||
logoText="PORTFOLIO"
|
logoText="PORTFOLIO"
|
||||||
columns={[
|
leftLink={{ text: "Home", href: "#hero" }}
|
||||||
{
|
rightLink={{ text: "Projects", href: "#projects" }}
|
||||||
title: "Navigation",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: "Home",
|
|
||||||
href: "#hero",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Projects",
|
|
||||||
href: "#projects",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Social",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: "Twitter",
|
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "LinkedIn",
|
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
copyrightText="© 2024 Portfolio. All rights reserved."
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ html {
|
|||||||
body {
|
body {
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-family: var(--font-archivo), sans-serif;
|
font-family: var(--font-inter), sans-serif;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overscroll-behavior: none;
|
overscroll-behavior: none;
|
||||||
@@ -24,5 +24,5 @@ h3,
|
|||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
font-family: var(--font-archivo), sans-serif;
|
font-family: var(--font-dm-sans), sans-serif;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user