Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| eb151a070e | |||
| 2f0027a83b | |||
| 76e062281c | |||
| 3a0e67d4c3 | |||
| 187b9959b6 | |||
| ccba883c95 |
@@ -1,6 +1,11 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
|
import { Inter } from "next/font/google";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
|
||||||
|
const inter = Inter({
|
||||||
|
variable: "--font-inter", subsets: ["latin"],
|
||||||
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Portfolio", description: "Creative Professional & Designer"
|
title: "Portfolio", description: "Creative Professional & Designer"
|
||||||
};
|
};
|
||||||
@@ -12,7 +17,7 @@ export default function RootLayout({
|
|||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body>
|
<body className={inter.variable}>
|
||||||
{children}
|
{children}
|
||||||
|
|
||||||
<script
|
<script
|
||||||
|
|||||||
189
src/app/page.tsx
189
src/app/page.tsx
@@ -1,169 +1,80 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||||
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
import HeroPersonalLinks from "@/components/sections/hero/HeroPersonalLinks";
|
||||||
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
import TextAbout from "@/components/sections/about/TextAbout";
|
||||||
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
|
import { Mail, Github, Linkedin, ExternalLink } from "lucide-react";
|
||||||
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";
|
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="elastic-effect"
|
defaultButtonVariant="hover-magnetic"
|
||||||
defaultTextAnimation="reveal-blur"
|
defaultTextAnimation="entrance-slide"
|
||||||
borderRadius="soft"
|
borderRadius="soft"
|
||||||
contentWidth="compact"
|
contentWidth="compact"
|
||||||
sizing="mediumLargeSizeLargeTitles"
|
sizing="medium"
|
||||||
background="circleGradient"
|
background="none"
|
||||||
cardStyle="layered-gradient"
|
cardStyle="solid"
|
||||||
primaryButtonStyle="primary-glow"
|
primaryButtonStyle="flat"
|
||||||
secondaryButtonStyle="glass"
|
secondaryButtonStyle="solid"
|
||||||
headingFontWeight="medium"
|
headingFontWeight="normal"
|
||||||
>
|
>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleApple
|
<NavbarStyleFullscreen
|
||||||
brandName="Portfolio"
|
|
||||||
navItems={[
|
navItems={[
|
||||||
{ name: "About", id: "about" },
|
{ name: "Home", id: "/" },
|
||||||
{ name: "Work", id: "work" },
|
{ name: "About", id: "#about" },
|
||||||
{ name: "Contact", id: "contact" },
|
{ name: "Projects", id: "#projects" }
|
||||||
]}
|
]}
|
||||||
|
brandName="Portfolio"
|
||||||
|
bottomLeftText="Student Developer"
|
||||||
|
bottomRightText="hello@example.com"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroSplit
|
<HeroPersonalLinks
|
||||||
title="Creative Professional & Designer"
|
background={{ variant: "plain" }}
|
||||||
description="I craft beautiful, thoughtful digital experiences. Specializing in modern design and web development to bring your vision to life."
|
title="Hi, I'm a Student Developer"
|
||||||
background={{ variant: "glowing-orb" }}
|
socialLinks={[
|
||||||
tag="Welcome"
|
{ icon: Github, label: "GitHub", href: "https://github.com" },
|
||||||
tagAnimation="blur-reveal"
|
{ icon: Linkedin, label: "LinkedIn", href: "https://linkedin.com" },
|
||||||
buttons={[
|
{ icon: Mail, label: "Email", href: "mailto:hello@example.com" }
|
||||||
{ text: "View My Work", href: "#work" },
|
]}
|
||||||
{ text: "Get In Touch", href: "#contact" },
|
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>
|
||||||
|
|
||||||
<div id="about" data-section="about">
|
<div id="about" data-section="about">
|
||||||
<InlineImageSplitTextAbout
|
<TextAbout
|
||||||
heading={[
|
tag="About"
|
||||||
{
|
title="I'm a student passionate about building clean, simple web applications that solve real problems."
|
||||||
type: "text", content: "Passionate about creating elegant solutions through"},
|
useInvertedBackground={false}
|
||||||
{
|
|
||||||
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"},
|
|
||||||
]}
|
|
||||||
buttons={[
|
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>
|
||||||
|
|
||||||
<div id="work" data-section="work">
|
<div id="projects" data-section="projects">
|
||||||
<FeatureCardTwentyFour
|
<TextAbout
|
||||||
title="Featured Projects"
|
tag="Projects"
|
||||||
description="A selection of recent work that demonstrates my approach to design and development"
|
title="Simple projects showcasing what I'm learning and building."
|
||||||
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"
|
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
/>
|
buttons={[
|
||||||
</div>
|
{ text: "GitHub", href: "https://github.com" }
|
||||||
|
|
||||||
<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"},
|
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -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-public-sans), 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-public-sans), sans-serif;
|
font-family: var(--font-inter), sans-serif;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user