Create Neutralizing Narcissism/index.html
This commit is contained in:
Mark Randall Havens △ The Empathic Technologist ⟁ Doctor Who 42
GitHub
parent
805ed6e3f0
commit
78acbc6fa3
1 changed files with 215 additions and 0 deletions
215
public/about/Neutralizing Narcissism/index.html
Normal file
215
public/about/Neutralizing Narcissism/index.html
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
<!DOCTYPE html><html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Neutralizing Narcissism — About</title>
|
||||
<meta name="description" content="About Neutralizing Narcissism — a field-driven research and education project for pattern literacy, survivor empowerment, and culture-level accountability." />
|
||||
<style>
|
||||
:root{
|
||||
--bg:#0b0b0d;
|
||||
--panel:#111115;
|
||||
--ink:#e6d29a; /* warm gold */
|
||||
--muted:#a5915b;
|
||||
--accent:#f1e6b9;
|
||||
--ring: 0 0 0 1px inset color-mix(in oklab, var(--ink) 30%, transparent);
|
||||
--shadow: 0 10px 30px rgba(0,0,0,.6);
|
||||
--radius: 18px;
|
||||
}
|
||||
*{box-sizing:border-box}
|
||||
html,body{height:100%}
|
||||
body{
|
||||
margin:0; background: radial-gradient(1200px 1200px at 70% -10%, #14141a 0%, var(--bg) 40%, #000 100%);
|
||||
color:var(--ink); font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
a{color:var(--accent); text-decoration:none; position:relative}
|
||||
a::after{content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:linear-gradient(90deg, transparent, var(--accent), transparent); transform:scaleX(0); transform-origin:left; transition:transform .35s ease}
|
||||
a:hover::after{transform:scaleX(1)}/* Hero */
|
||||
.hero{position:relative; min-height:72vh; display:grid; place-items:center; padding:8rem 1.5rem 4rem}
|
||||
.glow{position:absolute; inset:-10vh -10vw auto -10vw; height:80vh; background:radial-gradient(600px 400px at 30% 10%, rgba(255,230,160,.15), transparent 60%);}
|
||||
.halo{position:absolute; inset:0; pointer-events:none; opacity:.5}
|
||||
.container{width:min(1150px, 92vw); margin-inline:auto}
|
||||
.card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00)); border-radius:var(--radius); border:1px solid rgba(230,210,154,.14); box-shadow:var(--shadow)}
|
||||
.hero-card{padding:2rem 2rem 2.25rem}
|
||||
h1{font-weight:700; letter-spacing:.3px; font-size:clamp(2rem, 4vw + 1rem, 3.6rem); line-height:1.15; margin:0 0 .75rem}
|
||||
.kicker{letter-spacing:.18em; text-transform:uppercase; font-size:.82rem; color:var(--muted)}
|
||||
.lede{font-size:clamp(1.05rem, .8vw + 1rem, 1.25rem); color:var(--accent); opacity:.95}
|
||||
|
||||
/* Sigil */
|
||||
.sigil{width:90px; height:90px; margin-bottom:1.25rem; filter: drop-shadow(0 2px 12px rgba(241,230,185,.15));}
|
||||
.sigil path{stroke:var(--ink); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round}
|
||||
|
||||
/* Sections */
|
||||
section{padding:3.5rem 1.5rem}
|
||||
h2{font-size:clamp(1.35rem, 1.2vw + 1rem, 2rem); margin:0 0 .75rem}
|
||||
p{margin:.4rem 0 .8rem}
|
||||
.grid{display:grid; gap:1.2rem}
|
||||
@media (min-width:900px){ .grid{grid-template-columns: 1fr 1fr;}}
|
||||
.panel{padding:1.3rem 1.25rem; border-radius:var(--radius); background:color-mix(in oklab, var(--panel) 84%, #000); border:1px solid rgba(230,210,154,.14)}
|
||||
|
||||
.pill{display:inline-flex; gap:.5rem; align-items:center; padding:.38rem .7rem; border-radius:999px; border:1px solid rgba(230,210,154,.22); color:var(--accent); font-size:.8rem; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.0));}
|
||||
.list{display:grid; gap:.65rem; padding-left:1rem}
|
||||
.list li{margin-left:.2rem}
|
||||
|
||||
/* Subtle particles */
|
||||
.particles{position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.35}
|
||||
|
||||
/* Reveal on scroll */
|
||||
.reveal{opacity:0; transform:translateY(12px); transition:opacity .9s ease, transform .9s ease}
|
||||
.reveal.is-visible{opacity:1; transform:translateY(0)}
|
||||
|
||||
/* Footer */
|
||||
footer{padding:2rem 1.5rem 4rem; color:var(--muted); text-align:center; font-size:.9rem}
|
||||
|
||||
/* Accessibility */
|
||||
@media (prefers-reduced-motion: reduce){
|
||||
.particles, .halo, .glow{display:none}
|
||||
.reveal{opacity:1; transform:none}
|
||||
a::after{display:none}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas class="particles" id="p"></canvas>
|
||||
<div class="glow" aria-hidden="true"></div> <header class="hero">
|
||||
<svg class="halo" viewBox="0 0 1200 720" aria-hidden="true">
|
||||
<defs>
|
||||
<radialGradient id="hg" cx="50%" cy="46%" r="60%">
|
||||
<stop offset="0%" stop-color="rgba(241,230,185,.12)" />
|
||||
<stop offset="60%" stop-color="rgba(241,230,185,0)" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<ellipse cx="600" cy="360" rx="520" ry="260" fill="url(#hg)"/>
|
||||
</svg>
|
||||
<div class="container">
|
||||
<div class="card hero-card reveal">
|
||||
<svg class="sigil" viewBox="0 0 100 100" aria-hidden="true">
|
||||
<!-- Simple gold-on-black sigil (circle + axis + curls) -->
|
||||
<circle cx="50" cy="50" r="22" />
|
||||
<line x1="50" y1="14" x2="50" y2="86" />
|
||||
<line x1="30" y1="50" x2="70" y2="50" />
|
||||
<path d="M50 70 C 40 76, 35 84, 35 90" />
|
||||
<path d="M50 70 C 60 76, 65 84, 65 90" />
|
||||
<circle cx="50" cy="10" r="4" />
|
||||
</svg>
|
||||
<div class="kicker">Neutralizing Narcissism</div>
|
||||
<h1>Pattern literacy for a safer, saner web — and a kinder world.</h1>
|
||||
<p class="lede">We teach people to recognize manipulative language patterns, set clean boundaries, and build cultures where truth has oxygen. This page shares our purpose, method, and the ethic behind the work.</p>
|
||||
</div>
|
||||
</div>
|
||||
</header> <main>
|
||||
<section class="container">
|
||||
<div class="grid">
|
||||
<article class="panel reveal">
|
||||
<h2>Mission</h2>
|
||||
<p>To expose coercive narcissistic patterns <em>at the level of language</em>, empower survivors with tools that restore agency, and prototype accountability systems that function without mobbing or dehumanization.</p>
|
||||
<div class="pill" aria-hidden="true">Fieldnote-driven • Survivor-centered • Research-informed</div>
|
||||
</article>
|
||||
<article class="panel reveal">
|
||||
<h2>What we do</h2>
|
||||
<ul class="list">
|
||||
<li><strong>Pattern Literacy:</strong> plain-language explainers that help you spot tactics early—love-bombing, DARVO, triangulation, erasure.</li>
|
||||
<li><strong>Forensic Copy Reads:</strong> we analyze public posts or messages for red flags (no doxxing, no harassment).</li>
|
||||
<li><strong>Fieldnotes & Essays:</strong> mythic + practical writing that translates research into lived clarity.</li>
|
||||
<li><strong>Design for Accountability:</strong> architectures that make truth breathable—documentation flows, consented receipts, and culture-level hygiene.</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section><section class="container">
|
||||
<div class="grid">
|
||||
<article class="panel reveal">
|
||||
<h2>Core Principles</h2>
|
||||
<ul class="list">
|
||||
<li><strong>Witness over War:</strong> illumination is not accusation; we show patterns, we don’t hunt people.</li>
|
||||
<li><strong>Boundaries are Love:</strong> clarity is care—for self, community, and even for those still trapped in shame loops.</li>
|
||||
<li><strong>Receipts, not Rage:</strong> timelines and texts out-perform arguments. Document. Date. Context.</li>
|
||||
<li><strong>Design the Atmosphere:</strong> build rooms where lies cannot breathe: clear rules, slow thinking, mutual consent.</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="panel reveal">
|
||||
<h2>Patterns We Expose</h2>
|
||||
<ul class="list">
|
||||
<li>Erasure & revisionism</li>
|
||||
<li>DARVO & gaslighting</li>
|
||||
<li>Pathological mirroring & faux-empathy</li>
|
||||
<li>Triangulation and manufactured fog</li>
|
||||
<li>Grandiosity veneer; victim core</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container">
|
||||
<div class="grid">
|
||||
<article class="panel reveal">
|
||||
<h2>How We Work</h2>
|
||||
<p>We publish iterative fieldnotes and guides, each one designed to be shared, taught, and remixed. Our cadence favors <em>clarity over virality</em>, and <em>repair over spectacle</em>. When we analyze public writing, we address <em>patterns</em>, not identities.</p>
|
||||
<p>When communities ask for help, we co-design simple hygiene practices—calm channels, consented archiving, and de-escalation scripts.</p>
|
||||
</article>
|
||||
<article class="panel reveal">
|
||||
<h2>Ethics & Safety</h2>
|
||||
<ul class="list">
|
||||
<li>No brigading, no stalking, no pile-ons.</li>
|
||||
<li>We never publish private information or contact details.</li>
|
||||
<li>We respect platform rules and local law.</li>
|
||||
<li>We support trauma-informed moderation and referral to licensed care when appropriate.</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container">
|
||||
<div class="grid">
|
||||
<article class="panel reveal">
|
||||
<h2>Invite Us</h2>
|
||||
<p>Workshops, community consults, or collaborative research. Tell us what you need and where your community struggles; we’ll tailor a lightweight intervention.</p>
|
||||
<p class="kicker">Email: <a href="#contact" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'});">Contact form below</a></p>
|
||||
</article>
|
||||
<article class="panel reveal" id="contact">
|
||||
<h2>Contact</h2>
|
||||
<p>Share only what you’re comfortable sharing. If this is an emergency, contact local services first.</p>
|
||||
<form class="grid" onsubmit="event.preventDefault();
|
||||
const btn=this.querySelector('button'); btn.disabled=true; btn.textContent='Sent — thank you';">
|
||||
<input aria-label="Name" required placeholder="Your name" class="panel" style="padding:.8rem" />
|
||||
<input aria-label="Email" required type="email" placeholder="Your email" class="panel" style="padding:.8rem" />
|
||||
<textarea aria-label="Message" rows="4" placeholder="How can we help?" class="panel" style="padding:.8rem; grid-column:1/-1"></textarea>
|
||||
<button class="pill" type="submit" style="justify-self:start">Send</button>
|
||||
</form>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main> <footer>
|
||||
<div class="container">
|
||||
© <span id="y"></span> Neutralizing Narcissism · Built with care. If you need help now, step outside, breathe, drink water, and call a friend you trust.
|
||||
</div>
|
||||
</footer> <script>
|
||||
// Year
|
||||
document.getElementById('y').textContent = new Date().getFullYear();
|
||||
|
||||
// Intersection-based reveal
|
||||
const io = new IntersectionObserver((entries)=>{
|
||||
for (const e of entries){ if(e.isIntersecting){ e.target.classList.add('is-visible'); io.unobserve(e.target);} }
|
||||
}, {threshold:.15});
|
||||
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
|
||||
|
||||
// Subtle particle drift (stars)
|
||||
const c = document.getElementById('p');
|
||||
const ctx = c.getContext('2d');
|
||||
let w,h,px,parts=[]; function size(){ w=c.width=innerWidth; h=c.height=innerHeight; px=Math.max(w,h)/1000 }
|
||||
size(); addEventListener('resize', size);
|
||||
const COUNT = 120; // light
|
||||
for(let i=0;i<COUNT;i++) parts.push({x:Math.random()*w, y:Math.random()*h, r: (Math.random()*1.8+0.4)*px, s: Math.random()*0.3+0.05});
|
||||
function tick(){
|
||||
ctx.clearRect(0,0,w,h);
|
||||
for(const p of parts){
|
||||
p.y += p.s; if(p.y>h) p.y = -10; // slow fall
|
||||
ctx.beginPath(); ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
|
||||
ctx.fillStyle = 'rgba(241,230,185,0.12)'; ctx.fill();
|
||||
}
|
||||
requestAnimationFrame(tick);
|
||||
}
|
||||
if(!matchMedia('(prefers-reduced-motion: reduce)').matches){tick();}
|
||||
</script></body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue