{"id":14,"date":"2026-03-11T05:20:56","date_gmt":"2026-03-11T05:20:56","guid":{"rendered":"https:\/\/infinitesave.com\/?page_id=14"},"modified":"2026-03-11T07:58:26","modified_gmt":"2026-03-11T07:58:26","slug":"resume","status":"publish","type":"page","link":"https:\/\/infinitesave.com\/","title":{"rendered":"Resume"},"content":{"rendered":"\n<style>\n\/* \u2500\u2500 JC Resume \u2013 Inline Styles \u2500\u2500 *\/\n:root {\n  --jc-primary: #0891b2;\n  --jc-primary-light: #06b6d4;\n  --jc-primary-dark: #0e7490;\n  --jc-accent: #14b8a6;\n  --jc-accent-dark: #0d9488;\n  --jc-bg: #f8fffe;\n  --jc-bg-alt: #f0fdfa;\n  --jc-bg-glass: rgba(255, 255, 255, 0.7);\n  --jc-glass-border: rgba(8, 145, 178, 0.15);\n  --jc-glass-shadow: 0 8px 32px rgba(14, 116, 144, 0.08);\n  --jc-text: #0f172a;\n  --jc-text-sec: #475569;\n  --jc-text-muted: #94a3b8;\n  --jc-gradient: linear-gradient(135deg, #0891b2, #14b8a6);\n  --jc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --jc-pad: clamp(3rem, 8vw, 6rem);\n}\n\n\/* Reset Nova's container constraints and overflow lock *\/\nhtml.jc-resume-html,\nbody.jc-resume-page {\n  overflow: visible !important;\n  overflow-x: hidden !important;\n  height: auto !important;\n  background: var(--jc-bg) !important;\n}\nbody.jc-resume-page #ajax-content-wrap {\n  max-width: none !important;\n  width: 100% !important;\n  padding: 0 !important;\n  margin: 0 !important;\n  height: auto !important;\n  overflow: visible !important;\n}\nbody.jc-resume-page .container-wrap,\nbody.jc-resume-page .main-content,\nbody.jc-resume-page .main-content > .row {\n  max-width: none !important;\n  width: 100% !important;\n  padding: 0 !important;\n  margin: 0 !important;\n}\nbody.jc-resume-page #header-outer {\n  display: none !important;\n}\nbody.jc-resume-page #footer-outer {\n  display: none !important;\n}\n\n\/* \u2500\u2500 Base \u2500\u2500 *\/\n.jc-wrap {\n  font-family: var(--jc-font);\n  color: var(--jc-text);\n  line-height: 1.7;\n  -webkit-font-smoothing: antialiased;\n}\n.jc-wrap *, .jc-wrap *::before, .jc-wrap *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n.jc-wrap a { color: var(--jc-primary); text-decoration: none; transition: color 0.2s; }\n.jc-wrap a:hover { color: var(--jc-primary-dark); }\n\n.jc-container {\n  max-width: 1100px;\n  margin: 0 auto;\n  padding: 0 1.5rem;\n}\n\n.jc-gradient-text {\n  background: var(--jc-gradient);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n\n.jc-label {\n  font-size: 0.75rem;\n  font-weight: 600;\n  letter-spacing: 0.15em;\n  text-transform: uppercase;\n  color: var(--jc-primary);\n  margin-bottom: 0.75rem;\n}\n\n.jc-heading {\n  font-size: clamp(1.75rem, 4vw, 2.5rem);\n  font-weight: 700;\n  line-height: 1.2;\n  margin-bottom: 1.5rem;\n  color: var(--jc-text);\n}\n\n\/* \u2500\u2500 Glass \u2500\u2500 *\/\n.jc-glass {\n  background: var(--jc-bg-glass);\n  backdrop-filter: blur(16px);\n  -webkit-backdrop-filter: blur(16px);\n  border: 1px solid var(--jc-glass-border);\n  border-radius: 16px;\n  box-shadow: var(--jc-glass-shadow);\n  position: relative;\n  overflow: hidden;\n}\n.jc-glass::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%, transparent 100%);\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity 0.4s;\n}\n.jc-glass:hover::after { opacity: 1; }\n@supports not (backdrop-filter: blur(16px)) {\n  .jc-glass { background: rgba(255,255,255,0.95); }\n}\n\n\/* \u2500\u2500 Animations \u2500\u2500 *\/\n@keyframes jc-fade-up {\n  from { opacity: 0; transform: translateY(30px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n@keyframes jc-fade-left {\n  from { opacity: 0; transform: translateX(-40px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n@keyframes jc-fade-right {\n  from { opacity: 0; transform: translateX(40px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n@keyframes jc-tile-in {\n  from { opacity: 0; transform: scale(0.92); }\n  to   { opacity: 1; transform: scale(1); }\n}\n@keyframes jc-sweep-glow {\n  0%   { box-shadow: inherit; }\n  50%  { box-shadow: 0 0 18px 4px rgba(8,145,178,0.15), inset 0 0 12px 2px rgba(6,182,212,0.1); }\n  100% { box-shadow: inherit; }\n}\n@keyframes jc-float {\n  0%, 100% { transform: translateY(0); }\n  50%      { transform: translateY(-4px); }\n}\n@keyframes jc-scroll-hint {\n  0%, 100% { opacity: 0.4; transform: translateY(0); }\n  50%      { opacity: 1; transform: translateY(6px); }\n}\n@keyframes jc-word-fade {\n  from { opacity: 0; transform: translateY(12px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n[data-jc-animate] { opacity: 0; }\n[data-jc-animate].jc-visible {\n  animation: jc-fade-up 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n}\n[data-jc-animate=\"left\"].jc-visible { animation-name: jc-fade-left; }\n[data-jc-animate=\"right\"].jc-visible { animation-name: jc-fade-right; }\n\n@media (prefers-reduced-motion: reduce) {\n  .jc-wrap *, .jc-wrap *::before, .jc-wrap *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n  [data-jc-animate] { opacity: 1; }\n}\n\n\/* \u2550\u2550\u2550 1. HERO \u2550\u2550\u2550 *\/\n.jc-hero {\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  position: relative;\n  padding: 2rem 1.5rem;\n  overflow: hidden;\n  background: var(--jc-bg);\n}\n\n\/* Glass Grid *\/\n.jc-grid {\n  position: absolute;\n  inset: -10% -5%;\n  width: 110%;\n  height: 120%;\n  pointer-events: none;\n  z-index: 0;\n  transform-style: preserve-3d;\n  transform: perspective(1200px) rotateX(8deg) rotateY(3deg) rotateZ(-12deg);\n  transform-origin: center 50%;\n}\n.jc-gt {\n  position: absolute;\n  border-radius: 3px;\n  border: 1px solid;\n  overflow: hidden;\n  animation: jc-tile-in 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;\n  transition: box-shadow 0.6s ease;\n}\n.jc-gt.jc-sweep { animation: jc-sweep-glow 2s ease-in-out; }\n.jc-gt-ghost {\n  position: absolute;\n  inset: 0;\n  border-radius: 3px;\n  border: 1px solid;\n  transform: translate(2px, 2px);\n  pointer-events: none;\n}\n.jc-gt-scan {\n  position: absolute;\n  inset: 0;\n  border-radius: 3px;\n  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(8,145,178,0.015) 3px, rgba(8,145,178,0.015) 4px);\n  pointer-events: none;\n}\n.jc-rail {\n  position: absolute;\n  background-color: rgba(8,145,178,0.06);\n}\n.jc-cross {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  transform: translate(-6px, -6px);\n}\n.jc-cross::before, .jc-cross::after {\n  content: '';\n  position: absolute;\n  background: rgba(8,145,178,0.1);\n}\n.jc-cross::before {\n  left: 1px; right: 1px; top: 50%; height: 1px;\n  transform: translateY(-0.5px);\n}\n.jc-cross::after {\n  top: 1px; bottom: 1px; left: 50%; width: 1px;\n  transform: translateX(-0.5px);\n}\n\n.jc-hero__name,\n.jc-hero__title,\n.jc-hero__contact,\n.jc-hero__scroll {\n  position: relative;\n  z-index: 1;\n}\n\n.jc-hero__name {\n  font-size: clamp(2.5rem, 8vw, 5rem);\n  font-weight: 800;\n  line-height: 1.1;\n  margin-bottom: 0.75rem;\n}\n.jc-hero__title {\n  font-size: clamp(1.1rem, 3vw, 1.5rem);\n  color: var(--jc-text-sec);\n  font-weight: 400;\n  margin-bottom: 2.5rem;\n  min-height: 1.5em;\n}\n.jc-hero__title .jc-word {\n  display: inline-block;\n  opacity: 0;\n  animation: jc-word-fade 0.5s ease forwards;\n}\n.jc-hero__title .jc-word:nth-child(1) { animation-delay: 0.3s; }\n.jc-hero__title .jc-word:nth-child(2) { animation-delay: 0.45s; }\n.jc-hero__title .jc-word:nth-child(3) { animation-delay: 0.6s; }\n\n.jc-hero__contact {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: center;\n}\n.jc-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1.25rem;\n  font-size: 0.85rem;\n  color: var(--jc-text-sec);\n  border-radius: 999px;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.jc-pill:hover {\n  color: var(--jc-primary-dark);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 20px rgba(14,116,144,0.12);\n}\n.jc-pill svg { width: 16px; height: 16px; flex-shrink: 0; }\n\n.jc-hero__scroll {\n  position: absolute;\n  bottom: 2rem;\n  left: 50%;\n  transform: translateX(-50%);\n  color: var(--jc-text-muted);\n  animation: jc-scroll-hint 2s ease-in-out infinite;\n  font-size: 1.5rem;\n  z-index: 1;\n}\n\n\/* \u2550\u2550\u2550 2. SUMMARY \u2550\u2550\u2550 *\/\n.jc-summary {\n  padding: var(--jc-pad) 0;\n  background: var(--jc-bg-alt);\n}\n.jc-summary__grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 2rem;\n  align-items: start;\n}\n@media (min-width: 768px) {\n  .jc-summary__grid { grid-template-columns: 2fr 1fr; }\n}\n.jc-summary__text {\n  font-size: 1.05rem;\n  color: var(--jc-text-sec);\n  line-height: 1.8;\n}\n.jc-summary__text p + p { margin-top: 1.25rem; }\n.jc-callout {\n  padding: 2rem;\n  text-align: center;\n}\n.jc-callout__num {\n  font-size: 3.5rem;\n  font-weight: 800;\n  line-height: 1;\n  margin-bottom: 0.5rem;\n}\n.jc-callout__label {\n  font-size: 0.95rem;\n  color: var(--jc-text-sec);\n  line-height: 1.5;\n}\n\n\/* \u2550\u2550\u2550 3. SKILLS \u2550\u2550\u2550 *\/\n.jc-skills {\n  padding: var(--jc-pad) 0;\n  background: var(--jc-bg);\n}\n.jc-cloud {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  justify-content: center;\n}\n.jc-tag {\n  padding: 0.6rem 1.25rem;\n  border-radius: 10px;\n  border-left: 3px solid var(--jc-primary);\n  font-weight: 500;\n  color: var(--jc-text);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  cursor: default;\n}\n.jc-tag:hover {\n  transform: translateY(-3px);\n  box-shadow: 0 8px 24px rgba(14,116,144,0.12);\n}\n.jc-tag--lg {\n  font-size: 1.05rem;\n  padding: 0.75rem 1.5rem;\n  border-left-color: var(--jc-primary-dark);\n  font-weight: 600;\n}\n.jc-tag--md {\n  font-size: 0.95rem;\n  border-left-color: var(--jc-accent);\n}\n.jc-tag--sm {\n  font-size: 0.85rem;\n  border-left-color: var(--jc-accent-dark);\n  color: var(--jc-text-sec);\n}\n.jc-cloud [data-jc-animate] {\n  opacity: 0;\n  transform: translateY(15px);\n  transition: opacity 0.5s ease, transform 0.5s ease;\n}\n.jc-cloud [data-jc-animate].jc-visible {\n  opacity: 1;\n  transform: translateY(0);\n  animation: none;\n}\n\/* Stagger *\/\n.jc-tag:nth-child(1)  { transition-delay: 0.00s; }\n.jc-tag:nth-child(2)  { transition-delay: 0.03s; }\n.jc-tag:nth-child(3)  { transition-delay: 0.06s; }\n.jc-tag:nth-child(4)  { transition-delay: 0.09s; }\n.jc-tag:nth-child(5)  { transition-delay: 0.12s; }\n.jc-tag:nth-child(6)  { transition-delay: 0.15s; }\n.jc-tag:nth-child(7)  { transition-delay: 0.18s; }\n.jc-tag:nth-child(8)  { transition-delay: 0.21s; }\n.jc-tag:nth-child(9)  { transition-delay: 0.24s; }\n.jc-tag:nth-child(10) { transition-delay: 0.27s; }\n.jc-tag:nth-child(11) { transition-delay: 0.30s; }\n.jc-tag:nth-child(12) { transition-delay: 0.33s; }\n.jc-tag:nth-child(13) { transition-delay: 0.36s; }\n.jc-tag:nth-child(14) { transition-delay: 0.39s; }\n.jc-tag:nth-child(15) { transition-delay: 0.42s; }\n.jc-tag:nth-child(16) { transition-delay: 0.45s; }\n.jc-tag:nth-child(17) { transition-delay: 0.48s; }\n.jc-tag:nth-child(18) { transition-delay: 0.51s; }\n.jc-tag:nth-child(19) { transition-delay: 0.54s; }\n.jc-tag:nth-child(20) { transition-delay: 0.57s; }\n\n\/* \u2550\u2550\u2550 4. TIMELINE \u2550\u2550\u2550 *\/\n.jc-timeline {\n  padding: var(--jc-pad) 0;\n  background: var(--jc-bg-alt);\n}\n.jc-track {\n  position: relative;\n  max-width: 900px;\n  margin: 0 auto;\n}\n.jc-track::before {\n  content: '';\n  position: absolute;\n  left: 50%;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background: linear-gradient(180deg, var(--jc-primary), var(--jc-accent));\n  transform: translateX(-50%);\n  border-radius: 2px;\n}\n.jc-entry {\n  position: relative;\n  width: 50%;\n  padding: 0 2.5rem 3rem;\n}\n.jc-entry:nth-child(odd) {\n  left: 0;\n  text-align: right;\n  padding-right: 3rem;\n  padding-left: 0;\n}\n.jc-entry:nth-child(even) {\n  left: 50%;\n  text-align: left;\n  padding-left: 3rem;\n  padding-right: 0;\n}\n.jc-node {\n  position: absolute;\n  top: 0.5rem;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--jc-primary);\n  border: 3px solid var(--jc-bg-alt);\n  box-shadow: 0 0 0 3px var(--jc-primary);\n  z-index: 2;\n}\n.jc-entry:nth-child(odd) .jc-node { right: -7px; }\n.jc-entry:nth-child(even) .jc-node { left: -7px; }\n.jc-node--now {\n  background: #16a34a;\n  box-shadow: 0 0 0 3px #16a34a;\n}\n.jc-card { padding: 1.5rem; }\n.jc-card__co {\n  font-size: 0.8rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.1em;\n  color: var(--jc-primary);\n  margin-bottom: 0.25rem;\n}\n.jc-card__role {\n  font-size: 1.15rem;\n  font-weight: 700;\n  color: var(--jc-text);\n  margin-bottom: 0.5rem;\n}\n.jc-card__date {\n  display: inline-block;\n  font-size: 0.75rem;\n  font-weight: 600;\n  padding: 0.2rem 0.75rem;\n  border-radius: 999px;\n  background: rgba(8,145,178,0.1);\n  color: var(--jc-primary-dark);\n  margin-bottom: 0.75rem;\n}\n.jc-card__date--now {\n  background: rgba(22,163,74,0.1);\n  color: #16a34a;\n}\n.jc-card__text {\n  font-size: 0.9rem;\n  color: var(--jc-text-sec);\n  line-height: 1.7;\n}\n\n\/* Mobile timeline *\/\n@media (max-width: 767px) {\n  .jc-track::before { left: 1rem; }\n  .jc-entry,\n  .jc-entry:nth-child(odd),\n  .jc-entry:nth-child(even) {\n    width: 100%;\n    left: 0;\n    text-align: left;\n    padding-left: 3rem;\n    padding-right: 0;\n  }\n  .jc-entry:nth-child(odd) .jc-node,\n  .jc-entry:nth-child(even) .jc-node {\n    left: calc(1rem - 7px);\n    right: auto;\n  }\n}\n\n\/* \u2550\u2550\u2550 5. CONTACT FOOTER \u2550\u2550\u2550 *\/\n.jc-footer {\n  padding: var(--jc-pad) 0;\n  background: linear-gradient(135deg, var(--jc-primary-dark), var(--jc-accent-dark));\n  color: #fff;\n  text-align: center;\n}\n.jc-footer__heading {\n  font-size: clamp(1.75rem, 4vw, 2.5rem);\n  font-weight: 700;\n  margin-bottom: 2rem;\n  color: #fff;\n}\n.jc-footer__links {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1.5rem;\n  justify-content: center;\n  align-items: center;\n}\n.jc-footer__link {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: rgba(255,255,255,0.9);\n  font-size: 1.05rem;\n  padding: 0.6rem 1.5rem;\n  border-radius: 999px;\n  border: 1px solid rgba(255,255,255,0.25);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.jc-footer__link:hover {\n  color: #fff;\n  background: rgba(255,255,255,0.15);\n  transform: translateY(-2px);\n}\n.jc-footer__link svg { width: 18px; height: 18px; flex-shrink: 0; }\n\n\/* \u2500\u2500 Small screen \u2500\u2500 *\/\n@media (max-width: 640px) {\n  .jc-hero__contact { flex-direction: column; align-items: center; }\n  .jc-cloud { gap: 0.5rem; }\n  .jc-tag { padding: 0.5rem 1rem; font-size: 0.82rem; }\n  .jc-tag--lg { font-size: 0.95rem; padding: 0.6rem 1.25rem; }\n  .jc-footer__links { flex-direction: column; align-items: center; }\n}\n<\/style>\n\n<div class=\"jc-wrap\">\n\n  <!-- \u2550\u2550\u2550 1. Hero \u2550\u2550\u2550 -->\n  <section class=\"jc-hero\" id=\"jc-top\">\n    <div class=\"jc-grid\" id=\"jc-glass-grid\"><\/div>\n    <h1 class=\"jc-hero__name jc-gradient-text\">Joshua Cumpian<\/h1>\n    <p class=\"jc-hero__title\">\n      <span class=\"jc-word\">Director<\/span>\n      <span class=\"jc-word\">of<\/span>\n      <span class=\"jc-word\">Technology<\/span>\n    <\/p>\n    <div class=\"jc-hero__contact\">\n      <a href=\"mailto:cumpian.jj@gmail.com\" class=\"jc-pill jc-glass\">\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"\/><\/svg>\n        cumpian.jj@gmail.com\n      <\/a>\n      <a href=\"https:\/\/linkedin.com\/in\/joshuacumpian\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"jc-pill jc-glass\">\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z\"\/><rect x=\"2\" y=\"9\" width=\"4\" height=\"12\"\/><circle cx=\"4\" cy=\"4\" r=\"2\"\/><\/svg>\n        LinkedIn\n      <\/a>\n    <\/div>\n    <a href=\"#jc-summary\" class=\"jc-hero__scroll\" aria-label=\"Scroll down\">&#8595;<\/a>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550 2. Summary \u2550\u2550\u2550 -->\n  <section class=\"jc-summary\" id=\"jc-summary\">\n    <div class=\"jc-container\">\n      <p class=\"jc-label\" data-jc-animate>About<\/p>\n      <h2 class=\"jc-heading\" data-jc-animate>Professional Summary<\/h2>\n      <div class=\"jc-summary__grid\">\n        <div class=\"jc-summary__text\" data-jc-animate>\n          <p>\n            I&#8217;m a technology leader who bridges the gap between <span class=\"jc-gradient-text\">Development, SysAdmin, and Architecture<\/span>. Over the past eight years I&#8217;ve evolved from freelance IT support into directing the full technology stack for a growing company \u2014 owning everything from cloud infrastructure and security posture to AI-driven automation pipelines.\n          <\/p>\n          <p>\n            An internal assessment found that outsourcing the work I handle would require <span class=\"jc-gradient-text\">20+ personnel<\/span> and double the company&#8217;s infrastructure costs. That efficiency comes from a systems-thinking approach: understanding how code, infrastructure, and operations connect, and building solutions that compound rather than accumulate technical debt.\n          <\/p>\n          <p>\n            I believe in shipping working software, automating the repetitive, and keeping architecture decisions grounded in real needs rather than speculative complexity.\n          <\/p>\n        <\/div>\n        <div class=\"jc-callout jc-glass\" data-jc-animate=\"right\">\n          <div class=\"jc-callout__num jc-gradient-text\">20+<\/div>\n          <div class=\"jc-callout__label\">Personnel equivalent \u2014 the scope of work managed as a single technology leader<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550 3. Skills \u2550\u2550\u2550 -->\n  <section class=\"jc-skills\" id=\"jc-skills\">\n    <div class=\"jc-container\">\n      <p class=\"jc-label\" data-jc-animate>Expertise<\/p>\n      <h2 class=\"jc-heading\" data-jc-animate>Skills &amp; Technologies<\/h2>\n      <div class=\"jc-cloud\">\n        <span class=\"jc-tag jc-tag--lg jc-glass\" data-jc-animate>Linux<\/span>\n        <span class=\"jc-tag jc-tag--lg jc-glass\" data-jc-animate>Google Cloud<\/span>\n        <span class=\"jc-tag jc-tag--lg jc-glass\" data-jc-animate>Kubernetes<\/span>\n        <span class=\"jc-tag jc-tag--lg jc-glass\" data-jc-animate>Docker<\/span>\n        <span class=\"jc-tag jc-tag--lg jc-glass\" data-jc-animate>React<\/span>\n        <span class=\"jc-tag jc-tag--lg jc-glass\" data-jc-animate>Node.js<\/span>\n        <span class=\"jc-tag jc-tag--lg jc-glass\" data-jc-animate>AI Integration<\/span>\n        <span class=\"jc-tag jc-tag--md jc-glass\" data-jc-animate>JavaScript<\/span>\n        <span class=\"jc-tag jc-tag--md jc-glass\" data-jc-animate>SQL<\/span>\n        <span class=\"jc-tag jc-tag--md jc-glass\" data-jc-animate>PostgreSQL<\/span>\n        <span class=\"jc-tag jc-tag--md jc-glass\" data-jc-animate>Express<\/span>\n        <span class=\"jc-tag jc-tag--md jc-glass\" data-jc-animate>REST APIs<\/span>\n        <span class=\"jc-tag jc-tag--md jc-glass\" data-jc-animate>Automation<\/span>\n        <span class=\"jc-tag jc-tag--md jc-glass\" data-jc-animate>Containers<\/span>\n        <span class=\"jc-tag jc-tag--sm jc-glass\" data-jc-animate>Puppeteer<\/span>\n        <span class=\"jc-tag jc-tag--sm jc-glass\" data-jc-animate>Virtual Machines<\/span>\n        <span class=\"jc-tag jc-tag--sm jc-glass\" data-jc-animate>HTML<\/span>\n        <span class=\"jc-tag jc-tag--sm jc-glass\" data-jc-animate>CSS<\/span>\n        <span class=\"jc-tag jc-tag--sm jc-glass\" data-jc-animate>Bootstrap<\/span>\n        <span class=\"jc-tag jc-tag--sm jc-glass\" data-jc-animate>SysAdmin<\/span>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550 4. Career Journey \u2550\u2550\u2550 -->\n  <section class=\"jc-timeline\" id=\"jc-career\">\n    <div class=\"jc-container\">\n      <p class=\"jc-label\" data-jc-animate>Experience<\/p>\n      <h2 class=\"jc-heading\" data-jc-animate>Career Journey<\/h2>\n      <div class=\"jc-track\">\n\n        <div class=\"jc-entry\" data-jc-animate=\"left\">\n          <div class=\"jc-node jc-node--now\"><\/div>\n          <div class=\"jc-card jc-glass\">\n            <div class=\"jc-card__co\">ViziSites<\/div>\n            <div class=\"jc-card__role\">Director of Technology<\/div>\n            <span class=\"jc-card__date jc-card__date--now\">2020 \u2013 Present<\/span>\n            <p class=\"jc-card__text\">Evolved from leading a development team to architecting the company&#8217;s entire cloud platform. An internal assessment concluded that outsourcing the work I manage would require over twenty dedicated personnel and double infrastructure costs. Today I own InfoSec policy, AI workflow integration, infrastructure automation, and the full software development lifecycle \u2014 keeping the technology stack lean, secure, and aligned with business goals.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"jc-entry\" data-jc-animate=\"right\">\n          <div class=\"jc-node\"><\/div>\n          <div class=\"jc-card jc-glass\">\n            <div class=\"jc-card__co\">ViziSites<\/div>\n            <div class=\"jc-card__role\">Lead Developer &amp; Dept Supervisor<\/div>\n            <span class=\"jc-card__date\">2019 \u2013 2020<\/span>\n            <p class=\"jc-card__text\">Stepped into a leadership role owning technical direction, security posture, and cross-department automation. Managed the development team while continuing hands-on coding, establishing code review practices and deployment pipelines that reduced production incidents and accelerated feature delivery.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"jc-entry\" data-jc-animate=\"left\">\n          <div class=\"jc-node\"><\/div>\n          <div class=\"jc-card jc-glass\">\n            <div class=\"jc-card__co\">ViziSites<\/div>\n            <div class=\"jc-card__role\">Developer<\/div>\n            <span class=\"jc-card__date\">2018 \u2013 2019<\/span>\n            <p class=\"jc-card__text\">Joined as a full-stack developer building client-facing applications and internal tools. Quickly expanded scope to include cloud operations and security responsibilities, bridging the gap between development and infrastructure that would define my career trajectory.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"jc-entry\" data-jc-animate=\"right\">\n          <div class=\"jc-node\"><\/div>\n          <div class=\"jc-card jc-glass\">\n            <div class=\"jc-card__co\">Notch8<\/div>\n            <div class=\"jc-card__role\">Full Stack Developer Intern<\/div>\n            <span class=\"jc-card__date\">Feb \u2013 Mar 2018<\/span>\n            <p class=\"jc-card__text\">Intensive internship at a respected development shop working alongside senior engineers on production applications. Built features with React, Ruby on Rails, and Docker in a test-driven development environment \u2014 an experience that sharpened both my technical skills and my understanding of professional software craftsmanship.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"jc-entry\" data-jc-animate=\"left\">\n          <div class=\"jc-node\"><\/div>\n          <div class=\"jc-card jc-glass\">\n            <div class=\"jc-card__co\">Independent<\/div>\n            <div class=\"jc-card__role\">Freelance Web Developer<\/div>\n            <span class=\"jc-card__date\">2017 \u2013 2018<\/span>\n            <p class=\"jc-card__text\">Transitioned from infrastructure into code, building websites and full-stack web applications for clients. This period was a deliberate pivot \u2014 applying years of systems knowledge to software development and discovering the intersection of operations and engineering that would become my specialty.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"jc-entry\" data-jc-animate=\"right\">\n          <div class=\"jc-node\"><\/div>\n          <div class=\"jc-card jc-glass\">\n            <div class=\"jc-card__co\">Freelance IT \/ MLAN Consulting<\/div>\n            <div class=\"jc-card__role\">IT Support &amp; Consultant<\/div>\n            <span class=\"jc-card__date\">2011 \u2013 2017<\/span>\n            <p class=\"jc-card__text\">The career foundation \u2014 six years of hands-on IT support spanning help desk, network administration, and independent consulting. Built the systems-thinking mindset and troubleshooting instincts that later bridged development and operations, making the leap to DevOps and cloud architecture a natural evolution rather than a career change.<\/p>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- \u2550\u2550\u2550 5. Contact Footer \u2550\u2550\u2550 -->\n  <section class=\"jc-footer\" id=\"jc-contact\">\n    <div class=\"jc-container\">\n      <h2 class=\"jc-footer__heading\" data-jc-animate>Let&#8217;s Connect<\/h2>\n      <div class=\"jc-footer__links\" data-jc-animate>\n        <a href=\"mailto:cumpian.jj@gmail.com\" class=\"jc-footer__link\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"\/><\/svg>\n          cumpian.jj@gmail.com\n        <\/a>\n        <a href=\"https:\/\/linkedin.com\/in\/joshuacumpian\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"jc-footer__link\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z\"\/><rect x=\"2\" y=\"9\" width=\"4\" height=\"12\"\/><circle cx=\"4\" cy=\"4\" r=\"2\"\/><\/svg>\n          LinkedIn\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<script>\n(function () {\n  'use strict';\n\n  \/* Add classes for CSS overrides *\/\n  document.documentElement.classList.add('jc-resume-html');\n  document.body.classList.add('jc-resume-page');\n\n  \/* Load Inter font *\/\n  if (!document.querySelector('link[href*=\"fonts.googleapis.com\/css2?family=Inter\"]')) {\n    var link = document.createElement('link');\n    link.rel = 'stylesheet';\n    link.href = 'https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap';\n    document.head.appendChild(link);\n  }\n\n  var reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n  \/* \u2500\u2500 Scroll reveals \u2500\u2500 *\/\n  if (reducedMotion) {\n    document.querySelectorAll('[data-jc-animate]').forEach(function (el) {\n      el.classList.add('jc-visible');\n    });\n  } else {\n    var observer = new IntersectionObserver(\n      function (entries) {\n        entries.forEach(function (entry) {\n          if (entry.isIntersecting) {\n            entry.target.classList.add('jc-visible');\n            observer.unobserve(entry.target);\n          }\n        });\n      },\n      { threshold: 0.15 }\n    );\n    document.querySelectorAll('[data-jc-animate]').forEach(function (el) {\n      observer.observe(el);\n    });\n  }\n\n  \/* \u2500\u2500 Smooth scroll \u2500\u2500 *\/\n  document.addEventListener('click', function (e) {\n    var link = e.target.closest('a[href^=\"#jc-\"]');\n    if (!link) return;\n    var target = document.querySelector(link.getAttribute('href'));\n    if (target) {\n      e.preventDefault();\n      target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n    }\n  });\n\n  \/* \u2500\u2500 Glass Grid Background \u2500\u2500 *\/\n  var gridContainer = document.getElementById('jc-glass-grid');\n  if (!gridContainer) return;\n\n  function seededRandom(seed) {\n    var s = seed;\n    return function () {\n      s = (s * 16807 + 0) % 2147483647;\n      return (s - 1) \/ 2147483646;\n    };\n  }\n\n  var rand = seededRandom(42);\n\n  var C_CYAN  = '8, 145, 178';\n  var C_TEAL  = '20, 184, 166';\n  var C_LIGHT = '6, 182, 212';\n  var C_DEEP  = '14, 116, 144';\n  var PALETTE = [C_CYAN, C_TEAL, C_LIGHT, C_DEEP];\n\n  var COLS = 16;\n  var ROWS = 14;\n  var CELL_W = 100 \/ COLS;\n  var CELL_H = 100 \/ ROWS;\n  var GAP = 2;\n\n  var fragment = document.createDocumentFragment();\n\n  for (var row = 0; row < ROWS; row++) {\n    for (var col = 0; col < COLS; col++) {\n      if (rand() > 0.75) continue;\n\n      var rgb = PALETTE[Math.floor(rand() * PALETTE.length)];\n      var opacity = 0.04 + rand() * 0.08;\n      var w = rand() < 0.3 ? 2 : 1;\n      var h = rand() < 0.3 ? 2 : 1;\n      if (col + w > COLS) w = 1;\n      if (row + h > ROWS) h = 1;\n\n      var tile = document.createElement('div');\n      tile.className = 'jc-gt';\n      tile.style.left = 'calc(' + (col * CELL_W) + '% + ' + GAP + 'px)';\n      tile.style.top  = 'calc(' + (row * CELL_H) + '% + ' + GAP + 'px)';\n      tile.style.width  = 'calc(' + (w * CELL_W) + '% - ' + (GAP * 2) + 'px)';\n      tile.style.height = 'calc(' + (h * CELL_H) + '% - ' + (GAP * 2) + 'px)';\n      tile.style.backgroundColor = 'rgba(' + rgb + ', ' + opacity + ')';\n      tile.style.borderColor = 'rgba(' + rgb + ', ' + (opacity + 0.04) + ')';\n      tile.style.boxShadow = '0 0 8px 1px rgba(' + rgb + ', ' + (opacity * 0.6) + '), inset 0 0 6px 1px rgba(' + rgb + ', ' + (opacity * 0.4) + ')';\n\n      if (rand() < 0.10) {\n        var depth = Math.floor(6 + rand() * 12);\n        var shadows = [];\n        for (var d = 1; d <= depth; d++) {\n          var a = 0.02 + (d \/ depth) * 0.04;\n          shadows.push((d * 1.5) + 'px ' + (d * 1.5) + 'px 0 rgba(' + rgb + ', ' + a + ')');\n        }\n        tile.style.boxShadow += ', ' + shadows.join(', ');\n      }\n\n      if (rand() < 0.15) {\n        var ghost = document.createElement('div');\n        ghost.className = 'jc-gt-ghost';\n        ghost.style.backgroundColor = 'rgba(' + rgb + ', ' + (opacity * 0.35) + ')';\n        ghost.style.borderColor = 'rgba(' + rgb + ', ' + (opacity * 0.2) + ')';\n        tile.appendChild(ghost);\n      }\n\n      var scanline = document.createElement('div');\n      scanline.className = 'jc-gt-scan';\n      tile.appendChild(scanline);\n\n      if (!reducedMotion) {\n        tile.style.animationDelay = (rand() * 2.5).toFixed(2) + 's';\n      }\n\n      fragment.appendChild(tile);\n    }\n  }\n\n  \/* Rails *\/\n  for (var i = 0; i < 8; i++) {\n    var rail = document.createElement('div');\n    rail.className = 'jc-rail';\n    if (i < 5) {\n      var rRow = Math.floor(rand() * ROWS);\n      var rCol = Math.floor(rand() * (COLS - 4));\n      var span = 4 + Math.floor(rand() * 8);\n      rail.style.left = (rCol * CELL_W) + '%';\n      rail.style.top = 'calc(' + (rRow * CELL_H) + '% + ' + Math.floor(rand() * 4) + 'px)';\n      rail.style.width = (span * CELL_W) + '%';\n      rail.style.height = '1px';\n    } else {\n      var rCol2 = Math.floor(rand() * COLS);\n      var rRow2 = Math.floor(rand() * (ROWS - 3));\n      var span2 = 3 + Math.floor(rand() * 6);\n      rail.style.left = 'calc(' + (rCol2 * CELL_W) + '% + ' + Math.floor(rand() * 4) + 'px)';\n      rail.style.top = (rRow2 * CELL_H) + '%';\n      rail.style.width = '1px';\n      rail.style.height = (span2 * CELL_H) + '%';\n    }\n    fragment.appendChild(rail);\n  }\n\n  \/* Cross markers *\/\n  var usedCross = {};\n  for (var c = 0; c < 20; c++) {\n    var cx = Math.floor(rand() * COLS);\n    var cy = Math.floor(rand() * ROWS);\n    var key = cx + ',' + cy;\n    if (usedCross[key]) continue;\n    usedCross[key] = true;\n    var cross = document.createElement('div');\n    cross.className = 'jc-cross';\n    cross.style.left = (cx * CELL_W) + '%';\n    cross.style.top = (cy * CELL_H) + '%';\n    fragment.appendChild(cross);\n  }\n\n  gridContainer.appendChild(fragment);\n\n  \/* Scan sweep *\/\n  if (!reducedMotion) {\n    var tiles = gridContainer.querySelectorAll('.jc-gt');\n    function runSweep() {\n      var count = Math.min(6, tiles.length);\n      for (var s = 0; s < count; s++) {\n        var idx = Math.floor(Math.random() * tiles.length);\n        tiles[idx].classList.add('jc-sweep');\n        (function (el) {\n          setTimeout(function () { el.classList.remove('jc-sweep'); }, 2000);\n        })(tiles[idx]);\n      }\n      setTimeout(runSweep, 3000 + Math.random() * 4000);\n    }\n    setTimeout(runSweep, 2000);\n  }\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>Joshua Cumpian Director of Technology cumpian.jj@gmail.com LinkedIn &#8595; About Professional Summary I&#8217;m a technology leader who bridges the gap between Development, SysAdmin, and Architecture. Over the past eight years I&#8217;ve&#8230;<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-no-header-footer.php","meta":{"footnotes":""},"class_list":["post-14","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/infinitesave.com\/index.php?rest_route=\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/infinitesave.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/infinitesave.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/infinitesave.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14"}],"version-history":[{"count":1,"href":"https:\/\/infinitesave.com\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/infinitesave.com\/index.php?rest_route=\/wp\/v2\/pages\/14\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/infinitesave.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}