Import current Christ IT static site
This commit is contained in:
+742
@@ -0,0 +1,742 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Christ IT Services | Technology Projects for Ministry</title>
|
||||
<meta name="description" content="Custom technology project help for churches, ministries, and outreach organizations that need practical tools built with stewardship and purpose.">
|
||||
|
||||
<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='%230f172a'/%3E%3Crect x='15' y='31' width='10' height='22' rx='4' fill='%23f8fafc'/%3E%3Ccircle cx='20' cy='21' r='6' fill='%23e67e22'/%3E%3Crect x='39' y='12' width='10' height='42' rx='4' fill='%230056b3'/%3E%3Crect x='29' y='25' width='28' height='9' rx='4' fill='%230056b3'/%3E%3Crect x='42' y='14' width='4' height='38' rx='2' fill='%233b82f6' opacity='.35'/%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&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>
|
||||
/* --- 1. GLOBAL VARIABLES --- */
|
||||
:root {
|
||||
/* Light Mode */
|
||||
--bg-body: #ffffff;
|
||||
--bg-offset: #f3f4f6;
|
||||
--bg-highlight: #eef2ff;
|
||||
--bg-card: #ffffff;
|
||||
--bg-nav: rgba(255, 255, 255, 0.95);
|
||||
|
||||
--text-dark: #1f2937;
|
||||
--text-body: #4b5563;
|
||||
--text-light: #9ca3af;
|
||||
|
||||
--primary: #0056b3;
|
||||
--primary-dark: #003d6b;
|
||||
--accent: #e67e22;
|
||||
|
||||
--border: #e5e7eb;
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
|
||||
--logo-text: #1f2937;
|
||||
}
|
||||
|
||||
/* Dark Mode */
|
||||
[data-theme="dark"] {
|
||||
--bg-body: #0f172a;
|
||||
--bg-offset: #1e293b;
|
||||
--bg-highlight: #172554;
|
||||
--bg-card: #1e293b;
|
||||
--bg-nav: rgba(15, 23, 42, 0.95);
|
||||
|
||||
--text-dark: #f8fafc;
|
||||
--text-body: #cbd5e1;
|
||||
--text-light: #94a3b8;
|
||||
|
||||
--primary: #3b82f6;
|
||||
--primary-dark: #60a5fa;
|
||||
|
||||
--border: #334155;
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
|
||||
|
||||
--logo-text: #ffffff;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
background-color: var(--bg-body);
|
||||
color: var(--text-body);
|
||||
font-family: 'Inter', sans-serif;
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-dark);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
a { text-decoration: none; color: inherit; transition: 0.2s; }
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; }
|
||||
|
||||
/* --- 2. BUTTONS --- */
|
||||
.text-primary { color: var(--primary); }
|
||||
.text-accent { color: var(--accent); }
|
||||
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 10px;
|
||||
padding: 12px 28px;
|
||||
font-weight: 600; font-size: 1rem;
|
||||
text-transform: uppercase; letter-spacing: 0.5px;
|
||||
background-color: var(--primary); color: white;
|
||||
border-radius: 4px; border: 2px solid transparent;
|
||||
box-shadow: var(--shadow-sm); cursor: pointer;
|
||||
}
|
||||
.btn:hover {
|
||||
background-color: var(--primary-dark);
|
||||
color: white !important; transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background-color: transparent; color: var(--text-dark);
|
||||
border: 2px solid var(--border);
|
||||
}
|
||||
.btn-outline:hover {
|
||||
background-color: var(--primary); border-color: var(--primary);
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.btn-accent { background-color: var(--accent); color: white; }
|
||||
.btn-accent:hover { background-color: #d35400; color: white !important; }
|
||||
|
||||
.btn-call {
|
||||
background-color: #1f2937;
|
||||
color: white !important;
|
||||
border: 2px solid #1f2937;
|
||||
}
|
||||
.btn-call:hover {
|
||||
background-color: #374151;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.btn-windows {
|
||||
display: flex; align-items: center; justify-content: center; gap: 10px;
|
||||
width: 100%; padding: 15px;
|
||||
background-color: #0078D7; color: white;
|
||||
font-weight: 600; border-radius: 4px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.btn-windows:hover { background-color: #005a9e; color: white; }
|
||||
|
||||
/* --- 3. NAVIGATION --- */
|
||||
nav {
|
||||
padding: 15px 0; border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-nav); backdrop-filter: blur(10px);
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
transition: background-color 0.3s, border-color 0.3s;
|
||||
}
|
||||
.nav-inner { display: flex; justify-content: space-between; align-items: center; }
|
||||
|
||||
.nav-links { display: flex; gap: 20px; align-items: center; }
|
||||
.nav-link { font-weight: 600; font-size: 0.95rem; color: var(--text-body); }
|
||||
.nav-link:hover { color: var(--primary); }
|
||||
|
||||
.brand-logo svg {
|
||||
display: block;
|
||||
width: 214px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Theme Switch */
|
||||
.theme-switch-wrapper {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
font-size: 0.85rem; font-weight: 600; color: var(--text-body);
|
||||
}
|
||||
.theme-switch {
|
||||
position: relative; width: 50px; height: 26px;
|
||||
background: var(--border); border-radius: 20px;
|
||||
cursor: pointer; transition: 0.3s;
|
||||
}
|
||||
.theme-switch::after {
|
||||
content: ""; position: absolute; top: 3px; left: 3px;
|
||||
width: 20px; height: 20px; background: white;
|
||||
border-radius: 50%; transition: 0.3s;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
}
|
||||
[data-theme="dark"] .theme-switch { background: var(--primary); }
|
||||
[data-theme="dark"] .theme-switch::after { transform: translateX(24px); }
|
||||
|
||||
/* --- 4. HERO SECTION --- */
|
||||
.hero {
|
||||
padding: 80px 0 140px;
|
||||
background: linear-gradient(to bottom right, var(--bg-offset), var(--bg-body));
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.hero::before {
|
||||
content: ""; position: absolute; inset: 0;
|
||||
background-image: radial-gradient(var(--border) 1px, transparent 1px);
|
||||
background-size: 30px 30px; opacity: 0.5; pointer-events: none;
|
||||
}
|
||||
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: center; }
|
||||
.hero-content h1 { font-size: 4rem; margin-bottom: 20px; }
|
||||
.hero-content p {
|
||||
font-size: 1.25rem; color: var(--text-body); margin-bottom: 0; max-width: 90%;
|
||||
border-left: 4px solid var(--accent); padding-left: 20px;
|
||||
}
|
||||
.hero-image {
|
||||
position: relative; width: 100%; aspect-ratio: 1/1;
|
||||
border-radius: 50%; background: var(--bg-card);
|
||||
border: 8px solid var(--bg-body); box-shadow: var(--shadow-md); overflow: hidden;
|
||||
}
|
||||
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
|
||||
|
||||
/* --- 5. FLOATING ICON BAR --- */
|
||||
.icon-bar-wrapper { margin-top: -70px; position: relative; z-index: 10; }
|
||||
.icon-bar {
|
||||
background: var(--bg-card); border-radius: 8px;
|
||||
display: grid; grid-template-columns: repeat(4, 1fr);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden; border: 1px solid var(--border);
|
||||
}
|
||||
.icon-box {
|
||||
padding: 30px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px;
|
||||
border-right: 1px solid var(--border); transition: 0.2s;
|
||||
}
|
||||
.icon-box:last-child { border-right: none; }
|
||||
.icon-box:hover { background: var(--bg-offset); }
|
||||
.icon-box i { font-size: 2rem; color: var(--primary); margin-bottom: 5px; }
|
||||
.icon-box h4 { font-size: 1.1rem; margin-bottom: 4px; color: var(--text-dark); }
|
||||
.icon-box span { font-size: 0.9rem; color: var(--text-body); }
|
||||
|
||||
.king-section {
|
||||
margin-top: 80px;
|
||||
padding: 86px 0;
|
||||
color: white;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(0, 61, 107, 0.9)),
|
||||
radial-gradient(circle at top right, rgba(230, 126, 34, 0.28), transparent 34%);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.king-content {
|
||||
max-width: 860px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
.king-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
margin-bottom: 22px;
|
||||
color: #fff;
|
||||
background: rgba(230, 126, 34, 0.18);
|
||||
border: 1px solid rgba(230, 126, 34, 0.55);
|
||||
border-radius: 50%;
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
.king-section h2 {
|
||||
margin-bottom: 18px;
|
||||
color: white;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
.king-section p {
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
font-size: 1.17rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.king-section strong {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* --- 6. SERVICES SECTION --- */
|
||||
.section { padding: 100px 0; }
|
||||
.section-header { text-align: center; max-width: 700px; margin: 0 auto 60px; }
|
||||
.section-header h2 { font-size: 3rem; margin-bottom: 15px; }
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
.service-card {
|
||||
background: var(--bg-card); padding: 30px 20px; border-radius: 8px;
|
||||
border: 1px solid var(--border); transition: 0.3s; text-align: center;
|
||||
}
|
||||
.service-card:hover {
|
||||
transform: translateY(-5px); border-color: var(--primary); box-shadow: var(--shadow-md);
|
||||
}
|
||||
.service-card i { font-size: 2.2rem; color: var(--primary); margin-bottom: 15px; }
|
||||
.service-card h3 { font-size: 1.3rem; margin-bottom: 12px; color: var(--text-dark); line-height: 1.3; }
|
||||
|
||||
.service-card ul { list-style: none; margin: 20px auto 0; padding: 0; max-width: 320px; }
|
||||
.service-card li {
|
||||
margin-bottom: 8px; font-size: 0.9rem; color: var(--text-body);
|
||||
display: flex; justify-content: flex-start; align-items: flex-start; gap: 8px; line-height: 1.4;
|
||||
text-align: left;
|
||||
}
|
||||
.service-card li::before { content: "•"; color: var(--accent); font-weight: bold; font-size: 1.2rem; line-height: 1; }
|
||||
|
||||
.project-path {
|
||||
background: var(--bg-offset);
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.path-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
overflow: hidden;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.path-step {
|
||||
padding: 34px 28px;
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
.path-step:last-child { border-right: 0; }
|
||||
.path-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 16px;
|
||||
color: white;
|
||||
background: var(--primary);
|
||||
border-radius: 12px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.path-step h3 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.path-step p {
|
||||
color: var(--text-body);
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
/* --- 7. BIO SECTION --- */
|
||||
.bio-section { padding: 100px 0 60px; background: var(--bg-card); }
|
||||
.bio-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: center; }
|
||||
|
||||
.bio-img-box {
|
||||
width: 100%; aspect-ratio: 16/9;
|
||||
background: #000; border-radius: 8px; overflow: hidden;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* --- 8. MISSION / FAITH SECTION --- */
|
||||
.mission-section {
|
||||
background: var(--primary); color: white;
|
||||
padding: 60px 0; text-align: center;
|
||||
}
|
||||
.mission-content { max-width: 800px; margin: 0 auto; }
|
||||
.mission-verse {
|
||||
font-family: 'Oswald', sans-serif; font-size: 1.5rem; margin-bottom: 15px; color: #fff;
|
||||
}
|
||||
.mission-text { font-size: 1.1rem; line-height: 1.6; opacity: 0.9; }
|
||||
|
||||
/* --- 9. SHORTS SCROLLER --- */
|
||||
.video-section { background: var(--bg-offset); border-top: 1px solid var(--border); }
|
||||
|
||||
.shorts-scroller {
|
||||
display: flex; gap: 20px; overflow-x: auto; padding: 20px 0;
|
||||
scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.shorts-scroller::-webkit-scrollbar { height: 8px; }
|
||||
.shorts-scroller::-webkit-scrollbar-track { background: var(--bg-offset); }
|
||||
.shorts-scroller::-webkit-scrollbar-thumb { background: var(--text-light); border-radius: 4px; }
|
||||
|
||||
.short-card {
|
||||
flex: 0 0 auto;
|
||||
width: 240px;
|
||||
aspect-ratio: 9/16;
|
||||
background: black; border-radius: 12px; overflow: hidden;
|
||||
box-shadow: var(--shadow-md); border: 1px solid var(--border);
|
||||
position: relative;
|
||||
}
|
||||
.short-card iframe { width: 100%; height: 100%; border: none; }
|
||||
|
||||
/* FOOTER */
|
||||
footer { padding: 60px 0 30px; background: #0f172a; color: #94a3b8; }
|
||||
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
|
||||
.footer-logo { font-family: 'Oswald', sans-serif; font-size: 1.8rem; color: white; margin-bottom: 15px; display: block; }
|
||||
.footer-bottom { margin-top: 50px; padding-top: 20px; border-top: 1px solid #334155; text-align: center; font-size: 0.9rem; color: #64748b; }
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 900px) {
|
||||
.hero-grid { grid-template-columns: 1fr; text-align: center; }
|
||||
.hero-content p { margin: 0 auto 40px; border-left: none; padding: 0; }
|
||||
.hero-image { width: 300px; height: 300px; margin: 0 auto; }
|
||||
.icon-bar { grid-template-columns: 1fr 1fr; }
|
||||
.icon-box { border-bottom: 1px solid var(--border); }
|
||||
.icon-box:nth-child(2) { border-right: none; }
|
||||
.king-section { margin-top: 50px; padding: 64px 0; }
|
||||
.king-section h2 { font-size: 2.6rem; }
|
||||
.path-step { border-right: 0; border-bottom: 1px solid var(--border); }
|
||||
.path-step:last-child { border-bottom: 0; }
|
||||
.bio-layout { grid-template-columns: 1fr; }
|
||||
.nav-links { display: none; }
|
||||
.brand-logo svg { width: 176px; }
|
||||
}
|
||||
</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="Montserrat, Oswald, Arial, sans-serif" font-weight="900" font-size="48" fill="var(--logo-text)" letter-spacing="-2">CHRIST</text>
|
||||
<g transform="translate(140, 0)">
|
||||
<rect x="0" y="32" width="14" height="30" rx="4" fill="var(--logo-text)"/>
|
||||
<circle cx="7" cy="18" r="7" fill="#e67e22"/>
|
||||
<rect x="35" y="0" width="18" height="62" rx="4" fill="#0056b3"/>
|
||||
<rect x="22" y="15" width="44" height="16" rx="4" fill="#0056b3"/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<div style="display: flex; align-items: center; gap: 20px;">
|
||||
<div class="nav-links">
|
||||
<a href="#services" class="nav-link">Projects</a>
|
||||
<a href="#process" class="nav-link">Process</a>
|
||||
<a href="#about" class="nav-link">About</a>
|
||||
</div>
|
||||
|
||||
<div class="theme-switch-wrapper">
|
||||
<span>Dark Mode</span>
|
||||
<div class="theme-switch" id="theme-toggle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header class="hero">
|
||||
<div class="container hero-grid">
|
||||
<div class="hero-content">
|
||||
<h1><span class="text-primary">Technology Projects</span><br>For Kingdom Work</h1>
|
||||
<p>
|
||||
Christ IT helps churches, ministries, and outreach organizations turn mission-driven ideas into practical digital tools,
|
||||
workflows, websites, and systems that real people can use.
|
||||
</p>
|
||||
<div style="margin-top: 25px; font-size: 0.95rem; color: var(--text-body); font-weight: 500;">
|
||||
<i class="fa-solid fa-location-dot text-primary"></i> Locally Owned & Operated in Clarksville, TN
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-image">
|
||||
<img src="jason.JPG" alt="Jason Garrison IT consultant">
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container icon-bar-wrapper">
|
||||
<div class="icon-bar">
|
||||
<div class="icon-box">
|
||||
<i class="fa-solid fa-lightbulb"></i>
|
||||
<h4>Project Concepting</h4>
|
||||
<span>Shape the idea</span>
|
||||
</div>
|
||||
<div class="icon-box">
|
||||
<i class="fa-solid fa-screwdriver-wrench"></i>
|
||||
<h4>Custom Builds</h4>
|
||||
<span>Make it usable</span>
|
||||
</div>
|
||||
<div class="icon-box">
|
||||
<i class="fa-solid fa-bullhorn"></i>
|
||||
<h4>Outreach Systems</h4>
|
||||
<span>Reach and serve people</span>
|
||||
</div>
|
||||
<div class="icon-box">
|
||||
<i class="fa-solid fa-seedling"></i>
|
||||
<h4>Stewardship</h4>
|
||||
<span>Keep it sustainable</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="king-section" aria-labelledby="christ-king-title">
|
||||
<div class="container king-content">
|
||||
<div class="king-mark" aria-hidden="true">
|
||||
<i class="fa-solid fa-cross"></i>
|
||||
</div>
|
||||
<h2 id="christ-king-title">Christ Is King</h2>
|
||||
<p>
|
||||
Christ IT is a Christ-centered project before it is a technology project.
|
||||
The work matters because people matter: churches, ministries, and outreach teams need tools that serve the mission, honor the Lord, and help the body of Christ care for real needs with wisdom and stewardship.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="services" class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Mission-Focused <span class="text-primary">Technology Help</span></h2>
|
||||
<p>Custom project help for churches and outreach teams that need useful tools, clear planning, and honest technical execution.</p>
|
||||
</div>
|
||||
|
||||
<div class="services-grid">
|
||||
<div class="service-card">
|
||||
<i class="fa-solid fa-church"></i>
|
||||
<h3>Church & Ministry Websites</h3>
|
||||
<p>Simple, maintainable web presences that help people find information, connect, give, register, volunteer, or take the next step.</p>
|
||||
<ul>
|
||||
<li>Landing pages, ministry pages, events, and resource hubs</li>
|
||||
<li>Domain, hosting, SSL, and email stewardship</li>
|
||||
<li>Clear content structure for visitors and members</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<i class="fa-solid fa-hands-helping"></i>
|
||||
<h3>Custom Outreach Tools</h3>
|
||||
<p>Lightweight tools for the odd, important work that does not fit inside a normal church-management or website package.</p>
|
||||
<ul>
|
||||
<li>Request forms, directories, catalogs, and signups</li>
|
||||
<li>Volunteer coordination and internal dashboards</li>
|
||||
<li>Workflows built around the way your ministry actually serves</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<i class="fa-solid fa-photo-film"></i>
|
||||
<h3>Media & Communication Systems</h3>
|
||||
<p>Practical help with the systems that carry your message: video, publishing, newsletters, social sharing, and resource libraries.</p>
|
||||
<ul>
|
||||
<li>Content workflows and publishing pipelines</li>
|
||||
<li>Video libraries, sermon archives, and outreach media</li>
|
||||
<li>Newsletter, link hub, and communication cleanup</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<i class="fa-solid fa-compass-drafting"></i>
|
||||
<h3>Project Planning & Stewardship</h3>
|
||||
<p>Before money gets spent, I can help clarify what should be built, what can be simplified, and what should be avoided entirely.</p>
|
||||
<ul>
|
||||
<li>Plain-English project planning</li>
|
||||
<li>Vendor and platform guidance</li>
|
||||
<li>Sustainable tools a ministry can afford and maintain</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="process" class="section project-path">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>From Burden To <span class="text-accent">Buildable Plan</span></h2>
|
||||
<p>You do not need a polished proposal or technical vocabulary. Bring the need, the rough idea, or the outreach problem, and we can shape it into a practical path forward.</p>
|
||||
</div>
|
||||
|
||||
<div class="path-grid">
|
||||
<div class="path-step">
|
||||
<div class="path-icon"><i class="fa-solid fa-comments"></i></div>
|
||||
<h3>Listen First</h3>
|
||||
<p>We talk through the people being served, the ministry burden, and what would actually help instead of starting with software.</p>
|
||||
</div>
|
||||
<div class="path-step">
|
||||
<div class="path-icon"><i class="fa-solid fa-route"></i></div>
|
||||
<h3>Map The Path</h3>
|
||||
<p>The idea becomes a clear plan: what to build, what to reuse, what to avoid, and how to keep the scope sustainable.</p>
|
||||
</div>
|
||||
<div class="path-step">
|
||||
<div class="path-icon"><i class="fa-solid fa-hammer"></i></div>
|
||||
<h3>Build What Helps</h3>
|
||||
<p>Web pages, forms, dashboards, directories, media workflows, or custom systems are built around the real work.</p>
|
||||
</div>
|
||||
<div class="path-step">
|
||||
<div class="path-icon"><i class="fa-solid fa-hand-holding-heart"></i></div>
|
||||
<h3>Hand It Off Well</h3>
|
||||
<p>The finished project should be understandable, maintainable, and useful after the build is complete.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about" class="bio-section">
|
||||
<div class="container">
|
||||
<div class="bio-layout">
|
||||
<div class="bio-img-box">
|
||||
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/rA67d1ga9G8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-primary" style="letter-spacing: 2px; margin-bottom: 10px; font-weight:700;">WHY CHRIST IT EXISTS</h4>
|
||||
<h2 style="font-size: 3rem; margin-bottom: 25px;">Building Tools That <span class="text-primary">Serve People</span></h2>
|
||||
<p style="color: var(--text-body); margin-bottom: 20px; font-size: 1.1rem;">
|
||||
My name is Jason Garrison. After more than 20 years in commercial IT, I want to use what I have learned in a more intentional way: helping churches, ministries, and outreach organizations build practical tools that support real service.
|
||||
</p>
|
||||
<p style="color: var(--text-body); margin-bottom: 30px;">
|
||||
I am not trying to sell churches a bloated platform or turn every need into a monthly subscription. I want to help good people do good work with technology they can understand, afford, and sustain.
|
||||
</p>
|
||||
<div style="display: flex; gap: 12px; flex-wrap: wrap;">
|
||||
<button class="btn secure-contact-btn" data-type="email">Talk Through An Idea</button>
|
||||
<a href="https://jasoneugenegarrison.com" class="btn btn-outline">View Resume <i class="fa-solid fa-id-card"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mission-section">
|
||||
<div class="container mission-content">
|
||||
<div class="mission-verse">"For we are God’s handiwork, created in Christ Jesus to do good works, which God prepared in advance for us to do." — Ephesians 2:10</div>
|
||||
<p class="mission-text">
|
||||
At Christ IT, technology is the craft, but service is the calling. My hope is to use practical technical skill to support Kingdom work, strengthen outreach, and help ministries serve people with clarity and care.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="field-notes" class="section video-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>Christ IT <span class="text-primary">Field Notes</span></h2>
|
||||
<p>Short videos, observations, and practical lessons from hands-on technical work.</p>
|
||||
</div>
|
||||
|
||||
<div class="shorts-scroller">
|
||||
<div class="short-card">
|
||||
<iframe src="https://www.youtube.com/embed/2oklMLFcTaI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="short-card">
|
||||
<iframe src="https://www.youtube.com/embed/s0J5ZVcLpXY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="short-card">
|
||||
<iframe src="https://www.youtube.com/embed/ZIXMpJ5dA6E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="short-card">
|
||||
<iframe src="https://www.youtube.com/embed/oBWBItt8ZVA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="short-card">
|
||||
<iframe src="https://www.youtube.com/embed/2oklMLFcTaI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="short-card">
|
||||
<iframe src="https://www.youtube.com/embed/s0J5ZVcLpXY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="short-card">
|
||||
<iframe src="https://www.youtube.com/embed/ZIXMpJ5dA6E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div style="max-width: 400px;">
|
||||
<a href="#" class="footer-logo">CHRIST IT</a>
|
||||
<p>Helping churches, ministries, and outreach organizations turn mission-driven ideas into practical technology projects.</p>
|
||||
<p style="margin-top: 15px; color: #9ca3af; font-style: italic;">"Whatever you do, work at it with all your heart..." — Col 3:23</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 style="color: white; margin-bottom: 20px;">Contact</h4>
|
||||
<p style="margin-bottom: 10px;"><i class="fa-solid fa-envelope text-accent"></i> <span id="secure-email">Click to Show Email</span></p>
|
||||
<p style="margin-bottom: 10px;"><i class="fa-solid fa-phone text-accent"></i> <span id="secure-phone">Click to Show Phone</span></p>
|
||||
<p style="margin-bottom: 10px;"><i class="fa-solid fa-map-pin text-accent"></i> Clarksville, TN</p>
|
||||
<p><i class="fa-solid fa-clock text-accent"></i> Mon - Fri: 9:00 AM - 6:00 PM</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
© 2026 Christ IT Services. All Rights Reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// --- THEME ENGINE ---
|
||||
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';
|
||||
if (isDark) {
|
||||
root.setAttribute('data-theme', 'light');
|
||||
localStorage.setItem('theme', 'light');
|
||||
} else {
|
||||
root.setAttribute('data-theme', 'dark');
|
||||
localStorage.setItem('theme', '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;
|
||||
link.style.textDecoration = "none";
|
||||
link.style.color = "inherit";
|
||||
return link;
|
||||
}
|
||||
|
||||
function revealInlineContact(el, type) {
|
||||
const link = buildContactLink(type);
|
||||
if (link) {
|
||||
el.replaceWith(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 type = btn.dataset.type;
|
||||
const value = revealContact(type);
|
||||
|
||||
if (type === "email") {
|
||||
window.location.href = `mailto:${value}`;
|
||||
}
|
||||
|
||||
if (type === "phone") {
|
||||
window.location.href = `tel:${value.replace(/\D/g, "")}`;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user