604 lines
23 KiB
HTML
604 lines
23 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, websites, software, and infrastructure for Kingdom work.">
|
|
|
|
<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: #f1f6f5;
|
|
--ink: #151d2f;
|
|
--body: #526071;
|
|
--muted: #7b8794;
|
|
--line: #dce4e7;
|
|
--nav: rgba(251, 250, 247, 0.94);
|
|
--blue: #1265b3;
|
|
--green: #1e7a5f;
|
|
--orange: #d66b1f;
|
|
--red: #a43e3e;
|
|
--shadow: 0 14px 38px rgba(21, 29, 47, 0.10);
|
|
}
|
|
|
|
[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);
|
|
}
|
|
|
|
* { 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: 74px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
}
|
|
|
|
.brand-logo {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: var(--ink);
|
|
font-family: "Oswald", Impact, sans-serif;
|
|
font-size: 2.1rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.brand-cross {
|
|
position: relative;
|
|
width: 26px;
|
|
height: 32px;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.brand-cross::before,
|
|
.brand-cross::after {
|
|
content: "";
|
|
position: absolute;
|
|
border-radius: 4px;
|
|
background: var(--blue);
|
|
}
|
|
|
|
.brand-cross::before { width: 10px; height: 32px; left: 8px; top: 0; }
|
|
.brand-cross::after { width: 26px; height: 10px; left: 0; top: 10px; }
|
|
|
|
.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: 68px 0 50px;
|
|
border-bottom: 1px solid var(--line);
|
|
background:
|
|
linear-gradient(135deg, rgba(18, 101, 179, 0.08), transparent 36%),
|
|
linear-gradient(315deg, rgba(30, 122, 95, 0.11), transparent 34%);
|
|
}
|
|
|
|
.hero-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
|
|
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 {
|
|
margin: 0;
|
|
color: var(--ink);
|
|
font-family: "Oswald", Impact, sans-serif;
|
|
line-height: 1.05;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h1 {
|
|
max-width: 760px;
|
|
margin-top: 18px;
|
|
font-size: clamp(3rem, 7.8vw, 6.1rem);
|
|
}
|
|
|
|
.hero-copy {
|
|
max-width: 710px;
|
|
margin: 24px 0 0;
|
|
padding-left: 22px;
|
|
border-left: 5px solid var(--orange);
|
|
color: var(--body);
|
|
font-size: clamp(1.06rem, 2vw, 1.25rem);
|
|
}
|
|
|
|
.button-row, .contact-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
|
.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-list { display: grid; gap: 10px; }
|
|
.project-row {
|
|
display: grid;
|
|
grid-template-columns: 54px 1fr auto;
|
|
gap: 18px;
|
|
align-items: center;
|
|
padding: 20px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.project-row:hover { border-color: var(--blue); box-shadow: var(--shadow); }
|
|
.project-icon {
|
|
width: 46px;
|
|
height: 46px;
|
|
border-radius: 8px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: #fff;
|
|
background: var(--blue);
|
|
font-size: 1.18rem;
|
|
}
|
|
|
|
.project-row:nth-child(2) .project-icon { background: var(--green); }
|
|
.project-row:nth-child(3) .project-icon { background: var(--orange); }
|
|
.project-row:nth-child(4) .project-icon { background: var(--red); }
|
|
.project-row:nth-child(5) .project-icon { background: var(--blue); }
|
|
.project-row:nth-child(6) .project-icon { background: var(--green); }
|
|
|
|
.project-row h3 { margin-bottom: 6px; font-size: 1.45rem; }
|
|
.project-row p { margin: 0; color: var(--body); }
|
|
.project-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--blue);
|
|
font-weight: 800;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mission {
|
|
display: grid;
|
|
grid-template-columns: 0.85fr 1.15fr;
|
|
gap: 38px;
|
|
align-items: center;
|
|
}
|
|
|
|
.mission-panel {
|
|
padding: 28px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background: var(--surface-soft);
|
|
}
|
|
|
|
.mission-panel h3 { margin-bottom: 14px; font-size: 1.55rem; }
|
|
.mission-panel ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.mission-panel li {
|
|
display: grid;
|
|
grid-template-columns: 20px 1fr;
|
|
gap: 10px;
|
|
color: var(--body);
|
|
}
|
|
|
|
.mission-panel i { color: var(--green); padding-top: 4px; }
|
|
.mission-copy h2 { margin-bottom: 18px; font-size: clamp(2.2rem, 5vw, 3.8rem); }
|
|
.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;
|
|
}
|
|
|
|
.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-row { grid-template-columns: 46px 1fr; }
|
|
.project-link { grid-column: 2; }
|
|
.footer-grid, .contact-list { justify-content: start; }
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.container { width: min(100% - 28px, 1120px); }
|
|
.nav-inner { min-height: 66px; }
|
|
.brand-logo { font-size: 1.72rem; }
|
|
.brand-cross { width: 22px; height: 28px; }
|
|
.brand-cross::before { width: 9px; height: 28px; left: 7px; }
|
|
.brand-cross::after { width: 22px; height: 9px; top: 9px; }
|
|
.nav-links { display: none; }
|
|
.hero { padding-top: 48px; }
|
|
.portrait-panel img { aspect-ratio: 16 / 10; }
|
|
.project-row { padding: 16px; gap: 13px; }
|
|
.button { width: 100%; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<div class="container nav-inner">
|
|
<a href="#" class="brand-logo" aria-label="Christ IT home">
|
|
<span>Christ IT</span>
|
|
<span class="brand-cross" aria-hidden="true"></span>
|
|
</a>
|
|
<div class="nav-actions">
|
|
<div class="nav-links" aria-label="Primary navigation">
|
|
<a href="#projects">Projects</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 software, websites, infrastructure, and service projects built 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> Project Directory</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>Project Directory</h2>
|
|
<p>One public map for the active Christ IT work. Internal backend destinations stay off this list.</p>
|
|
</div>
|
|
<div class="project-list">
|
|
<a class="project-row" href="https://christit.com/tse/">
|
|
<div class="project-icon"><i class="fa-solid fa-handshake-angle"></i></div>
|
|
<div>
|
|
<h3>Technical Services Exchange</h3>
|
|
<p>Technical service marketplace project. Public path: christit.com/tse.</p>
|
|
</div>
|
|
<span class="project-link">Open TSE <i class="fa-solid fa-arrow-right"></i></span>
|
|
</a>
|
|
<a class="project-row" href="https://git.christit.com/gracepress">
|
|
<div class="project-icon"><i class="fa-brands fa-wordpress-simple"></i></div>
|
|
<div>
|
|
<h3>GracePress</h3>
|
|
<p>WordPress theme, plugin stack, publishing tools, and ministry site infrastructure.</p>
|
|
</div>
|
|
<span class="project-link">View repos <i class="fa-solid fa-arrow-right"></i></span>
|
|
</a>
|
|
<a class="project-row" href="https://git.christit.com">
|
|
<div class="project-icon"><i class="fa-solid fa-code-branch"></i></div>
|
|
<div>
|
|
<h3>Christ IT Git</h3>
|
|
<p>Self-hosted Git for source, release trees, website history, and public code.</p>
|
|
</div>
|
|
<span class="project-link">Open Git <i class="fa-solid fa-arrow-right"></i></span>
|
|
</a>
|
|
<a class="project-row" href="https://christp2p.com">
|
|
<div class="project-icon"><i class="fa-solid fa-globe"></i></div>
|
|
<div>
|
|
<h3>ChristP2P</h3>
|
|
<p>Public ministry and publishing site where GracePress is proven in real use.</p>
|
|
</div>
|
|
<span class="project-link">Visit site <i class="fa-solid fa-arrow-right"></i></span>
|
|
</a>
|
|
<a class="project-row" href="https://jasoneugenegarrison.com">
|
|
<div class="project-icon"><i class="fa-solid fa-id-card"></i></div>
|
|
<div>
|
|
<h3>Jason Eugene Garrison</h3>
|
|
<p>Resume and professional background site. Public path: jasoneugenegarrison.com.</p>
|
|
</div>
|
|
<span class="project-link">View resume <i class="fa-solid fa-arrow-right"></i></span>
|
|
</a>
|
|
<a class="project-row" href="connections.html">
|
|
<div class="project-icon"><i class="fa-solid fa-headset"></i></div>
|
|
<div>
|
|
<h3>Client Support</h3>
|
|
<p>Remote support entry point for active Christ IT work. Public path: christit.com/connections.html.</p>
|
|
</div>
|
|
<span class="project-link">Open support <i class="fa-solid fa-arrow-right"></i></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section" id="mission">
|
|
<div class="container mission">
|
|
<div class="mission-panel">
|
|
<h3>What belongs here</h3>
|
|
<ul>
|
|
<li><i class="fa-solid fa-check"></i><span>Public projects that someone can visit, inspect, or use.</span></li>
|
|
<li><i class="fa-solid fa-check"></i><span>Software and websites actively maintained under Christ IT.</span></li>
|
|
<li><i class="fa-solid fa-check"></i><span>Simple explanations instead of marketing clutter.</span></li>
|
|
</ul>
|
|
</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="contact-strip">
|
|
<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>
|