654 lines
24 KiB
HTML
654 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Christ IT | Practical Technology for Kingdom Work</title>
|
|
<meta name="description" content="Christ IT builds and maintains practical technology projects that serve churches, ministries, outreach work, and Christ-centered software efforts.">
|
|
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23111827'/%3E%3Crect x='29' y='10' width='8' height='44' rx='3' fill='%23f8fafc'/%3E%3Crect x='16' y='25' width='34' height='8' rx='3' fill='%23f97316'/%3E%3C/svg%3E" type="image/svg+xml">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Oswald:wght@500;700&display=swap" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--bg: #fbfaf7;
|
|
--surface: #ffffff;
|
|
--surface-soft: #f2f6f7;
|
|
--ink: #172033;
|
|
--body: #536070;
|
|
--muted: #7d8792;
|
|
--line: #dfe5e8;
|
|
--nav: rgba(251, 250, 247, 0.94);
|
|
--blue: #0f63b6;
|
|
--green: #1e7a5f;
|
|
--orange: #d66b1f;
|
|
--red: #a43838;
|
|
--shadow: 0 14px 40px rgba(23, 32, 51, 0.10);
|
|
--logo: #172033;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg: #10141c;
|
|
--surface: #171d28;
|
|
--surface-soft: #202938;
|
|
--ink: #f5f7fb;
|
|
--body: #c4ccd6;
|
|
--muted: #9aa5b2;
|
|
--line: #313b4d;
|
|
--nav: rgba(16, 20, 28, 0.94);
|
|
--blue: #64a8ff;
|
|
--green: #60c7a2;
|
|
--orange: #ffad66;
|
|
--red: #ef8f8f;
|
|
--shadow: 0 16px 42px rgba(0, 0, 0, 0.34);
|
|
--logo: #f5f7fb;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--body);
|
|
font-family: "Inter", Arial, sans-serif;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
a { color: inherit; text-decoration: none; }
|
|
img { max-width: 100%; display: block; }
|
|
.container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
|
|
|
|
nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
background: var(--nav);
|
|
border-bottom: 1px solid var(--line);
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
|
|
.nav-inner {
|
|
min-height: 76px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
}
|
|
|
|
.brand-logo svg { width: 210px; height: auto; display: block; }
|
|
.nav-actions { display: flex; align-items: center; gap: 18px; }
|
|
.nav-links { display: flex; align-items: center; gap: 18px; font-size: 0.94rem; font-weight: 700; color: var(--body); }
|
|
.nav-links a:hover { color: var(--blue); }
|
|
|
|
.theme-toggle {
|
|
width: 46px;
|
|
height: 26px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
background: var(--surface-soft);
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.theme-toggle::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: var(--orange);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
[data-theme="dark"] .theme-toggle::after { transform: translateX(20px); background: var(--blue); }
|
|
|
|
.hero {
|
|
padding: 74px 0 42px;
|
|
border-bottom: 1px solid var(--line);
|
|
background:
|
|
linear-gradient(135deg, rgba(15, 99, 182, 0.09), transparent 36%),
|
|
linear-gradient(315deg, rgba(30, 122, 95, 0.12), transparent 34%);
|
|
}
|
|
|
|
.hero-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
|
|
gap: 54px;
|
|
align-items: center;
|
|
}
|
|
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
color: var(--green);
|
|
font-size: 0.82rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
color: var(--ink);
|
|
font-family: "Oswald", Impact, sans-serif;
|
|
line-height: 1.05;
|
|
text-transform: uppercase;
|
|
margin: 0;
|
|
}
|
|
|
|
h1 {
|
|
font-size: clamp(3.1rem, 8vw, 6.4rem);
|
|
max-width: 780px;
|
|
margin-top: 18px;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.hero-copy {
|
|
max-width: 720px;
|
|
margin: 24px 0 0;
|
|
font-size: clamp(1.06rem, 2vw, 1.28rem);
|
|
color: var(--body);
|
|
border-left: 5px solid var(--orange);
|
|
padding-left: 22px;
|
|
}
|
|
|
|
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
|
|
.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
min-height: 46px;
|
|
padding: 12px 18px;
|
|
border: 2px solid transparent;
|
|
border-radius: 6px;
|
|
background: var(--blue);
|
|
color: #fff;
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.button.secondary {
|
|
background: transparent;
|
|
color: var(--ink);
|
|
border-color: var(--line);
|
|
}
|
|
|
|
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
|
|
|
|
.portrait-panel {
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
box-shadow: var(--shadow);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.portrait-panel img {
|
|
width: 100%;
|
|
aspect-ratio: 4 / 3;
|
|
object-fit: cover;
|
|
object-position: center 35%;
|
|
}
|
|
|
|
.portrait-caption {
|
|
padding: 18px 20px 20px;
|
|
display: grid;
|
|
gap: 5px;
|
|
}
|
|
|
|
.portrait-caption strong { color: var(--ink); font-size: 1.05rem; }
|
|
.portrait-caption span { color: var(--muted); font-size: 0.92rem; }
|
|
|
|
.section { padding: 58px 0; }
|
|
.section-header {
|
|
display: flex;
|
|
align-items: end;
|
|
justify-content: space-between;
|
|
gap: 28px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.section-header h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
|
|
.section-header p { max-width: 520px; margin: 0; color: var(--body); }
|
|
|
|
.project-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.project-card {
|
|
min-height: 236px;
|
|
padding: 24px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background: var(--surface);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
box-shadow: 0 1px 0 rgba(23, 32, 51, 0.04);
|
|
}
|
|
|
|
.project-card:hover { border-color: color-mix(in srgb, var(--blue) 50%, var(--line)); box-shadow: var(--shadow); }
|
|
.project-top { display: grid; gap: 13px; }
|
|
.project-icon {
|
|
width: 46px;
|
|
height: 46px;
|
|
border-radius: 8px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #fff;
|
|
background: var(--blue);
|
|
font-size: 1.18rem;
|
|
}
|
|
|
|
.project-card:nth-child(2) .project-icon { background: var(--green); }
|
|
.project-card:nth-child(3) .project-icon { background: var(--orange); }
|
|
.project-card:nth-child(4) .project-icon { background: var(--red); }
|
|
|
|
.project-card h3 { font-size: 1.55rem; }
|
|
.project-card p { margin: 0; color: var(--body); }
|
|
.project-link {
|
|
margin-top: 22px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--blue);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.sites-band {
|
|
background: var(--surface-soft);
|
|
border-block: 1px solid var(--line);
|
|
}
|
|
|
|
.site-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.site-link {
|
|
min-height: 96px;
|
|
padding: 18px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background: var(--surface);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.site-link strong { color: var(--ink); }
|
|
.site-link span { color: var(--muted); font-size: 0.92rem; overflow-wrap: anywhere; }
|
|
.site-link:hover { border-color: var(--orange); transform: translateY(-1px); }
|
|
|
|
.mission {
|
|
display: grid;
|
|
grid-template-columns: 0.9fr 1.1fr;
|
|
gap: 38px;
|
|
align-items: center;
|
|
}
|
|
|
|
.mission-mark {
|
|
min-height: 290px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--line);
|
|
background:
|
|
linear-gradient(rgba(23, 32, 51, 0.18), rgba(23, 32, 51, 0.18)),
|
|
url("jason2026.jpg") center 42% / cover;
|
|
display: flex;
|
|
align-items: end;
|
|
padding: 24px;
|
|
color: #fff;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.mission-mark span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
border-radius: 6px;
|
|
background: rgba(16, 20, 28, 0.72);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.mission-copy h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin-bottom: 18px; }
|
|
.mission-copy p { margin: 0 0 16px; font-size: 1.06rem; }
|
|
|
|
footer {
|
|
padding: 40px 0;
|
|
background: #111827;
|
|
color: #d7dde6;
|
|
}
|
|
|
|
.footer-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 32px;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer-logo {
|
|
color: #fff;
|
|
font-family: "Oswald", Impact, sans-serif;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.contact-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: end;
|
|
gap: 14px;
|
|
color: #f5f7fb;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.contact-list button {
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.footer-bottom {
|
|
margin-top: 22px;
|
|
padding-top: 18px;
|
|
border-top: 1px solid rgba(255,255,255,0.14);
|
|
color: #aeb8c6;
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
@media (max-width: 880px) {
|
|
.hero-grid,
|
|
.mission,
|
|
.footer-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.section-header {
|
|
align-items: start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.project-grid,
|
|
.site-list {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.footer-grid,
|
|
.contact-list {
|
|
justify-content: start;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.container { width: min(100% - 28px, 1120px); }
|
|
.nav-inner { min-height: 66px; }
|
|
.brand-logo svg { width: 168px; }
|
|
.nav-links { display: none; }
|
|
.hero { padding-top: 48px; }
|
|
.portrait-panel img { aspect-ratio: 16 / 10; }
|
|
.project-card { min-height: auto; }
|
|
.button { width: 100%; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<div class="container nav-inner">
|
|
<a href="#" class="brand-logo" aria-label="Christ IT home">
|
|
<svg viewBox="0 0 258 80" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="christ-it-logo-title">
|
|
<title id="christ-it-logo-title">Christ IT</title>
|
|
<text x="0" y="62" font-family="Oswald, Arial, sans-serif" font-weight="900" font-size="48" fill="var(--logo)">CHRIST</text>
|
|
<g transform="translate(140, 0)">
|
|
<rect x="0" y="32" width="14" height="30" rx="4" fill="var(--logo)"/>
|
|
<circle cx="7" cy="18" r="7" fill="#d66b1f"/>
|
|
<rect x="35" y="0" width="18" height="62" rx="4" fill="#0f63b6"/>
|
|
<rect x="22" y="15" width="44" height="16" rx="4" fill="#0f63b6"/>
|
|
</g>
|
|
</svg>
|
|
</a>
|
|
<div class="nav-actions">
|
|
<div class="nav-links" aria-label="Primary navigation">
|
|
<a href="#projects">Projects</a>
|
|
<a href="#sites">Sites</a>
|
|
<a href="#mission">Mission</a>
|
|
</div>
|
|
<button class="theme-toggle" id="theme-toggle" type="button" aria-label="Toggle dark mode"></button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class="hero">
|
|
<div class="container hero-grid">
|
|
<div>
|
|
<span class="eyebrow"><i class="fa-solid fa-cross"></i> Technology in service to Christ</span>
|
|
<h1>Practical tools for Kingdom work.</h1>
|
|
<p class="hero-copy">
|
|
Christ IT is the umbrella for the software, websites, infrastructure, and service projects I am building to support churches, ministries, outreach work, and people who need useful technology without needless weight.
|
|
</p>
|
|
<div class="button-row">
|
|
<a class="button" href="#projects"><i class="fa-solid fa-diagram-project"></i> Current Projects</a>
|
|
<a class="button secondary" href="connections.html"><i class="fa-solid fa-headset"></i> Client Support</a>
|
|
</div>
|
|
</div>
|
|
<aside class="portrait-panel" aria-label="Project owner">
|
|
<img src="jason.JPG" alt="Jason Eugene Garrison">
|
|
<div class="portrait-caption">
|
|
<strong>Jason Eugene Garrison</strong>
|
|
<span>Field engineer, builder, and steward of the Christ IT project family.</span>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="section" id="projects">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Current Work</h2>
|
|
<p>These are the active public-facing efforts under the Christ IT umbrella right now. Internal backend destinations stay off the public list.</p>
|
|
</div>
|
|
<div class="project-grid">
|
|
<a class="project-card" href="https://christit.com/tse/">
|
|
<div class="project-top">
|
|
<div class="project-icon"><i class="fa-solid fa-handshake-angle"></i></div>
|
|
<h3>Technical Services Exchange</h3>
|
|
<p>A marketplace-style project for connecting technical service needs with qualified help, built separately from GracePress and managed through its own release path.</p>
|
|
</div>
|
|
<span class="project-link">Open TSE <i class="fa-solid fa-arrow-right"></i></span>
|
|
</a>
|
|
|
|
<a class="project-card" href="https://git.christit.com/gracepress">
|
|
<div class="project-top">
|
|
<div class="project-icon"><i class="fa-brands fa-wordpress-simple"></i></div>
|
|
<h3>GracePress</h3>
|
|
<p>A WordPress theme and plugin stack for Christ-centered publishing, media workflows, operational tools, and long-term ministry site stewardship.</p>
|
|
</div>
|
|
<span class="project-link">View GracePress repos <i class="fa-solid fa-arrow-right"></i></span>
|
|
</a>
|
|
|
|
<a class="project-card" href="https://git.christit.com">
|
|
<div class="project-top">
|
|
<div class="project-icon"><i class="fa-solid fa-code-branch"></i></div>
|
|
<h3>Christ IT Git</h3>
|
|
<p>Our self-hosted Git platform for managing release trees, website source, software projects, and the public code we choose to expose.</p>
|
|
</div>
|
|
<span class="project-link">Open Git platform <i class="fa-solid fa-arrow-right"></i></span>
|
|
</a>
|
|
|
|
<a class="project-card" href="https://christp2p.com">
|
|
<div class="project-top">
|
|
<div class="project-icon"><i class="fa-solid fa-globe"></i></div>
|
|
<h3>ChristP2P</h3>
|
|
<p>The public ministry and publishing site where GracePress, media, and future peer-to-peer distribution ideas are being proven in real use.</p>
|
|
</div>
|
|
<span class="project-link">Visit ChristP2P <i class="fa-solid fa-arrow-right"></i></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section sites-band" id="sites">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Public Destinations</h2>
|
|
<p>The current public map is intentionally small: core project sites, the Git platform, and Jason's resume site.</p>
|
|
</div>
|
|
<div class="site-list">
|
|
<a class="site-link" href="https://christit.com">
|
|
<strong>Christ IT</strong>
|
|
<span>christit.com</span>
|
|
</a>
|
|
<a class="site-link" href="https://christit.com/tse/">
|
|
<strong>Technical Services Exchange</strong>
|
|
<span>christit.com/tse</span>
|
|
</a>
|
|
<a class="site-link" href="https://git.christit.com">
|
|
<strong>Public Git</strong>
|
|
<span>git.christit.com</span>
|
|
</a>
|
|
<a class="site-link" href="https://christp2p.com">
|
|
<strong>ChristP2P</strong>
|
|
<span>christp2p.com</span>
|
|
</a>
|
|
<a class="site-link" href="https://jasoneugenegarrison.com">
|
|
<strong>Resume</strong>
|
|
<span>jasoneugenegarrison.com</span>
|
|
</a>
|
|
<a class="site-link" href="connections.html">
|
|
<strong>Client Support</strong>
|
|
<span>christit.com/connections.html</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="mission">
|
|
<div class="container mission">
|
|
<div class="mission-mark">
|
|
<span><i class="fa-solid fa-location-dot"></i> Clarksville, Tennessee</span>
|
|
</div>
|
|
<div class="mission-copy">
|
|
<span class="eyebrow"><i class="fa-solid fa-seedling"></i> Why this exists</span>
|
|
<h2>Service first. Software second.</h2>
|
|
<p>
|
|
Christ IT exists to provide technical services that further the kingdom of Jesus Christ. Some of that work is public software, some of it is small static websites, some of it is infrastructure, and some of it is simply helping people make better technical decisions.
|
|
</p>
|
|
<p>
|
|
The goal is not to make every project bigger. The goal is to build what is useful, keep it maintainable, and avoid burdening good work with unnecessary complexity.
|
|
</p>
|
|
<div class="button-row">
|
|
<button class="button secure-contact-btn" data-type="email" type="button"><i class="fa-solid fa-envelope"></i> Email Christ IT</button>
|
|
<a class="button secondary" href="https://jasoneugenegarrison.com"><i class="fa-solid fa-id-card"></i> Jason's Resume</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div>
|
|
<a href="#" class="footer-logo">CHRIST IT</a>
|
|
<p>Practical technology, websites, software, and infrastructure for Kingdom work.</p>
|
|
</div>
|
|
<div class="contact-list">
|
|
<button id="secure-email" type="button"><i class="fa-solid fa-envelope"></i> Show Email</button>
|
|
<button id="secure-phone" type="button"><i class="fa-solid fa-phone"></i> Show Phone</button>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
All Glory to Jesus Christ. Engineered by Christ IT. Copyright 2026.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
const toggleBtn = document.getElementById("theme-toggle");
|
|
const root = document.documentElement;
|
|
const currentTheme = localStorage.getItem("theme") ||
|
|
(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
|
|
|
|
if (currentTheme === "dark") {
|
|
root.setAttribute("data-theme", "dark");
|
|
}
|
|
|
|
toggleBtn.addEventListener("click", () => {
|
|
const isDark = root.getAttribute("data-theme") === "dark";
|
|
root.setAttribute("data-theme", isDark ? "light" : "dark");
|
|
localStorage.setItem("theme", isDark ? "light" : "dark");
|
|
});
|
|
|
|
const contactKey = 43;
|
|
const contactValues = {
|
|
email: [65, 74, 88, 68, 69, 107, 72, 67, 89, 66, 88, 95, 66, 95, 5, 72, 68, 70],
|
|
phone: [3, 25, 28, 27, 2, 11, 19, 19, 18, 6, 19, 25, 28, 25]
|
|
};
|
|
|
|
function revealContact(type) {
|
|
const encoded = contactValues[type];
|
|
if (!encoded) {
|
|
return "";
|
|
}
|
|
|
|
return encoded.map((code) => String.fromCharCode(code ^ contactKey)).join("");
|
|
}
|
|
|
|
function buildContactLink(type) {
|
|
const value = revealContact(type);
|
|
if (!value) {
|
|
return null;
|
|
}
|
|
|
|
const link = document.createElement("a");
|
|
link.href = type === "email" ? `mailto:${value}` : `tel:${value.replace(/\D/g, "")}`;
|
|
link.rel = "nofollow";
|
|
link.textContent = value;
|
|
return link;
|
|
}
|
|
|
|
function revealInlineContact(el, type) {
|
|
const link = buildContactLink(type);
|
|
if (link) {
|
|
el.replaceChildren(link);
|
|
}
|
|
}
|
|
|
|
const secureEmail = document.getElementById("secure-email");
|
|
const securePhone = document.getElementById("secure-phone");
|
|
|
|
if (secureEmail) {
|
|
secureEmail.addEventListener("click", () => revealInlineContact(secureEmail, "email"));
|
|
}
|
|
|
|
if (securePhone) {
|
|
securePhone.addEventListener("click", () => revealInlineContact(securePhone, "phone"));
|
|
}
|
|
|
|
document.querySelectorAll(".secure-contact-btn").forEach((btn) => {
|
|
btn.addEventListener("click", () => {
|
|
const value = revealContact(btn.dataset.type);
|
|
if (value) {
|
|
window.location.href = `mailto:${value}`;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|