generated from nhcarrigan/template
2474 lines
97 KiB
HTML
2474 lines
97 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>NHCarrigan - Software Engineering & Community Management</title>
|
|
<meta name="description" content="Building inclusive tech communities and ethical software solutions. Software engineering, community management, and mentorship services.">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!--
|
|
MARK: Styles
|
|
-->
|
|
<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
|
|
============================================ */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
section {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ============================================
|
|
TYPOGRAPHY
|
|
============================================ */
|
|
h1, h2, h3 {
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
li {
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
ul li::marker {
|
|
display: none !important;
|
|
content: "" !important;
|
|
}
|
|
|
|
a {
|
|
color: var(--witch-plum);
|
|
text-decoration: underline;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
a:hover,
|
|
a:focus {
|
|
color: var(--witch-rose);
|
|
outline: 2px solid var(--witch-plum);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ============================================
|
|
LAYOUT
|
|
============================================ */
|
|
main {
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 2rem 1rem;
|
|
}
|
|
|
|
.hero-image {
|
|
max-width: 750px;
|
|
width: 95%;
|
|
margin: auto;
|
|
}
|
|
|
|
.hero-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1.5rem;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.testimonials-preview {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 1.5rem;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
/* ============================================
|
|
ACCESSIBILITY
|
|
============================================ */
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -40px;
|
|
left: 0;
|
|
background: #5865F2;
|
|
color: white;
|
|
padding: 8px;
|
|
text-decoration: none;
|
|
z-index: 100;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
top: 0;
|
|
}
|
|
|
|
*:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
*:focus-visible {
|
|
outline: 2px solid #5865F2;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
button:focus-visible,
|
|
a:focus-visible {
|
|
outline: 3px solid rgba(88, 101, 242, 0.5);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ============================================
|
|
CARDS
|
|
============================================ */
|
|
.card,
|
|
.stat-card,
|
|
.testimonial-card,
|
|
.timeline-content {
|
|
background: white;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.card {
|
|
border-radius: 16px;
|
|
padding: 2rem;
|
|
margin: 2rem 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.card:hover,
|
|
.stat-card:hover,
|
|
.testimonial-card:hover,
|
|
.timeline-content:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.timeline-content:hover {
|
|
border-color: #5865F2;
|
|
}
|
|
|
|
.testimonial-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 2px solid #f0f0f0;
|
|
}
|
|
|
|
.card-header img {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.avatar-card .card-header img {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
border: 3px solid #f0f0f0;
|
|
}
|
|
|
|
.logo-card .card-header img {
|
|
width: 120px;
|
|
height: auto;
|
|
}
|
|
|
|
/* ============================================
|
|
BUTTONS
|
|
============================================ */
|
|
.cta-button {
|
|
background: var(--witch-plum);
|
|
color: var(--witch-moon);
|
|
padding: 1rem 2rem;
|
|
text-decoration: none;
|
|
border-radius: 8px;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
font-size: 1.1rem;
|
|
margin: 0.5rem 0.5rem 0.5rem 0;
|
|
transition: background 0.3s ease, transform 0.2s ease;
|
|
border: 2px solid transparent;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.cta-button:hover,
|
|
.cta-button:focus {
|
|
background: var(--witch-rose);
|
|
color: var(--witch-moon);
|
|
transform: scale(1.05);
|
|
outline: 3px solid rgba(168, 87, 126, 0.3);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.cta-button:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.cta-button i {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.cta-button-secondary {
|
|
background: var(--witch-purple);
|
|
color: var(--witch-moon);
|
|
}
|
|
|
|
.cta-button-secondary:hover,
|
|
.cta-button-secondary:focus {
|
|
background: var(--witch-black);
|
|
outline-color: var(--witch-shadow);
|
|
}
|
|
|
|
.cta-button-donate {
|
|
background: #10b981;
|
|
color: white;
|
|
}
|
|
|
|
.cta-button-donate:hover,
|
|
.cta-button-donate:focus {
|
|
background: #059669;
|
|
outline-color: rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
/* ============================================
|
|
HERO CTA
|
|
============================================ */
|
|
.hero-cta {
|
|
text-align: center;
|
|
margin: 2rem 0;
|
|
padding: 2rem;
|
|
background: linear-gradient(135deg, var(--witch-plum) 0%, var(--witch-purple) 100%) !important;
|
|
border-radius: 16px;
|
|
color: var(--witch-moon);
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.hero-cta h2 {
|
|
margin-top: 0;
|
|
color: var(--witch-moon);
|
|
}
|
|
|
|
.hero-cta .cta-button {
|
|
background: var(--witch-lavender);
|
|
color: var(--witch-purple);
|
|
font-size: 1.2rem;
|
|
padding: 1.2rem 2.5rem;
|
|
}
|
|
|
|
.hero-cta .cta-button:hover,
|
|
.hero-cta .cta-button:focus {
|
|
background: var(--witch-moon);
|
|
outline-color: rgba(232, 213, 232, 0.5);
|
|
}
|
|
|
|
/* ============================================
|
|
STATS
|
|
============================================ */
|
|
.stat-number {
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
color: var(--witch-plum);
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.stat-label {
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* ============================================
|
|
TIMELINE
|
|
============================================ */
|
|
.timeline {
|
|
position: relative;
|
|
padding: 2rem 0;
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 3px;
|
|
background: linear-gradient(to bottom, var(--witch-plum), var(--witch-rose));
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
margin: 2rem 0;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.timeline-item:nth-child(odd) {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.timeline-item:nth-child(even) {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.timeline-content {
|
|
width: calc(50% - 3rem);
|
|
position: relative;
|
|
}
|
|
|
|
.timeline-item:nth-child(odd) .timeline-content {
|
|
margin-right: auto;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.timeline-item:nth-child(even) .timeline-content {
|
|
margin-left: auto;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.timeline-avatar {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
border: 4px solid white;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
background: white;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
|
|
}
|
|
|
|
.timeline-avatar:hover {
|
|
width: 120px;
|
|
height: 120px;
|
|
transform: translateX(-50%) scale(1);
|
|
}
|
|
|
|
.timeline-avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.timeline-role {
|
|
font-weight: bold;
|
|
font-size: 1.1rem;
|
|
color: #1a1a1a;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.timeline-company {
|
|
font-size: 1rem;
|
|
color: var(--witch-rose);
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.timeline-dates {
|
|
font-size: 0.9rem;
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ============================================
|
|
TESTIMONIALS
|
|
============================================ */
|
|
.testimonial-text {
|
|
flex-grow: 1;
|
|
font-style: italic;
|
|
color: #333;
|
|
margin-bottom: 1rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.testimonial-author {
|
|
font-weight: bold;
|
|
color: #1a1a1a;
|
|
margin-top: auto;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.testimonial-role {
|
|
font-size: 0.9rem;
|
|
color: #666;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
/* ============================================
|
|
SOCIAL LINKS
|
|
============================================ */
|
|
.social-links-section {
|
|
margin: 3rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.social-links-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
padding: 2rem 1rem;
|
|
background: linear-gradient(135deg, var(--witch-lavender) 0%, var(--witch-moon) 100%);
|
|
border-radius: 20px;
|
|
box-shadow: 0 4px 20px rgba(168, 87, 126, 0.1);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.social-link {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 1rem;
|
|
text-decoration: none;
|
|
color: var(--witch-purple);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.social-link i {
|
|
font-size: 2.5rem;
|
|
transition: transform 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.social-name {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
opacity: 0.8;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.social-link::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 0;
|
|
height: 0;
|
|
background: radial-gradient(circle, var(--witch-mauve) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
z-index: -1;
|
|
}
|
|
|
|
.social-link:hover::before {
|
|
width: 80px;
|
|
height: 80px;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.social-link:hover i {
|
|
transform: translateY(-5px) scale(1.1);
|
|
color: var(--witch-rose);
|
|
}
|
|
|
|
.social-link:hover .social-name {
|
|
opacity: 1;
|
|
color: var(--witch-rose);
|
|
}
|
|
|
|
.social-link:focus {
|
|
outline: 2px solid var(--witch-plum);
|
|
outline-offset: 4px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Screen reader only text */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.social-links-container {
|
|
gap: 1.5rem;
|
|
padding: 1.5rem 1rem;
|
|
}
|
|
|
|
.social-link {
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.social-link i {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.social-name {
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.social-links-container {
|
|
gap: 1rem;
|
|
}
|
|
|
|
.social-link {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.social-link i {
|
|
font-size: 1.75rem;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
ANIMATIONS
|
|
============================================ */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes socialBounce {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 0.6s ease-out;
|
|
}
|
|
|
|
/* Stagger animation for social links */
|
|
.social-link {
|
|
opacity: 0;
|
|
animation: fadeIn 0.6s ease-out forwards;
|
|
}
|
|
|
|
.social-link:nth-child(1) { animation-delay: 0.1s; }
|
|
.social-link:nth-child(2) { animation-delay: 0.2s; }
|
|
.social-link:nth-child(3) { animation-delay: 0.3s; }
|
|
.social-link:nth-child(4) { animation-delay: 0.4s; }
|
|
.social-link:nth-child(5) { animation-delay: 0.5s; }
|
|
|
|
/* Fun bounce on hover */
|
|
.social-link:hover i {
|
|
animation: socialBounce 0.5s ease-out;
|
|
}
|
|
|
|
/* ============================================
|
|
DARK MODE
|
|
============================================ */
|
|
html.is-dark .card,
|
|
html.is-dark .stat-card,
|
|
html.is-dark .timeline-content,
|
|
html.is-dark .testimonial-card {
|
|
background: #1e1e1e;
|
|
border-color: #404040;
|
|
color: var(--foreground);
|
|
}
|
|
|
|
html.is-dark .timeline-avatar {
|
|
background: #1e1e1e;
|
|
border-color: #404040;
|
|
}
|
|
|
|
html.is-dark .card-header {
|
|
border-bottom-color: #404040;
|
|
}
|
|
|
|
html.is-dark .avatar-card .card-header img {
|
|
border-color: #404040;
|
|
}
|
|
|
|
html.is-dark h1,
|
|
html.is-dark h2,
|
|
html.is-dark h3,
|
|
html.is-dark .stat-label,
|
|
html.is-dark .timeline-role,
|
|
html.is-dark .timeline-dates,
|
|
html.is-dark .testimonial-text,
|
|
html.is-dark .testimonial-author {
|
|
color: var(--foreground);
|
|
}
|
|
|
|
html.is-dark .testimonial-author {
|
|
border-top-color: #404040;
|
|
}
|
|
|
|
html.is-dark .card[style*="background: #f8f9fa"],
|
|
html.is-dark .card[style*="background:#f8f9fa"],
|
|
html.is-dark .card[style*="background: #f0f0f0"],
|
|
html.is-dark .card[style*="background:#f0f0f0"] {
|
|
background: #1e1e1e !important;
|
|
}
|
|
|
|
html.is-dark .card[style*="background: linear-gradient(135deg, #10b981"],
|
|
html.is-dark .card[style*="background:linear-gradient(135deg, #10b981"] {
|
|
background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
|
|
border-color: #059669 !important;
|
|
}
|
|
|
|
html.is-dark .card[style*="background: linear-gradient(135deg, #10b981"] .stat-card,
|
|
html.is-dark .card[style*="background:linear-gradient(135deg, #10b981"] .stat-card {
|
|
background: rgba(30, 30, 30, 0.95) !important;
|
|
border-color: #404040;
|
|
}
|
|
|
|
/* ============================================
|
|
ACCESSIBILITY MEDIA QUERIES
|
|
============================================ */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation: none !important;
|
|
transition: none !important;
|
|
}
|
|
}
|
|
|
|
@media (prefers-contrast: high) {
|
|
.card,
|
|
.cta-button {
|
|
border-width: 3px;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
ROTATING TEXT
|
|
============================================ */
|
|
#rotating-text {
|
|
text-align: center;
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
}
|
|
|
|
.rotating-option {
|
|
white-space: nowrap;
|
|
display: block;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#rotating-text {
|
|
min-width: 200px !important;
|
|
max-width: 250px !important;
|
|
}
|
|
|
|
.rotating-option {
|
|
font-size: calc(var(--dynamic-size, 1.2rem) * 0.85) !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
#rotating-text {
|
|
min-width: 180px !important;
|
|
max-width: 220px !important;
|
|
}
|
|
|
|
.rotating-option {
|
|
font-size: calc(var(--dynamic-size, 1rem) * 0.75) !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
RESPONSIVE DESIGN
|
|
============================================ */
|
|
/* Calendar embed responsive styles */
|
|
#zcal-invite {
|
|
min-height: 544px;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
#zcal-invite {
|
|
height: 600px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
main {
|
|
padding: 1rem 0.5rem;
|
|
}
|
|
|
|
#zcal-invite {
|
|
height: 650px !important;
|
|
min-width: 100% !important;
|
|
}
|
|
|
|
.card {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.card-header {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.stats-grid,
|
|
.testimonials-preview {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.cta-button {
|
|
display: block;
|
|
margin: 0.5rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.timeline::before {
|
|
left: 2rem;
|
|
}
|
|
|
|
.timeline-item {
|
|
flex-direction: row !important;
|
|
}
|
|
|
|
.timeline-content {
|
|
width: calc(100% - 6rem);
|
|
margin-left: 4rem !important;
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.timeline-avatar {
|
|
left: 2rem;
|
|
transform: translateX(-50%);
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.timeline-avatar:hover {
|
|
width: 150px;
|
|
height: 150px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.hero-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 0;
|
|
}
|
|
}
|
|
/* ============================================
|
|
TECH STACK ITEMS
|
|
============================================ */
|
|
.tech-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 1rem 1.25rem;
|
|
background: var(--witch-moon);
|
|
border-radius: 12px;
|
|
border: 2px solid transparent;
|
|
transition: all 0.3s ease;
|
|
min-width: 100px;
|
|
}
|
|
|
|
.tech-item:hover {
|
|
transform: translateY(-4px);
|
|
border-color: var(--witch-plum);
|
|
box-shadow: 0 8px 20px rgba(43, 27, 61, 0.15);
|
|
}
|
|
|
|
.tech-item i {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.tech-item span {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: var(--witch-purple);
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.tech-item {
|
|
min-width: 80px;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.tech-item i {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.tech-item span {
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
TECH STACK COLLAPSIBLE SECTIONS
|
|
============================================ */
|
|
.tech-category {
|
|
border: 2px solid var(--witch-mauve);
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.tech-category summary {
|
|
padding: 1rem 1.5rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--witch-plum);
|
|
background: rgba(255, 255, 255, 0.5);
|
|
transition: background 0.3s ease;
|
|
list-style: none;
|
|
}
|
|
|
|
.tech-category summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.tech-category summary::marker {
|
|
display: none;
|
|
content: "";
|
|
}
|
|
|
|
.tech-category summary .dropdown-icon {
|
|
transition: transform 0.3s ease;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.tech-category[open] summary .dropdown-icon {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.tech-category summary:hover {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.tech-category-content {
|
|
padding: 1.5rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* ============================================
|
|
AVAILABILITY BANNER
|
|
============================================ */
|
|
.availability-banner {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
padding: 1.25rem 1.5rem;
|
|
background: linear-gradient(135deg, var(--witch-purple) 0%, var(--witch-plum) 100%);
|
|
border-radius: 12px;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.availability-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
color: var(--witch-moon);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.availability-item i {
|
|
font-size: 1.2rem;
|
|
color: #10b981;
|
|
}
|
|
|
|
.availability-item:nth-child(2) i {
|
|
color: #ffd700;
|
|
}
|
|
|
|
.availability-item:nth-child(3) i {
|
|
color: var(--witch-mauve);
|
|
}
|
|
|
|
.availability-item:nth-child(4) i {
|
|
color: #60a5fa;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.availability-banner {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|
|
<!-- Devicon for technology icons -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
|
|
</head>
|
|
<body>
|
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
|
|
<main id="main-content">
|
|
<!--
|
|
MARK: Hero Section
|
|
-->
|
|
<h1 style="text-align: center; margin-bottom: 1rem;">Naomi Carrigan</h1>
|
|
|
|
<section style="text-align: center; margin-bottom: 2rem;" aria-label="Hero image">
|
|
<img
|
|
src="https://cdn.nhcarrigan.com/splash.png"
|
|
alt="A woman in glasses and a blazer relaxes in an office, barefoot with feet on a desk. She holds a steaming mug, with a cityscape visible through the window."
|
|
style="max-width: 100%; height: auto; border-radius: 12px;"
|
|
/>
|
|
</section>
|
|
|
|
<section style="text-align: center; margin-bottom: 2rem; max-width: 800px; margin-left: auto; margin-right: auto;" class="fade-in">
|
|
<p style="font-size: 1.2rem; line-height: 1.6;">
|
|
Building inclusive tech communities, one line of code at a time. We're passionate about creating ethical software solutions and fostering welcoming online spaces where everyone can thrive.
|
|
</p>
|
|
</section>
|
|
|
|
<div class="hero-grid">
|
|
<section class="hero-cta fade-in card" role="region" aria-label="Join our community">
|
|
<h2>Ready to Join an Amazing Community?</h2>
|
|
<p style="font-size: 1.1rem; margin-bottom: 1.5rem;">
|
|
Connect with developers, get mentorship, and be part of an inclusive tech community. No application needed - just click and join!
|
|
</p>
|
|
<a href="https://chat.nhcarrigan.com" target="_blank" class="cta-button" aria-label="Join our Discord community">
|
|
<i class="fab fa-discord" aria-hidden="true"></i> Join Discord Community
|
|
</a>
|
|
</section>
|
|
|
|
<section class="card fade-in" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-color: #10b981; border-width: 3px; text-align: center;" role="region" aria-label="Support our mission">
|
|
<h2 style="margin-top: 0; color: white;">Support Our Mission</h2>
|
|
<p style="color: white; font-size: 1rem; margin-bottom: 1.5rem;">
|
|
Help us continue building inclusive tech communities. Your support keeps our 50+ products running and enables countless pro-bono services.
|
|
</p>
|
|
<a href="https://donate.nhcarrigan.com" target="_blank" class="cta-button" style="background: white; color: #10b981;" aria-label="Support NHCarrigan with a donation" rel="noopener noreferrer">
|
|
<i class="fas fa-heart" aria-hidden="true"></i> Donate Now
|
|
</a>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="fade-in" role="region" aria-labelledby="keep-reading">
|
|
<p>Need to know more about us before joining? That's okay! Let us properly introduce ourselves...</p>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: Personal Information
|
|
-->
|
|
<section class="card avatar-card fade-in" role="region" aria-labelledby="about-naomi">
|
|
<div class="card-header">
|
|
<img
|
|
src="https://cdn.nhcarrigan.com/profile.png"
|
|
alt="Naomi Carrigan, founder of NHCarrigan"
|
|
width="100"
|
|
height="100"
|
|
/>
|
|
<div>
|
|
<h2 id="about-naomi" style="margin: 0;">Hey there! <i class="fas fa-hand" aria-hidden="true"></i></h2>
|
|
<p style="margin: 0.5rem 0 0 0; font-size: 1.1rem;">
|
|
I'm <strong>Naomi</strong>, the founder of NHCarrigan
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p style="font-size: 1.1rem;">
|
|
I'm a transfem software engineer, community manager, and (failed) VTuber who's passionate about building inclusive tech communities and breaking down barriers in the industry.
|
|
</p>
|
|
<p>
|
|
I spend my days building Discord bots, mentoring new developers, and creating tools that make online communities more welcoming and accessible. When I'm not coding, you'll find me working on games, obsessing over sustainability in tech, or trying to figure out why my VTuber dreams didn't pan out (spoiler: it's probably the lack of streaming consistency <i class="fas fa-laugh" aria-hidden="true"></i>).
|
|
</p>
|
|
<p>
|
|
I believe technology should uplift and empower everyone - especially those who've been historically excluded from tech spaces. That's why I focus on ethical, community-driven projects that actually make a difference.
|
|
</p>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: Social Links
|
|
-->
|
|
<section class="social-links-section fade-in" role="region" aria-labelledby="connect-socials">
|
|
<h2 id="connect-socials" class="sr-only">Connect on Social Media</h2>
|
|
<div class="social-links-container">
|
|
<a href="https://git.nhcarrigan.com/naomi" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="Gitea Profile">
|
|
<i class="fab fa-git-alt"></i>
|
|
<span class="social-name">Gitea</span>
|
|
</a>
|
|
<a href="https://bsky.app/profile/naomi.lgbt" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="Bluesky Profile">
|
|
<i class="fab fa-bluesky"></i>
|
|
<span class="social-name">Bluesky</span>
|
|
</a>
|
|
<a href="https://linkedin.com/in/naomi-lgbt" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="LinkedIn Profile">
|
|
<i class="fab fa-linkedin"></i>
|
|
<span class="social-name">LinkedIn</span>
|
|
</a>
|
|
<a href="https://chat.nhcarrigan.com" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="Discord Server">
|
|
<i class="fab fa-discord"></i>
|
|
<span class="social-name">Discord</span>
|
|
</a>
|
|
<a href="https://steamcommunity.com/id/naomi-lgbt" target="_blank" rel="noopener noreferrer" class="social-link" aria-label="Steam Profile">
|
|
<i class="fab fa-steam"></i>
|
|
<span class="social-name">Steam</span>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="fade-in" role="region" aria-labelledby="get-to-know">
|
|
<h2 id="get-to-know">Get to Know Me</h2>
|
|
<p>
|
|
Curious about who I am beyond the code? Here's where you can learn more:
|
|
</p>
|
|
<ul>
|
|
<li><strong><a href="https://bsky.app/profile/naomi.lgbt" target="_blank" rel="noopener noreferrer">My Bluesky</a></strong> - My random personal thoughts, ramblings, and updates about my life.</li>
|
|
<li><strong><a href="https://blog.nhcarrigan.com" target="_blank" rel="noopener noreferrer">My Blog</a></strong> - Personal updates, random musings, and insights into my decision-making process</li>
|
|
<li><strong><a href="https://linkedin.com/in/naomi-lgbt" target="_blank" rel="noopener noreferrer">LinkedIn</a></strong> - Professional networking and career history</li>
|
|
<li><strong><a href="https://steamcommunity.com/id/naomi-lgbt" target="_blank" rel="noopener noreferrer">My Steam</a></strong> - My gaming life and achievements</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: Company Information
|
|
-->
|
|
<section class="card logo-card fade-in" role="region" aria-labelledby="about-company">
|
|
<div class="card-header">
|
|
<img
|
|
src="https://cdn.nhcarrigan.com/logo.png"
|
|
alt="NHCarrigan company logo"
|
|
width="120"
|
|
height="auto"
|
|
/>
|
|
<div>
|
|
<h2 id="about-company" style="margin: 0;">About NHCarrigan</h2>
|
|
<p style="margin: 0.5rem 0 0 0; font-size: 1.1rem;">
|
|
Software Engineering & Community Management Consulting
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p>
|
|
NHCarrigan specialises in creating tools and infrastructure that help you manage your online spaces, cultivate safe and inclusive environments, and foster healthy engagement. We bridge the gap between your technology and your users, improve your technology, and can even help run your online communities.
|
|
</p>
|
|
<p>
|
|
<strong>Our services include:</strong>
|
|
</p>
|
|
<ul>
|
|
<li><strong>Discord Bot Development</strong> - Custom bots to enhance server functionality, automation, and community engagement</li>
|
|
<li><strong>Web Development</strong> - Websites and web applications, from simple sites to complex applications</li>
|
|
<li><strong>Community Management</strong> - Strategic consulting for growing and maintaining thriving online communities</li>
|
|
<li><strong>Mentorship Programs</strong> - Supporting new developers, especially those from marginalized communities</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="fade-in" role="region" aria-labelledby="mission">
|
|
<h2 id="mission">Our Mission</h2>
|
|
<p>
|
|
We're committed to building inclusive, ethical, and sustainable technology solutions. Our core values include:
|
|
</p>
|
|
<ul>
|
|
<li><strong>Inclusivity</strong> - Actively working to dismantle barriers and promote diversity in tech</li>
|
|
<li><strong>Sustainability</strong> - Minimising our carbon footprint and using eco-friendly technologies</li>
|
|
<li><strong>Ethical Responsibility</strong> - Ensuring our technologies respect user privacy and contribute positively to society</li>
|
|
<li><strong>Community-Driven Innovation</strong> - Technology as a tool to uplift, empower, and serve communities</li>
|
|
</ul>
|
|
<p>
|
|
Learn more about our <a href="https://docs.nhcarrigan.com/about/mission/" target="_blank" rel="noopener noreferrer">mission statement</a> and our <a href="https://docs.nhcarrigan.com/about/sustainability/" target="_blank" rel="noopener noreferrer">commitment to environmental sustainability</a>.
|
|
</p>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: Values & Ethics
|
|
-->
|
|
<section class="card fade-in" style="background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%); border: 2px solid var(--witch-plum);" role="region" aria-labelledby="values-ethics">
|
|
<h2 id="values-ethics" style="margin-top: 0; text-align: center;"><i class="fas fa-heart" aria-hidden="true"></i> Our Values & Ethics</h2>
|
|
<img class="hero-image" src="https://cdn.nhcarrigan.com/hero/ethics.png" alt="Our Values & Ethics" />
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin: 2rem 0;">
|
|
<div class="value-card">
|
|
<h3 style="color: var(--witch-purple); margin-bottom: 0.5rem;">
|
|
<i class="fas fa-universal-access" aria-hidden="true"></i> Accessibility First
|
|
</h3>
|
|
<p>Every line of code we write considers users of all abilities. We believe technology should work for everyone, not just some.</p>
|
|
</div>
|
|
|
|
<div class="value-card">
|
|
<h3 style="color: var(--witch-purple); margin-bottom: 0.5rem;">
|
|
<i class="fas fa-lock" aria-hidden="true"></i> Privacy by Design
|
|
</h3>
|
|
<p>We never collect unnecessary data. Your privacy isn't a feature; it's a fundamental right we protect in every project.</p>
|
|
</div>
|
|
|
|
<div class="value-card">
|
|
<h3 style="color: var(--witch-purple); margin-bottom: 0.5rem;">
|
|
<i class="fas fa-leaf" aria-hidden="true"></i> Sustainable Code
|
|
</h3>
|
|
<p>Efficient algorithms, optimised resources, and eco-friendly hosting. Good code respects both users and our planet.</p>
|
|
</div>
|
|
|
|
<div class="value-card">
|
|
<h3 style="color: var(--witch-purple); margin-bottom: 0.5rem;">
|
|
<i class="fas fa-rainbow" aria-hidden="true"></i> Inclusive by Default
|
|
</h3>
|
|
<p>We actively create spaces where marginalized voices lead. Diversity isn't just welcomed; it's essential to innovation.</p>
|
|
</div>
|
|
|
|
<div class="value-card">
|
|
<h3 style="color: var(--witch-purple); margin-bottom: 0.5rem;">
|
|
<i class="fas fa-code-branch" aria-hidden="true"></i> Open Source Always
|
|
</h3>
|
|
<p>Knowledge should be free. We share our code, contribute to communities, and believe in collective growth.</p>
|
|
</div>
|
|
|
|
<div class="value-card">
|
|
<h3 style="color: var(--witch-purple); margin-bottom: 0.5rem;">
|
|
<i class="fas fa-handshake" aria-hidden="true"></i> Ethical Partnerships
|
|
</h3>
|
|
<p>We only work with organisations whose values align with ours. No exceptions, no matter the price.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p style="text-align: center; font-style: italic; margin-top: 2rem; color: var(--witch-text);">
|
|
"Technology is a tool. We choose to wield it for good."
|
|
</p>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: How Can We 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>
|
|
<img class="hero-image" src="https://cdn.nhcarrigan.com/hero/serve.png" alt="How Can We Best Serve You?" />
|
|
<div style="margin: 2rem auto; padding: 0 1rem;">
|
|
<div style="display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap;">
|
|
<span style="margin-bottom: 0.5rem; font-size: 1.4rem;">I need help with</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem;">
|
|
<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>
|
|
</button>
|
|
<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>
|
|
<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;">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service details that change based on selection -->
|
|
<div id="service-details" style="min-height: 150px; margin: 2rem 0; padding: 1.5rem; border-radius: 16px;">
|
|
<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);">
|
|
Custom Discord bots tailored to your community's needs. From moderation tools to interactive games, we build scalable solutions that enhance engagement.
|
|
</p>
|
|
<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: 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: 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: var(--witch-mauve); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));"></i> 24/7 Uptime</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service selection dots -->
|
|
<div id="service-dots" style="display: flex; justify-content: center; gap: 0.5rem; margin: 1rem 0;">
|
|
<!-- Dots will be generated by JavaScript -->
|
|
</div>
|
|
|
|
<div style="margin-top: 2rem;">
|
|
<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
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
#prev-service:hover, #next-service:hover {
|
|
background: rgba(255, 255, 255, 0.3) !important;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
#prev-service:active, #next-service:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.service-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
padding: 0;
|
|
}
|
|
|
|
.service-dot.active {
|
|
background: var(--witch-mauve);
|
|
transform: scale(1.3);
|
|
}
|
|
|
|
.service-dot:hover {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
#service-details {
|
|
position: relative;
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
|
|
backdrop-filter: blur(20px) saturate(180%) !important;
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.25) !important;
|
|
box-shadow:
|
|
0 8px 32px 0 rgba(31, 38, 135, 0.2),
|
|
inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
|
|
}
|
|
|
|
/* Add a subtle gradient overlay */
|
|
#service-details::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
/* Ensure content is above the overlay */
|
|
#service-details > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Alternative style for browsers without backdrop-filter */
|
|
@supports not (backdrop-filter: blur(20px)) {
|
|
#service-details {
|
|
background:
|
|
linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%),
|
|
linear-gradient(135deg, #5865F2 0%, #4752C4 100%) !important;
|
|
background-blend-mode: soft-light !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#service-details {
|
|
padding: 1rem;
|
|
}
|
|
|
|
#service-features {
|
|
font-size: 0.9rem;
|
|
gap: 1rem;
|
|
}
|
|
|
|
#prev-service, #next-service {
|
|
width: 35px;
|
|
height: 35px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
#rotating-text {
|
|
min-width: 200px !important;
|
|
max-width: 250px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
#prev-service, #next-service {
|
|
width: 30px;
|
|
height: 30px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
#service-features {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Interactive service selector
|
|
(function() {
|
|
const services = [
|
|
{
|
|
name: "Discord bots",
|
|
title: "Discord Bot Development",
|
|
description: "Custom Discord bots tailored to your community's needs. From moderation tools to interactive games, we build scalable solutions that enhance engagement.",
|
|
features: ["Custom Commands", "Auto-moderation", "24/7 Uptime"]
|
|
},
|
|
{
|
|
name: "community",
|
|
title: "Community Management Strategy",
|
|
description: "Strategic guidance to grow and nurture thriving online communities. We help you create welcoming spaces that foster meaningful connections.",
|
|
features: ["Growth Strategy", "Moderation Plans", "Engagement Tactics"]
|
|
},
|
|
{
|
|
name: "web applications",
|
|
title: "Web Application Development",
|
|
description: "Modern, responsive web applications built with cutting-edge technologies. From simple sites to complex platforms, we deliver quality solutions.",
|
|
features: ["Responsive Design", "Fast Performance", "SEO Optimised"]
|
|
},
|
|
{
|
|
name: "mentorship",
|
|
title: "Mentorship & Guidance",
|
|
description: "Personalised mentorship for developers at any stage. We provide support, code reviews, and career guidance to help you reach your goals.",
|
|
features: ["1-on-1 Sessions", "Code Reviews", "Career Advice"]
|
|
},
|
|
{
|
|
name: "API integration",
|
|
title: "API Integration",
|
|
description: "Seamless integration with third-party services and APIs. We handle the complex technical work so you can focus on your business.",
|
|
features: ["RESTful APIs", "Webhook Setup", "Data Sync"]
|
|
},
|
|
{
|
|
name: "documentation",
|
|
title: "Technical Documentation",
|
|
description: "Clear, comprehensive documentation that makes your projects accessible. We create guides that developers actually want to read.",
|
|
features: ["API Docs", "User Guides", "Code Examples"]
|
|
},
|
|
{
|
|
name: "open-source work",
|
|
title: "Open-Source Contributions",
|
|
description: "Contributing to and maintaining open-source projects. We help you give back to the community while building your reputation.",
|
|
features: ["Bug Fixes", "Feature Development", "Code Maintenance"]
|
|
},
|
|
{
|
|
name: "inclusion",
|
|
title: "Inclusive Community Building",
|
|
description: "Creating safe, welcoming spaces for all. We specialise in building communities that celebrate diversity and foster belonging.",
|
|
features: ["Code of Conduct", "Inclusive Policies", "Accessibility Focus"]
|
|
}
|
|
];
|
|
|
|
let currentIndex = 0;
|
|
let autoRotateInterval;
|
|
let isPaused = false;
|
|
|
|
const container = document.getElementById('rotating-text');
|
|
const prevButton = document.getElementById('prev-service');
|
|
const nextButton = document.getElementById('next-service');
|
|
const serviceTitle = document.getElementById('service-title');
|
|
const serviceDescription = document.getElementById('service-description');
|
|
const serviceFeatures = document.getElementById('service-features');
|
|
const dotsContainer = document.getElementById('service-dots');
|
|
|
|
// Create dots
|
|
services.forEach((_, index) => {
|
|
const dot = document.createElement('button');
|
|
dot.className = 'service-dot';
|
|
dot.setAttribute('aria-label', `Go to service ${index + 1}`);
|
|
dot.addEventListener('click', () => goToService(index));
|
|
dotsContainer.appendChild(dot);
|
|
});
|
|
|
|
const dots = dotsContainer.querySelectorAll('.service-dot');
|
|
|
|
// Create all option elements
|
|
container.innerHTML = services.map((service, index) => {
|
|
const fontSize = calculateFontSize(service.name);
|
|
return `<span class="rotating-option" style="position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(${index === 0 ? '-50%' : 'calc(-50% + 20px)'}); opacity: ${index === 0 ? '1' : '0'}; transition: all 0.5s ease; text-align: center; font-size: ${fontSize}rem; line-height: 1;">${service.name}</span>`;
|
|
}).join('');
|
|
|
|
const optionElements = container.querySelectorAll('.rotating-option');
|
|
|
|
function calculateFontSize(text, isMobile = false) {
|
|
const baseSize = 1.6; // rem - slightly larger base since texts are shorter
|
|
const mobileMultiplier = 0.85;
|
|
const length = text.length;
|
|
|
|
let size;
|
|
|
|
// Adjusted for shorter text lengths
|
|
if (length <= 12) {
|
|
size = baseSize;
|
|
} else if (length <= 15) {
|
|
size = baseSize * 0.95;
|
|
} else if (length <= 18) {
|
|
size = baseSize * 0.9;
|
|
} else if (length <= 22) {
|
|
size = baseSize * 0.85;
|
|
} else {
|
|
size = baseSize * 0.8;
|
|
}
|
|
|
|
// Check if mobile
|
|
const viewportWidth = window.innerWidth;
|
|
if (viewportWidth <= 768 || isMobile) {
|
|
size *= mobileMultiplier;
|
|
}
|
|
|
|
return size;
|
|
}
|
|
|
|
function updateServiceDetails() {
|
|
const service = services[currentIndex];
|
|
serviceTitle.textContent = service.title;
|
|
serviceDescription.textContent = service.description;
|
|
serviceFeatures.innerHTML = service.features.map(feature =>
|
|
`<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('');
|
|
|
|
// Update dots
|
|
dots.forEach((dot, index) => {
|
|
dot.classList.toggle('active', index === currentIndex);
|
|
});
|
|
|
|
// Update font size for the current option
|
|
const fontSize = calculateFontSize(service.name);
|
|
optionElements[currentIndex].style.fontSize = `${fontSize}rem`;
|
|
}
|
|
|
|
function goToService(index) {
|
|
// Fade out current
|
|
optionElements[currentIndex].style.opacity = '0';
|
|
optionElements[currentIndex].style.transform = 'translateY(calc(-50% - 20px))';
|
|
|
|
// Update index
|
|
currentIndex = index;
|
|
|
|
// Calculate font size for new service
|
|
const newService = services[currentIndex];
|
|
const fontSize = calculateFontSize(newService.name);
|
|
|
|
// Fade in next
|
|
setTimeout(() => {
|
|
optionElements.forEach((el, idx) => {
|
|
if (idx === currentIndex) {
|
|
el.style.opacity = '1';
|
|
el.style.transform = 'translateY(-50%)';
|
|
el.style.fontSize = `${fontSize}rem`;
|
|
} else {
|
|
el.style.transform = 'translateY(calc(-50% + 20px))';
|
|
}
|
|
});
|
|
updateServiceDetails();
|
|
}, 250);
|
|
|
|
// Reset auto-rotation
|
|
if (!isPaused) {
|
|
clearInterval(autoRotateInterval);
|
|
startAutoRotate();
|
|
}
|
|
}
|
|
|
|
function nextService() {
|
|
goToService((currentIndex + 1) % services.length);
|
|
}
|
|
|
|
function prevService() {
|
|
goToService((currentIndex - 1 + services.length) % services.length);
|
|
}
|
|
|
|
function startAutoRotate() {
|
|
autoRotateInterval = setInterval(() => {
|
|
if (!isPaused) {
|
|
nextService();
|
|
}
|
|
}, 4000);
|
|
}
|
|
|
|
// Event listeners
|
|
prevButton.addEventListener('click', prevService);
|
|
nextButton.addEventListener('click', nextService);
|
|
|
|
// Pause on hover
|
|
const section = document.querySelector('#serve-you').parentElement;
|
|
section.addEventListener('mouseenter', () => {
|
|
isPaused = true;
|
|
});
|
|
section.addEventListener('mouseleave', () => {
|
|
isPaused = false;
|
|
});
|
|
|
|
// Touch support for mobile
|
|
container.addEventListener('click', nextService);
|
|
|
|
// Initialize
|
|
updateServiceDetails();
|
|
dots[0].classList.add('active');
|
|
|
|
// Handle window resize
|
|
let resizeTimeout;
|
|
window.addEventListener('resize', () => {
|
|
clearTimeout(resizeTimeout);
|
|
resizeTimeout = setTimeout(() => {
|
|
// Recalculate font size for current service
|
|
const currentService = services[currentIndex];
|
|
const newSize = calculateFontSize(currentService.name);
|
|
optionElements[currentIndex].style.fontSize = `${newSize}rem`;
|
|
}, 250);
|
|
});
|
|
|
|
// Start auto-rotation after a delay
|
|
setTimeout(startAutoRotate, 2000);
|
|
})();
|
|
</script>
|
|
|
|
<script>
|
|
// Fetch professional stats from data API
|
|
(async function() {
|
|
const updateStat = (id, value) => {
|
|
const element = document.getElementById(id);
|
|
if (element) {
|
|
element.textContent = value;
|
|
}
|
|
};
|
|
|
|
try {
|
|
const [testimonialsResponse, resumeResponse] = await Promise.all([
|
|
fetch('https://data.nhcarrigan.com/testimonials.json'),
|
|
fetch('https://data.nhcarrigan.com/resume.json')
|
|
]);
|
|
|
|
const testimonials = await testimonialsResponse.json();
|
|
const resume = await resumeResponse.json();
|
|
|
|
updateStat('stat-testimonials', testimonials.length);
|
|
updateStat('stat-certifications', resume.certifications?.length || 0);
|
|
updateStat('stat-projects', resume.projects?.length || 0);
|
|
updateStat('stat-publications', resume.publications?.length || 0);
|
|
} catch (error) {
|
|
console.error('Failed to fetch professional stats:', error);
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<!--
|
|
MARK: Availability Banner
|
|
-->
|
|
<section class="availability-banner fade-in" role="region" aria-label="Availability information">
|
|
<div class="availability-item">
|
|
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
<span><strong>Accepting New Clients</strong></span>
|
|
</div>
|
|
<div class="availability-item">
|
|
<i class="fas fa-shield-alt" aria-hidden="true"></i>
|
|
<span><strong>NDA Ready</strong> — Your project stays confidential</span>
|
|
</div>
|
|
<div class="availability-item">
|
|
<i class="fas fa-clock" aria-hidden="true"></i>
|
|
<span><strong>1-3 Business Days</strong> response time</span>
|
|
</div>
|
|
<div class="availability-item">
|
|
<i class="fas fa-file-invoice-dollar" aria-hidden="true"></i>
|
|
<span><strong>Custom Quotes</strong> available on request</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: Tech Stack
|
|
-->
|
|
<section class="card fade-in" style="background: var(--witch-lavender);" role="region" aria-labelledby="tech-stack">
|
|
<h2 id="tech-stack" style="margin-top: 0; text-align: center;"><i class="fas fa-code" aria-hidden="true"></i> Our Tech Stack</h2>
|
|
<p style="text-align: center; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto;">
|
|
The languages, frameworks, and tools we use to bring your projects to life.
|
|
</p>
|
|
|
|
<div style="display: flex; flex-direction: column; gap: 2rem;">
|
|
<!-- Languages -->
|
|
<details class="tech-category" open>
|
|
<summary><i class="fas fa-chevron-right dropdown-icon" aria-hidden="true"></i> <i class="fas fa-language" aria-hidden="true"></i> Languages</summary>
|
|
<div class="tech-category-content">
|
|
<div class="tech-item">
|
|
<i class="devicon-bash-plain"></i>
|
|
<span>Bash</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-css3-plain colored"></i>
|
|
<span>CSS</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-go-original-wordmark colored"></i>
|
|
<span>Go</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-html5-plain colored"></i>
|
|
<span>HTML</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-java-plain colored"></i>
|
|
<span>Java</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-javascript-plain colored"></i>
|
|
<span>JavaScript</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-json-plain colored"></i>
|
|
<span>JSON</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-kotlin-plain colored"></i>
|
|
<span>Kotlin</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-markdown-original"></i>
|
|
<span>MDX</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-python-plain colored"></i>
|
|
<span>Python</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-rust-original"></i>
|
|
<span>Rust</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-typescript-plain colored"></i>
|
|
<span>TypeScript</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-yaml-plain colored"></i>
|
|
<span>YAML</span>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Frameworks & Libraries -->
|
|
<details class="tech-category">
|
|
<summary><i class="fas fa-chevron-right dropdown-icon" aria-hidden="true"></i> <i class="fas fa-layer-group" aria-hidden="true"></i> Frameworks & Libraries</summary>
|
|
<div class="tech-category-content">
|
|
<div class="tech-item">
|
|
<i class="devicon-dotnetcore-plain colored"></i>
|
|
<span>.NET</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-angular-plain colored"></i>
|
|
<span>Angular</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-astro-plain colored"></i>
|
|
<span>Astro</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-discordjs-plain colored"></i>
|
|
<span>Discord.js</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-express-original"></i>
|
|
<span>Express</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-fastify-plain colored"></i>
|
|
<span>Fastify</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-nextjs-plain"></i>
|
|
<span>Next.js</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-nodejs-plain colored"></i>
|
|
<span>Node.js</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-prisma-original colored"></i>
|
|
<span>Prisma</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-pydantic-plain colored"></i>
|
|
<span>Pydantic</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-react-original colored"></i>
|
|
<span>React</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-slack-plain colored"></i>
|
|
<span>Slack Bolt</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-tauri-plain colored"></i>
|
|
<span>Tauri</span>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Databases -->
|
|
<details class="tech-category">
|
|
<summary><i class="fas fa-chevron-right dropdown-icon" aria-hidden="true"></i> <i class="fas fa-database" aria-hidden="true"></i> Databases</summary>
|
|
<div class="tech-category-content">
|
|
<div class="tech-item">
|
|
<i class="devicon-mongodb-plain colored"></i>
|
|
<span>MongoDB</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-mysql-plain colored"></i>
|
|
<span>MySQL</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-postgresql-plain colored"></i>
|
|
<span>PostgreSQL</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-redis-plain colored"></i>
|
|
<span>Redis</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-sqlite-plain colored"></i>
|
|
<span>SQLite</span>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Cloud & Infrastructure -->
|
|
<details class="tech-category">
|
|
<summary><i class="fas fa-chevron-right dropdown-icon" aria-hidden="true"></i> <i class="fas fa-cloud" aria-hidden="true"></i> Cloud & Infrastructure</summary>
|
|
<div class="tech-category-content">
|
|
<div class="tech-item">
|
|
<i class="devicon-amazonwebservices-plain-wordmark colored"></i>
|
|
<span>AWS S3</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-amazonwebservices-plain-wordmark colored"></i>
|
|
<span>AWS SES</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-cloudflare-plain colored"></i>
|
|
<span>Cloudflare R2</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-cloudflare-plain colored"></i>
|
|
<span>Cloudflare Workers</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-docker-plain colored"></i>
|
|
<span>Docker Compose</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-githubactions-plain colored"></i>
|
|
<span>GitHub Actions</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-gradle-plain colored"></i>
|
|
<span>Gradle</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-maven-plain colored"></i>
|
|
<span>Maven</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-nginx-original colored"></i>
|
|
<span>NGINX</span>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- API Standards -->
|
|
<details class="tech-category">
|
|
<summary><i class="fas fa-chevron-right dropdown-icon" aria-hidden="true"></i> <i class="fas fa-file-code" aria-hidden="true"></i> API Standards</summary>
|
|
<div class="tech-category-content">
|
|
<div class="tech-item">
|
|
<i class="fas fa-exchange-alt" style="color: var(--witch-plum);"></i>
|
|
<span>AsyncAPI</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-openapi-plain colored"></i>
|
|
<span>OpenAPI</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-swagger-plain colored"></i>
|
|
<span>Swagger</span>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Testing & Quality -->
|
|
<details class="tech-category">
|
|
<summary><i class="fas fa-chevron-right dropdown-icon" aria-hidden="true"></i> <i class="fas fa-vial" aria-hidden="true"></i> Testing & Quality</summary>
|
|
<div class="tech-category-content">
|
|
<div class="tech-item">
|
|
<i class="devicon-mocha-plain colored"></i>
|
|
<span>Chai</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-rust-original"></i>
|
|
<span>Clippy</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-eslint-plain colored"></i>
|
|
<span>ESLint</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-jest-plain colored"></i>
|
|
<span>Jest</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-pytest-plain colored"></i>
|
|
<span>pytest</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-python-plain" style="color: #d4a700;"></i>
|
|
<span>Ruff</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-vitest-plain colored"></i>
|
|
<span>Vitest</span>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- Operating Systems -->
|
|
<details class="tech-category">
|
|
<summary><i class="fas fa-chevron-right dropdown-icon" aria-hidden="true"></i> <i class="fas fa-desktop" aria-hidden="true"></i> Operating Systems</summary>
|
|
<div class="tech-category-content">
|
|
<div class="tech-item">
|
|
<i class="devicon-archlinux-plain colored"></i>
|
|
<span>Arch</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-ubuntu-plain colored"></i>
|
|
<span>Ubuntu</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="devicon-windows11-original colored"></i>
|
|
<span>Windows</span>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: Community Platforms
|
|
-->
|
|
<section class="card fade-in" style="background: var(--witch-lavender);" role="region" aria-labelledby="community-platforms">
|
|
<h2 id="community-platforms" style="margin-top: 0; text-align: center;"><i class="fas fa-users" aria-hidden="true"></i> Community Platforms We Manage</h2>
|
|
<p style="text-align: center; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto;">
|
|
We have experience building and managing communities across all major platforms.
|
|
</p>
|
|
<div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;">
|
|
<div class="tech-item">
|
|
<i class="fab fa-discord colored" style="color: #5865F2;"></i>
|
|
<span>Discord</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="fab fa-discourse" style="color: #000000;"></i>
|
|
<span>Discourse</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="fab fa-facebook" style="color: #1877F2;"></i>
|
|
<span>Facebook</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="fab fa-github" style="color: #181717;"></i>
|
|
<span>GitHub</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="fab fa-linkedin" style="color: #0A66C2;"></i>
|
|
<span>LinkedIn</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="fas fa-comments" style="color: #4B68B1;"></i>
|
|
<span>phpBB</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="fab fa-slack" style="color: #4A154B;"></i>
|
|
<span>Slack</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="fab fa-twitch" style="color: #9146FF;"></i>
|
|
<span>Twitch</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="fab fa-twitter" style="color: #1DA1F2;"></i>
|
|
<span>Twitter</span>
|
|
</div>
|
|
<div class="tech-item">
|
|
<i class="fab fa-youtube" style="color: #FF0000;"></i>
|
|
<span>YouTube</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: Client Timeline
|
|
-->
|
|
<section class="card fade-in" role="region" aria-labelledby="client-timeline">
|
|
<h2 id="client-timeline" style="margin-top: 0; text-align: center;">Client History Timeline</h2>
|
|
<p style="text-align: center; margin-bottom: 2rem;">
|
|
A journey through the wonderful organisations and projects I've had the privilege to work with!
|
|
</p>
|
|
<img class="hero-image" src="https://cdn.nhcarrigan.com/hero/history.png" alt="Naomi Carrigan, founder of NHCarrigan" />
|
|
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<div class="timeline-avatar">
|
|
<img src="https://cdn.nhcarrigan.com/avatars/jobs/deepgram.png" alt="Deepgram avatar" />
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-role">Developer Experience Engineer</div>
|
|
<div class="timeline-company">Deepgram</div>
|
|
<div class="timeline-dates">July 2023 - present</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-avatar">
|
|
<img src="https://cdn.nhcarrigan.com/avatars/jobs/freecodecamp.png" alt="freeCodeCamp avatar" />
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-role">Educational Web Developer and Community Manager</div>
|
|
<div class="timeline-company">freeCodeCamp</div>
|
|
<div class="timeline-dates">December 2020 - present</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-avatar">
|
|
<img src="https://cdn.nhcarrigan.com/avatars/jobs/nhcarrigan.png" alt="NHCarrigan avatar" />
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-role">Technomancer</div>
|
|
<div class="timeline-company">NHCarrigan</div>
|
|
<div class="timeline-dates">December 2020 - present</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-avatar">
|
|
<img src="https://cdn.nhcarrigan.com/avatars/jobs/streamcord.png" alt="Streamcord avatar" />
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-role">Community Manager and Infrastructure Engineer</div>
|
|
<div class="timeline-company">Streamcord</div>
|
|
<div class="timeline-dates">August 2021 - December 2024</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-avatar">
|
|
<img src="https://cdn.nhcarrigan.com/avatars/jobs/rythm.png" alt="Rythm avatar" />
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-role">Senior Integrations Engineer</div>
|
|
<div class="timeline-company">Rythm</div>
|
|
<div class="timeline-dates">April 2022 - October 2024</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-avatar">
|
|
<img src="https://cdn.nhcarrigan.com/avatars/jobs/bigbadbeaver.png" alt="BigBadBeaver TV avatar" />
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-role">Twitch Integration Engineer</div>
|
|
<div class="timeline-company">BigBadBeaver TV</div>
|
|
<div class="timeline-dates">October 2022 - January 2024</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-avatar">
|
|
<img src="https://cdn.nhcarrigan.com/avatars/jobs/tweetshift.png" alt="TweetShift avatar" />
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-role">Community Manager</div>
|
|
<div class="timeline-company">TweetShift</div>
|
|
<div class="timeline-dates">January 2022 - May 2023</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-avatar">
|
|
<img src="https://cdn.nhcarrigan.com/avatars/jobs/4c.png" alt="4C avatar" />
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-role">Community Manager</div>
|
|
<div class="timeline-company">4C</div>
|
|
<div class="timeline-dates">May 2022 - November 2022</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="timeline-item">
|
|
<div class="timeline-avatar">
|
|
<img src="https://cdn.nhcarrigan.com/avatars/jobs/sema.png" alt="Sema avatar" />
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-role">Community Manager and Open Source Engineer</div>
|
|
<div class="timeline-company">Sema</div>
|
|
<div class="timeline-dates">May 2022 - September 2022</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="https://resume.nhcarrigan.com" target="_blank" class="cta-button cta-button-secondary" aria-label="View full resume" rel="noopener noreferrer">
|
|
<i class="fas fa-file-alt" aria-hidden="true"></i> See full resume
|
|
</a>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: Past Work & Credentials
|
|
-->
|
|
<section class="fade-in" role="region" aria-labelledby="past-work">
|
|
<h2 id="past-work">Past Work & Credentials</h2>
|
|
<p>
|
|
Curious to know more about the work we've done and the people we've helped? Here's the proof:
|
|
</p>
|
|
<ul>
|
|
<li><a href="https://resume.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Founder's resume</a> - Explore past organisations we've worked with</li>
|
|
<li><a href="https://testimonials.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Client testimonials</a> - Direct feedback from people we've worked with</li>
|
|
<li><a href="https://git.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Open source code</a> - Check out our repositories</li>
|
|
<li><a href="https://docs.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Our Documentation</a> - Everything about our projects, policies, and how we operate</li>
|
|
</ul>
|
|
<p>
|
|
Interested in working together? <a href="https://forms.nhcarrigan.com/form/XRlQjeu8CbMrTA-v0IPOxlUPEPitLKXTWg70UUCIORA" target="_blank" rel="noopener noreferrer">Submit a commission inquiry</a> and let's chat!
|
|
</p>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: Professional Stats
|
|
-->
|
|
<section class="card fade-in" role="region" aria-labelledby="professional-stats">
|
|
<h2 id="professional-stats" style="margin-top: 0; text-align: center;">Professional Achievements</h2>
|
|
<p style="text-align: center; margin-bottom: 2rem;">
|
|
A snapshot of our experience and credentials:
|
|
</p>
|
|
<img class="hero-image" src="https://cdn.nhcarrigan.com/hero/achievements.png" alt="Naomi Carrigan, founder of NHCarrigan" />
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="stat-testimonials">--</div>
|
|
<div class="stat-label">Satisfied Clients</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="stat-certifications">--</div>
|
|
<div class="stat-label">Certifications</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="stat-projects">--</div>
|
|
<div class="stat-label">Featured Projects</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="stat-publications">--</div>
|
|
<div class="stat-label">Published Articles</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: Testimonials
|
|
-->
|
|
<section class="card fade-in" role="region" aria-labelledby="client-feedback">
|
|
<h2 id="client-feedback" style="margin-top: 0; text-align: center;">What Clients Say</h2>
|
|
<p style="text-align: center; margin-bottom: 2rem;">
|
|
Here's what people have shared about working with us:
|
|
</p>
|
|
<img class="hero-image" src="https://cdn.nhcarrigan.com/hero/testimonials.png" alt="Naomi Carrigan, founder of NHCarrigan" />
|
|
|
|
<div class="testimonials-preview">
|
|
<div class="testimonial-card">
|
|
<div class="testimonial-text">
|
|
"You could ask her for help solving anything and she'd whip up a whole plan in her head in 30 seconds."
|
|
</div>
|
|
</div>
|
|
|
|
<div class="testimonial-card">
|
|
<div class="testimonial-text">
|
|
"Everything she delivered was secure, scalable, and polished to perfection."
|
|
</div>
|
|
</div>
|
|
|
|
<div class="testimonial-card">
|
|
<div class="testimonial-text">
|
|
"The system 'just works', you don't have to think about how or why which is always a great quality in an internal tool."
|
|
</div>
|
|
</div>
|
|
|
|
<div class="testimonial-card">
|
|
<div class="testimonial-text">
|
|
"Her ability to learn absolutely anything... allows her to find a problem, tackle it quickly, and resolve it - even if she didn't have prior knowledge of the issue."
|
|
</div>
|
|
</div>
|
|
|
|
<div class="testimonial-card">
|
|
<div class="testimonial-text">
|
|
"There is no one else that could even remotely match her level of talent."
|
|
</div>
|
|
</div>
|
|
|
|
<div class="testimonial-card">
|
|
<div class="testimonial-text">
|
|
"She was the glue that held so many parts of our operation together."
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p style="text-align: center; margin-top: 2rem;">
|
|
<a href="https://testimonials.nhcarrigan.com" target="_blank" class="cta-button cta-button-secondary" aria-label="View all client testimonials" rel="noopener noreferrer">
|
|
<i class="fas fa-quote-left" aria-hidden="true"></i> Read All Testimonials
|
|
</a>
|
|
</p>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: Resources
|
|
-->
|
|
<section class="fade-in" role="region" aria-labelledby="resources">
|
|
<h2 id="resources">Resources & Documentation</h2>
|
|
<p>
|
|
We believe in transparency and sharing knowledge. Our comprehensive documentation includes:
|
|
</p>
|
|
<ul>
|
|
<li><a href="https://docs.nhcarrigan.com/community/coc" target="_blank" rel="noopener noreferrer">Code of Conduct</a> and <a href="https://docs.nhcarrigan.com/community/guide/" target="_blank" rel="noopener noreferrer">Community Guidelines</a> - Templates to help shape your own community</li>
|
|
<li><a href="https://docs.nhcarrigan.com/legal/license/" target="_blank" rel="noopener noreferrer">Software License</a>, <a href="https://docs.nhcarrigan.com/legal/terms/" target="_blank" rel="noopener noreferrer">Terms of Service</a>, and <a href="https://docs.nhcarrigan.com/legal/privacy/" target="_blank" rel="noopener noreferrer">Privacy Policy</a> - Documentation templates for your products</li>
|
|
<li><a href="https://blog.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Blog</a> - Content and resources to help you level up your game!</li>
|
|
<li><a href="https://hikari.nhcarrigan.com/announcements" target="_blank" rel="noopener noreferrer">Announcements</a> - Project updates and community news</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: Community Stats
|
|
-->
|
|
<section class="card fade-in" role="region" aria-labelledby="community-stats">
|
|
<h2 id="community-stats" style="margin-top: 0; text-align: center;">Our Community by the Numbers</h2>
|
|
<p style="text-align: center; margin-bottom: 2rem;">
|
|
We're proud of the vibrant, inclusive community we've built together!
|
|
</p>
|
|
<img class="hero-image" src="https://cdn.nhcarrigan.com/hero/community-stats.png" alt="Naomi Carrigan, founder of NHCarrigan" />
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-number">675+</div>
|
|
<div class="stat-label">Discord Members</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-number">500+</div>
|
|
<div class="stat-label">Daily Discord Messages</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-number">1,100+</div>
|
|
<div class="stat-label">Bluesky Followers</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-number">800+</div>
|
|
<div class="stat-label">LinkedIn Connections</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p style="text-align: center; margin-top: 2rem;">
|
|
<a href="https://chat.nhcarrigan.com" target="_blank" class="cta-button" aria-label="Join our Discord community" rel="noopener noreferrer">
|
|
<i class="fab fa-discord" aria-hidden="true"></i> Connect with Us on Discord
|
|
</a>
|
|
<a href="https://socials.nhcarrigan.com" target="_blank" class="cta-button cta-button-secondary" aria-label="View all our social media accounts" rel="noopener noreferrer">
|
|
<i class="fas fa-share-alt" aria-hidden="true"></i> View All Social Accounts
|
|
</a>
|
|
</p>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: Sustainability & Support
|
|
-->
|
|
<section class="fade-in" role="region" aria-labelledby="sustainability-impact">
|
|
<h2 id="sustainability-impact">Growing Responsibly, Together</h2>
|
|
<p style="font-size: 1.1rem;">
|
|
As our community continues to grow, so does our responsibility to maintain the infrastructure, tools, and services that make it all possible. Every new member, every question answered, and every project launched requires resources - servers, development time, and ongoing maintenance.
|
|
</p>
|
|
<p>
|
|
We're committed to keeping our core services free and accessible while being transparent about what it takes to sustain them. Your support directly enables us to continue offering mentorship, maintaining our open-source projects, and building new tools that serve communities worldwide.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="card fade-in" role="region" aria-labelledby="donation-cta">
|
|
<h2 id="donation-cta" style="margin-top: 0; text-align: center;">Support Our Mission</h2>
|
|
<p style="text-align: center; margin-bottom: 2rem; font-size: 1.1rem;">
|
|
Help us continue building inclusive tech communities and providing free, open-source tools for everyone.
|
|
</p>
|
|
<img class="hero-image" src="https://cdn.nhcarrigan.com/hero/donate.png" alt="Naomi Carrigan, founder of NHCarrigan" />
|
|
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-number" style="color: #10b981;">$250-$500</div>
|
|
<div class="stat-label">Monthly Operating Costs</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-number" style="color: #10b981;">50+</div>
|
|
<div class="stat-label">Products Offered</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-number" style="color: #10b981;">Countless</div>
|
|
<div class="stat-label">Pro-Bono Services</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p style="text-align: center; margin-top: 2rem;">
|
|
Your support helps us maintain our infrastructure, develop new features, and continue offering free services to communities worldwide.
|
|
</p>
|
|
|
|
<p style="text-align: center; margin-top: 1.5rem;">
|
|
<a href="https://donate.nhcarrigan.com" target="_blank" class="cta-button cta-button-donate" style="font-size: 1.2rem; padding: 1.2rem 2.5rem;" aria-label="Support NHCarrigan with a donation" rel="noopener noreferrer">
|
|
<i class="fas fa-heart" aria-hidden="true"></i> Donate Now
|
|
</a>
|
|
</p>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: FAQ
|
|
-->
|
|
<section class="fade-in" role="region" aria-labelledby="faq">
|
|
<h2 id="faq">Frequently Asked Questions</h2>
|
|
|
|
<h3>What is NHCarrigan?</h3>
|
|
<p>
|
|
NHCarrigan is a technology company dedicated to building inclusive, ethical, and sustainable software solutions. We create Discord bots, web applications, APIs, and development tools that serve communities whilst prioritising user privacy, environmental sustainability, and accessibility.
|
|
</p>
|
|
|
|
<h3>What products and services do you offer?</h3>
|
|
<p>
|
|
We offer a diverse ecosystem of products including AI-powered Discord bots (like Hikari for product management and Becca Lyria for interactive RPG experiences), web dashboards, APIs, documentation platforms, and various community tools. Our products are organised into three main categories: Community Tools & Integrations, Websites & APIs, and Apps & Games.
|
|
</p>
|
|
|
|
<h3>How do I get started with your products?</h3>
|
|
<p>
|
|
Most of our Discord bots can be installed directly from the Discord app directory or by visiting our web dashboard at <a href="https://hikari.nhcarrigan.com" target="_blank" rel="noopener noreferrer">hikari.nhcarrigan.com</a>. For detailed documentation and setup instructions for any specific product, visit our <a href="https://docs.nhcarrigan.com" target="_blank" rel="noopener noreferrer">documentation site</a>.
|
|
</p>
|
|
|
|
<h3>What makes NHCarrigan different?</h3>
|
|
<p>
|
|
We're committed to ethical technology development with a focus on inclusivity, sustainability, and community-driven innovation. We actively work to break down barriers in tech, support marginalized voices, and ensure our technologies respect user privacy while contributing positively to society. Our projects are open-source and community-centric.
|
|
</p>
|
|
|
|
<h3>How can I get support or contribute?</h3>
|
|
<p>
|
|
We offer multiple ways to get help and connect with our community:
|
|
</p>
|
|
<ul>
|
|
<li><strong><a href="https://chat.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Discord community</a></strong> - Join for real-time chat, immediate help, and vibrant community discussions</li>
|
|
<li><strong><a href="https://support.nhcarrigan.com" target="_blank" rel="noopener noreferrer">Support forum</a></strong> - Visit for in-depth support, searchable solutions, and structured discussions</li>
|
|
</ul>
|
|
<p>
|
|
We welcome contributions from developers of all backgrounds - check out our <a href="https://docs.nhcarrigan.com/#/contributing" target="_blank" rel="noopener noreferrer">contributing guidelines</a> and <a href="https://docs.nhcarrigan.com/#/community/code-of-conduct" target="_blank" rel="noopener noreferrer">community code of conduct</a> to get started. We also offer mentorship programs for new developers.
|
|
</p>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: Community CTA
|
|
-->
|
|
<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>
|
|
<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;">
|
|
As part of our mission to help new developers break into the industry and tear down barriers that keep marginalized identities from succeeding, we offer public mentorship, encouragement, and guidance.
|
|
</p>
|
|
<p>
|
|
<strong><i class="fas fa-bullseye" aria-hidden="true"></i> Two amazing ways to connect:</strong>
|
|
</p>
|
|
<ul>
|
|
<li><strong>Real-time chat & community vibes?</strong> Join our <a href="https://chat.nhcarrigan.com" target="_blank" rel="noopener noreferrer" style="font-weight: bold;">Discord server</a> - It's where the magic happens with immediate support, mentorship discussions, and a brilliant community!</li>
|
|
<li><strong>Need structured support or detailed discussions?</strong> Visit our <a href="https://support.nhcarrigan.com" target="_blank" rel="noopener noreferrer" style="font-weight: bold;">support forum</a> - Perfect for in-depth questions, searchable solutions, and organised topics!</li>
|
|
</ul>
|
|
<p>
|
|
Need private support? You can <a href="https://forms.nhcarrigan.com/form/HyqoJ9Th5QDiOn_GPLNIRhe1a5ON7mDQf-O_ukM6R4g" target="_blank" rel="noopener noreferrer">submit a general contact request</a>, or <a href="https://forms.nhcarrigan.com/form/uUKZiJSDm6847iDOlpZkD5QF7cAjoTbTm0F4T0EdW0I" target="_blank" rel="noopener noreferrer">schedule a paid meeting</a> for direct 1-on-1 support.
|
|
</p>
|
|
<p style="text-align: center; margin-top: 1.5rem;">
|
|
<a href="https://chat.nhcarrigan.com" target="_blank" class="cta-button" aria-label="Join our Discord community now">
|
|
<i class="fab fa-discord" aria-hidden="true"></i> Join Discord Community
|
|
</a>
|
|
<a href="https://support.nhcarrigan.com" target="_blank" class="cta-button cta-button-secondary" aria-label="Visit our support forum">
|
|
<i class="fas fa-comments" aria-hidden="true"></i> Visit Support Forum
|
|
</a>
|
|
</p>
|
|
</section>
|
|
|
|
<section class="fade-in" role="region" aria-labelledby="get-involved">
|
|
<h2 id="get-involved">Get Involved</h2>
|
|
<p>
|
|
As we continue to grow, we may begin considering hiring additional talent. However, we're not quite there yet. If you're interested in our mission and wish to help, we accept <a href="https://forms.nhcarrigan.com/form/PEpB3gA79gxP8wmfEf4zou96opkpUTjssTcaeYjhoi8" target="_blank" rel="noopener noreferrer">applications for our volunteer team</a> and would love to have you join us!
|
|
</p>
|
|
<p>
|
|
Or, if you just want to be part of the community and see what we're all about, <a href="https://chat.nhcarrigan.com" target="_blank" rel="noopener noreferrer">join us on Discord</a> - no application needed! <i class="fas fa-star" aria-hidden="true"></i>
|
|
</p>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: Book a Call
|
|
-->
|
|
<section class="card fade-in" style="text-align: center; background: var(--witch-rose);" role="region" aria-labelledby="book-call">
|
|
<h2 id="book-call" style="margin-top: 0;"><i class="fas fa-calendar" aria-hidden="true"></i> Schedule a Call</h2>
|
|
<p style="font-size: 1.1rem; max-width: 600px; margin: 0 auto 1.5rem;">
|
|
Ready to discuss your project? Book a free consultation call and let's explore how we can work together!
|
|
</p>
|
|
<div style="max-width: 100%; overflow: hidden; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin: 0 auto;">
|
|
<iframe
|
|
src="https://zcal.co/i/mUs9Kdjx?embed=1&embedType=iframe"
|
|
loading="lazy"
|
|
style="border:none; width: 100%; height: 675px; max-width: 1096px;"
|
|
id="zcal-invite"
|
|
scrolling="yes"
|
|
title="Schedule a consultation call">
|
|
</iframe>
|
|
</div>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: Contact Form
|
|
-->
|
|
<section class="card fade-in" style="text-align: center; background: var(--witch-lavender);" role="region" aria-labelledby="contact-form">
|
|
<h2 id="contact-form" style="margin-top: 0;"><i class="fas fa-envelope" aria-hidden="true"></i> Get In Touch</h2>
|
|
<p style="font-size: 1.1rem; max-width: 600px; margin: 0 auto 1.5rem;">
|
|
Have a question, want to work together, or just want to say hello? Fill out the form below and we'll get back to you!
|
|
</p>
|
|
<div class="availability-banner" style="max-width: 680px; margin: 0 auto 1.5rem;">
|
|
<div class="availability-item">
|
|
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
<span><strong>Accepting New Clients</strong></span>
|
|
</div>
|
|
<div class="availability-item">
|
|
<i class="fas fa-shield-alt" aria-hidden="true"></i>
|
|
<span><strong>NDA Ready</strong> — Your project stays confidential</span>
|
|
</div>
|
|
<div class="availability-item">
|
|
<i class="fas fa-clock" aria-hidden="true"></i>
|
|
<span><strong>1-3 Business Days</strong> response time</span>
|
|
</div>
|
|
<div class="availability-item">
|
|
<i class="fas fa-file-invoice-dollar" aria-hidden="true"></i>
|
|
<span><strong>Custom Quotes</strong> available on request</span>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; justify-content: center; border-radius: 12px; background: var(--witch-moon); padding: 1rem; max-width: 680px; margin: 0 auto; height: 600px; overflow: hidden;">
|
|
<iframe
|
|
style="border: none; width: 100%; max-width: 640px; height: 100%;"
|
|
src="https://forms.nhcarrigan.com/o/docs/forms/8XTPmbrFtvDJAKSPgBgsvA/4"
|
|
title="Contact Form"
|
|
loading="lazy"
|
|
scrolling="yes"
|
|
></iframe>
|
|
</div>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: Let's Build Together
|
|
-->
|
|
<section class="card fade-in" style="background: linear-gradient(135deg, var(--witch-purple) 0%, var(--witch-plum) 100%); text-align: center; position: relative; overflow: hidden;" role="region" aria-labelledby="build-together">
|
|
<div style="position: absolute; top: -50px; right: -50px; width: 100px; height: 100px; background: rgba(255, 255, 255, 0.1); border-radius: 50%;"></div>
|
|
<div style="position: absolute; bottom: -30px; left: -30px; width: 80px; height: 80px; background: rgba(255, 255, 255, 0.05); border-radius: 50%;"></div>
|
|
|
|
<h2 id="build-together" style="margin-top: 0; color: white; font-size: 2rem;">
|
|
<i class="fas fa-rocket" aria-hidden="true"></i> Let's Build Something Amazing Together
|
|
</h2>
|
|
|
|
<p style="color: var(--witch-moon); font-size: 1.2rem; max-width: 700px; margin: 1.5rem auto 2rem;">
|
|
Whether you need a custom solution, want to improve your existing systems, or have a wild idea that needs technical expertise; we're here to help bring your vision to life.
|
|
</p>
|
|
<img class="hero-image" src="https://cdn.nhcarrigan.com/hero/build.png" alt="Let's Build Something Amazing Together" />
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin: 2rem 0; max-width: 800px; margin-left: auto; margin-right: auto;">
|
|
<div style="background: rgba(255, 255, 255, 0.1); padding: 1.5rem; border-radius: 12px; backdrop-filter: blur(5px);">
|
|
<i class="fas fa-bolt" style="font-size: 2rem; color: var(--witch-mauve); margin-bottom: 0.5rem;"></i>
|
|
<h3 style="color: white; margin: 0.5rem 0;">Quick Start</h3>
|
|
<p style="color: var(--witch-moon); font-size: 0.9rem;">Got an urgent need? We can often begin work within 24-48 hours.</p>
|
|
</div>
|
|
|
|
<div style="background: rgba(255, 255, 255, 0.1); padding: 1.5rem; border-radius: 12px; backdrop-filter: blur(5px);">
|
|
<i class="fas fa-comments" style="font-size: 2rem; color: var(--witch-mauve); margin-bottom: 0.5rem;"></i>
|
|
<h3 style="color: white; margin: 0.5rem 0;">Collaborative</h3>
|
|
<p style="color: var(--witch-moon); font-size: 0.9rem;">We work WITH you, not just for you. Your input shapes everything.</p>
|
|
</div>
|
|
|
|
<div style="background: rgba(255, 255, 255, 0.1); padding: 1.5rem; border-radius: 12px; backdrop-filter: blur(5px);">
|
|
<i class="fas fa-shield-alt" style="font-size: 2rem; color: var(--witch-mauve); margin-bottom: 0.5rem;"></i>
|
|
<h3 style="color: white; margin: 0.5rem 0;">No Surprises</h3>
|
|
<p style="color: var(--witch-moon); font-size: 0.9rem;">Clear communication, transparent pricing, and realistic timelines.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem;">
|
|
<a href="#book-call" class="cta-button" style="background: white; color: var(--witch-purple); padding: 1rem 2rem; font-size: 1.1rem;">
|
|
<i class="fas fa-calendar" aria-hidden="true"></i> Schedule a Call
|
|
</a>
|
|
<a href="#contact-form" class="cta-button" style="background: transparent; color: white; border: 2px solid white; padding: 1rem 2rem; font-size: 1.1rem;">
|
|
<i class="fas fa-envelope" aria-hidden="true"></i> Send a Message
|
|
</a>
|
|
</div>
|
|
|
|
<p style="color: var(--witch-moon); font-size: 0.9rem; margin-top: 2rem; font-style: italic;">
|
|
"The best projects come from passionate people working together toward a common goal."
|
|
</p>
|
|
</section>
|
|
|
|
<!--
|
|
MARK: Final CTA
|
|
-->
|
|
<section class="card fade-in" style="text-align: center; background: #f0f0f0;" role="region" aria-labelledby="thanks">
|
|
<h2 id="thanks" style="margin-top: 0;">Thanks for Visiting! <i class="fas fa-heart" aria-hidden="true"></i></h2>
|
|
<p style="font-size: 1.1rem;">
|
|
We look forward to seeing you in our communities, and we're eager to begin working with you! Whether you're looking for mentorship, need help with a project, or just want to connect with like-minded people, come say hi!
|
|
</p>
|
|
<img class="hero-image" src="https://cdn.nhcarrigan.com/hero/goodbye.png" alt="Naomi Carrigan, founder of NHCarrigan" />
|
|
<p style="margin-top: 1.5rem;">
|
|
<a href="https://chat.nhcarrigan.com" target="_blank" class="cta-button" aria-label="Join our Discord community">
|
|
<i class="fab fa-discord" aria-hidden="true"></i> Join Discord
|
|
</a>
|
|
<a href="https://bsky.app/profile/naomi.lgbt" target="_blank" class="cta-button cta-button-secondary" aria-label="Connect with Naomi on Bluesky" rel="noopener noreferrer">
|
|
<i class="fab fa-bluesky" aria-hidden="true"></i> Connect on Bluesky
|
|
</a>
|
|
<a href="https://donate.nhcarrigan.com" target="_blank" class="cta-button cta-button-donate" aria-label="Support NHCarrigan with a donation" rel="noopener noreferrer">
|
|
<i class="fas fa-heart" aria-hidden="true"></i> Donate
|
|
</a>
|
|
</p>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
<script src="https://cdn.nhcarrigan.com/headers/index.js"></script>
|
|
</html>
|