nhcarrigan/portfolio
9
0
Fork 0
generated from nhcarrigan/template
Code Issues Pull Requests Actions Releases Activity

feat: themeing

Browse Source
This commit is contained in:
Naomi Carrigan
2026-02-02 13:54:53 -08:00
parent 35ce4fc4d7
commit de5c2ed86a
1 changed files with 52 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/index.html
+52 -32
View File
@@ -8,6 +8,21 @@
MARK: Styles MARK: Styles
--> -->
<style> <style>
/* ============================================
COLOR VARIABLES - Witchy Purple Rose Palette
============================================ */
:root {
--witch-purple: #2B1B3D;
--witch-plum: #44275A;
--witch-rose: #A8577E;
--witch-mauve: #D4A5C7;
--witch-lavender: #E8D5E8;
--witch-black: #0A0009;
--witch-silver: #C0C0C0;
--witch-moon: #F5F5F5;
--witch-shadow: rgba(10, 0, 9, 0.7);
}
/* ============================================ /* ============================================
RESET & BASE STYLES RESET & BASE STYLES
============================================ */ ============================================ */
@@ -49,16 +64,21 @@
margin: 0.5rem 0; margin: 0.5rem 0;
} }
ul li::marker {
display: none !important;
content: "" !important;
}
a { a {
color: #5865F2; color: var(--witch-plum);
text-decoration: underline; text-decoration: underline;
transition: color 0.2s ease; transition: color 0.2s ease;
} }
a:hover, a:hover,
a:focus { a:focus {
color: #4752C4; color: var(--witch-rose);
outline: 2px solid #5865F2; outline: 2px solid var(--witch-plum);
outline-offset: 2px; outline-offset: 2px;
} }
@@ -200,8 +220,8 @@
BUTTONS BUTTONS
============================================ */ ============================================ */
.cta-button { .cta-button {
background: #5865F2; background: var(--witch-plum);
color: white; color: var(--witch-moon);
padding: 1rem 2rem; padding: 1rem 2rem;
text-decoration: none; text-decoration: none;
border-radius: 8px; border-radius: 8px;
@@ -216,10 +236,10 @@
.cta-button:hover, .cta-button:hover,
.cta-button:focus { .cta-button:focus {
background: #4752C4; background: var(--witch-rose);
color: white; color: var(--witch-moon);
transform: scale(1.05); transform: scale(1.05);
outline: 3px solid rgba(88, 101, 242, 0.3); outline: 3px solid rgba(168, 87, 126, 0.3);
outline-offset: 2px; outline-offset: 2px;
} }
@@ -232,14 +252,14 @@
} }
.cta-button-secondary { .cta-button-secondary {
background: #333; background: var(--witch-purple);
color: white; color: var(--witch-moon);
} }
.cta-button-secondary:hover, .cta-button-secondary:hover,
.cta-button-secondary:focus { .cta-button-secondary:focus {
background: #222; background: var(--witch-black);
outline-color: rgba(51, 51, 51, 0.3); outline-color: var(--witch-shadow);
} }
.cta-button-donate { .cta-button-donate {
@@ -260,29 +280,29 @@
text-align: center; text-align: center;
margin: 2rem 0; margin: 2rem 0;
padding: 2rem; padding: 2rem;
background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%) !important; background: linear-gradient(135deg, var(--witch-plum) 0%, var(--witch-purple) 100%) !important;
border-radius: 16px; border-radius: 16px;
color: white; color: var(--witch-moon);
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
} }
.hero-cta h2 { .hero-cta h2 {
margin-top: 0; margin-top: 0;
color: white; color: var(--witch-moon);
} }
.hero-cta .cta-button { .hero-cta .cta-button {
background: white; background: var(--witch-lavender);
color: #5865F2; color: var(--witch-purple);
font-size: 1.2rem; font-size: 1.2rem;
padding: 1.2rem 2.5rem; padding: 1.2rem 2.5rem;
} }
.hero-cta .cta-button:hover, .hero-cta .cta-button:hover,
.hero-cta .cta-button:focus { .hero-cta .cta-button:focus {
background: #f0f0f0; background: var(--witch-moon);
outline-color: rgba(255, 255, 255, 0.5); outline-color: rgba(232, 213, 232, 0.5);
} }
/* ============================================ /* ============================================
@@ -291,7 +311,7 @@
.stat-number { .stat-number {
font-size: 2.5rem; font-size: 2.5rem;
font-weight: bold; font-weight: bold;
color: #5865F2; color: var(--witch-plum);
margin: 0.5rem 0; margin: 0.5rem 0;
} }
@@ -316,7 +336,7 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 3px; width: 3px;
background: linear-gradient(to bottom, #5865F2, #4752C4); background: linear-gradient(to bottom, var(--witch-plum), var(--witch-rose));
transform: translateX(-50%); transform: translateX(-50%);
} }
@@ -390,7 +410,7 @@
.timeline-company { .timeline-company {
font-size: 1rem; font-size: 1rem;
color: #5865F2; color: var(--witch-rose);
font-weight: 600; font-weight: 600;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@@ -765,7 +785,7 @@
<!-- <!--
MARK: How Can We Serve You? MARK: How Can We Serve You?
--> -->
<section class="card fade-in" style="text-align: center; background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%); color: white; position: relative;" role="region" aria-labelledby="serve-you"> <section class="card fade-in" style="text-align: center; background: linear-gradient(135deg, var(--witch-plum) 0%, var(--witch-purple) 100%); color: var(--witch-moon); position: relative;" role="region" aria-labelledby="serve-you">
<h2 id="serve-you" style="margin-top: 0; color: white;">How Can We Best Serve You?</h2> <h2 id="serve-you" style="margin-top: 0; color: white;">How Can We Best Serve You?</h2>
<div style="margin: 2rem auto; padding: 0 1rem;"> <div style="margin: 2rem auto; padding: 0 1rem;">
@@ -776,7 +796,7 @@
<button id="prev-service" aria-label="Previous service" style="background: rgba(255, 255, 255, 0.2); border: none; color: white; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; font-size: 1.2rem; flex-shrink: 0;"> <button id="prev-service" aria-label="Previous service" style="background: rgba(255, 255, 255, 0.2); border: none; color: white; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; font-size: 1.2rem; flex-shrink: 0;">
<i class="fas fa-chevron-left"></i> <i class="fas fa-chevron-left"></i>
</button> </button>
<span id="rotating-text" style="font-weight: bold; color: #ffd700; display: flex; align-items: center; justify-content: center; min-width: 220px; max-width: 350px; height: 40px; position: relative; cursor: pointer; text-align: center;"> <span id="rotating-text" style="font-weight: bold; color: var(--witch-mauve); display: flex; align-items: center; justify-content: center; min-width: 220px; max-width: 350px; height: 40px; position: relative; cursor: pointer; text-align: center;">
<span class="rotating-option" style="position: absolute; width: 100%; left: 0; opacity: 0; transform: translateY(20px); transition: all 0.5s ease;">Discord bots</span> <span class="rotating-option" style="position: absolute; width: 100%; left: 0; opacity: 0; transform: translateY(20px); transition: all 0.5s ease;">Discord bots</span>
</span> </span>
<button id="next-service" aria-label="Next service" style="background: rgba(255, 255, 255, 0.2); border: none; color: white; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; font-size: 1.2rem; flex-shrink: 0;"> <button id="next-service" aria-label="Next service" style="background: rgba(255, 255, 255, 0.2); border: none; color: white; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; font-size: 1.2rem; flex-shrink: 0;">
@@ -787,14 +807,14 @@
<!-- Service details that change based on selection --> <!-- Service details that change based on selection -->
<div id="service-details" style="min-height: 150px; margin: 2rem 0; padding: 1.5rem; border-radius: 16px;"> <div id="service-details" style="min-height: 150px; margin: 2rem 0; padding: 1.5rem; border-radius: 16px;">
<h3 id="service-title" style="color: #ffd700; margin-top: 0; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);">Discord Bot Development</h3> <h3 id="service-title" style="color: var(--witch-mauve); margin-top: 0; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);">Discord Bot Development</h3>
<p id="service-description" style="font-size: 1.1rem; margin: 1rem 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);"> <p id="service-description" style="font-size: 1.1rem; margin: 1rem 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);">
Custom Discord bots tailored to your community's needs. From moderation tools to interactive games, we build scalable solutions that enhance engagement. Custom Discord bots tailored to your community's needs. From moderation tools to interactive games, we build scalable solutions that enhance engagement.
</p> </p>
<div id="service-features" style="display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 1.5rem;"> <div id="service-features" style="display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-top: 1.5rem;">
<span style="display: flex; align-items: center; gap: 0.5rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);"><i class="fas fa-check-circle" style="color: #ffd700; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));"></i> Custom Commands</span> <span style="display: flex; align-items: center; gap: 0.5rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);"><i class="fas fa-check-circle" style="color: var(--witch-mauve); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));"></i> Custom Commands</span>
<span style="display: flex; align-items: center; gap: 0.5rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);"><i class="fas fa-check-circle" style="color: #ffd700; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));"></i> Auto-moderation</span> <span style="display: flex; align-items: center; gap: 0.5rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);"><i class="fas fa-check-circle" style="color: var(--witch-mauve); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));"></i> Auto-moderation</span>
<span style="display: flex; align-items: center; gap: 0.5rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);"><i class="fas fa-check-circle" style="color: #ffd700; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));"></i> 24/7 Uptime</span> <span style="display: flex; align-items: center; gap: 0.5rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);"><i class="fas fa-check-circle" style="color: var(--witch-mauve); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));"></i> 24/7 Uptime</span>
</div> </div>
</div> </div>
@@ -804,7 +824,7 @@
</div> </div>
<div style="margin-top: 2rem;"> <div style="margin-top: 2rem;">
<a href="https://forms.nhcarrigan.com/form/XRlQjeu8CbMrTA-v0IPOxlUPEPitLKXTWg70UUCIORA" target="_blank" class="cta-button" style="background: white; color: #5865F2;" aria-label="Submit a commission inquiry"> <a href="https://forms.nhcarrigan.com/form/XRlQjeu8CbMrTA-v0IPOxlUPEPitLKXTWg70UUCIORA" target="_blank" class="cta-button" style="background: var(--witch-lavender); color: var(--witch-purple);" aria-label="Submit a commission inquiry">
<i class="fas fa-rocket" aria-hidden="true"></i> Let's Work Together <i class="fas fa-rocket" aria-hidden="true"></i> Let's Work Together
</a> </a>
</div> </div>
@@ -832,7 +852,7 @@
} }
.service-dot.active { .service-dot.active {
background: #ffd700; background: var(--witch-mauve);
transform: scale(1.3); transform: scale(1.3);
} }
@@ -1035,7 +1055,7 @@
serviceTitle.textContent = service.title; serviceTitle.textContent = service.title;
serviceDescription.textContent = service.description; serviceDescription.textContent = service.description;
serviceFeatures.innerHTML = service.features.map(feature => serviceFeatures.innerHTML = service.features.map(feature =>
`<span style="display: flex; align-items: center; gap: 0.5rem;"><i class="fas fa-check-circle" style="color: #ffd700;"></i> ${feature}</span>` `<span style="display: flex; align-items: center; gap: 0.5rem;"><i class="fas fa-check-circle" style="color: var(--witch-mauve);"></i> ${feature}</span>`
).join(''); ).join('');
// Update dots // Update dots
@@ -1471,7 +1491,7 @@
<!-- <!--
MARK: Community CTA MARK: Community CTA
--> -->
<section class="card fade-in" style="background: #f8f9fa; border-color: #5865F2; border-width: 3px;" role="region" aria-labelledby="join-community"> <section class="card fade-in" style="background: #f8f9fa; border-color: var(--witch-plum); border-width: 3px;" role="region" aria-labelledby="join-community">
<h2 id="join-community" style="margin-top: 0;">Join Our Community</h2> <h2 id="join-community" style="margin-top: 0;">Join Our Community</h2>
<img class="hero-image" src="https://cdn.nhcarrigan.com/hero/join-community.png" alt="Naomi Carrigan, founder of NHCarrigan" /> <img class="hero-image" src="https://cdn.nhcarrigan.com/hero/join-community.png" alt="Naomi Carrigan, founder of NHCarrigan" />
<p style="font-size: 1.1rem;"> <p style="font-size: 1.1rem;">