hyprpixl.github.io/about.html at main · HyprPixl/hyprpixl.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>About • Caleb Fedyshen</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="I replace bloated enterprise software with fast custom apps that pay for themselves. Saved $1.14M+/yr replacing legacy software. Flask, Databricks, Azure. Calgary-based.">
  <link rel="canonical" href="https://cfedyshen.com/about.html">
  <meta property="og:title" content="About • Caleb Fedyshen">
  <meta property="og:description" content="I replace bloated enterprise software with fast custom apps that pay for themselves. Saved $1.14M+/yr replacing legacy software.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://hyprpixl.github.io/about.html">
  <meta name="theme-color" content="#0b0b10">

  <!-- If you already have a site-wide stylesheet, keep it. These styles are additive. -->
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="stylesheet" href="assets/css/modern-style.css">
  <style>
    :root {
      --bg: #f9f9f9; --panel: #efefef; --muted: #555; --text: #333; --brand: #000080;
      --accent: #0066cc; --danger: #cc3333; --ring: rgba(0,102,204,.35);
      --radius: 4px;
    }
    html, body { background: var(--bg); color: var(--text); line-height: 1.6; }
    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }
    header { font-family: "Courier New", Courier, monospace; }
    .wrap { max-width: 1100px; margin: 24px auto 96px; padding: 20px 20px 0; }
    .hero { background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,0)); border: 1px solid rgba(0,0,0,.06); padding: 28px; border-radius: var(--radius); display: grid; gap: 18px; }
    .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--text); font-weight: 700; }
    #about-headline { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.2; margin: 0; font-weight: 900; color: #333; }
    .sub { color: var(--muted); max-width: 75ch; }
    .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
      .btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 4px; font-weight: 700; border: 1px solid var(--text); background: var(--bg); color: var(--text); font-family: "Courier New", Courier, monospace; }
      .btn--primary { color: var(--accent); border-color: var(--accent); background: var(--bg); box-shadow: none; }
      .btn:hover { background: var(--panel); filter: none; text-decoration: none; }
    .grid { display: grid; gap: 18px; }
    @media (min-width: 900px){ .grid.cols-3 { grid-template-columns: repeat(3, 1fr);} .grid.cols-2{ grid-template-columns: repeat(2, 1fr);} }
      .card { background: var(--panel); border: 1px solid rgba(0,0,0,.06); border-radius: var(--radius); padding: 18px; }
    .card h3 { margin-top: 0; }
      .stat { display:flex; flex-direction:column; gap:6px; padding:16px; border-radius: 4px; background: #f0f0f0; border: 1px solid rgba(0,0,0,.06);}
    .stat .num { font-size: clamp(1.4rem,3vw,1.8rem); font-weight: 900; color: var(--brand); }
    .kicker { color: var(--muted); font-size: .96rem; }
    .list { margin: 0; padding-left: 18px; }
    .list li { margin: 6px 0; }
      .pill { display:inline-block; padding:6px 10px; border-radius:4px; border:1px solid rgba(0,0,0,.12); background:#e2e2e2; font-size: .85rem; color: var(--muted); margin: 4px 6px 0 0; }
      .badge { font-size: .75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:4px 8px; border-radius:4px; background:#dfe7e2; color:#222; border:1px solid rgba(134,239,172,.25);}
    .stack { margin-top: 8px; }
    .two-col { display:grid; gap:18px; }
    @media (min-width: 900px){ .two-col { grid-template-columns: 3fr 2fr; } }
    footer { margin-top: 48px; color: var(--muted); font-size: .95rem; }
      .hr { border: 0; border-top: 1px solid rgba(0,0,0,.08); margin: 28px 0; }
    .muted { color: var(--muted); }
    .success { color: var(--brand); font-weight: 700; }
    .danger { color: var(--danger); font-weight: 700; }
    .caps { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--muted); }
      .logo-line { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
      .logo-line span { padding:8px 10px; border:1px solid rgba(0,0,0,.06); border-radius:4px; background:#f0f0f0; color:#000; font-weight:600; font-size:.85rem; }
      .disclaimer { font-size: .85rem; color: var(--muted); }
    .img { width:100%; height:auto; border-radius: 4px; border:1px solid rgba(0,0,0,.08); background:#f0f0f0; }
    #wins-lava { display:none; width:100%; height:200px; margin-top:12px; }
    @media (min-width: 900px){ #wins-lava { display:block; } }
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  </style>

  <!-- Lava-lamp shaders -->
  <script id="vertexShader"   type="x-shader/x-vertex">
    uniform float time;
    uniform float warpAmp;
    uniform float warpFreq;
    uniform float warpPhase;
    varying vec3 vNormal;
    void main() {
      vNormal = normalize(normalMatrix * normal);
      float wave = sin(time + position.y * warpFreq + warpPhase);
      vec3 displaced = position + normal * wave * warpAmp;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(displaced, 1.0);
    }
  </script>
  <script id="fragmentShader" type="x-shader/x-fragment">
    uniform vec3 baseColor;
    uniform float baseAlpha;
    varying vec3 vNormal;
    void main() {
      float fresnel = 1.0 - clamp(dot(vNormal, vec3(0.0, 0.0, 1.0)), 0.0, 1.0);
      float rim = smoothstep(0.2, 1.0, pow(fresnel, 1.6));
      vec3 color = baseColor + rim * 0.35;
      float alpha = clamp(baseAlpha + rim * 0.08, 0.0, 1.0);
      gl_FragColor = vec4(color, alpha);
    }
  </script>
  <script id="glowVertex"     type="x-shader/x-vertex">
    uniform float time;
    uniform float warpAmp;
    uniform float warpFreq;
    uniform float warpPhase;
    varying float vIntensity;
    void main() {
      vec3 n = normalize(normalMatrix * normal);
      float fresnel = 1.0 - clamp(dot(n, vec3(0.0, 0.0, 1.0)), 0.0, 1.0);
      vIntensity = pow(fresnel, 2.2);
      float wave = sin(time + position.y * warpFreq + warpPhase);
      vec3 displaced = position + normal * wave * warpAmp;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(displaced, 1.0);
    }
  </script>
  <script id="glowFragment"   type="x-shader/x-fragment">
    uniform vec3 glowColor;
    varying float vIntensity;
    void main() {
      float glow = smoothstep(0.0, 1.0, vIntensity);
      gl_FragColor = vec4(glowColor * glow, glow * 0.65);
    }
  </script>

  <!-- Structured data for SEO -->
  <script type="application/ld+json">
  {
    "@context":"https://schema.org",
    "@type":"Person",
    "name":"Caleb Fedyshen",
    "jobTitle":"Software Developer / Data Architect",
    "email":"mailto:hyprpixlstudios@gmail.com",
    "url":"https://cfedyshen.com/about.html",
    "sameAs":[
      "https://www.linkedin.com/in/caleb-fedyshen",
      "https://cfedyshen.com/blog"
    ],
    "knowsAbout":[ "Python", "Databricks", "Azure", "Flask", "Data Engineering", "Internal Tools", "Automation" ],
    "alumniOf": { "@type":"CollegeOrUniversity", "name":"University of Calgary" }
  }
  </script>
</head>
<body>
  <header>
    <h1 class="wink">Caleb Fedyshen</h1>
    <marquee behavior="scroll" direction="left" scrollamount="7">
      Welcome to my blogthing > I heard all the best programmers have the most retro looking websites. There are many secrets on this site, many more on the desktop version of the site than mobile. Have fun! I hope you're having a great day.
    </marquee>
    <nav>
  <a href="/index.html">Home</a>
  <a href="/about.html">About Me</a>
  <a href="https://www.linkedin.com/in/caleb-fedyshen" target="_blank" rel="noopener">LinkedIn ↗</a>
  <button id="style-toggle-btn">✨ Modern Style</button>
</nav>
  </header>

  <main class="wrap">
    <section class="hero" aria-labelledby="about-headline">
      <span class="eyebrow">About Caleb</span>
      <h1 id="about-headline">I replace overpriced enterprise software with fast custom apps that pay for themselves.</h1>
      <p class="sub">
        Designer/builder of tools, data pipelines, and automations that remove manual work and slash license costs.
        In one engagement, I replaced a legacy banking image viewer and <strong class="success">saved over $1.14M CAD per year</strong>.
        If you’re spending big on clunky software, or spending people’s time to work around it, I can fix that.
      </p>
      <div class="cta" role="group" aria-label="Primary calls to action">
        <a class="btn btn--primary" href="mailto:hyprpixlstudios@gmail.com?subject=Project%20fit%20call%20with%20Caleb&body=Hi%20Caleb,%20we're%20considering%20a%20project...">Book a fit call</a>
        <a class="btn" href="https://www.linkedin.com/in/caleb-fedyshen" target="_blank" rel="noopener">LinkedIn ↗</a>
      </div>
    </section>

    <section aria-labelledby="proof" style="margin-top:22px">
      <h2 id="proof" class="sr-only">Proof</h2>
      <div class="grid cols-2">
        <div class="stat"><div class="num">$1.14M+/yr</div><div class="kicker">license spend eliminated</div></div>
        <div class="stat"><div class="num">1000s</div><div class="kicker">of hours saved across several businesses</div></div>
        <div class="stat"><div class="num">5+</div><div class="kicker">production apps delivered</div></div>
        <div class="stat"><div class="num">3.9 GPA</div><div class="kicker">4× Dean’s List, UCalgary CS</div></div>
        <div class="stat"><div class="num">Hundreds</div><div class="kicker">of employees used my Teams-integrated app</div></div>
        <div class="stat"><div class="num">Dozens</div><div class="kicker">of processes automated end to end</div></div>
      </div>
    </section>

    <hr class="hr" aria-hidden="true">

    <section class="two-col" aria-labelledby="case-study">
      <article class="card">
        <div class="badge">Signature Case Study</div>
        <h2 id="case-study">Killing a $70,000USD/month tool with a lean replacement</h2>
        <p class="muted">
          A retail bank’s “Image Viewer” let teams retrieve check images. It was being sunset and the replacement was price forecasted at
          <span class="danger">$70k USD/month</span> for Plains. Treasury needed speed, accuracy, and zero vendor lock in.
        </p>
        <h3>What I built</h3>
        <ul class="list">
          <li>End-to-end system: <strong>multithreaded extraction</strong> of terabytes from thousands of zips;</li>
          <li>Parsed <strong>millions of XML entries</strong> into a queryable database with incremental refresh;</li>
          <li>A fast <strong>Flask</strong> web app deployed as <strong>Databricks App</strong> w/ search, preview, export, audit trails;</li>
          <li>Automated the manual steps the legacy tool couldn’t.</li>
        </ul>
        <h3>Outcome</h3>
        <ul class="list">
          <li><strong class="success">$70,000 USD/month saved</strong> vs. the bank’s new pricing (~$1.15M CAD/year).</li>
          <li>Used by finance leadership; faster retrieval, fewer steps, better visibility.</li>
        </ul>
        <div class="stack">
          <span class="pill">Python</span><span class="pill">Flask</span><span class="pill">Databricks Apps</span><span class="pill">Azure</span><span class="pill">SQL</span><span class="pill">HTML/CSS/JS</span>
        </div>
      </article>
      <aside class="card">
        <h3>Other wins</h3>
        <ul class="list">
          <li><strong>Company wide Step Challenge</strong> (sponsored by the President): Fabric SQL + Power Automate + PowerApps inside Teams; <em>hundreds</em> of employees participated.</li>
          <li><strong>AI video understanding</strong> prototype that suggests work automations from screen recordings.</li>
          <li><strong>Data Lake Explorer</strong> for directors to see/ingest tables; simplified governance & onboarding.</li>
        </ul>
        <div id="wins-lava"></div>
      </aside>
    </section>

    <section class="grid cols-2" style="margin-top:18px" aria-labelledby="services">
      <article class="card">
        <h2 id="services">What I do</h2>
        <ul class="list">
          <li><strong>Replace expensive licenses</strong> with focused internal tools.</li>
          <li><strong>Build data products</strong>—ingestion, transformation, search, and friendly UIs.</li>
          <li><strong>Automate workflows</strong> end to end across Azure, Databricks, Power Platform.</li>
          <li><strong>Make dashboards useful</strong> (not just pretty) with the right operational hooks.</li>
        </ul>
        <div class="stack">
          <span class="pill">Python</span><span class="pill">Flask</span><span class="pill">Databricks</span><span class="pill">Azure Data Factory</span><span class="pill">PowerApps</span><span class="pill">SQL</span>
        </div>
      </article>

      <article class="card">
        <h2 id="approach">How engagement works</h2>
        <ol class="list">
          <li><strong>Fit call (15–30 min):</strong> we verify there’s a path to ROI.</li>
          <li><strong>One-week sprint:</strong> clickable prototype or a live slice in prod.</li>
          <li><strong>Scale-up:</strong> productionize, docs, handoff, and support options.</li>
        </ol>
        <p class="muted">You keep the code. Security & access handled your way.</p>
      </article>
    </section>

    <section class="grid cols-2" style="margin-top:18px" aria-labelledby="selected">
      <article class="card">
        <h2 id="selected">Selected projects</h2>
        <ul class="list">
          <li><strong>Blaze Invoicing</strong> — full-stack invoicing for an Alberta accounting firm (Supabase, Flask, DigitalOcean).</li>
          <li><strong>Snow Ops</strong> — task assignment + status for a snow removal company (internal tool).</li>
          <li><strong>Green Energy Visualizer</strong> — interactive biodigester flow in Godot; ground-up art + animation.</li>
        </ul>
      </article>
      <article class="card">
        <h2 id="toolbox">Toolbox</h2>
        <p class="muted"><strong>Languages:</strong> Python, Java, C++, ARMv8, SQL, Haskell, HTML/CSS</p>
        <p class="muted"><strong>Platforms:</strong> Azure (Databricks, ADF, Data Lake, Fabric SQL), Power Platform, DigitalOcean</p>
        <p class="muted"><strong>Soft skills:</strong> Safety mindset, teaching, clear comms, relentless problem-solving</p>
        <div class="logo-line" aria-label="Where I’ve built">
          <span>Plains Midstream</span><span>Suncor</span><span>HyprPixl</span><span>CalgaryToSpace</span>
        </div>
      </article>
    </section>

    <section class="grid cols-2" style="margin-top:18px" aria-labelledby="bio">
      <article class="card">
        <h2 id="bio">A bit about me</h2>
        <p class="muted">
          Calgary based software developer and Data Architect finishing a B.Sc. in Computer Science at the University of Calgary
          (<strong>3.9 GPA</strong>, 4× Dean’s List). I like turning messy, slow processes into crisp systems that make teams faster.
        </p>
        <p class="muted">I build for the real world: reliability first, aesthetics included.</p>
      </article>
      <article class="card">
        <h2 id="contact">Contact</h2>
        <p><strong>Caleb Fedyshen</strong><br>
          <a href="mailto:hyprpixlstudios@gmail.com">hyprpixlstudios@gmail.com</a><br>
          <a href="https://www.linkedin.com/in/caleb-fedyshen" target="_blank" rel="noopener">LinkedIn</a> · <a href="/blog">Blog</a>
        </p>
        <p class="disclaimer">References available on request.</p>
        <div class="cta">
          <a class="btn btn--primary" href="mailto:hyprpixlstudios@gmail.com?subject=Project%20fit%20call%20with%20Caleb&body=Hi%20Caleb,%20we're%20considering%20a%20project...">Let’s talk</a>
        </div>
      </article>
    </section>

    <section class="card" style="margin-top:18px" aria-labelledby="faq">
      <h2 id="faq">FAQ</h2>
      <details>
        <summary><strong>Why custom vs. off-the-shelf?</strong></summary>
        <p class="muted">Because you pay for a thousand features you’ll never use, and still do manual work. I build the <em>exact</em> thing your process needs, integrate it with your stack, and prove ROI in weeks, not years.</p>
      </details>
      <details>
        <summary><strong>Where do you deploy?</strong></summary>
        <p class="muted">Your cloud, your rules. Databricks Apps, Azure, or a simple VM—whatever fits your governance and security posture.</p>
      </details>
      <details>
        <summary><strong>How do we start?</strong></summary>
        <p class="muted">Email me a short description of the problem and any screenshots. I’ll outline a path to ROI and a first sprint plan.</p>
      </details>
    </section>

    <footer>
      <p>© <span id="yr"></span> Caleb Fedyshen • Calgary, AB • Built with Python, discipline, and coffee.</p>
    </footer>
  </main>

  <script>
    // small nicety: keep year current
    document.getElementById('yr').textContent = new Date().getFullYear();
  </script>
  <!-- keep your existing script if needed -->
  <script src="assets/js/styleToggle.js"></script>
  <script src="assets/js/terminal.js"></script>
  <script type="module" src="assets/js/otherWinsLava.js"></script>
</body>
</html>