Merge version_3 into main #6
@@ -1,6 +1,11 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter", subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Portfolio", description: "Creative Professional & Designer"
|
||||
};
|
||||
@@ -12,7 +17,7 @@ export default function RootLayout({
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<body className={inter.variable}>
|
||||
{children}
|
||||
|
||||
<script
|
||||
|
||||
199
src/app/page.tsx
199
src/app/page.tsx
@@ -1,169 +1,78 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
||||
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
||||
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
||||
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
|
||||
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
||||
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import { Mail, Linkedin, Github } from "lucide-react";
|
||||
import { ThemeProvider } from "@/components/theme/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroPersonalLinks from "@/components/sections/hero/HeroPersonalLinks";
|
||||
import TextAbout from "@/components/sections/about/TextAbout";
|
||||
import { Mail, Github, Linkedin, ExternalLink } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
export default function Home() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Portfolio"
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Work", id: "work" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Projects", id: "#projects" }
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
bottomLeftText="Student Developer"
|
||||
bottomRightText="hello@example.com"
|
||||
/>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
title="Creative Professional & Designer"
|
||||
description="I craft beautiful, thoughtful digital experiences. Specializing in modern design and web development to bring your vision to life."
|
||||
background={{ variant: "glowing-orb" }}
|
||||
tag="Welcome"
|
||||
tagAnimation="blur-reveal"
|
||||
buttons={[
|
||||
{ text: "View My Work", href: "#work" },
|
||||
{ text: "Get In Touch", href: "#contact" },
|
||||
<HeroPersonalLinks
|
||||
background={{ variant: "plain" }}
|
||||
title="Hi, I'm a Student Developer"
|
||||
socialLinks={[
|
||||
{ icon: Github, label: "GitHub", href: "https://github.com" },
|
||||
{ icon: Linkedin, label: "LinkedIn", href: "https://linkedin.com" },
|
||||
{ icon: Mail, label: "Email", href: "mailto:hello@example.com" }
|
||||
]}
|
||||
linkCards={[
|
||||
{
|
||||
title: "My Projects", description: "Check out what I've built", button: { text: "View", href: "#projects" }
|
||||
},
|
||||
{
|
||||
title: "About Me", description: "Learn more about my background", button: { text: "Read", href: "#about" }
|
||||
},
|
||||
{
|
||||
title: "Get in Touch", description: "Let's work together", button: { text: "Contact", href: "mailto:hello@example.com" }
|
||||
}
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1"
|
||||
imageAlt="Professional portrait"
|
||||
mediaAnimation="slide-up"
|
||||
imagePosition="right"
|
||||
fixedMediaHeight={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
heading={[
|
||||
{
|
||||
type: "text", content: "Passionate about creating elegant solutions through"},
|
||||
{
|
||||
type: "image", src: "http://img.b2bpic.net/free-vector/naive-ai-stickers-collection_23-2150522590.jpg", alt: "Design icon"},
|
||||
{
|
||||
type: "text", content: "design and development"},
|
||||
]}
|
||||
<TextAbout
|
||||
tag="About"
|
||||
title="I'm a student passionate about building clean, simple web applications that solve real problems."
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "Download Resume", href: "#" },
|
||||
{ text: "My Projects", href: "#projects" },
|
||||
{ text: "Contact Me", href: "mailto:hello@example.com" }
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="work" data-section="work">
|
||||
<FeatureCardTwentyFour
|
||||
title="Featured Projects"
|
||||
description="A selection of recent work that demonstrates my approach to design and development"
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Brand Identity System", author: "2024", description:
|
||||
"Comprehensive brand identity system including logo, typography, color palette, and design guidelines for a tech startup.", tags: ["Branding", "Design System"],
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-vector/corporate-branding-set_1057-860.jpg", imageAlt: "Brand identity design"},
|
||||
{
|
||||
id: "2", title: "E-commerce Platform Redesign", author: "2024", description:
|
||||
"Complete UX/UI redesign of e-commerce platform resulting in 40% improvement in conversion rates.", tags: ["UX Design", "Web Development"],
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-vector/landing-page-template-second-hand-fashion-store_52683-109215.jpg", imageAlt: "E-commerce platform"},
|
||||
{
|
||||
id: "3", title: "Mobile App Interface", author: "2023", description:
|
||||
"User-centered interface design for a productivity mobile application with focus on accessibility and usability.", tags: ["Mobile Design", "UI/UX"],
|
||||
imageSrc:
|
||||
"http://img.b2bpic.net/free-vector/mobile-app-concept_52683-5155.jpg", imageAlt: "Mobile app interface"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
<div id="projects" data-section="projects">
|
||||
<TextAbout
|
||||
tag="Projects"
|
||||
title="Simple projects showcasing what I'm learning and building."
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Sarah Johnson", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=1", imageAlt: "Sarah Johnson"},
|
||||
{
|
||||
id: "2", name: "Michael Chen", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "Michael Chen"},
|
||||
{
|
||||
id: "3", name: "Emma Davis", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=2", imageAlt: "Emma Davis"},
|
||||
{
|
||||
id: "4", name: "James Wilson", imageSrc:
|
||||
"http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3", imageAlt: "James Wilson"},
|
||||
]}
|
||||
cardTitle="Trusted by 50+ Clients Worldwide"
|
||||
cardTag="See what they say"
|
||||
cardAnimation="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactFaq
|
||||
ctaTitle="Let's Work Together"
|
||||
ctaDescription="I'm always interested in hearing about new projects. Feel free to reach out and let's create something amazing."
|
||||
ctaButton={{
|
||||
text: "Send Email", href: "mailto:hello@example.com"}}
|
||||
ctaIcon={Mail}
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "What's your typical project timeline?", content:
|
||||
"Most projects take 4-12 weeks depending on scope and complexity. I'll provide a detailed timeline during our initial consultation."},
|
||||
{
|
||||
id: "2", title: "Do you offer maintenance and support?", content:
|
||||
"Yes, I provide ongoing support and maintenance packages to ensure your project runs smoothly after launch."},
|
||||
{
|
||||
id: "3", title: "What's your design process?", content:
|
||||
"My process includes discovery, research, wireframing, design, prototyping, and iteration based on feedback."},
|
||||
{
|
||||
id: "4", title: "Can you work with existing designs?", content:
|
||||
"Absolutely. I can work with your existing brand guidelines and designs to maintain consistency."},
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
accordionAnimationType="smooth"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Portfolio"
|
||||
copyrightText="© 2025 | All rights reserved"
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Linkedin,
|
||||
href: "https://linkedin.com", ariaLabel: "LinkedIn"},
|
||||
{
|
||||
icon: Github,
|
||||
href: "https://github.com", ariaLabel: "GitHub"},
|
||||
{
|
||||
icon: Mail,
|
||||
href: "mailto:hello@example.com", ariaLabel: "Email"},
|
||||
buttons={[
|
||||
{ text: "GitHub", href: "https://github.com" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -11,7 +11,7 @@ html {
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-public-sans), sans-serif;
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
@@ -24,5 +24,5 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-public-sans), sans-serif;
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user