bender/9db59a54-60bf-4a88-a3b4-0cdf33ddec35
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge version_7 into main #8

Merged
bender merged 6 commits from version_7 into main 2026-03-09 00:23:53 +00:00
Conversation 0 Commits 6 Files Changed 6 +604 -30
6 changed files with 604 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/app/documentary/page.tsx Normal file
View File

@@ -0,0 +1,152 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FeatureCardMedia from "@/components/sections/feature/FeatureCardMedia";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
export default function DocumentaryPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Projects", id: "/projects" },
{ name: "Vision", id: "/about" },
{ name: "Connect", id: "/connect" },
{ name: "Writing", id: "/writing" },
{ name: "Violin", id: "/violin" },
{ name: "Documentary", id: "/documentary" },
{ name: "Navo", id: "/navo" },
{ name: "Stanford", id: "/stanford" },
];
const footerColumns = [
{
title: "Navigation", items: [
{ label: "Home", href: "/" },
{ label: "Projects", href: "/projects" },
{ label: "Vision", href: "/about" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Connect", items: [
{ label: "Calendly", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" },
{ label: "Substack", href: "https://substack.com/@karuthompson" },
{ label: "X", href: "https://x.com/KaruThompson" },
{ label: "Email", href: "mailto:hello@example.com" },
],
},
{
title: "Resources", items: [
{ label: "Newsletter", href: "#" },
{ label: "Blog", href: "/writing" },
{ label: "Privacy", href: "#" },
{ label: "Terms", href: "#" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="smallMedium"
sizing="largeSmallSizeMediumTitles"
background="floatingGradient"
cardStyle="layered-gradient"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="Portfolio"
bottomLeftText="Crafted with intention"
bottomRightText="Let's connect"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Documentary Feature Film"
description="A cinematic exploration of real stories, authentic voices, and the human experience. This documentary captures moments of transformation, resilience, and the subtle beauty found in everyday life."
tag="Film Production"
tagAnimation="blur-reveal"
textPosition="bottom-left"
showBlur={true}
showDimOverlay={true}
imageSrc="https://images.unsplash.com/photo-1533000971552-74f7b2265582?w=1200&h=600&fit=crop"
imageAlt="Documentary film scene"
buttons={[
{ text: "Watch Trailer", href: "#" },
{ text: "Learn More", href: "#" }
]}
buttonAnimation="blur-reveal"
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
title="Storytelling Through Film"
description={[
"Documentary filmmaking is about capturing truth in its rawest form. <i>It requires patience, empathy, and an unwavering commitment to the subjects' stories.</i> Every frame is a decision, every cut a statement about what matters most.", "This feature film explores narratives that traditional media overlooks—the quiet moments that define us, the challenges that shape our character, and the interconnections that bind us together. <i>Through cinematography, sound design, and thoughtful editing, we transform lived experience into visual poetry.</i>"
]}
useInvertedBackground={true}
showBorder={true}
buttons={[{ text: "View Full Details", href: "#" }]}
buttonAnimation="blur-reveal"
/>
</div>
<div id="features" data-section="features">
<FeatureCardMedia
title="Film Production Highlights"
description="Key elements that bring the documentary to life"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
carouselMode="buttons"
tag="Production"
tagAnimation="blur-reveal"
features={[
{
id: "1", title: "Cinematography", description: "<i>Visual storytelling through carefully composed frames.</i> Capturing authentic moments with artistic intent and technical precision.", tag: "Visual Art", imageSrc: "https://images.unsplash.com/photo-1533000971552-74f7b2265582?w=500&h=400&fit=crop", imageAlt: "Camera equipment"
},
{
id: "2", title: "Sound Design", description: "<i>The voice of film is often unheard.</i> Through strategic sound design, we amplify emotion and create an immersive auditory landscape.", tag: "Audio", imageSrc: "https://images.unsplash.com/photo-1514320291840-2e0a9bf2a9ae?w=500&h=400&fit=crop", imageAlt: "Sound equipment"
},
{
id: "3", title: "Editing & Narrative", description: "<i>The edit suite is where stories find their rhythm.</i> Precise editing transforms raw footage into cohesive narrative that resonates with audiences.", tag: "Post-Production", imageSrc: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=500&h=400&fit=crop", imageAlt: "Editing workstation"
},
]}
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactCTA
tag="Film & Vision"
title="Interested in the project?"
description="Explore the full documentary feature and discover the stories that shaped this cinematic journey."
background={{ variant: "plain" }}
buttons={[
{ text: "View Screening Schedule", href: "#" },
{ text: "Get In Touch", href: "/contact" },
]}
buttonAnimation="blur-reveal"
useInvertedBackground={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={footerColumns}
copyrightText="© 2025 Portfolio. Crafted with intention and creative vision."
/>
</div>
</ThemeProvider>
);
}

2
src/app/layout.tsx
View File

@@ -10,7 +10,7 @@ const crimsonText = Crimson_Text({
});
export const metadata: Metadata = {
title: "Karu Thompson | 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: {
canonical: "https://portfolio.example.com"
},

153
src/app/navo/page.tsx Normal file
View File

@@ -0,0 +1,153 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
export default function NavoPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Projects", id: "/projects" },
{ name: "Vision", id: "/about" },
{ name: "Connect", id: "/connect" },
{ name: "Writing", id: "/writing" },
{ name: "Violin", id: "/violin" },
{ name: "Documentary", id: "/documentary" },
{ name: "Navo", id: "/navo" },
{ name: "Stanford", id: "/stanford" },
];
const footerColumns = [
{
title: "Navigation", items: [
{ label: "Home", href: "/" },
{ label: "Projects", href: "/projects" },
{ label: "Vision", href: "/about" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Connect", items: [
{ label: "Calendly", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" },
{ label: "Substack", href: "https://substack.com/@karuthompson" },
{ label: "X", href: "https://x.com/KaruThompson" },
{ label: "Email", href: "mailto:hello@example.com" },
],
},
{
title: "Resources", items: [
{ label: "Newsletter", href: "#" },
{ label: "Blog", href: "/writing" },
{ label: "Privacy", href: "#" },
{ label: "Terms", href: "#" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="smallMedium"
sizing="largeSmallSizeMediumTitles"
background="floatingGradient"
cardStyle="layered-gradient"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="Portfolio"
bottomLeftText="Crafted with intention"
bottomRightText="Let's connect"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Navo Growth Engine"
description="A comprehensive business platform designed to accelerate growth through data-driven strategies, intelligent automation, and strategic partnerships. Transforming how businesses scale."
tag="Business Platform"
tagAnimation="blur-reveal"
textPosition="center"
showBlur={true}
imageSrc="https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&h=600&fit=crop"
imageAlt="Navo business platform"
buttons={[
{ text: "Explore Platform", href: "https://navo.lab" },
{ text: "Schedule Demo", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" }
]}
buttonAnimation="blur-reveal"
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
title="Accelerating Business Growth"
description={[
"Navo is built on a fundamental principle: <i>sustainable growth requires intelligence, strategy, and execution.</i> We combine data analytics, market insights, and strategic partnerships to create a growth engine that works for your business.", "Our platform empowers businesses to identify opportunities, optimize operations, and scale strategically. <i>Through automation, insights, and connectivity, we transform growth from a challenge into a competitive advantage.</i> Whether you're a startup or an established enterprise, Navo provides the tools and expertise to drive meaningful expansion."
]}
useInvertedBackground={true}
showBorder={true}
buttons={[{ text: "Learn About Services", href: "https://navo.lab" }]}
buttonAnimation="blur-reveal"
/>
</div>
<div id="projects" data-section="projects">
<ProductCardOne
title="Navo Solutions"
description="Core offerings designed to maximize business potential"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
gridVariant="three-columns-all-equal-width"
products={[
{
id: "1", name: "Growth Strategy", price: "Custom", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=300&fit=crop", imageAlt: "Growth strategy consulting", onProductClick: () => window.open("https://navo.lab", "_blank")
},
{
id: "2", name: "Data Analytics", price: "Enterprise", imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop", imageAlt: "Data analytics platform", onProductClick: () => window.open("https://navo.lab", "_blank")
},
{
id: "3", name: "Strategic Partnerships", price: "Ongoing", imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=300&fit=crop", imageAlt: "Partnership network", onProductClick: () => window.open("https://navo.lab", "_blank")
},
]}
carouselMode="buttons"
tag="Business Solutions"
tagAnimation="blur-reveal"
buttons={[{ text: "Explore Full Catalog", href: "https://navo.lab" }]}
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactCTA
tag="Ready to Grow?"
title="Transform Your Business"
description="Connect with the Navo team to discover how our growth engine can accelerate your business trajectory."
background={{ variant: "plain" }}
buttons={[
{ text: "Visit Navo Lab", href: "https://navo.lab" },
{ text: "Book a Demo", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" },
]}
buttonAnimation="blur-reveal"
useInvertedBackground={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={footerColumns}
copyrightText="© 2025 Portfolio. Crafted with intention and creative vision."
/>
</div>
</ThemeProvider>
);
}

68
src/app/page.tsx
View File

@@ -9,23 +9,22 @@ import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import ContactForm from "@/components/form/ContactForm";
import { Twitter } from "lucide-react";
import TextBox from "@/components/Textbox";
export default function HomePage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Explore My Works", id: "/explore" },
{ name: "Projects", id: "/projects" },
{ name: "Vision", id: "/about" },
{ name: "Connect", id: "/connect" },
{ name: "Thoughts", id: "/thoughts" },
{ name: "Writing", id: "/writing" },
];
const footerColumns = [
{
title: "Navigation", items: [
{ label: "Home", href: "/" },
{ label: "Explore My Works", href: "/explore" },
{ label: "Projects", href: "/projects" },
{ label: "Vision", href: "/about" },
{ label: "Contact", href: "/contact" },
],
@@ -41,7 +40,7 @@ export default function HomePage() {
{
title: "Resources", items: [
{ label: "Newsletter", href: "#" },
{ label: "Thoughts", href: "/thoughts" },
{ label: "Blog", href: "/writing" },
{ label: "Privacy", href: "#" },
{ label: "Terms", href: "#" },
],
@@ -64,7 +63,7 @@ export default function HomePage() {
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="Karu Thompson"
brandName="Portfolio"
bottomLeftText="Crafted with intention"
bottomRightText="Let's connect"
/>
@@ -83,13 +82,14 @@ export default function HomePage() {
},
]}
buttons={[
{ text: "Explore My Work", href: "/explore" },
{ text: "Explore My Work", href: "/projects" },
{ text: "Subscribe", href: "#" },
{ text: "Calendly", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" },
{ text: "Substack", href: "https://substack.com/@karuthompson" },
{ text: "X", href: "https://x.com/KaruThompson" },
]}
buttonAnimation="blur-reveal"
useInvertedBackground={false}
tag="Creative Portfolio"
tagAnimation="blur-reveal"
/>
@@ -99,7 +99,7 @@ export default function HomePage() {
<TextSplitAbout
title="About My Vision"
description={[
"I believe in <i>intentional design</i> that bridges creativity and purpose. Every project is an opportunity to explore the intersection of <i>aesthetic sophistication</i> and clear communication.", "My work draws inspiration from <i>film aesthetics</i>, <i>vintage typography</i>, 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}
showBorder={true}
@@ -118,36 +118,46 @@ export default function HomePage() {
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: "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: "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"
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: "/explore" }]}
buttons={[{ text: "View All Projects", href: "/projects" }]}
/>
</div>
<div id="email-signup" data-section="email-signup">
<ContactForm
title="Stay Connected"
description="Subscribe to my Substack for insights on creative vision, design philosophy, and intentional storytelling."
tag="Newsletter"
tagIcon={Twitter}
inputPlaceholder="Enter your email"
buttonText="Subscribe"
termsText="We respect your privacy. Unsubscribe anytime."
onSubmit={(email) => {
window.open(`https://substack.com/@karuthompson`, '_blank');
}}
centered={true}
useInvertedBackground={false}
<div id="thoughts" data-section="thoughts">
<TextBox
title="Personal Reflections"
description="Over time, I've learned that the most impactful work emerges when creativity meets intentionality. These are my ongoing thoughts on design, building, and the creative process."
textboxLayout="default"
center={true}
titleClassName="italic"
buttons={[{ text: "Read My Writing", href: "/writing" }]}
buttonAnimation="blur-reveal"
/>
</div>
<div id="stanford" data-section="stanford">
<TextBox
title="Self-Taught vs Stanford: Choosing My Own Path"
description="I made the unconventional choice to skip traditional college and pursue self-directed learning instead. Rather than following the conventional academic route, I invested in building real-world experience, learning through projects, and developing skills that matter in today's creative landscape. This path taught me discipline, resourcefulness, and the value of continuous learning. Every project became my classroom, every challenge a lesson. This journey has shaped not just my skills, but my philosophy on growth and creation."
textboxLayout="default"
center={false}
titleClassName="italic"
buttons={[{ text: "Explore My Projects", href: "/projects" }]}
buttonAnimation="blur-reveal"
/>
</div>
@@ -170,7 +180,7 @@ 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."
background={{ variant: "plain" }}
buttons={[
{ text: "Explore My Thoughts", href: "/thoughts" },
{ text: "Explore My Writing", href: "#" },
{ text: "Start a Conversation", href: "/contact" },
]}
buttonAnimation="blur-reveal"
@@ -181,7 +191,7 @@ export default function HomePage() {
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={footerColumns}
copyrightText="© 2025 Karu Thompson. Crafted with intention and creative vision."
copyrightText="© 2025 Portfolio. Crafted with intention and creative vision."
/>
</div>
</ThemeProvider>

136
src/app/stanford/page.tsx Normal file
View File

@@ -0,0 +1,136 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
export default function StanfordPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Projects", id: "/projects" },
{ name: "Vision", id: "/about" },
{ name: "Connect", id: "/connect" },
{ name: "Writing", id: "/writing" },
{ name: "Violin", id: "/violin" },
{ name: "Documentary", id: "/documentary" },
{ name: "Navo", id: "/navo" },
{ name: "Stanford", id: "/stanford" },
];
const footerColumns = [
{
title: "Navigation", items: [
{ label: "Home", href: "/" },
{ label: "Projects", href: "/projects" },
{ label: "Vision", href: "/about" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Connect", items: [
{ label: "Calendly", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" },
{ label: "Substack", href: "https://substack.com/@karuthompson" },
{ label: "X", href: "https://x.com/KaruThompson" },
{ label: "Email", href: "mailto:hello@example.com" },
],
},
{
title: "Resources", items: [
{ label: "Newsletter", href: "#" },
{ label: "Blog", href: "/writing" },
{ label: "Privacy", href: "#" },
{ label: "Terms", href: "#" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="smallMedium"
sizing="largeSmallSizeMediumTitles"
background="floatingGradient"
cardStyle="layered-gradient"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="Portfolio"
bottomLeftText="Crafted with intention"
bottomRightText="Let's connect"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Self-Taught vs Stanford"
description="A reflection on the unconventional path taken—skipping the traditional college experience in pursuit of real-world knowledge, skill development, and intellectual freedom. The journey of building expertise outside institutional walls."
tag="Education & Growth"
tagAnimation="blur-reveal"
textPosition="center"
showBlur={true}
imageSrc="https://images.unsplash.com/photo-1427504494785-cdec1122a810?w=1200&h=600&fit=crop"
imageAlt="Self-directed learning journey"
buttons={[{ text: "Explore the Journey", href: "#" }]}
buttonAnimation="blur-reveal"
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
title="The Path Less Traveled"
description={[
"At a crossroads where most follow institutional pathways, a different choice was made. <i>Declining Stanford in favor of self-directed learning represented not a rejection of education, but a reimagining of it.</i> The realization came early: <i>the most transformative learning happens outside the classroom.</i>", "The self-taught path required discipline, resourcefulness, and relentless curiosity. Without a structured curriculum or institutional validation, the burden of learning fell entirely on self-motivation. <i>Yet this freedom created something invaluable: ownership.</i> Every skill acquired, every project completed, every failure navigated became a direct result of personal initiative and drive. The unconventional route revealed that expertise isn't conferred by institutions—it's built through real work, real projects, and real consequences."
]}
useInvertedBackground={true}
showBorder={true}
buttons={[{ text: "Read Full Story", href: "#" }]}
buttonAnimation="blur-reveal"
/>
</div>
<div id="more-insights" data-section="more-insights">
<TextSplitAbout
title="Lessons from the Alternative Path"
description={[
"<i>1. Autonomy Over Authority</i> - Choosing your own curriculum creates deeper engagement than following prescribed paths. When you decide what matters, learning becomes intrinsic, not extrinsic.", "<i>2. Real-World Resonance</i> - Self-taught knowledge is immediately applicable. There's no gap between theory and practice because they're learned simultaneously in real contexts.", "<i>3. Resilience Through Failure</i> - Without institutional safety nets, failures become learning experiences with real consequences. This breeds a different kind of resilience and problem-solving capability.", "<i>4. Network Over Credentials</i> - The self-taught path forces relationship-building and collaboration out of necessity. These networks often prove more valuable than institutional alumni associations.", "<i>5. Continuous Reinvention</i> - <i>Without an institution defining you, you must define yourself—repeatedly.</i> This creates adaptability and forces ongoing growth in ways traditional education often cannot."
]}
useInvertedBackground={false}
showBorder={false}
buttons={[{ text: "Connect and Discuss", href: "/contact" }]}
buttonAnimation="blur-reveal"
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactCTA
tag="Unconventional Education"
title="Interested in this journey?"
description="Let's discuss the intersection of self-directed learning, institutional education, and the future of how we build expertise and create impact."
background={{ variant: "plain" }}
buttons={[
{ text: "Read More Writing", href: "/writing" },
{ text: "Start a Conversation", href: "/contact" },
]}
buttonAnimation="blur-reveal"
useInvertedBackground={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={footerColumns}
copyrightText="© 2025 Portfolio. Crafted with intention and creative vision."
/>
</div>
</ThemeProvider>
);
}

123
src/app/violin/page.tsx Normal file
View File

@@ -0,0 +1,123 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
export default function ViolinPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Projects", id: "/projects" },
{ name: "Vision", id: "/about" },
{ name: "Connect", id: "/connect" },
{ name: "Writing", id: "/writing" },
{ name: "Violin", id: "/violin" },
{ name: "Documentary", id: "/documentary" },
{ name: "Navo", id: "/navo" },
{ name: "Stanford", id: "/stanford" },
];
const footerColumns = [
{
title: "Navigation", items: [
{ label: "Home", href: "/" },
{ label: "Projects", href: "/projects" },
{ label: "Vision", href: "/about" },
{ label: "Contact", href: "/contact" },
],
},
{
title: "Connect", items: [
{ label: "Calendly", href: "https://calendly.com/karu-navolab/growth-engine-demo-navo-lab" },
{ label: "Substack", href: "https://substack.com/@karuthompson" },
{ label: "X", href: "https://x.com/KaruThompson" },
{ label: "Email", href: "mailto:hello@example.com" },
],
},
{
title: "Resources", items: [
{ label: "Newsletter", href: "#" },
{ label: "Blog", href: "/writing" },
{ label: "Privacy", href: "#" },
{ label: "Terms", href: "#" },
],
},
];
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="smallMedium"
sizing="largeSmallSizeMediumTitles"
background="floatingGradient"
cardStyle="layered-gradient"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={navItems}
brandName="Portfolio"
bottomLeftText="Crafted with intention"
bottomRightText="Let's connect"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Violin Study and Performance"
description="A journey through classical technique, musical expression, and the pursuit of artistic mastery. Exploring both the technical foundations and the emotional depth of violin performance."
tag="Classical Music"
tagAnimation="blur-reveal"
textPosition="center"
showBlur={true}
imageSrc="https://images.unsplash.com/photo-1510915361894-db8b60106cb1?w=1200&h=600&fit=crop"
imageAlt="Violin performance"
buttons={[{ text: "Return Home", href: "/" }]}
buttonAnimation="blur-reveal"
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
title="The Art of Violin"
description={[
"Violin study represents a profound commitment to artistic expression and technical discipline. <i>The instrument demands precision, patience, and an unwavering dedication to refinement.</i> Each note becomes a conversation between the musician and the audience, a moment of vulnerability and strength intertwined.", "Performance is where technique transcends into artistry. <i>In those moments on stage, the technical hours dissolve into pure emotional communication.</i> The bow becomes an extension of the voice, the strings a conduit for the soul. This is where classical music lives—not just in the notes, but in the spaces between them, where meaning emerges."
]}
useInvertedBackground={true}
showBorder={true}
buttons={[{ text: "Explore More", href: "/" }]}
buttonAnimation="blur-reveal"
/>
</div>
<div id="contact-cta" data-section="contact-cta">
<ContactCTA
tag="Musical Journey"
title="Discover Classical Excellence"
description="The violin is not just an instrument—it is a gateway to understanding the human experience through sound."
background={{ variant: "plain" }}
buttons={[
{ text: "Listen to Performances", href: "#" },
{ text: "Connect", href: "/contact" },
]}
buttonAnimation="blur-reveal"
useInvertedBackground={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={footerColumns}
copyrightText="© 2025 Portfolio. Crafted with intention and creative vision."
/>
</div>
</ThemeProvider>
);
}