Show description
Carl Jung: Architecture of the Deep Psyche
Carl Jung: Architecture of the Deep Psyche
Analytical Psychology
Overview
The Psyche
Archetypes
Typology
Alchemy
THE LEGACY OF CARL GUSTAV JUNG
Architecture of the Deep Psyche
A journey from the rigid determinism of early psychiatry to the holistic, symbolic, and teleological understanding of the human experience.
EXPLORE THE SELF
READ LIBER NOVUS
The Map of the Soul
Jung viewed the psyche as a self-regulating system seeking balance through the interaction of distinct components.
THE SELF
Ego
Persona
Shadow
Anima/Animus
The Self
The Self is the totality of the psyche, encompassing both conscious and unconscious elements. It is the organizing principle and the "innermost nucleus" of the personality. Reaching the Self is the ultimate goal of human psychological development.
"The Self is not only the centre, but also the whole circumference which embraces both conscious and unconscious."
LIBER NOVUS
The Red Book
The Descent
Following his split with Freud, Jung entered a period of "creative illness," fearing he was descending into psychosis.…
Carl Jung: Architecture of the Deep Psyche
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carl Jung: Architecture of the Deep Psyche</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Inter:wght@300;400;600&display=swap');
:root {
--bg-deep: #0a0a0c;
--bg-card: #16161a;
--accent: #d4af37; /* Gold */
--accent-soft: rgba(212, 175, 55, 0.2);
--text-main: #e2e2e9;
--text-dim: #a1a1aa;
}
body {
background-color: var(--bg-deep);
color: var(--text-main);
font-family: 'Inter', sans-serif;
scroll-behavior: smooth;
}
h1, h2, h3, .font-serif {
font-family: 'Cinzel', serif;
}
.gold-glow {
text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}
.glass-card {
background: var(--bg-card);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
}
.glass-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
.tab-active {
color: var(--accent);
border-bottom: 2px solid var(--accent);
}
.mandala-bg {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" stroke="%23d4af37" stroke-width="0.1" fill="none" opacity="0.1"/><path d="M50 10 L50 90 M10 50 L90 50 M20 20 L80 80 M80 20 L20 80" stroke="%23d4af37" stroke-width="0.05" opacity="0.1"/></svg>');
background-repeat: repeat;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0a0a0c;
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
.section-reveal {
opacity: 0;
transform: translateY(20px);
transition: all 0.8s ease-out;
}
.section-reveal.visible {
opacity: 1;
transform: translateY(0);
}
.alchemy-stage {
cursor: pointer;
filter: grayscale(0.8);
transition: all 0.5s;
}
.alchemy-stage:hover, .alchemy-stage.active {
filter: grayscale(0);
transform: scale(1.05);
}
#archetype-detail {
transition: opacity 0.3s ease;
}
</style>
</head>
<body class="mandala-bg overflow-x-hidden">
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 bg-[#0a0a0c]/80 backdrop-blur-md border-b border-white/5">
<div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
<div class="flex items-center space-x-2">
<i class="fa-solid fa-compass text-amber-500 text-xl"></i>
<span class="font-serif font-bold text-lg tracking-widest uppercase">Analytical Psychology</span>
</div>
<div class="hidden md:flex space-x-8 text-sm uppercase tracking-wider font-semibold">
<a href="#hero" class="hover:text-amber-500 transition">Overview</a>
<a href="#psyche" class="hover:text-amber-500 transition">The Psyche</a>
<a href="#archetypes" class="hover:text-amber-500 transition">Archetypes</a>
<a href="#typology" class="hover:text-amber-500 transition">Typology</a>
<a href="#alchemy" class="hover:text-amber-500 transition">Alchemy</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="hero" class="min-h-screen flex flex-col items-center justify-center text-center px-6 pt-20">
<div class="max-w-4xl section-reveal" id="hero-content">
<h2 class="text-amber-500 font-serif tracking-widest mb-4">THE LEGACY OF CARL GUSTAV JUNG</h2>
<h1 class="text-5xl md:text-7xl font-serif font-bold mb-8 leading-tight">Architecture of the <br><span class="text-amber-500">Deep Psyche</span></h1>
<p class="text-zinc-400 text-lg md:text-xl leading-relaxed mb-10">
A journey from the rigid determinism of early psychiatry to the holistic, symbolic, and teleological understanding of the human experience.
</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="#psyche" class="px-8 py-3 bg-amber-600 hover:bg-amber-500 text-black font-bold rounded-sm transition flex items-center gap-2">
<i class="fa-solid fa-eye"></i> EXPLORE THE SELF
</a>
<a href="#liber-novus" class="px-8 py-3 border border-amber-600/50 hover:bg-amber-600/10 text-amber-500 font-bold rounded-sm transition">
READ LIBER NOVUS
</a>
</div>
</div>
<div class="mt-20 animate-bounce text-zinc-600">
<i class="fa-solid fa-chevron-down text-2xl"></i>
</div>
</section>
<!-- The Psyche Architecture -->
<section id="psyche" class="py-24 px-6 bg-[#0d0d0f]">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16 section-reveal">
<h2 class="text-3xl md:text-4xl font-serif mb-4 uppercase">The Map of the Soul</h2>
<div class="w-24 h-1 bg-amber-500 mx-auto"></div>
<p class="text-zinc-400 mt-6 max-w-2xl mx-auto">Jung viewed the psyche as a self-regulating system seeking balance through the interaction of distinct components.</p>
</div>
<div class="grid lg:grid-cols-2 gap-12 items-center">
<!-- Interactive Diagram Placeholder -->
<div class="relative aspect-square flex items-center justify-center section-reveal">
<div class="absolute inset-0 border-2 border-amber-500/10 rounded-full animate-pulse"></div>
<div class="absolute inset-8 border border-amber-500/20 rounded-full"></div>
<div class="absolute inset-16 border border-amber-500/30 rounded-full"></div>
<div class="relative z-10 flex flex-col items-center">
<div id="psyche-center" class="w-32 h-32 rounded-full glass-card flex items-center justify-center border-amber-500 border-2 shadow-[0_0_20px_rgba(212,175,55,0.3)] cursor-pointer hover:scale-110 transition duration-500" onclick="updatePsyche('Self')">
<span class="font-serif font-bold text-amber-500">THE SELF</span>
</div>
<!-- Floating Orbitals -->
<div class="absolute -top-12 cursor-pointer hover:text-amber-500 transition" onclick="updatePsyche('Ego')">
<div class="p-4 glass-card rounded-lg text-xs font-bold uppercase tracking-widest">Ego</div>
</div>
<div class="absolute -left-12 top-1/2 -translate-y-1/2 cursor-pointer hover:text-amber-500 transition" onclick="updatePsyche('Persona')">
<div class="p-4 glass-card rounded-lg text-xs font-bold uppercase tracking-widest">Persona</div>
</div>
<div class="absolute -right-12 top-1/2 -translate-y-1/2 cursor-pointer hover:text-amber-500 transition" onclick="updatePsyche('Shadow')">
<div class="p-4 glass-card rounded-lg text-xs font-bold uppercase tracking-widest">Shadow</div>
</div>
<div class="absolute -bottom-12 cursor-pointer hover:text-amber-500 transition" onclick="updatePsyche('Soul')">
<div class="p-4 glass-card rounded-lg text-xs font-bold uppercase tracking-widest">Anima/Animus</div>
</div>
</div>
</div>
<div class="glass-card p-8 md:p-12 rounded-lg section-reveal" id="psyche-info">
<h3 id="psyche-title" class="text-3xl font-serif text-amber-500 mb-6">The Self</h3>
<p id="psyche-desc" class="text-zinc-400 leading-relaxed text-lg">
The Self is the totality of the psyche, encompassing both conscious and unconscious elements. It is the organizing principle and the "innermost nucleus" of the personality. Reaching the Self is the ultimate goal of human psychological development.
</p>
<div class="mt-8 flex gap-4">
<div class="h-12 w-1 bg-amber-500"></div>
<p id="psyche-quote" class="italic text-zinc-500">"The Self is not only the centre, but also the whole circumference which embraces both conscious and unconscious."</p>
</div>
</div>
</div>
</div>
</section>
<!-- Liber Novus / Black Books Section -->
<section id="liber-novus" class="py-24 px-6 relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full bg-red-950/10 -z-10"></div>
<div class="max-w-7xl mx-auto flex flex-col md:flex-row gap-12 items-center">
<div class="w-full md:w-1/2 section-reveal">
<div class="relative group">
<div class="absolute -inset-1 bg-gradient-to-r from-red-600 to-amber-600 rounded-lg blur opacity-25 group-hover:opacity-50 transition duration-1000"></div>
<div class="relative glass-card bg-zinc-900 rounded-lg p-2 overflow-hidden">
<div class="bg-red-900/20 p-8 border-2 border-red-900/30 rounded flex flex-col items-center justify-center aspect-[3/4]">
<i class="fa-solid fa-book-bible text-6xl text-red-500 mb-6"></i>
<h4 class="font-serif text-2xl text-center">LIBER NOVUS</h4>
<p class="text-zinc-500 text-sm mt-4 tracking-tighter uppercase font-bold">The Red Book</p>
</div>
</div>
</div>
</div>
<div class="w-full md:w-1/2 section-reveal">
<h2 class="text-3xl font-serif mb-6 text-red-500">The Descent</h2>
<p class="text-zinc-400 mb-6 leading-relaxed">
Following his split with Freud, Jung entered a period of "creative illness," fearing he was descending into psychosis. He meticulously recorded his visions in the <strong>Black Books</strong> and later the illuminated <strong>Red Book (Liber Novus)</strong>.
</p>
<ul class="space-y-4 text-zinc-400">
<li class="flex items-start gap-3">
<i class="fa-solid fa-feather-pointed text-red-500 mt-1"></i>
<span><strong>Active Imagination:</strong> A method of interacting with unconscious "sub-personalities" in a waking state.</span>
</li>
<li class="flex items-start gap-3">
<i class="fa-solid fa-feather-pointed text-red-500 mt-1"></i>
<span><strong>Philemon:</strong> A wise old man figure Jung encountered, representing superior insight.</span>
</li>
<li class="flex items-start gap-3">
<i class="fa-solid fa-feather-pointed text-red-500 mt-1"></i>
<span><strong>Legacy:</strong> Every subsequent scientific theory Jung proposed was an elaboration of the material that flooded him during these years.</span>
</li>
</ul>
</div>
</div>
</section>
<!-- Archetypes Section -->
<section id="archetypes" class="py-24 px-6 bg-[#0a0a0c]">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16 section-reveal">
<h2 class="text-3xl md:text-4xl font-serif mb-4 uppercase">The Collective Unconscious</h2>
<p class="text-zinc-400 max-w-2xl mx-auto">Universal, primordial images common to all humanity, appearing in myths, dreams, and art.</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mb-12">
<button onclick="showArchetype('hero')" class="glass-card p-6 rounded-lg text-center hover:bg-amber-600/10 transition">
<i class="fa-solid fa-shield-halved text-3xl text-amber-500 mb-3"></i>
<div class="font-serif text-sm">The Hero</div>
</button>
<button onclick="showArchetype('mother')" class="glass-card p-6 rounded-lg text-center hover:bg-amber-600/10 transition">
<i class="fa-solid fa-hands-holding-child text-3xl text-amber-500 mb-3"></i>
<div class="font-serif text-sm">Great Mother</div>
</button>
<button onclick="showArchetype('wise')" class="glass-card p-6 rounded-lg text-center hover:bg-amber-600/10 transition">
<i class="fa-solid fa-hat-wizard text-3xl text-amber-500 mb-3"></i>
<div class="font-serif text-sm">Wise Old Man</div>
</button>
<button onclick="showArchetype('trickster')" class="glass-card p-6 rounded-lg text-center hover:bg-amber-600/10 transition">
<i class="fa-solid fa-mask text-3xl text-amber-500 mb-3"></i>
<div class="font-serif text-sm">The Trickster</div>
</button>
<button onclick="showArchetype('child')" class="glass-card p-6 rounded-lg text-center hover:bg-amber-600/10 transition">
<i class="fa-solid fa-seedling text-3xl text-amber-500 mb-3"></i>
<div class="font-serif text-sm">The Child</div>
</button>
</div>
<div id="archetype-detail" class="glass-card p-10 rounded-lg min-h-[200px] flex items-center justify-center section-reveal">
<div class="text-center max-w-2xl">
<h4 id="arch-name" class="text-2xl font-serif text-amber-500 mb-4 uppercase tracking-widest">Select an Archetype</h4>
<p id="arch-desc" class="text-zinc-400 leading-relaxed italic">The collective unconscious is a shared reservoir of inherited patterns of thought and behavior common to all humanity.</p>
</div>
</div>
</div>
</section>
<!-- Typology Grid -->
<section id="typology" class="py-24 px-6 bg-[#0d0d0f]">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16 section-reveal">
<h2 class="text-3xl md:text-4xl font-serif mb-4 uppercase">Psychological Types</h2>
<p class="text-zinc-400 max-w-2xl mx-auto">The taxonomy of consciousness: how we perceive and evaluate the world.</p>
</div>
<div class="grid md:grid-cols-2 gap-12">
<div class="space-y-6 section-reveal">
<h4 class="text-xl font-serif text-amber-500 border-b border-amber-500/20 pb-2">The Two Attitudes</h4>
<div class="grid grid-cols-2 gap-4">
<div class="glass-card p-6 rounded-lg">
<h5 class="font-bold text-amber-500 mb-2 uppercase">Extraversion</h5>
<p class="text-sm text-zinc-400">Energy directed toward the external world of objects and people.</p>
</div>
<div class="glass-card p-6 rounded-lg">
<h5 class="font-bold text-amber-500 mb-2 uppercase">Introversion</h5>
<p class="text-sm text-zinc-400">Energy directed inward toward subjective psychological processes.</p>
</div>
</div>
<h4 class="text-xl font-serif text-amber-500 border-b border-amber-500/20 pb-2 pt-6">The Four Functions</h4>
<div class="grid grid-cols-2 gap-4">
<div class="glass-card p-6 rounded-lg border-l-4 border-l-blue-500">
<h5 class="font-bold text-blue-500 mb-2 uppercase">Thinking</h5>
<p class="text-sm text-zinc-400">Rational: Logical laws and concepts to connect information.</p>
</div>
<div class="glass-card p-6 rounded-lg border-l-4 border-l-pink-500">
<h5 class="font-bold text-pink-500 mb-2 uppercase">Feeling</h5>
<p class="text-sm text-zinc-400">Rational: Subjective values to evaluate worth.</p>
</div>
<div class="glass-card p-6 rounded-lg border-l-4 border-l-green-500">
<h5 class="font-bold text-green-500 mb-2 uppercase">Sensation</h5>
<p class="text-sm text-zinc-400">Irrational: Perception through the sense organs.</p>
</div>
<div class="glass-card p-6 rounded-lg border-l-4 border-l-purple-500">
<h5 class="font-bold text-purple-500 mb-2 uppercase">Intuition</h5>
<p class="text-sm text-zinc-400">Irrational: Perception via the unconscious / hunches.</p>
</div>
</div>
</div>
<div class="section-reveal">
<div class="glass-card p-8 rounded-lg h-full">
<h4 class="text-xl font-serif text-amber-500 mb-6 uppercase">Beebe's 8-Function Model</h4>
<div class="space-y-3">
<div class="flex items-center justify-between p-3 bg-white/5 rounded">
<span class="text-xs uppercase font-bold text-zinc-500">1. Hero</span>
<span class="text-sm font-semibold">Dominant Function</span>
</div>
<div class="flex items-center justify-between p-3 bg-white/5 rounded">
<span class="text-xs uppercase font-bold text-zinc-500">2. Good Parent</span>
<span class="text-sm font-semibold">Auxiliary Support</span>
</div>
<div class="flex items-center justify-between p-3 bg-white/5 rounded">
<span class="text-xs uppercase font-bold text-zinc-500">3. Eternal Child</span>
<span class="text-sm font-semibold">Tertiary / Creative</span>
</div>
<div class="flex items-center justify-between p-3 bg-white/5 rounded">
<span class="text-xs uppercase font-bold text-zinc-500">4. Anima/Animus</span>
<span class="text-sm font-semibold">Inferior / Bridge</span>
</div>
<div class="pt-4 opacity-50 text-xs font-bold uppercase tracking-widest text-red-500">The Shadow Stack</div>
<div class="flex items-center justify-between p-3 bg-red-500/5 border border-red-500/20 rounded">
<span class="text-xs uppercase font-bold text-zinc-500">5. Opposing Personality</span>
<span class="text-sm">Shadow of the Hero</span>
</div>
<div class="flex items-center justify-between p-3 bg-red-500/5 border border-red-500/20 rounded">
<span class="text-xs uppercase font-bold text-zinc-500">7. Trickster</span>
<span class="text-sm">Shadow of the Child</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Alchemy Section -->
<section id="alchemy" class="py-24 px-6">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16 section-reveal">
<h2 class="text-3xl md:text-4xl font-serif mb-4 uppercase">The Alchemical Opus</h2>
<p class="text-zinc-400 max-w-2xl mx-auto">Jung viewed alchemy as a symbolic projection of the individuation process—the transformation of the soul.</p>
</div>
<div class="grid md:grid-cols-4 gap-6">
<div class="alchemy-stage glass-card p-8 rounded-lg text-center" onclick="updateAlchemy(0)">
<div class="w-16 h-16 bg-zinc-900 rounded-full mx-auto mb-6 flex items-center justify-center border-2 border-zinc-700">
<div class="w-8 h-8 bg-zinc-800 rounded-full"></div>
</div>
<h4 class="font-serif text-xl mb-2">Nigredo</h4>
<span class="text-xs uppercase text-zinc-500 font-bold">Blackness</span>
</div>
<div class="alchemy-stage glass-card p-8 rounded-lg text-center" onclick="updateAlchemy(1)">
<div class="w-16 h-16 bg-white rounded-full mx-auto mb-6 flex items-center justify-center border-2 border-zinc-200">
<div class="w-8 h-8 bg-zinc-100 rounded-full"></div>
</div>
<h4 class="font-serif text-xl mb-2">Albedo</h4>
<span class="text-xs uppercase text-zinc-500 font-bold">Whiteness</span>
</div>
<div class="alchemy-stage glass-card p-8 rounded-lg text-center" onclick="updateAlchemy(2)">
<div class="w-16 h-16 bg-yellow-400 rounded-full mx-auto mb-6 flex items-center justify-center border-2 border-yellow-200">
<div class="w-8 h-8 bg-yellow-300 rounded-full"></div>
</div>
<h4 class="font-serif text-xl mb-2">Citrinitas</h4>
<span class="text-xs uppercase text-zinc-500 font-bold">Yellowness</span>
</div>
<div class="alchemy-stage glass-card p-8 rounded-lg text-center" onclick="updateAlchemy(3)">
<div class="w-16 h-16 bg-red-600 rounded-full mx-auto mb-6 flex items-center justify-center border-2 border-red-400">
<div class="w-8 h-8 bg-red-500 rounded-full"></div>
</div>
<h4 class="font-serif text-xl mb-2">Rubedo</h4>
<span class="text-xs uppercase text-zinc-500 font-bold">Redness</span>
</div>
</div>
<div id="alchemy-info" class="mt-12 glass-card p-10 rounded-lg section-reveal">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/3">
<h3 id="alchemy-title" class="text-3xl font-serif text-amber-500 mb-2">The Opus</h3>
<p id="alchemy-sub" class="text-zinc-500 uppercase tracking-widest font-bold text-xs">Psychological Transformation</p>
</div>
<div class="md:w-2/3">
<p id="alchemy-desc" class="text-zinc-400 text-lg leading-relaxed italic">
Select a stage of the alchemical process to see its psychological parallel in the individuation journey.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Synchronicity & Religion -->
<section class="py-24 px-6 bg-[#0a0a0c]">
<div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12">
<div class="glass-card p-10 rounded-lg section-reveal border-l-4 border-l-amber-600">
<h2 class="text-3xl font-serif text-amber-500 mb-6">Synchronicity</h2>
<p class="text-zinc-400 leading-relaxed">
An "acausal connecting principle." Meaningful coincidences where an internal state aligns with an external event. Jung hypothesized a "psychoid" level of reality where mind and matter meet.
</p>
<div class="mt-6 p-4 bg-amber-600/5 rounded italic text-sm text-zinc-500 border border-amber-600/10">
"Synchronicity reveals the interconnectedness of all things, functioning as an act of creation in time."
</div>
</div>
<div class="glass-card p-10 rounded-lg section-reveal border-l-4 border-l-red-600">
<h2 class="text-3xl font-serif text-red-500 mb-6">The Numinous</h2>
<p class="text-zinc-400 leading-relaxed">
Unlike Freud, Jung saw religion as a vital expression of the psyche striving for meaning. He argued the psyche is "naturally religious" and spiritual alienation is a primary cause of neurosis.
</p>
<div class="mt-6 p-4 bg-red-600/5 rounded italic text-sm text-zinc-500 border border-red-600/10">
"I don't have to believe in God, I know." — Jung, 1959.
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 border-t border-white/5 text-center section-reveal">
<div class="flex items-center justify-center space-x-2 mb-6">
<i class="fa-solid fa-compass text-amber-500 text-2xl"></i>
<span class="font-serif font-bold text-xl tracking-widest uppercase">The Symbolic Life</span>
</div>
<p class="text-zinc-500 text-sm max-w-xl mx-auto px-6">
"Your visions will become clear only when you can look into your own heart. Who looks outside, dreams; who looks inside, awakes."
</p>
<div class="mt-8 text-zinc-600 text-xs">
Deep Research Visualization • 2026
</div>
</footer>
<script>
// Scroll Animations
const observerOptions = {
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
document.querySelectorAll('.section-reveal').forEach(el => observer.observe(el));
// Psyche Logic
const psycheData = {
'Self': {
title: 'The Self',
desc: 'The totality of the psyche, encompassing both conscious and unconscious elements. It is the organizing principle and the "innermost nucleus" of the personality, often personified as a Wise Old Man or a mandala.',
quote: '"The Self is not only the centre, but also the whole circumference which embraces both conscious and unconscious."'
},
'Ego': {
title: 'The Ego',
desc: 'The center of consciousness and the seat of identity. It functions as a gateway, determining which thoughts and perceptions are allowed into awareness. However, the ego is only a small part of the total psyche.',
quote: '"The ego stands to the self as the moved to the mover."'
},
'Persona': {
title: 'The Persona',
desc: 'The social mask or "conformity archetype" we adopt to navigate society. While essential for social survival, identifying too closely with it leads to losing contact with one\'s authentic self.',
quote: '"The persona is that which in reality one is not, but which oneself as well as others think one is."'
},
'Shadow': {
title: 'The Shadow',
desc: 'The hidden, repressed, and often "inferior" aspects of the personality incompatible with the persona. It contains dark traits like envy and aggression but is also a treasure trove of creative energy.',
quote: '"Until you make the unconscious conscious, it will direct your life and you will call it fate."'
},
'Soul': {
title: 'Anima / Animus',
desc: 'The "soul image." The anima is the inner feminine in men; the animus is the inner masculine in women. They serve as bridges to the collective unconscious and represent contrasexual potentials.',
quote: '"The meeting of two personalities is like the contact of two chemical substances: if there is any reaction, both are transformed."'
}
};
function updatePsyche(key) {
const data = psycheData[key];
const info = document.getElementById('psyche-info');
info.style.opacity = 0;
setTimeout(() => {
document.getElementById('psyche-title').innerText = data.title;
document.getElementById('psyche-desc').innerText = data.desc;
document.getElementById('psyche-quote').innerText = data.quote;
info.style.opacity = 1;
}, 300);
}
// Archetype Logic
const archData = {
'hero': {
name: 'The Hero',
desc: 'The champion who undergoes a trial to achieve a great goal, symbolizing the ego’s struggle to emerge from the unconscious and achieve independence.'
},
'mother': {
name: 'The Great Mother',
desc: 'Represents nurturing, protection, and compassion, but also has a "devouring" or "terrible" aspect (like the witch or dark goddess).'
},
'wise': {
name: 'The Wise Old Man',
desc: 'A figure of wisdom, spiritual guidance, and "mana-personality." Often appears as a guru, priest, or magician in dreams to provide vital insight.'
},
'trickster': {
name: 'The Trickster',
desc: 'The troublemaker or rule-breaker who disrupts the status quo, representing the chaotic, unpredictable, and often creative nature of the psyche.'
},
'child': {
name: 'The Child',
desc: 'Represents the "primordial child" or the future-oriented potential for growth, rebirth, and new beginnings. The archetype of the "divine child."'
}
};
function showArchetype(id) {
const detail = document.getElementById('archetype-detail');
detail.style.opacity = 0;
setTimeout(() => {
document.getElementById('arch-name').innerText = archData[id].name;
document.getElementById('arch-desc').innerText = archData[id].desc;
detail.style.opacity = 1;
}, 300);
}
// Alchemy Logic
const alchemyData = [
{
title: 'Nigredo (Blackness)',
desc: 'Confrontation with the Shadow; psychological disintegration or the "dark night of the soul." It involves breaking down old ego structures to return to unformed potential (prima materia).'
},
{
title: 'Albedo (Whiteness)',
desc: 'Spiritual purification and the emergence of clarity/insight after the initial crisis. A transition from darkness to light and the initial integration of masculine/feminine aspects.'
},
{
title: 'Citrinitas (Yellowness)',
desc: 'Sublimation and the "dawn" of solar consciousness. Experiencing inner freedom and preparation for the final transformation.'
},
{
title: 'Rubedo (Redness)',
desc: 'Rebirth and the realization of the "Philosopher’s Stone" or the Self. Achieving psychological wholeness and the union of opposites (coniunctio oppositorum).'
}
];
function updateAlchemy(index) {
const data = alchemyData[index];
const stages = document.querySelectorAll('.alchemy-stage');
stages.forEach((s, i) => {
if(i === index) s.classList.add('active', 'border-amber-500');
else s.classList.remove('active', 'border-amber-500');
});
const info = document.getElementById('alchemy-info');
info.style.opacity = 0;
setTimeout(() => {
document.getElementById('alchemy-title').innerText = data.title;
document.getElementById('alchemy-desc').innerText = data.desc;
info.style.opacity = 1;
}, 300);
}
// Initialization
window.onload = () => {
document.getElementById('hero-content').classList.add('visible');
}
</script>
</body>
</html>