Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| df80a2bebb | |||
| 1d1b1d61ad | |||
| 50950b0d7d | |||
| 6bf6fde65d | |||
| 65fb5febac | |||
| aaf8dcfd07 | |||
| ab99b034ba | |||
| 65e7b084fc | |||
| 9dc870c9b3 |
@@ -1,26 +1,24 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Inter } from "next/font/google";
|
import { Crimson_Text } from "next/font/google";
|
||||||
import { Open_Sans } from "next/font/google";
|
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||||
import Tag from "@/tag/Tag";
|
import Tag from "@/tag/Tag";
|
||||||
|
|
||||||
const inter = Inter({
|
const crimsonText = Crimson_Text({
|
||||||
variable: "--font-inter", subsets: ["latin"],
|
variable: "--font-crimson-text", subsets: ["latin"],
|
||||||
});
|
weight: ["400", "600"],
|
||||||
|
|
||||||
const openSans = Open_Sans({
|
|
||||||
variable: "--font-open-sans", subsets: ["latin"],
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Building Ideas Into Reality | Creative Portfolio", description: "A collection of projects, thoughts, and creative vision. Explore work across design, digital experience, and strategic direction.", keywords: "portfolio, creative design, digital experience, brand strategy, visual storytelling", metadataBase: new URL("https://portfolio.example.com"),
|
title: "Building Ideas Into Reality | Creative Portfolio", description: "A collection of projects, thoughts, and creative vision. Explore work across design, digital experience, and strategic direction.", keywords: "portfolio, creative design, digital experience, brand strategy, visual storytelling", metadataBase: new URL("https://portfolio.example.com"),
|
||||||
alternates: {
|
alternates: {
|
||||||
canonical: "https://portfolio.example.com"},
|
canonical: "https://portfolio.example.com"
|
||||||
|
},
|
||||||
openGraph: {
|
openGraph: {
|
||||||
title: "Building Ideas Into Reality", description: "Creative portfolio showcasing intentional design and strategic vision.", type: "website", siteName: "Portfolio", images: [
|
title: "Building Ideas Into Reality", description: "Creative portfolio showcasing intentional design and strategic vision.", type: "website", siteName: "Portfolio", images: [
|
||||||
{
|
{
|
||||||
url: "http://img.b2bpic.net/free-psd/acting-agency-template-landing-page_23-2148797778.jpg", alt: "Portfolio showcase"},
|
url: "http://img.b2bpic.net/free-psd/acting-agency-template-landing-page_23-2148797778.jpg", alt: "Portfolio showcase"
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
twitter: {
|
twitter: {
|
||||||
@@ -37,7 +35,7 @@ export default function RootLayout({
|
|||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en" suppressHydrationWarning>
|
||||||
<ServiceWrapper>
|
<ServiceWrapper>
|
||||||
<body
|
<body
|
||||||
className={`${inter.variable} ${openSans.variable} antialiased`}
|
className={`${crimsonText.variable} antialiased`}
|
||||||
>
|
>
|
||||||
<Tag />
|
<Tag />
|
||||||
{children}
|
{children}
|
||||||
|
|||||||
357
src/app/page.tsx
357
src/app/page.tsx
@@ -6,7 +6,6 @@ import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/Nav
|
|||||||
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
|
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
|
||||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
||||||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||||||
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
||||||
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||||
@@ -31,9 +30,9 @@ export default function HomePage() {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Connect", items: [
|
title: "Connect", items: [
|
||||||
{ label: "Twitter", href: "https://twitter.com" },
|
{ label: "Calendly", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" },
|
||||||
{ label: "LinkedIn", href: "https://linkedin.com" },
|
{ label: "Substack", href: "https://substack.com/@karuthompson" },
|
||||||
{ label: "Instagram", href: "https://instagram.com" },
|
{ label: "X", href: "https://x.com/KaruThompson" },
|
||||||
{ label: "Email", href: "mailto:hello@example.com" },
|
{ label: "Email", href: "mailto:hello@example.com" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@@ -60,76 +59,6 @@ export default function HomePage() {
|
|||||||
secondaryButtonStyle="layered"
|
secondaryButtonStyle="layered"
|
||||||
headingFontWeight="light"
|
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">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleFullscreen
|
<NavbarStyleFullscreen
|
||||||
navItems={navItems}
|
navItems={navItems}
|
||||||
@@ -139,69 +68,38 @@ export default function HomePage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</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 id="hero" data-section="hero">
|
||||||
<div className="tilt-media">
|
<HeroBillboardTestimonial
|
||||||
<HeroBillboardTestimonial
|
title="Building ideas into reality"
|
||||||
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."
|
||||||
description="A collection of projects, thoughts, and vision. Explore what's in progress, subscribe to my writing, or let's connect."
|
background={{ variant: "plain" }}
|
||||||
background={{ variant: "plain" }}
|
mediaAnimation="blur-reveal"
|
||||||
imageSrc="http://img.b2bpic.net/free-psd/acting-agency-template-landing-page_23-2148797778.jpg"
|
testimonials={[
|
||||||
imageAlt="Portfolio hero showcase"
|
{
|
||||||
mediaAnimation="blur-reveal"
|
name: "Creative Vision", handle: "Portfolio Focus", testimonial: "Transforming concepts into compelling visual narratives that resonate with audiences and drive meaningful engagement.", rating: 5,
|
||||||
testimonials={[
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png"
|
||||||
{
|
},
|
||||||
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" },
|
||||||
buttons={[
|
{ text: "Subscribe", href: "#" },
|
||||||
{ text: "Explore My Work", href: "/projects" },
|
{ text: "Calendly", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" },
|
||||||
{ text: "Subscribe", href: "#" },
|
{ text: "Substack", href: "https://substack.com/@karuthompson" },
|
||||||
]}
|
{ text: "X", href: "https://x.com/KaruThompson" },
|
||||||
buttonAnimation="blur-reveal"
|
]}
|
||||||
useInvertedBackground={false}
|
buttonAnimation="blur-reveal"
|
||||||
tag="Creative Portfolio"
|
useInvertedBackground={false}
|
||||||
tagAnimation="blur-reveal"
|
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"
|
|
||||||
/>
|
/>
|
||||||
</svg>
|
</div>
|
||||||
|
|
||||||
<div id="about" data-section="about">
|
<div id="about" data-section="about">
|
||||||
<TextSplitAbout
|
<TextSplitAbout
|
||||||
title="About My Vision"
|
title="About My Vision"
|
||||||
description={[
|
description={[
|
||||||
"I believe in intentional design that bridges creativity and purpose. Every project is an opportunity to explore the intersection of aesthetic sophistication and clear communication.", "My work draws inspiration from film aesthetics, vintage typography, and minimalist principles. I create digital experiences that feel thoughtfully crafted, inviting audiences to engage deeply with ideas and stories."]}
|
"I believe in intentional design that bridges creativity and purpose. Every project is an opportunity to explore the intersection of aesthetic sophistication and clear communication.", "My work draws inspiration from film aesthetics, vintage typography, and minimalist principles. I create digital experiences that feel thoughtfully crafted, inviting audiences to engage deeply with ideas and stories."
|
||||||
|
]}
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
showBorder={true}
|
showBorder={true}
|
||||||
buttons={[{ text: "View Full Story", href: "/about" }]}
|
buttons={[{ text: "View Full Story", href: "/about" }]}
|
||||||
@@ -209,123 +107,47 @@ export default function HomePage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</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 id="projects" data-section="projects">
|
||||||
<div className="tilt-media">
|
<ProductCardTwo
|
||||||
<ProductCardTwo
|
title="Selected Projects"
|
||||||
title="Selected Projects"
|
description="A curated selection of work demonstrating creative vision and strategic thinking across design and digital mediums."
|
||||||
description="A curated selection of work demonstrating creative vision and strategic thinking across design and digital mediums."
|
textboxLayout="default"
|
||||||
textboxLayout="default"
|
animationType="slide-up"
|
||||||
animationType="slide-up"
|
useInvertedBackground={false}
|
||||||
useInvertedBackground={false}
|
gridVariant="three-columns-all-equal-width"
|
||||||
gridVariant="three-columns-all-equal-width"
|
products={[
|
||||||
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"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div id="testimonial" data-section="testimonial">
|
|
||||||
<TestimonialCardFifteen
|
|
||||||
testimonial="An exceptional creative mind who transforms complex ideas into visually compelling narratives. Working with them elevated our entire brand presence."
|
|
||||||
rating={5}
|
|
||||||
author="Creative Director, Strategic Brand Partners"
|
|
||||||
avatars={[
|
|
||||||
{
|
{
|
||||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png", alt: "Creative collaborator"},
|
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"
|
||||||
|
},
|
||||||
]}
|
]}
|
||||||
ratingAnimation="blur-reveal"
|
carouselMode="buttons"
|
||||||
avatarsAnimation="blur-reveal"
|
tag="Portfolio Showcase"
|
||||||
useInvertedBackground={true}
|
tagAnimation="blur-reveal"
|
||||||
|
buttons={[{ text: "View All Projects", href: "/projects" }]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</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">
|
<div id="connect" data-section="connect">
|
||||||
<SocialProofOne
|
<SocialProofOne
|
||||||
title="Connect With Me"
|
title="Connect With Me"
|
||||||
description="Let's explore ideas together. Reach out through any of these channels."
|
description="Let's explore ideas together. Reach out through any of these channels."
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
names={["Twitter", "LinkedIn", "Instagram", "Email", "Newsletter"]}
|
names={["Calendly", "Substack", "X", "Email", "Newsletter"]}
|
||||||
speed={40}
|
speed={40}
|
||||||
showCard={true}
|
showCard={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</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">
|
<div id="contact-cta" data-section="contact-cta">
|
||||||
<ContactCTA
|
<ContactCTA
|
||||||
tag="Get In Touch"
|
tag="Get In Touch"
|
||||||
@@ -333,8 +155,8 @@ export default function HomePage() {
|
|||||||
description="Whether you're exploring new creative directions, developing a project, or simply want to discuss ideas, I'd love to hear from you."
|
description="Whether you're exploring new creative directions, developing a project, or simply want to discuss ideas, I'd love to hear from you."
|
||||||
background={{ variant: "plain" }}
|
background={{ variant: "plain" }}
|
||||||
buttons={[
|
buttons={[
|
||||||
|
{ text: "Explore My Writing", href: "#" },
|
||||||
{ text: "Start a Conversation", href: "/contact" },
|
{ text: "Start a Conversation", href: "/contact" },
|
||||||
{ text: "Subscribe to My Writing", href: "#" },
|
|
||||||
]}
|
]}
|
||||||
buttonAnimation="blur-reveal"
|
buttonAnimation="blur-reveal"
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
@@ -347,79 +169,6 @@ export default function HomePage() {
|
|||||||
copyrightText="© 2025 Portfolio. Crafted with intention and creative vision."
|
copyrightText="© 2025 Portfolio. Crafted with intention and creative vision."
|
||||||
/>
|
/>
|
||||||
</div>
|
</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>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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-open-sans), sans-serif;
|
font-family: var(--font-crimson-text), 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-inter), sans-serif;
|
font-family: var(--font-crimson-text), sans-serif;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user