mirror of
https://github.com/kennethreitz/kennethreitz.org.git
synced 2026-06-05 22:50:17 +00:00
kennethreitz
f1e47952d2
Increased opacity values across all sacred geometry layers for better visibility while maintaining subtlety. Added hover effects, transitions, and scroll-based intensity changes. Introduced new sacred geometry layers including Sri Yantra, Tree of Life, and Vesica Piscis patterns. Added particle systems that respond to mouse movement and scroll events. Enhanced time-based variations and user activity responsive animations. Improved responsive behavior across different screen sizes.
1256 lines
61 KiB
HTML
1256 lines
61 KiB
HTML
<!doctype html>
|
||
<html lang="en" class="antialiased">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>
|
||
{% block title %}{{ title }} - Kenneth Reitz{% endblock %}
|
||
</title>
|
||
|
||
<!-- Load Google Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
|
||
<!-- Load Tufte CSS -->
|
||
<link rel="stylesheet" href="/static/et-book.css" />
|
||
<link rel="stylesheet" href="/static/tufte/tufte.css" />
|
||
<link rel="stylesheet" href="/static/custom-tufte.css" />
|
||
|
||
<!-- Load Tailwind CSS -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
heroku: {
|
||
50: "#f8f7fd",
|
||
100: "#f0eef9",
|
||
200: "#e3e0f4",
|
||
300: "#d0c8ec",
|
||
400: "#b5a7e0",
|
||
500: "#9b86d3",
|
||
600: "#8265c4",
|
||
700: "#6f52b0",
|
||
800: "#5c4394",
|
||
900: "#4e3979",
|
||
950: "#3a2b5c",
|
||
},
|
||
primary: {
|
||
DEFAULT: "#4e3979",
|
||
50: "#f8f7fd",
|
||
100: "#f0eef9",
|
||
200: "#e3e0f4",
|
||
300: "#d0c8ec",
|
||
400: "#b5a7e0",
|
||
500: "#9b86d3",
|
||
600: "#8265c4",
|
||
700: "#6f52b0",
|
||
800: "#5c4394",
|
||
900: "#4e3979",
|
||
950: "#3a2b5c",
|
||
},
|
||
},
|
||
fontFamily: {
|
||
sans: [
|
||
"Inter",
|
||
"system-ui",
|
||
"-apple-system",
|
||
"BlinkMacSystemFont",
|
||
"Segoe UI",
|
||
"Roboto",
|
||
"sans-serif",
|
||
],
|
||
serif: [
|
||
"Crimson Text",
|
||
"Charter",
|
||
"Georgia",
|
||
"Times New Roman",
|
||
"serif",
|
||
],
|
||
mono: [
|
||
"JetBrains Mono",
|
||
"Fira Code",
|
||
"SF Mono",
|
||
"Consolas",
|
||
"monospace",
|
||
],
|
||
},
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<!-- Global Sacred Geometry Styles -->
|
||
<style>
|
||
.global-sacred-geometry {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
pointer-events: none;
|
||
z-index: -10;
|
||
opacity: 0.08;
|
||
transition: opacity 2s ease;
|
||
}
|
||
|
||
.sacred-layer-1 {
|
||
animation: rotate-cosmic 180s linear infinite;
|
||
}
|
||
|
||
.sacred-layer-2 {
|
||
animation: rotate-cosmic-reverse 120s linear infinite reverse;
|
||
}
|
||
|
||
.sacred-layer-3 {
|
||
animation: breathe-universe 20s ease-in-out infinite alternate;
|
||
}
|
||
|
||
.sacred-layer-4 {
|
||
animation: spiral-infinity 90s linear infinite;
|
||
}
|
||
|
||
.sacred-layer-5 {
|
||
animation: pulse-chakra 15s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes rotate-cosmic {
|
||
from { transform: rotate(0deg) scale(1); }
|
||
to { transform: rotate(360deg) scale(1.02); }
|
||
}
|
||
|
||
@keyframes rotate-cosmic-reverse {
|
||
from { transform: rotate(0deg) scale(1); }
|
||
to { transform: rotate(-360deg) scale(0.98); }
|
||
}
|
||
|
||
@keyframes breathe-universe {
|
||
from { opacity: 0.02; transform: scale(0.9); }
|
||
to { opacity: 0.06; transform: scale(1.1); }
|
||
}
|
||
|
||
@keyframes spiral-infinity {
|
||
from { transform: rotate(0deg) translateX(10px) rotate(0deg); }
|
||
to { transform: rotate(360deg) translateX(10px) rotate(-360deg); }
|
||
}
|
||
|
||
@keyframes pulse-chakra {
|
||
0%, 100% { opacity: 0.01; transform: scale(0.95); }
|
||
25% { opacity: 0.04; transform: scale(1.05); }
|
||
50% { opacity: 0.02; transform: scale(1); }
|
||
75% { opacity: 0.05; transform: scale(1.08); }
|
||
}
|
||
|
||
.floating-sacred {
|
||
position: fixed;
|
||
pointer-events: none;
|
||
z-index: -5;
|
||
opacity: 0.06;
|
||
transition: opacity 1s ease, transform 2s ease;
|
||
}
|
||
|
||
.floating-sacred:hover {
|
||
opacity: 0.12;
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
.float-1 {
|
||
top: 10%;
|
||
left: 5%;
|
||
animation: float-sacred 30s ease-in-out infinite;
|
||
}
|
||
|
||
.float-2 {
|
||
top: 20%;
|
||
right: 8%;
|
||
animation: float-sacred 45s ease-in-out infinite reverse;
|
||
}
|
||
|
||
.float-3 {
|
||
bottom: 15%;
|
||
left: 10%;
|
||
animation: float-sacred 35s ease-in-out infinite;
|
||
}
|
||
|
||
.float-4 {
|
||
bottom: 25%;
|
||
right: 5%;
|
||
animation: float-sacred 40s ease-in-out infinite reverse;
|
||
}
|
||
|
||
.float-5 {
|
||
top: 50%;
|
||
left: 2%;
|
||
animation: float-sacred 50s ease-in-out infinite;
|
||
}
|
||
|
||
.float-6 {
|
||
top: 60%;
|
||
right: 3%;
|
||
animation: float-sacred 25s ease-in-out infinite reverse;
|
||
}
|
||
|
||
@keyframes float-sacred {
|
||
0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); opacity: 0.04; }
|
||
25% { transform: translateY(-30px) rotate(90deg) scale(1.2); opacity: 0.08; }
|
||
50% { transform: translateY(-15px) rotate(180deg) scale(0.95); opacity: 0.06; }
|
||
75% { transform: translateY(-40px) rotate(270deg) scale(1.1); opacity: 0.07; }
|
||
}
|
||
|
||
.scroll-sacred {
|
||
position: absolute;
|
||
pointer-events: none;
|
||
opacity: 0.05;
|
||
animation: scroll-drift 60s linear infinite;
|
||
}
|
||
|
||
.page-sacred-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
pointer-events: none;
|
||
z-index: -8;
|
||
opacity: 0.04;
|
||
}
|
||
|
||
.content-sacred {
|
||
position: absolute;
|
||
pointer-events: none;
|
||
z-index: -3;
|
||
opacity: 0.03;
|
||
animation: content-breathe 25s ease-in-out infinite alternate;
|
||
}
|
||
|
||
@keyframes content-breathe {
|
||
0%, 100% { opacity: 0.02; transform: scale(0.98) rotate(0deg); }
|
||
50% { opacity: 0.06; transform: scale(1.03) rotate(2deg); }
|
||
}
|
||
|
||
@keyframes scroll-drift {
|
||
from { transform: translateY(100vh) rotate(0deg); }
|
||
to { transform: translateY(-100px) rotate(360deg); }
|
||
}
|
||
|
||
/* Responsive Sacred Geometry */
|
||
@media (max-width: 768px) {
|
||
.global-sacred-geometry {
|
||
opacity: 0.05;
|
||
}
|
||
.floating-sacred {
|
||
opacity: 0.04;
|
||
}
|
||
.float-1, .float-3, .float-5 { display: none; }
|
||
.page-sacred-overlay {
|
||
opacity: 0.03;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.global-sacred-geometry {
|
||
opacity: 0.03;
|
||
}
|
||
.floating-sacred {
|
||
opacity: 0.02;
|
||
}
|
||
.page-sacred-overlay {
|
||
opacity: 0.02;
|
||
}
|
||
}
|
||
|
||
/* Mouse interaction effects */
|
||
.cosmic-cursor {
|
||
position: fixed;
|
||
width: 100px;
|
||
height: 100px;
|
||
pointer-events: none;
|
||
z-index: -8;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
body:hover .cosmic-cursor {
|
||
opacity: 0.06;
|
||
animation: cursor-mandala 8s linear infinite;
|
||
}
|
||
|
||
@keyframes cursor-mandala {
|
||
from { transform: rotate(0deg) scale(0.5); }
|
||
to { transform: rotate(360deg) scale(1.2); }
|
||
}
|
||
|
||
/* Scroll-triggered sacred geometry */
|
||
.scroll-triggered {
|
||
opacity: 0.02;
|
||
transition: opacity 1.5s ease, transform 1.5s ease;
|
||
transform: scale(0.8) rotate(-5deg);
|
||
}
|
||
|
||
.scroll-triggered.visible {
|
||
opacity: 0.08;
|
||
transform: scale(1) rotate(0deg);
|
||
}
|
||
|
||
/* Page transition sacred geometry */
|
||
.page-enter {
|
||
animation: sacred-page-enter 2s ease-out;
|
||
}
|
||
|
||
@keyframes sacred-page-enter {
|
||
0% { opacity: 0; transform: scale(0.95) rotate(-3deg); }
|
||
50% { opacity: 0.12; transform: scale(1.02) rotate(1deg); }
|
||
100% { opacity: 0.08; transform: scale(1) rotate(0deg); }
|
||
}
|
||
|
||
/* Sacred geometry pulse on interactions */
|
||
.sacred-pulse {
|
||
animation: interaction-pulse 3s ease-out;
|
||
}
|
||
|
||
@keyframes interaction-pulse {
|
||
0% { opacity: 0.08; transform: scale(1); }
|
||
30% { opacity: 0.15; transform: scale(1.05); }
|
||
100% { opacity: 0.08; transform: scale(1); }
|
||
}
|
||
|
||
/* New Sacred Geometry Enhancements */
|
||
.sacred-layer-7 {
|
||
animation: sri-yantra-spin 240s linear infinite;
|
||
}
|
||
|
||
.sacred-layer-8 {
|
||
animation: vesica-flow 60s ease-in-out infinite alternate;
|
||
}
|
||
|
||
.sacred-particles {
|
||
animation: particle-drift 45s linear infinite;
|
||
}
|
||
|
||
.organic-flow {
|
||
animation: organic-movement 80s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes sri-yantra-spin {
|
||
from { transform: rotate(0deg) scale(1); opacity: 0.04; }
|
||
25% { opacity: 0.08; }
|
||
50% { transform: rotate(180deg) scale(1.02); opacity: 0.06; }
|
||
75% { opacity: 0.09; }
|
||
to { transform: rotate(360deg) scale(1); opacity: 0.04; }
|
||
}
|
||
|
||
@keyframes vesica-flow {
|
||
0% { transform: translateX(0) scaleY(1); opacity: 0.05; }
|
||
33% { transform: translateX(20px) scaleY(1.1); opacity: 0.08; }
|
||
66% { transform: translateX(-10px) scaleY(0.9); opacity: 0.06; }
|
||
100% { transform: translateX(0) scaleY(1); opacity: 0.05; }
|
||
}
|
||
|
||
@keyframes particle-drift {
|
||
0% { transform: translateY(100vh) translateX(0) rotate(0deg); opacity: 0; }
|
||
10% { opacity: 0.04; }
|
||
50% { transform: translateY(50vh) translateX(30px) rotate(180deg); opacity: 0.08; }
|
||
90% { opacity: 0.04; }
|
||
100% { transform: translateY(-50px) translateX(-20px) rotate(360deg); opacity: 0; }
|
||
}
|
||
|
||
@keyframes organic-movement {
|
||
0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
|
||
16% { transform: translate(15px, -10px) rotate(30deg) scale(1.05); }
|
||
32% { transform: translate(5px, 20px) rotate(-15deg) scale(0.95); }
|
||
48% { transform: translate(-20px, 5px) rotate(45deg) scale(1.08); }
|
||
64% { transform: translate(-10px, -25px) rotate(-30deg) scale(0.92); }
|
||
80% { transform: translate(25px, -5px) rotate(60deg) scale(1.03); }
|
||
}
|
||
|
||
.interactive-particles {
|
||
position: fixed;
|
||
pointer-events: none;
|
||
z-index: -7;
|
||
opacity: 0;
|
||
transition: opacity 0.5s ease;
|
||
}
|
||
|
||
.particles-active {
|
||
opacity: 0.06;
|
||
}
|
||
|
||
@keyframes mouse-particle-birth {
|
||
0% { transform: scale(0) rotate(0deg); opacity: 0; }
|
||
50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; }
|
||
100% { transform: scale(0.3) rotate(360deg); opacity: 0; }
|
||
}
|
||
|
||
.scroll-intensity-1 { opacity: 0.04; }
|
||
.scroll-intensity-2 { opacity: 0.06; }
|
||
.scroll-intensity-3 { opacity: 0.08; }
|
||
.scroll-intensity-4 { opacity: 0.10; }
|
||
.scroll-intensity-5 { opacity: 0.12; }
|
||
</style>
|
||
|
||
{% block extra_head %}{% endblock %}
|
||
</head>
|
||
<body
|
||
class="bg-gray-900 font-serif text-gray-100 selection:bg-primary-700 selection:text-white tufte dark-mode"
|
||
id="tufte-body"
|
||
>
|
||
<!-- Global Sacred Geometry Background -->
|
||
<div class="global-sacred-geometry">
|
||
<!-- Layer 1: Cosmic Mandala -->
|
||
<svg class="sacred-layer-1" width="100%" height="100%" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- Flower of Life - Universal Pattern -->
|
||
<g stroke="#667eea" stroke-width="0.8" fill="none" opacity="0.6">
|
||
<circle cx="960" cy="540" r="120"/>
|
||
<circle cx="960" cy="420" r="120"/>
|
||
<circle cx="960" cy="660" r="120"/>
|
||
<circle cx="860" cy="480" r="120"/>
|
||
<circle cx="1060" cy="480" r="120"/>
|
||
<circle cx="860" cy="600" r="120"/>
|
||
<circle cx="1060" cy="600" r="120"/>
|
||
<circle cx="760" cy="540" r="120"/>
|
||
<circle cx="1160" cy="540" r="120"/>
|
||
</g>
|
||
|
||
<!-- Sacred Hexagonal Grid -->
|
||
<g stroke="#764ba2" stroke-width="0.6" fill="none" opacity="0.4">
|
||
<polygon points="960,300 1120,390 1120,570 960,660 800,570 800,390"/>
|
||
<polygon points="960,150 1200,270 1200,630 960,750 720,630 720,270"/>
|
||
<polygon points="480,270 640,360 640,540 480,630 320,540 320,360"/>
|
||
<polygon points="1440,270 1600,360 1600,540 1440,630 1280,540 1280,360"/>
|
||
</g>
|
||
</svg>
|
||
|
||
<!-- Layer 2: Fibonacci Spirals -->
|
||
<svg class="sacred-layer-2" width="100%" height="100%" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#8b5cf6" stroke-width="1" fill="none" opacity="0.3">
|
||
<!-- Golden Ratio Spirals -->
|
||
<path d="M 960 540 Q 1160 340 1360 540 Q 1160 740 960 540"/>
|
||
<path d="M 960 540 Q 760 740 560 540 Q 760 340 960 540"/>
|
||
<path d="M 480 270 Q 580 170 680 270 Q 580 370 480 270"/>
|
||
<path d="M 1440 270 Q 1540 170 1640 270 Q 1540 370 1440 270"/>
|
||
|
||
<!-- Fibonacci Circles -->
|
||
<circle cx="960" cy="540" r="21"/>
|
||
<circle cx="960" cy="540" r="34"/>
|
||
<circle cx="960" cy="540" r="55"/>
|
||
<circle cx="960" cy="540" r="89"/>
|
||
<circle cx="960" cy="540" r="144"/>
|
||
<circle cx="960" cy="540" r="233"/>
|
||
</g>
|
||
</svg>
|
||
|
||
<!-- Layer 3: Merkaba & Platonic Solids -->
|
||
<svg class="sacred-layer-3" width="100%" height="100%" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#10b981" stroke-width="1.2" fill="none" opacity="0.5">
|
||
<!-- Merkaba (Star Tetrahedron) -->
|
||
<polygon points="960,400 1100,540 820,540"/>
|
||
<polygon points="960,680 820,540 1100,540"/>
|
||
<polygon points="900,460 1020,460 960,360"/>
|
||
<polygon points="900,620 960,720 1020,620"/>
|
||
|
||
<!-- Corner Merkabas -->
|
||
<polygon points="240,180 320,240 160,240"/>
|
||
<polygon points="240,300 160,240 320,240"/>
|
||
<polygon points="1680,180 1760,240 1600,240"/>
|
||
<polygon points="1680,300 1600,240 1760,240"/>
|
||
<polygon points="240,780 320,840 160,840"/>
|
||
<polygon points="240,900 160,840 320,840"/>
|
||
<polygon points="1680,780 1760,840 1600,840"/>
|
||
<polygon points="1680,900 1600,840 1760,840"/>
|
||
</g>
|
||
</svg>
|
||
|
||
<!-- Layer 4: Seed of Life & Sacred Circles -->
|
||
<svg class="sacred-layer-4" width="100%" height="100%" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#06d6a0" stroke-width="0.8" fill="none" opacity="0.4">
|
||
<!-- Seed of Life Pattern -->
|
||
<circle cx="960" cy="540" r="60"/>
|
||
<circle cx="960" cy="480" r="60"/>
|
||
<circle cx="1012" cy="510" r="60"/>
|
||
<circle cx="1012" cy="570" r="60"/>
|
||
<circle cx="960" cy="600" r="60"/>
|
||
<circle cx="908" cy="570" r="60"/>
|
||
<circle cx="908" cy="510" r="60"/>
|
||
|
||
<!-- Distributed Sacred Circles -->
|
||
<circle cx="480" cy="270" r="40"/>
|
||
<circle cx="1440" cy="270" r="40"/>
|
||
<circle cx="480" cy="810" r="40"/>
|
||
<circle cx="1440" cy="810" r="40"/>
|
||
<circle cx="200" cy="540" r="30"/>
|
||
<circle cx="1720" cy="540" r="30"/>
|
||
</g>
|
||
</svg>
|
||
|
||
<!-- Layer 5: Lotus Petals & Chakra Wheels -->
|
||
<svg class="sacred-layer-5" width="100%" height="100%" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#ec4899" stroke-width="0.6" fill="rgba(236, 72, 153, 0.05)" opacity="0.6">
|
||
<!-- Central Lotus -->
|
||
<ellipse cx="960" cy="390" rx="30" ry="90" transform="rotate(0 960 540)"/>
|
||
<ellipse cx="960" cy="390" rx="30" ry="90" transform="rotate(30 960 540)"/>
|
||
<ellipse cx="960" cy="390" rx="30" ry="90" transform="rotate(60 960 540)"/>
|
||
<ellipse cx="960" cy="390" rx="30" ry="90" transform="rotate(90 960 540)"/>
|
||
<ellipse cx="960" cy="390" rx="30" ry="90" transform="rotate(120 960 540)"/>
|
||
<ellipse cx="960" cy="390" rx="30" ry="90" transform="rotate(150 960 540)"/>
|
||
<ellipse cx="960" cy="390" rx="30" ry="90" transform="rotate(180 960 540)"/>
|
||
<ellipse cx="960" cy="390" rx="30" ry="90" transform="rotate(210 960 540)"/>
|
||
<ellipse cx="960" cy="390" rx="30" ry="90" transform="rotate(240 960 540)"/>
|
||
<ellipse cx="960" cy="390" rx="30" ry="90" transform="rotate(270 960 540)"/>
|
||
<ellipse cx="960" cy="390" rx="30" ry="90" transform="rotate(300 960 540)"/>
|
||
<ellipse cx="960" cy="390" rx="30" ry="90" transform="rotate(330 960 540)"/>
|
||
|
||
<!-- Expanded Sacred Lotus Layers -->
|
||
<ellipse cx="960" cy="340" rx="40" ry="120" transform="rotate(15 960 540)" opacity="0.4"/>
|
||
<ellipse cx="960" cy="340" rx="40" ry="120" transform="rotate(45 960 540)" opacity="0.4"/>
|
||
<ellipse cx="960" cy="340" rx="40" ry="120" transform="rotate(75 960 540)" opacity="0.4"/>
|
||
<ellipse cx="960" cy="340" rx="40" ry="120" transform="rotate(105 960 540)" opacity="0.4"/>
|
||
<ellipse cx="960" cy="340" rx="40" ry="120" transform="rotate(135 960 540)" opacity="0.4"/>
|
||
<ellipse cx="960" cy="340" rx="40" ry="120" transform="rotate(165 960 540)" opacity="0.4"/>
|
||
<ellipse cx="960" cy="340" rx="40" ry="120" transform="rotate(195 960 540)" opacity="0.4"/>
|
||
<ellipse cx="960" cy="340" rx="40" ry="120" transform="rotate(225 960 540)" opacity="0.4"/>
|
||
<ellipse cx="960" cy="340" rx="40" ry="120" transform="rotate(255 960 540)" opacity="0.4"/>
|
||
<ellipse cx="960" cy="340" rx="40" ry="120" transform="rotate(285 960 540)" opacity="0.4"/>
|
||
<ellipse cx="960" cy="340" rx="40" ry="120" transform="rotate(315 960 540)" opacity="0.4"/>
|
||
<ellipse cx="960" cy="340" rx="40" ry="120" transform="rotate(345 960 540)" opacity="0.4"/>
|
||
|
||
<!-- Corner Lotus Flowers -->
|
||
<ellipse cx="240" cy="180" rx="15" ry="45" transform="rotate(0 240 240)"/>
|
||
<ellipse cx="240" cy="180" rx="15" ry="45" transform="rotate(60 240 240)"/>
|
||
<ellipse cx="240" cy="180" rx="15" ry="45" transform="rotate(120 240 240)"/>
|
||
<ellipse cx="1680" cy="180" rx="15" ry="45" transform="rotate(0 1680 240)"/>
|
||
<ellipse cx="1680" cy="180" rx="15" ry="45" transform="rotate(60 1680 240)"/>
|
||
<ellipse cx="1680" cy="180" rx="15" ry="45" transform="rotate(120 1680 240)"/>
|
||
<ellipse cx="240" cy="900" rx="15" ry="45" transform="rotate(0 240 840)"/>
|
||
<ellipse cx="240" cy="900" rx="15" ry="45" transform="rotate(60 240 840)"/>
|
||
<ellipse cx="240" cy="900" rx="15" ry="45" transform="rotate(120 240 840)"/>
|
||
<ellipse cx="1680" cy="900" rx="15" ry="45" transform="rotate(0 1680 840)"/>
|
||
<ellipse cx="1680" cy="900" rx="15" ry="45" transform="rotate(60 1680 840)"/>
|
||
<ellipse cx="1680" cy="900" rx="15" ry="45" transform="rotate(120 1680 840)"/>
|
||
</g>
|
||
|
||
<!-- Central Om Symbol -->
|
||
<g stroke="#fbbf24" stroke-width="1.5" fill="none" opacity="0.3">
|
||
<circle cx="960" cy="540" r="20"/>
|
||
<circle cx="960" cy="540" r="10"/>
|
||
<path d="M 940 540 Q 960 520 980 540 Q 960 560 940 540"/>
|
||
</g>
|
||
</svg>
|
||
|
||
<!-- Layer 6: Sacred Tree of Life -->
|
||
<svg class="sacred-layer-6" width="100%" height="100%" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#f59e0b" stroke-width="0.8" fill="none" opacity="0.3">
|
||
<!-- Tree of Life Sephirot -->
|
||
<circle cx="960" cy="150" r="25"/> <!-- Kether -->
|
||
<circle cx="900" cy="220" r="22"/> <!-- Chokmah -->
|
||
<circle cx="1020" cy="220" r="22"/> <!-- Binah -->
|
||
<circle cx="960" cy="320" r="20"/> <!-- Daath -->
|
||
<circle cx="840" cy="380" r="24"/> <!-- Chesed -->
|
||
<circle cx="1080" cy="380" r="24"/> <!-- Geburah -->
|
||
<circle cx="960" cy="480" r="26"/> <!-- Tiphereth -->
|
||
<circle cx="840" cy="580" r="22"/> <!-- Netzach -->
|
||
<circle cx="1080" cy="580" r="22"/> <!-- Hod -->
|
||
<circle cx="960" cy="680" r="24"/> <!-- Yesod -->
|
||
<circle cx="960" cy="780" r="28"/> <!-- Malkuth -->
|
||
|
||
<!-- Connecting Paths -->
|
||
<line x1="960" y1="150" x2="900" y2="220"/>
|
||
<line x1="960" y1="150" x2="1020" y2="220"/>
|
||
<line x1="900" y1="220" x2="1020" y2="220"/>
|
||
<line x1="900" y1="220" x2="960" y2="320"/>
|
||
<line x1="1020" y1="220" x2="960" y2="320"/>
|
||
<line x1="960" y1="320" x2="840" y2="380"/>
|
||
<line x1="960" y1="320" x2="1080" y2="380"/>
|
||
<line x1="840" y1="380" x2="1080" y2="380"/>
|
||
<line x1="840" y1="380" x2="960" y2="480"/>
|
||
<line x1="1080" y1="380" x2="960" y2="480"/>
|
||
<line x1="960" y1="480" x2="840" y2="580"/>
|
||
<line x1="960" y1="480" x2="1080" y2="580"/>
|
||
<line x1="840" y1="580" x2="1080" y2="580"/>
|
||
<line x1="840" y1="580" x2="960" y2="680"/>
|
||
<line x1="1080" y1="580" x2="960" y2="680"/>
|
||
<line x1="960" y1="680" x2="960" y2="780"/>
|
||
</g>
|
||
</svg>
|
||
|
||
<!-- Layer 7: Sri Yantra -->
|
||
<svg class="sacred-layer-7" width="100%" height="100%" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#e879f9" stroke-width="0.7" fill="none" opacity="0.4">
|
||
<!-- Outer Square -->
|
||
<rect x="760" y="340" width="400" height="400" stroke="#e879f9"/>
|
||
<!-- Inner Square -->
|
||
<rect x="810" y="390" width="300" height="300" stroke="#c084fc"/>
|
||
|
||
<!-- Central Triangle (Upward) -->
|
||
<polygon points="960,420 1040,600 880,600"/>
|
||
<!-- Inverted Triangle -->
|
||
<polygon points="960,660 880,480 1040,480"/>
|
||
|
||
<!-- Interlocking Triangles -->
|
||
<polygon points="960,450 1020,570 900,570"/>
|
||
<polygon points="960,630 900,510 1020,510"/>
|
||
<polygon points="960,480 1000,560 920,560"/>
|
||
<polygon points="960,600 920,520 1000,520"/>
|
||
|
||
<!-- Central Bindu -->
|
||
<circle cx="960" cy="540" r="8" stroke="#fbbf24" stroke-width="1"/>
|
||
<circle cx="960" cy="540" r="4" stroke="#fbbf24" stroke-width="0.5"/>
|
||
|
||
<!-- Corner Sri Yantras -->
|
||
<g opacity="0.6" transform="scale(0.3)">
|
||
<polygon points="600,600 720,840 480,840" transform="translate(0,0)"/>
|
||
<polygon points="600,1080 480,840 720,840" transform="translate(0,0)"/>
|
||
<circle cx="600" cy="840" r="15"/>
|
||
</g>
|
||
|
||
<g opacity="0.6" transform="scale(0.3)">
|
||
<polygon points="4800,600 4920,840 4680,840" transform="translate(0,0)"/>
|
||
<polygon points="4800,1080 4680,840 4920,840" transform="translate(0,0)"/>
|
||
<circle cx="4800" cy="840" r="15"/>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
|
||
<!-- Layer 8: Vesica Piscis Flow -->
|
||
<svg class="sacred-layer-8" width="100%" height="100%" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#38bdf8" stroke-width="0.8" fill="rgba(56, 189, 248, 0.02)" opacity="0.5">
|
||
<!-- Central Vesica Piscis -->
|
||
<circle cx="920" cy="540" r="120" fill="none"/>
|
||
<circle cx="1000" cy="540" r="120" fill="none"/>
|
||
|
||
<!-- Flowing Vesica Chain -->
|
||
<circle cx="400" cy="300" r="80" fill="none"/>
|
||
<circle cx="460" cy="300" r="80" fill="none"/>
|
||
|
||
<circle cx="1460" cy="300" r="80" fill="none"/>
|
||
<circle cx="1520" cy="300" r="80" fill="none"/>
|
||
|
||
<circle cx="400" cy="780" r="80" fill="none"/>
|
||
<circle cx="460" cy="780" r="80" fill="none"/>
|
||
|
||
<circle cx="1460" cy="780" r="80" fill="none"/>
|
||
<circle cx="1520" cy="780" r="80" fill="none"/>
|
||
|
||
<!-- Organic connecting flows -->
|
||
<path d="M 480 300 Q 720 200 920 400" stroke="#06d6a0" stroke-width="0.5" opacity="0.6"/>
|
||
<path d="M 1000 680 Q 1280 880 1460 780" stroke="#06d6a0" stroke-width="0.5" opacity="0.6"/>
|
||
<path d="M 480 780 Q 720 680 920 680" stroke="#06d6a0" stroke-width="0.5" opacity="0.6"/>
|
||
<path d="M 1000 400 Q 1280 200 1460 300" stroke="#06d6a0" stroke-width="0.5" opacity="0.6"/>
|
||
</g>
|
||
</svg>
|
||
|
||
<!-- Page-Specific Sacred Overlay -->
|
||
<div class="page-sacred-overlay page-enter">
|
||
<svg width="100%" height="100%" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- Interconnected Sacred Network -->
|
||
<g stroke="#06b6d4" stroke-width="0.5" fill="none" opacity="0.6">
|
||
<circle cx="200" cy="200" r="15"/>
|
||
<circle cx="400" cy="150" r="12"/>
|
||
<circle cx="600" cy="250" r="18"/>
|
||
<circle cx="800" cy="180" r="14"/>
|
||
<circle cx="1000" cy="280" r="16"/>
|
||
<circle cx="1200" cy="200" r="13"/>
|
||
<circle cx="1400" cy="160" r="17"/>
|
||
<circle cx="1600" cy="220" r="15"/>
|
||
|
||
<line x1="200" y1="200" x2="400" y2="150"/>
|
||
<line x1="400" y1="150" x2="600" y2="250"/>
|
||
<line x1="600" y1="250" x2="800" y2="180"/>
|
||
<line x1="800" y1="180" x2="1000" y2="280"/>
|
||
<line x1="1000" y1="280" x2="1200" y2="200"/>
|
||
<line x1="1200" y1="200" x2="1400" y2="160"/>
|
||
<line x1="1400" y1="160" x2="1600" y2="220"/>
|
||
|
||
<!-- Cross connections -->
|
||
<line x1="200" y1="200" x2="600" y2="250" opacity="0.3"/>
|
||
<line x1="400" y1="150" x2="800" y2="180" opacity="0.3"/>
|
||
<line x1="600" y1="250" x2="1000" y2="280" opacity="0.3"/>
|
||
<line x1="800" y1="180" x2="1200" y2="200" opacity="0.3"/>
|
||
<line x1="1000" y1="280" x2="1400" y2="160" opacity="0.3"/>
|
||
<line x1="1200" y1="200" x2="1600" y2="220" opacity="0.3"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Floating Sacred Symbols -->
|
||
<div class="floating-sacred float-1">
|
||
<svg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#667eea" stroke-width="1" fill="none">
|
||
<polygon points="40,10 70,40 40,70 10,40"/>
|
||
<circle cx="40" cy="40" r="15"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="floating-sacred float-2">
|
||
<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#8b5cf6" stroke-width="1" fill="none">
|
||
<polygon points="30,5 55,30 30,55 5,30"/>
|
||
<polygon points="30,15 45,30 30,45 15,30"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="floating-sacred float-3">
|
||
<svg width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#10b981" stroke-width="1" fill="none">
|
||
<circle cx="35" cy="35" r="30"/>
|
||
<circle cx="35" cy="35" r="20"/>
|
||
<circle cx="35" cy="35" r="10"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="floating-sacred float-4">
|
||
<svg width="90" height="90" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#ec4899" stroke-width="1" fill="none">
|
||
<polygon points="45,10 70,25 70,65 45,80 20,65 20,25"/>
|
||
<polygon points="45,20 60,30 60,60 45,70 30,60 30,30"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="floating-sacred float-5">
|
||
<svg width="50" height="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#fbbf24" stroke-width="1" fill="none">
|
||
<polygon points="25,5 45,25 25,45 5,25"/>
|
||
<circle cx="25" cy="25" r="8"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="floating-sacred float-6">
|
||
<svg width="65" height="65" viewBox="0 0 65 65" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#06d6a0" stroke-width="1" fill="none">
|
||
<circle cx="32.5" cy="32.5" r="25"/>
|
||
<polygon points="32.5,7.5 57.5,32.5 32.5,57.5 7.5,32.5"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Scrolling Sacred Drift Elements -->
|
||
<div class="scroll-sacred" style="left: 10%; animation-delay: 0s;">
|
||
<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#764ba2" stroke-width="0.8" fill="none">
|
||
<polygon points="20,5 35,20 20,35 5,20"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="scroll-sacred" style="right: 15%; animation-delay: -20s;">
|
||
<svg width="35" height="35" viewBox="0 0 35 35" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#a855f7" stroke-width="0.8" fill="none">
|
||
<circle cx="17.5" cy="17.5" r="12"/>
|
||
<circle cx="17.5" cy="17.5" r="6"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="scroll-sacred" style="left: 25%; animation-delay: -40s;">
|
||
<svg width="45" height="45" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#06b6d4" stroke-width="0.8" fill="none">
|
||
<polygon points="22.5,5 40,15 40,30 22.5,40 5,30 5,15"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="scroll-sacred" style="right: 30%; animation-delay: -10s;">
|
||
<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#f59e0b" stroke-width="0.8" fill="none">
|
||
<polygon points="15,3 27,15 15,27 3,15"/>
|
||
<polygon points="15,9 21,15 15,21 9,15"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="scroll-sacred" style="left: 70%; animation-delay: -30s;">
|
||
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#ef4444" stroke-width="0.8" fill="none">
|
||
<circle cx="19" cy="19" r="15"/>
|
||
<polygon points="19,4 34,19 19,34 4,19"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Sacred Particle Flow -->
|
||
<div class="sacred-particles" style="left: 5%; animation-delay: 0s;">
|
||
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="10" cy="10" r="8" stroke="#8b5cf6" stroke-width="0.8" fill="rgba(139, 92, 246, 0.1)"/>
|
||
<circle cx="10" cy="10" r="3" stroke="#8b5cf6" stroke-width="0.5" fill="none"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="sacred-particles" style="right: 8%; animation-delay: -15s;">
|
||
<svg width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
|
||
<polygon points="12.5,2 23,12.5 12.5,23 2,12.5" stroke="#06d6a0" stroke-width="0.8" fill="rgba(6, 214, 160, 0.1)"/>
|
||
<circle cx="12.5" cy="12.5" r="4" stroke="#06d6a0" stroke-width="0.5" fill="none"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="sacred-particles" style="left: 40%; animation-delay: -25s;">
|
||
<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
|
||
<polygon points="9,1 17,9 9,17 1,9" stroke="#f59e0b" stroke-width="0.8" fill="rgba(245, 158, 11, 0.1)"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="sacred-particles" style="right: 25%; animation-delay: -35s;">
|
||
<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="11" cy="11" r="9" stroke="#ec4899" stroke-width="0.8" fill="none"/>
|
||
<polygon points="11,2 20,11 11,20 2,11" stroke="#ec4899" stroke-width="0.5" fill="rgba(236, 72, 153, 0.1)"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Organic Flow Elements -->
|
||
<div class="organic-flow" style="position: fixed; top: 15%; left: 12%; z-index: -6;">
|
||
<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#a855f7" stroke-width="0.8" fill="none">
|
||
<path d="M 10 30 Q 30 10 50 30 Q 30 50 10 30" opacity="0.6"/>
|
||
<path d="M 20 30 Q 30 20 40 30 Q 30 40 20 30" opacity="0.8"/>
|
||
<circle cx="30" cy="30" r="5" opacity="0.7"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="organic-flow" style="position: fixed; bottom: 20%; right: 15%; z-index: -6;">
|
||
<svg width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#14b8a6" stroke-width="0.8" fill="none">
|
||
<ellipse cx="35" cy="25" rx="25" ry="15" opacity="0.6"/>
|
||
<ellipse cx="35" cy="45" rx="25" ry="15" opacity="0.6"/>
|
||
<ellipse cx="25" cy="35" rx="15" ry="25" opacity="0.6"/>
|
||
<ellipse cx="45" cy="35" rx="15" ry="25" opacity="0.6"/>
|
||
<circle cx="35" cy="35" r="8" opacity="0.8"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Interactive Particle System -->
|
||
<div class="interactive-particles" id="particle-system">
|
||
<svg width="100%" height="100%" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
|
||
<g id="particle-container"></g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Mouse Cursor Sacred Geometry -->
|
||
<div class="cosmic-cursor" id="cosmic-cursor">
|
||
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#667eea" stroke-width="0.5" fill="none">
|
||
<circle cx="50" cy="50" r="40"/>
|
||
<circle cx="50" cy="50" r="25"/>
|
||
<circle cx="50" cy="50" r="10"/>
|
||
<polygon points="50,10 85,50 50,90 15,50"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- Scroll-triggered Sacred Elements -->
|
||
<div class="scroll-triggered" style="position: fixed; top: 20%; left: 85%; z-index: -6;">
|
||
<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#8b5cf6" stroke-width="1" fill="none">
|
||
<polygon points="30,5 55,30 30,55 5,30"/>
|
||
<circle cx="30" cy="30" r="15"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="scroll-triggered" style="position: fixed; bottom: 30%; left: 5%; z-index: -6;">
|
||
<svg width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
|
||
<g stroke="#10b981" stroke-width="1" fill="none">
|
||
<polygon points="35,5 65,20 65,50 35,65 5,50 5,20"/>
|
||
<polygon points="35,15 55,25 55,45 35,55 15,45 15,25"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Header -->
|
||
<header
|
||
class="border-b border-gray-700 bg-gray-900/90 backdrop-blur-xl sticky top-0 z-50 shadow-lg"
|
||
>
|
||
<div class="max-w-6xl mx-auto px-6 py-8">
|
||
<div class="flex flex-col space-y-4">
|
||
<!-- Main brand -->
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<h1
|
||
class="text-5xl font-bold tracking-tight font-serif"
|
||
>
|
||
<a
|
||
href="/"
|
||
class="text-gray-100 hover:text-primary-400 transition-colors duration-200 no-underline font-serif bg-gradient-to-r from-primary-400 via-purple-400 to-pink-400 bg-clip-text text-transparent"
|
||
>
|
||
Kenneth Reitz
|
||
</a>
|
||
</h1>
|
||
</div>
|
||
|
||
<!-- Mobile-friendly navigation -->
|
||
<nav class="hidden md:flex space-x-4">
|
||
<a
|
||
href="/directory"
|
||
class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-3 py-2 rounded-lg hover:bg-primary-900/30 border border-transparent hover:border-primary-500/30"
|
||
>
|
||
📁 Explore
|
||
</a>
|
||
<a
|
||
href="/poetry"
|
||
class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-3 py-2 rounded-lg hover:bg-primary-900/30 border border-transparent hover:border-primary-500/30"
|
||
>
|
||
📝 Poetry
|
||
</a>
|
||
<a
|
||
href="/artificial-intelligence"
|
||
class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-3 py-2 rounded-lg hover:bg-primary-900/30 border border-transparent hover:border-primary-500/30"
|
||
>
|
||
🤖 AI
|
||
</a>
|
||
<a
|
||
href="/talks"
|
||
class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-3 py-2 rounded-lg hover:bg-primary-900/30 border border-transparent hover:border-primary-500/30"
|
||
>
|
||
🎤 Talks
|
||
</a>
|
||
<a
|
||
href="/values"
|
||
class="text-sm font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-3 py-2 rounded-lg hover:bg-primary-900/30 border border-transparent hover:border-primary-500/30"
|
||
>
|
||
💎 Values
|
||
</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- Mobile navigation -->
|
||
<div class="flex md:hidden">
|
||
<!-- Mobile nav links -->
|
||
<nav class="flex flex-wrap gap-2">
|
||
<a
|
||
href="/directory"
|
||
class="text-xs font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-3 py-2 rounded-lg hover:bg-primary-900/30"
|
||
>
|
||
📁 Browse
|
||
</a>
|
||
<a
|
||
href="/poetry"
|
||
class="text-xs font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-3 py-2 rounded-lg hover:bg-primary-900/30"
|
||
>
|
||
📝 Poetry
|
||
</a>
|
||
<a
|
||
href="/artificial-intelligence"
|
||
class="text-xs font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-3 py-2 rounded-lg hover:bg-primary-900/30"
|
||
>
|
||
🤖 AI
|
||
</a>
|
||
<a
|
||
href="/talks"
|
||
class="text-xs font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-3 py-2 rounded-lg hover:bg-primary-900/30"
|
||
>
|
||
🎤 Talks
|
||
</a>
|
||
<a
|
||
href="/values"
|
||
class="text-xs font-medium text-gray-300 hover:text-primary-400 transition-all duration-300 px-3 py-2 rounded-lg hover:bg-primary-900/30"
|
||
>
|
||
💎 Values
|
||
</a>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Breadcrumbs -->
|
||
{% if breadcrumbs %}
|
||
<nav
|
||
class="max-w-4xl mx-auto px-6 py-4 text-sm text-gray-400 bg-gray-900/30 backdrop-blur-sm"
|
||
>
|
||
<div class="flex items-center space-x-2">
|
||
<a
|
||
href="/"
|
||
class="hover:text-primary-400 transition-colors duration-200"
|
||
>Home</a
|
||
>
|
||
{% for crumb in breadcrumbs %}
|
||
<span class="text-gray-600">›</span>
|
||
<a
|
||
href="{{ crumb.url }}"
|
||
class="hover:text-primary-400 transition-colors duration-200"
|
||
>{{ crumb.name }}</a
|
||
>
|
||
{% endfor %} {% if current_page %}
|
||
<span class="text-gray-600">›</span>
|
||
<span class="text-gray-200 font-medium"
|
||
>{{ current_page }}</span
|
||
>
|
||
{% endif %}
|
||
</div>
|
||
</nav>
|
||
{% endif %}
|
||
|
||
<!-- Main Content -->
|
||
<main
|
||
class="max-w-4xl mx-auto px-6 py-8 tufte-content font-serif bg-gray-900/40 backdrop-blur-sm rounded-lg my-4"
|
||
>
|
||
{% block content %}{% endblock %}
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="border-t border-gray-800/60 mt-20">
|
||
<div class="max-w-6xl mx-auto px-6 py-8 text-center">
|
||
<p class="text-sm text-gray-500">
|
||
© {{ current_year }} Kenneth Reitz
|
||
</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="/static/tufte-converter.js"></script>
|
||
|
||
<!-- Sacred Geometry Interactive Script -->
|
||
<script>
|
||
// Mouse cursor sacred geometry
|
||
document.addEventListener('mousemove', function(e) {
|
||
const cursor = document.getElementById('cosmic-cursor');
|
||
if (cursor) {
|
||
cursor.style.left = (e.clientX - 50) + 'px';
|
||
cursor.style.top = (e.clientY - 50) + 'px';
|
||
}
|
||
});
|
||
|
||
// Scroll-triggered sacred geometry
|
||
function checkScrollTriggers() {
|
||
const scrollTriggered = document.querySelectorAll('.scroll-triggered');
|
||
const scrollPosition = window.scrollY;
|
||
const windowHeight = window.innerHeight;
|
||
|
||
scrollTriggered.forEach(element => {
|
||
const elementTop = element.offsetTop;
|
||
if (scrollPosition + windowHeight > elementTop + 100) {
|
||
element.classList.add('visible');
|
||
}
|
||
});
|
||
}
|
||
|
||
window.addEventListener('scroll', checkScrollTriggers);
|
||
window.addEventListener('load', checkScrollTriggers);
|
||
|
||
// Sacred geometry intensity based on time of day
|
||
function adjustSacredIntensity() {
|
||
const hour = new Date().getHours();
|
||
const geometry = document.querySelector('.global-sacred-geometry');
|
||
const pageOverlay = document.querySelector('.page-sacred-overlay');
|
||
|
||
if (geometry) {
|
||
// More visible during "mystical hours" (dawn/dusk)
|
||
if (hour >= 5 && hour <= 7 || hour >= 17 && hour <= 19) {
|
||
geometry.style.opacity = '0.12';
|
||
if (pageOverlay) pageOverlay.style.opacity = '0.08';
|
||
} else if (hour >= 0 && hour <= 5 || hour >= 22) {
|
||
geometry.style.opacity = '0.10'; // Mystical night hours
|
||
if (pageOverlay) pageOverlay.style.opacity = '0.06';
|
||
} else {
|
||
geometry.style.opacity = '0.08'; // Regular hours
|
||
if (pageOverlay) pageOverlay.style.opacity = '0.04';
|
||
}
|
||
}
|
||
}
|
||
|
||
// Add sacred geometry pulse on scroll
|
||
let lastScrollTop = 0;
|
||
window.addEventListener('scroll', function() {
|
||
const st = window.pageYOffset || document.documentElement.scrollTop;
|
||
const geometry = document.querySelector('.global-sacred-geometry');
|
||
|
||
if (Math.abs(st - lastScrollTop) > 50) {
|
||
if (geometry) {
|
||
geometry.classList.add('sacred-pulse');
|
||
setTimeout(() => {
|
||
geometry.classList.remove('sacred-pulse');
|
||
}, 3000);
|
||
}
|
||
}
|
||
lastScrollTop = st <= 0 ? 0 : st;
|
||
});
|
||
|
||
// Add sacred geometry to content sections
|
||
function addContentSacredGeometry() {
|
||
const contentSections = document.querySelectorAll('article, section, .content, main');
|
||
contentSections.forEach((section, index) => {
|
||
if (!section.querySelector('.content-sacred')) {
|
||
const sacredDiv = document.createElement('div');
|
||
sacredDiv.className = 'content-sacred scroll-triggered';
|
||
sacredDiv.style.top = '10px';
|
||
sacredDiv.style.right = '10px';
|
||
sacredDiv.style.animationDelay = `${index * 0.5}s`;
|
||
|
||
const symbols = [
|
||
'<svg width="40" height="40" viewBox="0 0 40 40"><g stroke="#8b5cf6" stroke-width="0.8" fill="none"><polygon points="20,5 35,20 20,35 5,20"/><circle cx="20" cy="20" r="8"/></g></svg>',
|
||
'<svg width="40" height="40" viewBox="0 0 40 40"><g stroke="#06d6a0" stroke-width="0.8" fill="none"><circle cx="20" cy="20" r="15"/><circle cx="20" cy="20" r="10"/><circle cx="20" cy="20" r="5"/></g></svg>',
|
||
'<svg width="40" height="40" viewBox="0 0 40 40"><g stroke="#f59e0b" stroke-width="0.8" fill="none"><polygon points="20,2 38,20 20,38 2,20"/><polygon points="20,10 30,20 20,30 10,20"/></g></svg>',
|
||
'<svg width="40" height="40" viewBox="0 0 40 40"><g stroke="#ec4899" stroke-width="0.8" fill="none"><polygon points="20,5 30,15 30,25 20,35 10,25 10,15"/><circle cx="20" cy="20" r="6"/></g></svg>'
|
||
];
|
||
|
||
sacredDiv.innerHTML = symbols[index % symbols.length];
|
||
section.style.position = section.style.position || 'relative';
|
||
section.appendChild(sacredDiv);
|
||
}
|
||
});
|
||
}
|
||
|
||
adjustSacredIntensity();
|
||
addContentSacredGeometry();
|
||
|
||
// Initialize page enter animation
|
||
setTimeout(() => {
|
||
const pageOverlay = document.querySelector('.page-sacred-overlay');
|
||
if (pageOverlay) {
|
||
pageOverlay.classList.add('page-enter');
|
||
}
|
||
}, 100);
|
||
|
||
// Pulse sacred geometry on page focus
|
||
window.addEventListener('focus', function() {
|
||
document.querySelectorAll('.sacred-layer-5').forEach(layer => {
|
||
layer.style.animation = 'pulse-chakra 5s ease-in-out';
|
||
setTimeout(() => {
|
||
layer.style.animation = 'pulse-chakra 15s ease-in-out infinite';
|
||
}, 5000);
|
||
});
|
||
});
|
||
|
||
// Enhanced Mouse Interaction with Particle Generation
|
||
let mouseParticles = [];
|
||
let lastMouseMove = 0;
|
||
|
||
document.addEventListener('mousemove', function(e) {
|
||
const now = Date.now();
|
||
if (now - lastMouseMove > 100) { // Throttle particle creation
|
||
createMouseParticle(e.clientX, e.clientY);
|
||
lastMouseMove = now;
|
||
}
|
||
|
||
// Activate particle system
|
||
const particleSystem = document.getElementById('particle-system');
|
||
if (particleSystem) {
|
||
particleSystem.classList.add('particles-active');
|
||
}
|
||
});
|
||
|
||
function createMouseParticle(x, y) {
|
||
const particleContainer = document.getElementById('particle-container');
|
||
if (!particleContainer) return;
|
||
|
||
const particle = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||
particle.setAttribute('transform', `translate(${x}, ${y})`);
|
||
particle.style.animation = 'mouse-particle-birth 2s ease-out forwards';
|
||
|
||
const shapes = [
|
||
'<circle r="8" stroke="#8b5cf6" stroke-width="0.5" fill="rgba(139, 92, 246, 0.1)"/>',
|
||
'<polygon points="-6,-6 6,-6 6,6 -6,6" stroke="#06d6a0" stroke-width="0.5" fill="rgba(6, 214, 160, 0.1)"/>',
|
||
'<polygon points="0,-8 8,8 -8,8" stroke="#f59e0b" stroke-width="0.5" fill="rgba(245, 158, 11, 0.1)"/>'
|
||
];
|
||
|
||
particle.innerHTML = shapes[Math.floor(Math.random() * shapes.length)];
|
||
particleContainer.appendChild(particle);
|
||
|
||
// Clean up particle after animation
|
||
setTimeout(() => {
|
||
if (particle && particle.parentNode) {
|
||
particle.parentNode.removeChild(particle);
|
||
}
|
||
}, 2000);
|
||
|
||
// Limit number of particles
|
||
if (particleContainer.children.length > 20) {
|
||
particleContainer.removeChild(particleContainer.firstChild);
|
||
}
|
||
}
|
||
|
||
// Enhanced Scroll-based Intensity
|
||
function updateScrollIntensity() {
|
||
const scrollPercent = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight);
|
||
const intensity = Math.min(5, Math.floor(scrollPercent * 5) + 1);
|
||
|
||
const geometry = document.querySelector('.global-sacred-geometry');
|
||
if (geometry) {
|
||
// Remove previous intensity classes
|
||
geometry.classList.remove('scroll-intensity-1', 'scroll-intensity-2', 'scroll-intensity-3', 'scroll-intensity-4', 'scroll-intensity-5');
|
||
geometry.classList.add(`scroll-intensity-${intensity}`);
|
||
}
|
||
|
||
// Update particle flow based on scroll speed
|
||
const scrollSpeed = Math.abs(window.scrollY - (window.lastScrollY || 0));
|
||
if (scrollSpeed > 10) {
|
||
document.querySelectorAll('.sacred-particles').forEach(particle => {
|
||
particle.style.animationDuration = '30s';
|
||
setTimeout(() => {
|
||
particle.style.animationDuration = '45s';
|
||
}, 2000);
|
||
});
|
||
}
|
||
window.lastScrollY = window.scrollY;
|
||
}
|
||
|
||
window.addEventListener('scroll', updateScrollIntensity);
|
||
|
||
// Organic Flow Response to User Activity
|
||
let userActivity = 0;
|
||
let activityTimer;
|
||
|
||
function increaseActivity() {
|
||
userActivity = Math.min(userActivity + 1, 10);
|
||
clearTimeout(activityTimer);
|
||
activityTimer = setTimeout(() => {
|
||
userActivity = Math.max(userActivity - 1, 0);
|
||
}, 2000);
|
||
|
||
// Adjust organic flow based on activity
|
||
const flowElements = document.querySelectorAll('.organic-flow');
|
||
const flowSpeed = Math.max(40, 80 - (userActivity * 4));
|
||
flowElements.forEach(element => {
|
||
element.style.animationDuration = `${flowSpeed}s`;
|
||
});
|
||
}
|
||
|
||
['mousemove', 'scroll', 'click', 'keydown'].forEach(event => {
|
||
document.addEventListener(event, increaseActivity);
|
||
});
|
||
|
||
// Time-based Sacred Geometry Variations
|
||
function updateTimeBasedGeometry() {
|
||
const hour = new Date().getHours();
|
||
const sri = document.querySelector('.sacred-layer-7');
|
||
const vesica = document.querySelector('.sacred-layer-8');
|
||
|
||
if (sri && vesica) {
|
||
// Dawn/Dusk enhancement (5-7 AM, 5-7 PM)
|
||
if ((hour >= 5 && hour <= 7) || (hour >= 17 && hour <= 19)) {
|
||
sri.style.opacity = '0.6';
|
||
vesica.style.opacity = '0.7';
|
||
}
|
||
// Night mystical hours (10 PM - 5 AM)
|
||
else if (hour >= 22 || hour <= 5) {
|
||
sri.style.opacity = '0.5';
|
||
vesica.style.opacity = '0.6';
|
||
}
|
||
// Regular daytime
|
||
else {
|
||
sri.style.opacity = '0.4';
|
||
vesica.style.opacity = '0.5';
|
||
}
|
||
}
|
||
}
|
||
|
||
updateTimeBasedGeometry();
|
||
setInterval(updateTimeBasedGeometry, 60000); // Update every minute
|
||
|
||
// Initialize enhanced systems
|
||
updateScrollIntensity();
|
||
</script>
|
||
|
||
{% block extra_scripts %}{% endblock %}
|
||
</body>
|
||
</html>
|