Merge version_4 into main #4
@@ -1,16 +1,12 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Open_Sans } from "next/font/google";
|
||||
import { Crimson_Text } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter", subsets: ["latin"],
|
||||
});
|
||||
|
||||
const openSans = Open_Sans({
|
||||
variable: "--font-open-sans", subsets: ["latin"],
|
||||
const crimsonText = Crimson_Text({
|
||||
variable: "--font-crimson-text", subsets: ["latin"],
|
||||
weight: ["400", "600"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@@ -39,7 +35,7 @@ export default function RootLayout({
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${inter.variable} ${openSans.variable} antialiased`}
|
||||
className={`${crimsonText.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
337
src/app/page.tsx
337
src/app/page.tsx
@@ -60,76 +60,6 @@ export default function HomePage() {
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<style>{`
|
||||
@keyframes drawLine {
|
||||
0% {
|
||||
stroke-dashoffset: 1000;
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tiltShift {
|
||||
0%, 100% {
|
||||
transform: translateY(0) rotateZ(-1deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-8px) rotateZ(1deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sketchCursor {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.decorative-line {
|
||||
stroke-dasharray: 1000;
|
||||
animation: drawLine 4s ease-in-out 2s infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tilt-media {
|
||||
animation: tiltShift 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.sketch-trail {
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.sketch-mark {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
animation: sketchCursor 1.5s ease-out forwards;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<canvas
|
||||
id="sketch-canvas"
|
||||
style={{
|
||||
position: "fixed", top: 0,
|
||||
left: 0,
|
||||
width: "100%", height: "100%", pointerEvents: "none", zIndex: 5,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={navItems}
|
||||
@@ -139,64 +69,30 @@ export default function HomePage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
style={{
|
||||
position: "absolute", top: "100px", left: "50%", transform: "translateX(-50%)", width: "200px", height: "2px", pointerEvents: "none", zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<line
|
||||
x1="0"
|
||||
y1="1"
|
||||
x2="200"
|
||||
y2="1"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
opacity="0.3"
|
||||
className="decorative-line"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<div className="tilt-media">
|
||||
<HeroBillboardTestimonial
|
||||
title="Building ideas into reality"
|
||||
description="A collection of projects, thoughts, and vision. Explore what's in progress, subscribe to my writing, or let's connect."
|
||||
background={{ variant: "plain" }}
|
||||
imageSrc="http://img.b2bpic.net/free-psd/acting-agency-template-landing-page_23-2148797778.jpg"
|
||||
imageAlt="Portfolio hero showcase"
|
||||
mediaAnimation="blur-reveal"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Creative Vision", handle: "Portfolio Focus", testimonial: "Transforming concepts into compelling visual narratives that resonate with audiences and drive meaningful engagement.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png"
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Explore My Work", href: "/projects" },
|
||||
{ text: "Subscribe", href: "#" },
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
tag="Creative Portfolio"
|
||||
tagAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
style={{
|
||||
position: "absolute", top: "600px", left: "10%", width: "150px", height: "50px", pointerEvents: "none", zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<path
|
||||
d="M 10 30 Q 40 5 80 30 T 150 30"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
fill="none"
|
||||
opacity="0.2"
|
||||
className="decorative-line"
|
||||
<HeroBillboardTestimonial
|
||||
title="Building ideas into reality"
|
||||
description="A collection of projects, thoughts, and vision. Explore what's in progress, subscribe to my writing, or let's connect."
|
||||
background={{ variant: "plain" }}
|
||||
imageSrc="http://img.b2bpic.net/free-psd/acting-agency-template-landing-page_23-2148797778.jpg"
|
||||
imageAlt="Portfolio hero showcase"
|
||||
mediaAnimation="blur-reveal"
|
||||
testimonials={[
|
||||
{
|
||||
name: "Creative Vision", handle: "Portfolio Focus", testimonial: "Transforming concepts into compelling visual narratives that resonate with audiences and drive meaningful engagement.", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png"
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Explore My Work", href: "/projects" },
|
||||
{ text: "Subscribe", href: "#" },
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
tag="Creative Portfolio"
|
||||
tagAnimation="blur-reveal"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
@@ -211,68 +107,34 @@ export default function HomePage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
style={{
|
||||
position: "absolute", top: "900px", right: "5%", width: "100px", height: "100px", pointerEvents: "none", zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="40"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
fill="none"
|
||||
opacity="0.2"
|
||||
className="decorative-line"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div id="projects" data-section="projects">
|
||||
<div className="tilt-media">
|
||||
<ProductCardTwo
|
||||
title="Selected Projects"
|
||||
description="A curated selection of work demonstrating creative vision and strategic thinking across design and digital mediums."
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
products={[
|
||||
{
|
||||
id: "1", brand: "Visual Identity", name: "Brand Narrative Series", price: "2024", rating: 5,
|
||||
reviewCount: "Strategic Design", imageSrc: "http://img.b2bpic.net/free-photo/startup-business-people-looking-strategy-board-information-thoughtful_53876-22977.jpg?_wi=1", imageAlt: "Brand narrative project"
|
||||
},
|
||||
{
|
||||
id: "2", brand: "Digital Experience", name: "Interactive Storytelling", price: "2024", rating: 5,
|
||||
reviewCount: "Web Design", imageSrc: "http://img.b2bpic.net/free-photo/top-photo-camera-laptop-vintage-tone-wooden-background_482257-35230.jpg?_wi=1", imageAlt: "Digital experience project"
|
||||
},
|
||||
{
|
||||
id: "3", brand: "Creative Direction", name: "Visual Language System", price: "2024", rating: 5,
|
||||
reviewCount: "Brand Strategy", imageSrc: "http://img.b2bpic.net/free-vector/geometric-gradient-shapes-cover-collection_52683-32230.jpg?_wi=1", imageAlt: "Creative direction project"
|
||||
},
|
||||
]}
|
||||
carouselMode="buttons"
|
||||
tag="Portfolio Showcase"
|
||||
tagAnimation="blur-reveal"
|
||||
buttons={[{ text: "View All Projects", href: "/projects" }]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
style={{
|
||||
position: "absolute", top: "1400px", left: "50%", transform: "translateX(-50%)", width: "120px", height: "80px", pointerEvents: "none", zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<polyline
|
||||
points="10,70 40,20 70,50 100,10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
fill="none"
|
||||
opacity="0.2"
|
||||
className="decorative-line"
|
||||
<ProductCardTwo
|
||||
title="Selected Projects"
|
||||
description="A curated selection of work demonstrating creative vision and strategic thinking across design and digital mediums."
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
products={[
|
||||
{
|
||||
id: "1", brand: "Visual Identity", name: "Brand Narrative Series", price: "2024", rating: 5,
|
||||
reviewCount: "Strategic Design", imageSrc: "http://img.b2bpic.net/free-photo/startup-business-people-looking-strategy-board-information-thoughtful_53876-22977.jpg?_wi=1", imageAlt: "Brand narrative project"
|
||||
},
|
||||
{
|
||||
id: "2", brand: "Digital Experience", name: "Interactive Storytelling", price: "2024", rating: 5,
|
||||
reviewCount: "Web Design", imageSrc: "http://img.b2bpic.net/free-photo/top-photo-camera-laptop-vintage-tone-wooden-background_482257-35230.jpg?_wi=1", imageAlt: "Digital experience project"
|
||||
},
|
||||
{
|
||||
id: "3", brand: "Creative Direction", name: "Visual Language System", price: "2024", rating: 5,
|
||||
reviewCount: "Brand Strategy", imageSrc: "http://img.b2bpic.net/free-vector/geometric-gradient-shapes-cover-collection_52683-32230.jpg?_wi=1", imageAlt: "Creative direction project"
|
||||
},
|
||||
]}
|
||||
carouselMode="buttons"
|
||||
tag="Portfolio Showcase"
|
||||
tagAnimation="blur-reveal"
|
||||
buttons={[{ text: "View All Projects", href: "/projects" }]}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardFifteen
|
||||
@@ -290,21 +152,6 @@ export default function HomePage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
style={{
|
||||
position: "absolute", top: "1800px", left: "15%", width: "180px", height: "60px", pointerEvents: "none", zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<path
|
||||
d="M 10 40 L 40 10 L 70 40 L 100 15 L 140 45 L 180 20"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1"
|
||||
fill="none"
|
||||
opacity="0.2"
|
||||
className="decorative-line"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div id="connect" data-section="connect">
|
||||
<SocialProofOne
|
||||
title="Connect With Me"
|
||||
@@ -317,21 +164,6 @@ export default function HomePage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<svg
|
||||
style={{
|
||||
position: "absolute", top: "2200px", right: "8%", width: "140px", height: "70px", pointerEvents: "none", zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<path
|
||||
d="M 10 50 Q 40 10 70 50 T 140 50"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
fill="none"
|
||||
opacity="0.2"
|
||||
className="decorative-line"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactCTA
|
||||
tag="Get In Touch"
|
||||
@@ -353,79 +185,6 @@ export default function HomePage() {
|
||||
copyrightText="© 2025 Portfolio. Crafted with intention and creative vision."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<script>{`
|
||||
(function() {
|
||||
const canvas = document.getElementById('sketch-canvas');
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
let mouseX = 0;
|
||||
let mouseY = 0;
|
||||
let isDrawing = false;
|
||||
|
||||
const strokes = [];
|
||||
|
||||
const sketchColors = ['rgba(0, 0, 0, 0.15)', 'rgba(100, 100, 100, 0.1)', 'rgba(50, 50, 50, 0.12)'];
|
||||
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
mouseX = e.clientX;
|
||||
mouseY = e.clientY;
|
||||
|
||||
if (Math.random() > 0.92) {
|
||||
const offsets = [
|
||||
{ x: Math.random() * 20 - 10, y: Math.random() * 20 - 10 },
|
||||
{ x: Math.random() * 15 - 7, y: Math.random() * 15 - 7 }
|
||||
];
|
||||
|
||||
offsets.forEach(offset => {
|
||||
const stroke = {
|
||||
x: mouseX + offset.x,
|
||||
y: mouseY + offset.y,
|
||||
size: Math.random() * 3 + 1,
|
||||
opacity: Math.random() * 0.4 + 0.3,
|
||||
color: sketchColors[Math.floor(Math.random() * sketchColors.length)],
|
||||
life: 1
|
||||
};
|
||||
strokes.push(stroke);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function animate() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
for (let i = strokes.length - 1; i >= 0; i--) {
|
||||
const stroke = strokes[i];
|
||||
stroke.life -= 0.02;
|
||||
|
||||
if (stroke.life <= 0) {
|
||||
strokes.splice(i, 1);
|
||||
continue;
|
||||
}
|
||||
|
||||
ctx.fillStyle = stroke.color;
|
||||
ctx.globalAlpha = stroke.life * 0.5;
|
||||
ctx.beginPath();
|
||||
ctx.arc(stroke.x, stroke.y, stroke.size, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
ctx.globalAlpha = 1;
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
});
|
||||
})();
|
||||
`}</script>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ html {
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-open-sans), sans-serif;
|
||||
font-family: var(--font-crimson-text), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
@@ -24,5 +24,5 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
font-family: var(--font-crimson-text), sans-serif;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user