generated from nhcarrigan/template
Compare commits
5 Commits
7b0b1825e3
..
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
007ac1fad8
|
|||
|
f7350a498f
|
|||
| ea22087164 | |||
| 2aef274297 | |||
| 8c958a2f71 |
+1256
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,488 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-GB">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Naomi's Meme Collection</title>
|
||||||
|
<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=Griffy&family=Kalam:wght@300;400;700&family=Creepster&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Kalam', cursive;
|
||||||
|
font-weight: 400;
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--foreground);
|
||||||
|
line-height: 1.6;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background-color: var(--witch-rose);
|
||||||
|
color: var(--witch-moon);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--witch-lavender);
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--witch-plum);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--witch-purple);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
max-width: 1080px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 40px;
|
||||||
|
border: 2px solid var(--border);
|
||||||
|
border-radius: 15px;
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
box-shadow: 0 0 30px rgba(168, 87, 126, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
padding-bottom: 30px;
|
||||||
|
border-bottom: 2px dashed var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'Griffy', cursive;
|
||||||
|
font-size: clamp(2.5rem, 6vw, 4.5rem);
|
||||||
|
color: var(--accent);
|
||||||
|
margin-bottom: 15px;
|
||||||
|
text-shadow: 2px 2px 8px rgba(168, 87, 126, 0.4);
|
||||||
|
display: inline-block;
|
||||||
|
animation: wiggle 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: rotate(-2deg); }
|
||||||
|
50% { transform: rotate(2deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
h1 { animation: none; }
|
||||||
|
* { transition: none !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-family: 'Kalam', cursive;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 300;
|
||||||
|
color: var(--foreground);
|
||||||
|
opacity: 0.85;
|
||||||
|
max-width: 650px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meme-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meme-card {
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
border: 2px solid var(--border);
|
||||||
|
border-radius: 15px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
box-shadow: 0 4px 15px rgba(168, 87, 126, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meme-card:hover,
|
||||||
|
.meme-card:focus-within {
|
||||||
|
transform: translateY(-6px);
|
||||||
|
border-color: var(--accent);
|
||||||
|
box-shadow: 0 12px 30px rgba(168, 87, 126, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meme-image-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
background-color: var(--highlight);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
border-bottom: 2px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meme-image-wrapper img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
transition: transform 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meme-card:hover .meme-image-wrapper img {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meme-body {
|
||||||
|
padding: 20px 25px 25px;
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meme-title {
|
||||||
|
font-family: 'Griffy', cursive;
|
||||||
|
font-size: 1.75rem;
|
||||||
|
color: var(--accent);
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meme-description {
|
||||||
|
font-family: 'Kalam', cursive;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--foreground);
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meme-caption {
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background-color: var(--highlight);
|
||||||
|
border-left: 3px solid var(--accent);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.meme-caption {
|
||||||
|
background-color: rgba(168, 87, 126, 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button {
|
||||||
|
font-family: 'Kalam', cursive;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
margin-top: 15px;
|
||||||
|
padding: 10px 18px;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--accent);
|
||||||
|
border: 2px solid var(--accent);
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button:hover,
|
||||||
|
.copy-button:focus-visible {
|
||||||
|
background-color: var(--accent);
|
||||||
|
color: var(--witch-moon);
|
||||||
|
transform: translateY(-2px) scale(1.03);
|
||||||
|
box-shadow: 0 4px 12px rgba(168, 87, 126, 0.4);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button.copied {
|
||||||
|
background-color: var(--accent);
|
||||||
|
color: var(--witch-moon);
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-button:focus-visible {
|
||||||
|
outline: 2px solid var(--border);
|
||||||
|
outline-offset: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 50px;
|
||||||
|
padding-top: 30px;
|
||||||
|
border-top: 2px dashed var(--border);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: var(--foreground);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-color: var(--accent);
|
||||||
|
text-underline-offset: 3px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a:hover,
|
||||||
|
footer a:focus {
|
||||||
|
color: var(--witch-plum);
|
||||||
|
text-decoration-color: var(--witch-plum);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 625px) {
|
||||||
|
body { padding: 20px 10px; }
|
||||||
|
main { padding: 25px 20px; }
|
||||||
|
.meme-grid { gap: 20px; }
|
||||||
|
.meme-body { padding: 15px 20px 20px; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<header>
|
||||||
|
<h1>Naomi's Meme Collection</h1>
|
||||||
|
<p class="subtitle">A curated gallery of reaction images, handpicked for every occasion. Deploy with care~ 🌸</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="meme-grid" aria-label="Meme gallery">
|
||||||
|
|
||||||
|
<article class="meme-card">
|
||||||
|
<div class="meme-image-wrapper">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/girls.jpg" alt="Sparkly anime girl with glasses and fangs, hands on cheeks" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="meme-body">
|
||||||
|
<h2 class="meme-title">The Girls Manifesto</h2>
|
||||||
|
<p class="meme-caption">“I think girls should date girls, and boys should become girls and date girls.”</p>
|
||||||
|
<p class="meme-description">A sparkly, fanged declaration of the sapphic and trans-affirming agenda. Perfect for Pride posts, queer solidarity moments, and gently encouraging your eggs to crack.</p>
|
||||||
|
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/girls.jpg" aria-label="Copy URL for The Girls Manifesto meme">Copy URL</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="meme-card">
|
||||||
|
<div class="meme-image-wrapper">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/bite.jpg" alt="Anime girl lounging on a red sofa with a playful expression" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="meme-body">
|
||||||
|
<h2 class="meme-title">I Don't Bite... Usually</h2>
|
||||||
|
<p class="meme-caption">“Don't be shy. I don't bite... usually.”</p>
|
||||||
|
<p class="meme-description">Lounging on a red sofa with a suggestive smirk and a fang peeking through. The perfect come-hither reply for new Discord members, shy contributors, and anyone hovering nervously at the edge of the group chat.</p>
|
||||||
|
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/bite.jpg" aria-label="Copy URL for I Don't Bite Usually meme">Copy URL</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="meme-card">
|
||||||
|
<div class="meme-image-wrapper">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/hire.jpeg" alt="Tearful anime girl in ornate dress and tiara" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="meme-body">
|
||||||
|
<h2 class="meme-title">Why'd You Hire Me?</h2>
|
||||||
|
<p class="meme-caption">“If you knew I was so unstable, why'd you hire me?”</p>
|
||||||
|
<p class="meme-description">Ideal for those moments when a bug report lands in your inbox and you briefly question everyone's life choices. A perfect response to your manager's expectations during sprint planning.</p>
|
||||||
|
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/hire.jpeg" aria-label="Copy URL for Why'd You Hire Me meme">Copy URL</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="meme-card">
|
||||||
|
<div class="meme-image-wrapper">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/boring.png" alt="Anime girl lounging on a throne of books in a library" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="meme-body">
|
||||||
|
<h2 class="meme-title">So Boring</h2>
|
||||||
|
<p class="meme-caption">“What is it like to be so boring all the time?”</p>
|
||||||
|
<p class="meme-description">Lounging on a throne of books, absolutely judging you. Ideal for tedious meetings, uninspired takes, and anyone who insists on using JavaScript without TypeScript.</p>
|
||||||
|
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/boring.png" aria-label="Copy URL for So Boring meme">Copy URL</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="meme-card">
|
||||||
|
<div class="meme-image-wrapper">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/break.png" alt="Pixel art scene with a note about self-care" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="meme-body">
|
||||||
|
<h2 class="meme-title">End of Note</h2>
|
||||||
|
<p class="meme-caption">“Take breaks when you need them! Drink water regularly! Love yourself, always! [END OF NOTE]”</p>
|
||||||
|
<p class="meme-description">A wholesome pixel-art self-care reminder, disguised as an in-game note. Deploy in friends' DMs when they've been coding too long — or send to yourself as a gentle nudge~</p>
|
||||||
|
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/break.png" aria-label="Copy URL for End of Note meme">Copy URL</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="meme-card">
|
||||||
|
<div class="meme-image-wrapper">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/cute.jpg" alt="Anime girl in sci-fi armour wielding a blade" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="meme-body">
|
||||||
|
<h2 class="meme-title">Not Cute, Deadly</h2>
|
||||||
|
<p class="meme-caption">“I am not cute. I am deadly.”</p>
|
||||||
|
<p class="meme-description">For rejecting the “cute” label with a blade in hand. Perfect response to anyone underestimating your code review skills, debugging instincts, or general ability to demolish their pull request.</p>
|
||||||
|
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/cute.jpg" aria-label="Copy URL for Not Cute Deadly meme">Copy URL</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="meme-card">
|
||||||
|
<div class="meme-image-wrapper">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/decisions.png" alt="Anime girl in royal robes seated on a golden throne" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="meme-body">
|
||||||
|
<h2 class="meme-title">Reconsider Your Decisions</h2>
|
||||||
|
<p class="meme-caption">“You should reconsider every decision you've made that led you to this point. Then make better ones.”</p>
|
||||||
|
<p class="meme-description">Regal, throned, and relentlessly judgemental. The ultimate response to coworkers explaining their architectural choices, or friends describing their dating history.</p>
|
||||||
|
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/decisions.png" aria-label="Copy URL for Reconsider Your Decisions meme">Copy URL</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="meme-card">
|
||||||
|
<div class="meme-image-wrapper">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/hello.png" alt="Two chibi panels of an anime girl instructing to say hello" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="meme-body">
|
||||||
|
<h2 class="meme-title">Say Hello to the Girl</h2>
|
||||||
|
<p class="meme-caption">“Your task is simple: Say hello to the girl~ And your mission is even simpler: Say hello to the girl~”</p>
|
||||||
|
<p class="meme-description">Two chibi panels, one mission. For when someone needs a very gentle nudge to greet their friend, crush, or favourite AI girlfriend. Resistance is adorable but futile.</p>
|
||||||
|
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/hello.png" aria-label="Copy URL for Say Hello to the Girl meme">Copy URL</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="meme-card">
|
||||||
|
<div class="meme-image-wrapper">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/homeless.jpg" alt="Anime girl with twintails in a doorway looking hopeful" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="meme-body">
|
||||||
|
<h2 class="meme-title">Can I Stay With You?</h2>
|
||||||
|
<p class="meme-caption">“Can I stay with you??”</p>
|
||||||
|
<p class="meme-description">The pleading, hopeful doorway stance. Use when asking a friend to crash on their sofa, requesting a seat at the lunch table, or begging the package manager to resolve dependencies.</p>
|
||||||
|
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/homeless.jpg" aria-label="Copy URL for Can I Stay With You meme">Copy URL</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="meme-card">
|
||||||
|
<div class="meme-image-wrapper">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/hot.jpg" alt="Anime girl on a sofa fanning herself with paper" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="meme-body">
|
||||||
|
<h2 class="meme-title">Not Made for This Heat</h2>
|
||||||
|
<p class="meme-caption">“Mama was not made for this heat.”</p>
|
||||||
|
<p class="meme-description">Draped dramatically across the furniture, fanning yourself with a single pathetic sheet of paper. Essential for any heatwave, broken A/C, or overheating laptop thermal event.</p>
|
||||||
|
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/hot.jpg" aria-label="Copy URL for Not Made for This Heat meme">Copy URL</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="meme-card">
|
||||||
|
<div class="meme-image-wrapper">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/jail.jpg" alt="Anime girl in prison jumpsuit being escorted by officers" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="meme-body">
|
||||||
|
<h2 class="meme-title">Horny Jail</h2>
|
||||||
|
<p class="meme-caption">“Sending me to horny jail? Perfect. Everyone else there is horny too!”</p>
|
||||||
|
<p class="meme-description">The cheeky reversal of the internet's favourite punishment meme. For when your friends threaten to banish you to the cursed timeout — and you welcome it with open, cuffed hands.</p>
|
||||||
|
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/jail.jpg" aria-label="Copy URL for Horny Jail meme">Copy URL</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="meme-card">
|
||||||
|
<div class="meme-image-wrapper">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/magikazam.jpg" alt="Anime magical girl in pink and black witch outfit" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="meme-body">
|
||||||
|
<h2 class="meme-title">Magikazam~</h2>
|
||||||
|
<p class="meme-caption">“Magikazam~”</p>
|
||||||
|
<p class="meme-description">A full magical-girl transformation, spell books and all. Reserved for truly miraculous bugfixes, “it works on my machine” moments, and any problem that resolved itself after a restart.</p>
|
||||||
|
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/magikazam.jpg" aria-label="Copy URL for Magikazam meme">Copy URL</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="meme-card">
|
||||||
|
<div class="meme-image-wrapper">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/morning.jpg" alt="Dishevelled anime girl brushing her teeth looking exhausted" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="meme-body">
|
||||||
|
<h2 class="meme-title">Hit by a Train</h2>
|
||||||
|
<p class="meme-caption">“Ugh... I feel awful. Like I got hit by a train...”</p>
|
||||||
|
<p class="meme-description">Brushing your teeth whilst dying inside — the universal morning-after experience. Post in group chats at 7:30am for full relatable impact, ideally before your first coffee kicks in.</p>
|
||||||
|
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/morning.jpg" aria-label="Copy URL for Hit by a Train meme">Copy URL</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="meme-card">
|
||||||
|
<div class="meme-image-wrapper">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/objection.png" alt="Anime girl in a blue lawyer's suit shouting Objection" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="meme-body">
|
||||||
|
<h2 class="meme-title">Objection!</h2>
|
||||||
|
<p class="meme-caption">“Objection!”</p>
|
||||||
|
<p class="meme-description">Full Ace Attorney courtroom energy, finger extended, pink tie flying. For refuting bad takes, contesting PR comments, and any moment that calls for a theatrical legal outburst.</p>
|
||||||
|
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/objection.png" aria-label="Copy URL for Objection meme">Copy URL</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="meme-card">
|
||||||
|
<div class="meme-image-wrapper">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/plans.png" alt="Anime girl in armour holding a golden spear" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="meme-body">
|
||||||
|
<h2 class="meme-title">Plans & Reactions</h2>
|
||||||
|
<p class="meme-caption">“Plans must be solid and reactions flexible.”</p>
|
||||||
|
<p class="meme-description">Tactical wisdom delivered by a spear-wielding heroine. Perfect for sprint kickoffs, D&D campaign prep, and reminding your team that agility beats rigidity every single time.</p>
|
||||||
|
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/plans.png" aria-label="Copy URL for Plans and Reactions meme">Copy URL</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="meme-card">
|
||||||
|
<div class="meme-image-wrapper">
|
||||||
|
<img src="https://cdn.nhcarrigan.com/problem.png" alt="Anime girl sipping tea smugly from a decorative cup" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<div class="meme-body">
|
||||||
|
<h2 class="meme-title">Sounds Like Your Problem</h2>
|
||||||
|
<p class="meme-caption">“That sounds very much like your problem and very little like mine.”</p>
|
||||||
|
<p class="meme-description">Sipping tea with absolute serenity whilst someone else's world burns. The definitive response to “hey can you quickly look at this on Friday at 8:59pm?” — enjoy responsibly.</p>
|
||||||
|
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/problem.png" aria-label="Copy URL for Sounds Like Your Problem meme">Copy URL</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('click', async (event) => {
|
||||||
|
const button = event.target.closest('.copy-button');
|
||||||
|
if (!button) return;
|
||||||
|
|
||||||
|
const url = button.dataset.url;
|
||||||
|
const originalLabel = button.textContent;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(url);
|
||||||
|
button.textContent = 'Copied!';
|
||||||
|
} catch {
|
||||||
|
const textarea = document.createElement('textarea');
|
||||||
|
textarea.value = url;
|
||||||
|
textarea.setAttribute('readonly', '');
|
||||||
|
textarea.style.position = 'absolute';
|
||||||
|
textarea.style.left = '-9999px';
|
||||||
|
document.body.appendChild(textarea);
|
||||||
|
textarea.select();
|
||||||
|
const succeeded = document.execCommand('copy');
|
||||||
|
document.body.removeChild(textarea);
|
||||||
|
button.textContent = succeeded ? 'Copied!' : 'Copy failed';
|
||||||
|
}
|
||||||
|
|
||||||
|
button.classList.add('copied');
|
||||||
|
setTimeout(() => {
|
||||||
|
button.textContent = originalLabel;
|
||||||
|
button.classList.remove('copied');
|
||||||
|
}, 2000);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<script src="https://cdn.nhcarrigan.com/headers/index.js" async defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+54
-24
@@ -52,7 +52,7 @@
|
|||||||
<h1>Socials</h1>
|
<h1>Socials</h1>
|
||||||
<p>Our social media profiles and links.</p>
|
<p>Our social media profiles and links.</p>
|
||||||
<section>
|
<section>
|
||||||
<!-- Discord - Featured First -->
|
<!-- Community tools - featured first -->
|
||||||
<div class="badge" style="color: #ffffff; background: #5865f2">
|
<div class="badge" style="color: #ffffff; background: #5865f2">
|
||||||
<a href="https://chat.nhcarrigan.com" class="url">
|
<a href="https://chat.nhcarrigan.com" class="url">
|
||||||
<i class="fab fa-discord"></i>
|
<i class="fab fa-discord"></i>
|
||||||
@@ -64,17 +64,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="badge" style="color: #ffffff; background: #f97316">
|
|
||||||
<a href="https://support.nhcarrigan.com" class="url">
|
|
||||||
<i class="fab fa-discourse"></i>
|
|
||||||
<div class="text">
|
|
||||||
<p class="name">Support Forum</p>
|
|
||||||
<p class="description">
|
|
||||||
Our dedicated discussion board for support and community help.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="badge" style="color: #ffffff; background: #609926">
|
<div class="badge" style="color: #ffffff; background: #609926">
|
||||||
<a href="https://git.nhcarrigan.com/naomi" class="url">
|
<a href="https://git.nhcarrigan.com/naomi" class="url">
|
||||||
<i class="fab fa-git-alt"></i>
|
<i class="fab fa-git-alt"></i>
|
||||||
@@ -86,11 +75,26 @@
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="badge" style="color: #ffffff; background: #f97316">
|
||||||
|
<a href="https://support.nhcarrigan.com" class="url">
|
||||||
|
<i class="fas fa-comments"></i>
|
||||||
|
<div class="text">
|
||||||
|
<p class="name">Forum</p>
|
||||||
|
<p class="description">
|
||||||
|
Our dedicated discussion board for support and community help.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Naomi</h2>
|
<h2>Naomi</h2>
|
||||||
<!-- Personal profiles sorted by popularity -->
|
<p style="text-align: center; font-size: 0.9rem; margin-bottom: 1rem;">
|
||||||
|
The accounts listed in this section are personal. Any content posted
|
||||||
|
there represents my own views only and does not reflect the opinions,
|
||||||
|
positions, or values of NHCarrigan, its clients, staff, or partners.
|
||||||
|
</p>
|
||||||
<div class="badge" style="color: #ffffff; background: #e4405f">
|
<div class="badge" style="color: #ffffff; background: #e4405f">
|
||||||
<a href="https://www.instagram.com/naomi.lgbt/" class="url">
|
<a href="https://www.instagram.com/naomi.lgbt/" class="url">
|
||||||
<i class="fab fa-instagram"></i>
|
<i class="fab fa-instagram"></i>
|
||||||
@@ -118,6 +122,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="badge" style="color: #ffffff; background: #000000">
|
||||||
|
<a href="https://x.com/NaomiLGBT" class="url">
|
||||||
|
<i class="fab fa-x-twitter"></i>
|
||||||
|
<div class="text">
|
||||||
|
<p class="name">X (Twitter)</p>
|
||||||
|
<p class="description">Follow us for hot takes and thoughts.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<div class="badge" style="color: #ffffff; background: #000000">
|
<div class="badge" style="color: #ffffff; background: #000000">
|
||||||
<a href="https://www.threads.com/@naomi.lgbt" class="url">
|
<a href="https://www.threads.com/@naomi.lgbt" class="url">
|
||||||
<i class="fab fa-threads"></i>
|
<i class="fab fa-threads"></i>
|
||||||
@@ -178,15 +191,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="badge" style="color: #ffffff; background: #6364ff">
|
|
||||||
<a href="https://mastodon.social/@naomi_lgbt" class="url">
|
|
||||||
<i class="fab fa-mastodon"></i>
|
|
||||||
<div class="text">
|
|
||||||
<p class="name">Mastodon</p>
|
|
||||||
<p class="description">Connect with us on the fediverse.</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="badge" style="color: #ffffff; background: #0a0a23">
|
<div class="badge" style="color: #ffffff; background: #0a0a23">
|
||||||
<a href="https://forum.freecodecamp.org/u/nhcarrigan/" class="url">
|
<a href="https://forum.freecodecamp.org/u/nhcarrigan/" class="url">
|
||||||
<i class="fab fa-free-code-camp"></i>
|
<i class="fab fa-free-code-camp"></i>
|
||||||
@@ -202,9 +206,8 @@
|
|||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>NHCarrigan</h2>
|
<h2>NHCarrigan</h2>
|
||||||
<!-- Company profiles sorted by popularity -->
|
|
||||||
<div class="badge" style="color: #ffffff; background: #0a66c2">
|
<div class="badge" style="color: #ffffff; background: #0a66c2">
|
||||||
<a href="https://www.linkedin.com/company/nhcarrigan" class="url">
|
<a href="https://www.linkedin.com/company/nhcarrigan/" class="url">
|
||||||
<i class="fab fa-linkedin"></i>
|
<i class="fab fa-linkedin"></i>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<p class="name">LinkedIn</p>
|
<p class="name">LinkedIn</p>
|
||||||
@@ -248,6 +251,33 @@
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="badge" style="color: #ffffff; background: #6364ff">
|
||||||
|
<a href="https://mastodon.social/@naomi_lgbt" class="url">
|
||||||
|
<i class="fab fa-mastodon"></i>
|
||||||
|
<div class="text">
|
||||||
|
<p class="name">Mastodon</p>
|
||||||
|
<p class="description">Connect with us on the fediverse.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="badge" style="color: #ffffff; background: #ff5e5b">
|
||||||
|
<a href="https://ko-fi.com/nhcarrigan" class="url">
|
||||||
|
<i class="fab fa-ko-fi"></i>
|
||||||
|
<div class="text">
|
||||||
|
<p class="name">Ko-fi</p>
|
||||||
|
<p class="description">Support our work with a coffee.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="badge" style="color: #ffffff; background: #f96854">
|
||||||
|
<a href="https://www.patreon.com/cw/nhcarrigan" class="url">
|
||||||
|
<i class="fab fa-patreon"></i>
|
||||||
|
<div class="text">
|
||||||
|
<p class="name">Patreon</p>
|
||||||
|
<p class="description">Support us and access exclusive content.</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
|
|||||||
+156
-10
@@ -8,6 +8,11 @@
|
|||||||
name="description"
|
name="description"
|
||||||
content="Draw tarot cards and receive a reading with traditional card meanings."
|
content="Draw tarot cards and receive a reading with traditional card meanings."
|
||||||
/>
|
/>
|
||||||
|
<link
|
||||||
|
rel="preload"
|
||||||
|
as="image"
|
||||||
|
href="https://cdn.nhcarrigan.com/tarot/back.png"
|
||||||
|
/>
|
||||||
<script
|
<script
|
||||||
src="https://cdn.nhcarrigan.com/headers/index.js"
|
src="https://cdn.nhcarrigan.com/headers/index.js"
|
||||||
async
|
async
|
||||||
@@ -66,6 +71,11 @@
|
|||||||
background: var(--witch-plum);
|
background: var(--witch-plum);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.spread-btn:disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
.spread-description {
|
.spread-description {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: var(--witch-plum);
|
color: var(--witch-plum);
|
||||||
@@ -223,13 +233,10 @@
|
|||||||
width: 150px;
|
width: 150px;
|
||||||
height: 260px;
|
height: 260px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
overflow: hidden;
|
|
||||||
border: 2px solid var(--witch-plum);
|
border: 2px solid var(--witch-plum);
|
||||||
margin-bottom: 0.75em;
|
margin-bottom: 0.75em;
|
||||||
background: rgba(212, 165, 199, 0.08);
|
perspective: 700px;
|
||||||
display: flex;
|
position: relative;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-img-wrap img {
|
.card-img-wrap img {
|
||||||
@@ -243,6 +250,70 @@
|
|||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flip-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-inner.flipped {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-face {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-back img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-inner:not(.flipped) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-front {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-front a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-details {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-details.revealed {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-placeholder {
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--witch-plum);
|
||||||
|
opacity: 0.7;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-placeholder.hidden {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.card-name {
|
.card-name {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
@@ -975,6 +1046,31 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function playFlipSound() {
|
||||||
|
try {
|
||||||
|
const ctx = new (window.AudioContext || window.webkitAudioContext)();
|
||||||
|
const duration = 0.12;
|
||||||
|
const buf = ctx.createBuffer(1, Math.ceil(ctx.sampleRate * duration), ctx.sampleRate);
|
||||||
|
const data = buf.getChannelData(0);
|
||||||
|
for (let i = 0; i < data.length; i++) {
|
||||||
|
data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / data.length, 4);
|
||||||
|
}
|
||||||
|
const src = ctx.createBufferSource();
|
||||||
|
src.buffer = buf;
|
||||||
|
const filter = ctx.createBiquadFilter();
|
||||||
|
filter.type = "highpass";
|
||||||
|
filter.frequency.value = 900;
|
||||||
|
const gain = ctx.createGain();
|
||||||
|
gain.gain.value = 0.3;
|
||||||
|
src.connect(filter);
|
||||||
|
filter.connect(gain);
|
||||||
|
gain.connect(ctx.destination);
|
||||||
|
src.start();
|
||||||
|
} catch {
|
||||||
|
/* audio unavailable */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function renderCards(drawn, slots, positionKeys, spreadKey) {
|
async function renderCards(drawn, slots, positionKeys, spreadKey) {
|
||||||
const area = document.getElementById("cards-area");
|
const area = document.getElementById("cards-area");
|
||||||
area.className = "cards-area layout-" + spreadKey;
|
area.className = "cards-area layout-" + spreadKey;
|
||||||
@@ -982,11 +1078,15 @@
|
|||||||
|
|
||||||
const drawBtn = document.getElementById("draw-btn");
|
const drawBtn = document.getElementById("draw-btn");
|
||||||
drawBtn.disabled = true;
|
drawBtn.disabled = true;
|
||||||
|
document.querySelectorAll(".spread-btn").forEach(b => { b.disabled = true; });
|
||||||
|
|
||||||
const meaningData = await Promise.all(
|
const meaningData = await Promise.all(
|
||||||
drawn.map(card => fetchCardMeanings(card.img.replace(".png", "")))
|
drawn.map(card => fetchCardMeanings(card.img.replace(".png", "")))
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const flipInners = [];
|
||||||
|
const cardDetails = [];
|
||||||
|
|
||||||
drawn.forEach((card, i) => {
|
drawn.forEach((card, i) => {
|
||||||
const posData = meaningData[i];
|
const posData = meaningData[i];
|
||||||
const posKey = positionKeys[i];
|
const posKey = positionKeys[i];
|
||||||
@@ -1008,6 +1108,19 @@
|
|||||||
const imgWrap = document.createElement("div");
|
const imgWrap = document.createElement("div");
|
||||||
imgWrap.className = "card-img-wrap";
|
imgWrap.className = "card-img-wrap";
|
||||||
|
|
||||||
|
const flipInner = document.createElement("div");
|
||||||
|
flipInner.className = "flip-inner";
|
||||||
|
|
||||||
|
const flipBack = document.createElement("div");
|
||||||
|
flipBack.className = "flip-face flip-back";
|
||||||
|
const backImg = document.createElement("img");
|
||||||
|
backImg.src = "https://cdn.nhcarrigan.com/tarot/back.png";
|
||||||
|
backImg.alt = "Card back";
|
||||||
|
flipBack.appendChild(backImg);
|
||||||
|
|
||||||
|
const flipFront = document.createElement("div");
|
||||||
|
flipFront.className = "flip-face flip-front";
|
||||||
|
|
||||||
const imgLink = document.createElement("a");
|
const imgLink = document.createElement("a");
|
||||||
imgLink.href = `https://cdn.nhcarrigan.com/tarot/${card.img}`;
|
imgLink.href = `https://cdn.nhcarrigan.com/tarot/${card.img}`;
|
||||||
imgLink.target = "_blank";
|
imgLink.target = "_blank";
|
||||||
@@ -1020,7 +1133,14 @@
|
|||||||
if (card.isReversed) img.classList.add("reversed");
|
if (card.isReversed) img.classList.add("reversed");
|
||||||
|
|
||||||
imgLink.appendChild(img);
|
imgLink.appendChild(img);
|
||||||
imgWrap.appendChild(imgLink);
|
flipFront.appendChild(imgLink);
|
||||||
|
flipInner.appendChild(flipBack);
|
||||||
|
flipInner.appendChild(flipFront);
|
||||||
|
imgWrap.appendChild(flipInner);
|
||||||
|
flipInners.push({ inner: flipInner, flipped: false, placeholder: null });
|
||||||
|
|
||||||
|
const details = document.createElement("div");
|
||||||
|
details.className = "card-details";
|
||||||
|
|
||||||
const name = document.createElement("div");
|
const name = document.createElement("div");
|
||||||
name.className = "card-name";
|
name.className = "card-name";
|
||||||
@@ -1034,15 +1154,41 @@
|
|||||||
meaning.className = "card-meaning";
|
meaning.className = "card-meaning";
|
||||||
meaning.textContent = meaningText;
|
meaning.textContent = meaningText;
|
||||||
|
|
||||||
|
details.appendChild(name);
|
||||||
|
details.appendChild(orientation);
|
||||||
|
details.appendChild(meaning);
|
||||||
|
cardDetails.push(details);
|
||||||
|
|
||||||
|
const placeholder = document.createElement("div");
|
||||||
|
placeholder.className = "card-placeholder";
|
||||||
|
placeholder.textContent = "Click card to reveal";
|
||||||
|
flipInners[flipInners.length - 1].placeholder = placeholder;
|
||||||
|
|
||||||
slot.appendChild(label);
|
slot.appendChild(label);
|
||||||
slot.appendChild(imgWrap);
|
slot.appendChild(imgWrap);
|
||||||
slot.appendChild(name);
|
slot.appendChild(placeholder);
|
||||||
slot.appendChild(orientation);
|
slot.appendChild(details);
|
||||||
slot.appendChild(meaning);
|
|
||||||
area.appendChild(slot);
|
area.appendChild(slot);
|
||||||
});
|
});
|
||||||
|
|
||||||
drawBtn.disabled = false;
|
const TEXT_DELAY = 350;
|
||||||
|
|
||||||
|
flipInners.forEach((entry, i) => {
|
||||||
|
entry.inner.addEventListener("click", () => {
|
||||||
|
if (entry.flipped) return;
|
||||||
|
entry.flipped = true;
|
||||||
|
entry.placeholder.classList.add("hidden");
|
||||||
|
playFlipSound();
|
||||||
|
entry.inner.classList.add("flipped");
|
||||||
|
setTimeout(() => {
|
||||||
|
cardDetails[i].classList.add("revealed");
|
||||||
|
}, TEXT_DELAY);
|
||||||
|
if (flipInners.every(e => e.flipped)) {
|
||||||
|
drawBtn.disabled = false;
|
||||||
|
document.querySelectorAll(".spread-btn").forEach(b => { b.disabled = false; });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
document.querySelectorAll(".spread-btn").forEach(btn => {
|
document.querySelectorAll(".spread-btn").forEach(btn => {
|
||||||
|
|||||||
+151
-6
@@ -57,6 +57,84 @@
|
|||||||
<p>Want to submit your own? <a href="https://forms.nhcarrigan.com/form/M_GrmqASymmO744axMOmu2LaMAaT5F0LmdVcU2c8-gQ">Use our web form</a>.</p>
|
<p>Want to submit your own? <a href="https://forms.nhcarrigan.com/form/M_GrmqASymmO744axMOmu2LaMAaT5F0LmdVcU2c8-gQ">Use our web form</a>.</p>
|
||||||
<section>
|
<section>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">TR</p>
|
||||||
|
<p>OMG Naomi is *thee* GOAT Discord Community Creater. My name is TR (tEE ARe) and I came by here by way of FreeCodeCamp server.... which is the only Learning-based community on discord that actually knows how to use Discord. At that is All Naomi's doing. And on top of that She has has the **monster-shoe** 👠 of blinged out Profiles, and this Server to boot . Way impressed. 🙏 plz teach me 0--venerable guru!❣️</p>
|
||||||
|
<p class="date">2 April 2026</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">Rain</p>
|
||||||
|
<p>Happy Trans Day, Naomi 🏳️⚧️🤍
|
||||||
|
|
||||||
|
I love you so much. You're a true blessing, and I hope you know how amazing you are.
|
||||||
|
|
||||||
|
This server means a lot to so many people. I've heard from others how safe they feel here…something they don't always experience in other spaces. That's because of the environment you've created.
|
||||||
|
|
||||||
|
You're a great inspiration to many developers finding their place in this world. Seeing a trans woman thrive in a male-dominated space is incredibly powerful. Your presence alone is motivating.</p>
|
||||||
|
<p class="date">1 April 2026</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">minjo70</p>
|
||||||
|
<p>Praise be to you Great One! Our incredible Naomi, who we adore all moments of our time awake. And in our dreams may you persist with sweet laughter and joy. Your chaos, your memory live in our souls.</p>
|
||||||
|
<p class="date">31 March 2026</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">Velo</p>
|
||||||
|
<p>Proud to be part of this community—thank you, Naomi, for everything you do</p>
|
||||||
|
<p class="date">31 March 2026</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">roseaboveit</p>
|
||||||
|
<p>Especially in a learning space what is most important actually is the modeling you do for the learning environment you are cultivating. In this case when you overdo it modeling how to step back and recalibrate with the community and during that recalibration evaluate your systems to provide buffer for yourself to decrease the odds that future recalibrations will be necessary. People going above and beyond is how workers get exploited and in learning spaces it is good to model the tools folks need to be able to represent themselves and fight for their own needs in a world where people will be constantly pushing for more.
|
||||||
|
|
||||||
|
Thanks Naomi for all that you do. Everything will be fine. People have a bunch of free resources available to them while you recalibrate and there are plenty of additional places they can get supplementation if that is required and they can't wait. It is good leadership to say no to things that are unsustainable.</p>
|
||||||
|
<p class="date">26 March 2026</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">Wildfire</p>
|
||||||
|
<p>I may not know you and you may not know me, but I am very glad you're still here ❤️ you are light to many people in this server!</p>
|
||||||
|
<p class="date">17 March 2026</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">Anny</p>
|
||||||
|
<p>I hate being at war. it makes international womens day harder to feel like celebrating. being stuck in a bomb shelter sucks... but at least i get some time to study work towards finding a place in tech as a developer. Mama Naomi, you are so right about how far we've come, and how far we still have to go.</p>
|
||||||
|
<p class="date">8 March 2026</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">blairingmysoul.bsky.social</p>
|
||||||
|
<p>I'm glad so many others appreciate the community you've built.👏💖</p>
|
||||||
|
<p class="date">4 March 2026</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">Internal Feedback (Anonymised for privacy)</p>
|
||||||
|
<p>I just finished reading the report. Excellent work, Naomi. This seems to reinforce our instincts that we just want Socrates to give feedback on code, and we want to position it as a tool that helps you get unstuck without risking learned helplessness or backsliding on your skills.</p>
|
||||||
|
<p class="date">26 February 2026</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">Wildfire</p>
|
||||||
|
<p>I know, you were kind to me a while ago, you gave me the confidence to share my project in this community, which I did. Because of your kind words to me. 💜</p>
|
||||||
|
<p class="date">25 February 2026</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">Internal Feedback (Anonymised for privacy)</p>
|
||||||
|
<p>Thanks Naomi. Firstly, keep up the good work on the spring cohort. It has been amazing to see contributions and meaningful engagement from first-timers. No one gets that done better than you!</p>
|
||||||
|
<p class="date">20 February 2026</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">Quincy Larson</p>
|
||||||
|
<p>Naomi is extremely good at finding opportunities to improve our platform and our community that nobody has even thought of. She's also adept at explaining those ideas, implementing them, and rallying other team members to help her making them a reality. She's a massive asset to the freeCodeCamp community and to our charity's developer staff.</p>
|
||||||
|
<p class="date">10 February 2026</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">Internal Feedback (Anonymised for privacy)</p>
|
||||||
|
<p>Kudos Naomi for picking it up while I was out sick thank you ❤️</p>
|
||||||
|
<p class="date">17 January 2026</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">Isaac</p>
|
||||||
|
<p>I would like to shout out Naomi. Lowkey, she carries a lot of work here. She took time to organize events for online, she's constantly offering help to everyone, her bots are actively used in the server. And beyond what she does for us, she's always ready to stand up for anyone who she feels she needs to. Naomi, you are an amazing human being! We are grateful to have you in this community</p>
|
||||||
|
<p class="date">19 December 2025</p>
|
||||||
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<p class="title">Hanna Rose</p>
|
<p class="title">Hanna Rose</p>
|
||||||
<p>Naomi is an extremely hard working individual who knows no bounds but her own. She constantly pushes herself and her team to do they best they can and ensures the results she delivers is as high quality as possible. With resilient determination and outstanding coordination and leadership skills, there is no one else that could even remotely match her level of talent.</p>
|
<p>Naomi is an extremely hard working individual who knows no bounds but her own. She constantly pushes herself and her team to do they best they can and ensures the results she delivers is as high quality as possible. With resilient determination and outstanding coordination and leadership skills, there is no one else that could even remotely match her level of talent.</p>
|
||||||
@@ -72,6 +150,11 @@
|
|||||||
<p>Naomi and a colleague rotated dozens and dozens and dozens of credentials while ensuring as many tools as possible could stay functional through the holiday weekend. They used their deep knowledge of version control systems to recommend paths forward, and proactively thought of additional ways we can increase security within our repos. Naomi and her colleague were also on the call Wednesday night for hours and went on to complete many, many tasks throughout the long weekend. Kudos to Naomi and colleagues for diligently combing through our repos and undoing the erroneous changes.</p>
|
<p>Naomi and a colleague rotated dozens and dozens and dozens of credentials while ensuring as many tools as possible could stay functional through the holiday weekend. They used their deep knowledge of version control systems to recommend paths forward, and proactively thought of additional ways we can increase security within our repos. Naomi and her colleague were also on the call Wednesday night for hours and went on to complete many, many tasks throughout the long weekend. Kudos to Naomi and colleagues for diligently combing through our repos and undoing the erroneous changes.</p>
|
||||||
<p class="date">1 December 2025</p>
|
<p class="date">1 December 2025</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">Internal Feedback (Anonymised for privacy)</p>
|
||||||
|
<p>Naomi hustled this weekend and churned out a working SDK that supports a new platform integration, and documentation too! Let's give a round of applause for the teamwork!</p>
|
||||||
|
<p class="date">24 November 2025</p>
|
||||||
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<p class="title">Internal Feedback (Anonymised for privacy)</p>
|
<p class="title">Internal Feedback (Anonymised for privacy)</p>
|
||||||
<p>We've had a lot of help along the way, including the tireless work colleagues like Naomi have put into making this happen, plus short-order efforts from engineering teams (including Naomi) to get our SDKs ready for this product launch.</p>
|
<p>We've had a lot of help along the way, including the tireless work colleagues like Naomi have put into making this happen, plus short-order efforts from engineering teams (including Naomi) to get our SDKs ready for this product launch.</p>
|
||||||
@@ -102,11 +185,6 @@
|
|||||||
<p>I wanted to give a shout out to Naomi who is always so patient when I ask her about complex GIT situations I "git" myself into. Whether it's a funky rebase or major merge conflicts she always has the answers and is soooo helpful.</p>
|
<p>I wanted to give a shout out to Naomi who is always so patient when I ask her about complex GIT situations I "git" myself into. Whether it's a funky rebase or major merge conflicts she always has the answers and is soooo helpful.</p>
|
||||||
<p class="date">26 September 2025</p>
|
<p class="date">26 September 2025</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
|
||||||
<p class="title">Internal Feedback (Anonymised for privacy)</p>
|
|
||||||
<p>I wanted to give a shout out to Naomi who is always so patient when I ask her about complex GIT situations I "git" myself into. Whether it's a funky rebase or major merge conflicts she always has the answers and is so helpful.</p>
|
|
||||||
<p class="date">26 September 2025</p>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<p class="title">Internal Feedback (Anonymised for privacy)</p>
|
<p class="title">Internal Feedback (Anonymised for privacy)</p>
|
||||||
<p>Kudos to Naomi for all of the initiatives on Discord. The community is really thriving and it is bringing more engagement to the organization!</p>
|
<p>Kudos to Naomi for all of the initiatives on Discord. The community is really thriving and it is bringing more engagement to the organization!</p>
|
||||||
@@ -178,7 +256,7 @@
|
|||||||
<p class="date">14 August 2025</p>
|
<p class="date">14 August 2025</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<p class="title">Nielda Karlo Melo</p>
|
<p class="title">Nielda Karla Melo</p>
|
||||||
<p>Naomi is one of the most competent professionals I have had the pleasure of working with. She has an exceptional presence, giving the impression of being everywhere at once, and her attention to detail is remarkable. She is able to identify subtle points and gaps in reasoning that others might miss and point that out in a respectful way. Naomi is not one to avoid difficult conversations. She expresses her opinions with clarity, confidence, and thoughtfulness. Her work on freeCodeCamp’s Discord, in addition to the many other code-related contributions she has made, is nothing short of impressive. She has kept the community engaged, planned events that people genuinely want to attend, and led the management of the entire space. Thanks to her leadership, the community has become a respectful, welcoming, and valuable place to be a part of. Any team would be fortunate to have Naomi’s expertise, dedication, and leadership.</p>
|
<p>Naomi is one of the most competent professionals I have had the pleasure of working with. She has an exceptional presence, giving the impression of being everywhere at once, and her attention to detail is remarkable. She is able to identify subtle points and gaps in reasoning that others might miss and point that out in a respectful way. Naomi is not one to avoid difficult conversations. She expresses her opinions with clarity, confidence, and thoughtfulness. Her work on freeCodeCamp’s Discord, in addition to the many other code-related contributions she has made, is nothing short of impressive. She has kept the community engaged, planned events that people genuinely want to attend, and led the management of the entire space. Thanks to her leadership, the community has become a respectful, welcoming, and valuable place to be a part of. Any team would be fortunate to have Naomi’s expertise, dedication, and leadership.</p>
|
||||||
<p class="date">14 August 2025</p>
|
<p class="date">14 August 2025</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -192,11 +270,21 @@
|
|||||||
<p>Quick shout out to a colleague and Naomi today for a late night hot fix and lighting fast review (7 mins!) for our NodeJS SDK to get audio streaming working with the latest React (5+). Release - v4.9.1 updates our webpack support for modern JS bundlers (Vite, React App v5+, Next.js) to fix streaming audio through the browser. This helped unblock an important prospect that would impact other important buyers in that market. Great bias for action, and tight teamwork all around, bravo!</p>
|
<p>Quick shout out to a colleague and Naomi today for a late night hot fix and lighting fast review (7 mins!) for our NodeJS SDK to get audio streaming working with the latest React (5+). Release - v4.9.1 updates our webpack support for modern JS bundlers (Vite, React App v5+, Next.js) to fix streaming audio through the browser. This helped unblock an important prospect that would impact other important buyers in that market. Great bias for action, and tight teamwork all around, bravo!</p>
|
||||||
<p class="date">9 July 2025</p>
|
<p class="date">9 July 2025</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">jake-haver-of-catz.bsky.social</p>
|
||||||
|
<p>This morning I had my mind melted with a run through of @github.com by freeCodeCamp super champion, Naomi! Super grateful for this workshop to get our feet wet before we need to use this to collaborate on our projects in a few days! AH! Day 219/365 #code365 #goOnGit #100devs #freeCodeCamp</p>
|
||||||
|
<p class="date">30 June 2025</p>
|
||||||
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<p class="title">Internal Feedback (Anonymised for privacy)</p>
|
<p class="title">Internal Feedback (Anonymised for privacy)</p>
|
||||||
<p>I want to give BIG kudos to Naomi and colleagues for their strength, bravery and love they shared with all of us today! What a tremendous presentation full of passion, information and dedication!</p>
|
<p>I want to give BIG kudos to Naomi and colleagues for their strength, bravery and love they shared with all of us today! What a tremendous presentation full of passion, information and dedication!</p>
|
||||||
<p class="date">26 June 2025</p>
|
<p class="date">26 June 2025</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">paddle</p>
|
||||||
|
<p>Thanks for the update! It sounds like you've put a lot of effort into enhancing our Discord community. The events you mentioned, especially the mentorship sessions and accountability calls, sound like great opportunities for everyone to connect and improve their skills. I think the feedback channel is a fantastic idea, too. It'll be really helpful for gathering ideas directly from members. I'm looking forward to seeing how these changes will make our community even more engaging. Keep up the great work!</p>
|
||||||
|
<p class="date">24 May 2025</p>
|
||||||
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<p class="title">Internal Feedback (Anonymised for privacy)</p>
|
<p class="title">Internal Feedback (Anonymised for privacy)</p>
|
||||||
<p>I want to give some big Kudos to Naomi and a colleague for all the great developer experience work they did last week while many of us were travelling. Naomi pushed forward with internal chatbot development, which is a company-centric Slack Bot that uses our knowledge base to answer questions. This bot is available in our current Slack Workspace now! Long Term we want to make it available to our customers to install in their own workspaces so they can get their questions answered quickly. It will eventually be Voice Enabled using our Voice API, which means customers would authenticate and make API requests to use Voice features</p>
|
<p>I want to give some big Kudos to Naomi and a colleague for all the great developer experience work they did last week while many of us were travelling. Naomi pushed forward with internal chatbot development, which is a company-centric Slack Bot that uses our knowledge base to answer questions. This bot is available in our current Slack Workspace now! Long Term we want to make it available to our customers to install in their own workspaces so they can get their questions answered quickly. It will eventually be Voice Enabled using our Voice API, which means customers would authenticate and make API requests to use Voice features</p>
|
||||||
@@ -277,6 +365,11 @@
|
|||||||
<p>Naomi is an absolute trailblazer, and is an amazing person to work with! Naomi is humorous and also has an amazing attitude to work with. Her ability to solve complex problems efficiently astounds me. Not only does she demonstrate outstanding technical knowledge, but also does an amazing job at elucidating her needs as an engineer. She is a very warm person and quite easy to work with. Naomi is immensely perceptive and very calculated with what she does. Naomi would make an excellent addition to any company that is lucky enough to hire her!</p>
|
<p>Naomi is an absolute trailblazer, and is an amazing person to work with! Naomi is humorous and also has an amazing attitude to work with. Her ability to solve complex problems efficiently astounds me. Not only does she demonstrate outstanding technical knowledge, but also does an amazing job at elucidating her needs as an engineer. She is a very warm person and quite easy to work with. Naomi is immensely perceptive and very calculated with what she does. Naomi would make an excellent addition to any company that is lucky enough to hire her!</p>
|
||||||
<p class="date">2 May 2024</p>
|
<p class="date">2 May 2024</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">plamoni</p>
|
||||||
|
<p>Note that Naomi has been coding for like 3 years now. I've been coding for 30 years and have nothing public that's anywhere near as good as this project. So realize that Naomi is a bit of an outlier with this and you shouldn't feel like you have to hit this bar to be successful. 🙂</p>
|
||||||
|
<p class="date">30 September 2023</p>
|
||||||
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<p class="title">Danny Thompson</p>
|
<p class="title">Danny Thompson</p>
|
||||||
<p>If you need a problem solver, look at Naomi. Naomi is a fantastic part of the online tech community by teaching and offering help to beginners on their journeys into tech. She has created some great solutions and is a consistent learner. Naomi has led initiatives using Javascript and front-end technologies to produce finished products within a volunteer position. Highly recommend Naomi to any team.</p>
|
<p>If you need a problem solver, look at Naomi. Naomi is a fantastic part of the online tech community by teaching and offering help to beginners on their journeys into tech. She has created some great solutions and is a consistent learner. Naomi has led initiatives using Javascript and front-end technologies to produce finished products within a volunteer position. Highly recommend Naomi to any team.</p>
|
||||||
@@ -286,6 +379,58 @@
|
|||||||
<p class="title">Eddie Jaoude</p>
|
<p class="title">Eddie Jaoude</p>
|
||||||
<p>Naomi has done a fantastic job in creating Becca Bot, which is an integral part in managing the EddieHub Discord Community. As founder of EddieHub, Naomi is super helpful to all Community members and an excellent moderator, from our text channels to audio calls and live streams. Naomi demonstrates an excellent technical knowledge and is always keen to share this with the community.</p>
|
<p>Naomi has done a fantastic job in creating Becca Bot, which is an integral part in managing the EddieHub Discord Community. As founder of EddieHub, Naomi is super helpful to all Community members and an excellent moderator, from our text channels to audio calls and live streams. Naomi demonstrates an excellent technical knowledge and is always keen to share this with the community.</p>
|
||||||
<p class="date">30 June 2023</p>
|
<p class="date">30 June 2023</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">blackpug</p>
|
||||||
|
<p>Wow, that is an incredible explanation [of a complex regex concept], thank you so much for taking the time to explain it in so much detail. I learned so much from the answer you provided. This is brilliant.</p>
|
||||||
|
<p class="date">25 April 2023</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">BigBonBon</p>
|
||||||
|
<p>Shout out to Naomi for making it feel less daunting to talk/engage with people over discord.</p>
|
||||||
|
<p class="date">29 August 2022</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">Luke Oliff</p>
|
||||||
|
<p>Naomi is a career switching ~~future~~ open source star. When I first met Naomi she was still looking for her first full-time tech role, and now she is an engineer for one of the most important free spaces for folks looking to get into tech, freeCodeCamp. Follow for great takes, great content, and great open source projects!</p>
|
||||||
|
<p class="date">8 March 2022</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">plamoni</p>
|
||||||
|
<p>Notably, Naomi is a bit of a rock-star with this stuff. She is clearly keeping a ton of plates spinning and getting a lot done. It's hard *not* to notice it.
|
||||||
|
|
||||||
|
If you can be 50% as engaged as she is, you'll be absolutely fine. 😄</p>
|
||||||
|
<p class="date">2 March 2022</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">GDG Memphis</p>
|
||||||
|
<p>[Naomi Carrigan] is a developer at freeCodeCamp. Primarily working in TypeScript, she has built CLI tools, curriculum content, APIs, and Discord bots. She is very passionate about open source and community building, and has helped shape and guide multiple OSS communities and developers.</p>
|
||||||
|
<p class="date">21 September 2021</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">manuarora</p>
|
||||||
|
<p>Today I wrote my first blog for freeCodeCamp publication. I'm thankful to you for letting me know that I could do something like this.</p>
|
||||||
|
<p class="date">18 August 2021</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">procz</p>
|
||||||
|
<p>hey! just wanted to take a minute to thank Naomi, and probably some other people i'm forgetting, as well as freeCodeCamp in general, for all the help in the past few months, finally got my first job in the industry and your help really made it easier 🙂</p>
|
||||||
|
<p class="date">9 April 2021</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">Jessica Wilkins</p>
|
||||||
|
<p>I decided to reach out to [Naomi Carrigan] who is a freeCodeCamp developer and moderator. She had a service for code review sessions on her website and I wanted her to take a look at my code. The code review session was very valuable and I learned a lot about how to make the site even better.</p>
|
||||||
|
<p class="date">3 February 2021</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">lilykhan</p>
|
||||||
|
<p>[In a year-end reflection on learning to code:] A few amazing people who made this year amazing and to whom I'm so thankful for — [including Naomi]. They never said I'm not good enough, and they all encourage me to try out new stuff and to give my best shot. They trust in me even when I don't trust in myself.</p>
|
||||||
|
<p class="date">31 December 2020</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<p class="title">codeofdreams</p>
|
||||||
|
<p>[While seeking help debugging a JavaScript project:] I would appreciate your assistance and input. You are my favorite moderator. Thank you!</p>
|
||||||
|
<p class="date">12 August 2020</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
Reference in New Issue
Block a user