hyprpixl.github.io/index.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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Caleb Fedyshen • Blog</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="stylesheet" href="assets/css/modern-style.css">
  <meta property="og:title" content="Caleb Fedyshen • Blog">
  <meta property="og:description" content="Musings on software, data engineering and life.">
  <meta property="og:image" content="assets/images/starfield.gif">

  <!-- 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>
</head>

<body>
  <div id="lava-container"></div>
  <header>
    <h1 class="wink">Caleb Fedyshen</h1>
    <div class="marquee-wrap" aria-hidden="true">
      <div class="marquee-track">
        <span>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.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span aria-hidden="true">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.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      </div>
    </div>
<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>

  <div class="content-wrapper">

    <!-- ── LEFT : READING LIST ── -->
    <aside class="sidebar reading-sidebar">
      <h2>Reading List</h2>
      <ul>
        <li><a href="https://www.youtube.com/watch?v=PK2SMIOHYig" target="_blank">"The answer is not a hut in the woods" – exurb1a</a></li>
        <li><a href="https://slatestarcodex.com/2015/04/21/universal-love-said-the-cactus-person/" target="_blank">"Universal Love, Said the Cactus Person" – SSC</a></li>
        <li><a href="https://www.amazon.ca/Exhalation-Ted-Chiang/dp/1101972084" target="_blank"><em>Exhalation</em> – Ted Chiang</a></li>
        <li><a href="https://guzey.com/lifehacks/" target="_blank">"Lifehacks" – Guzey</a></li>
        <li><a href="https://www.lesswrong.com/posts/LHAJuYy453YwiKFt5/the-salt-in-pasta-water-fallacy" target="_blank">"The Salt in Pasta Water Fallacy" – LessWrong</a></li>
        <li><a href="https://www.youtube.com/@KazeN64" target="_blank">Kaze N64</a> – watch all Mario 64 optimization videos</li>
      </ul>

      <details style="margin-top:12px;">
        <summary style="cursor:pointer;font-weight:bold;font-size:1rem;color:#FFFF00;">
          Classified Archive
        </summary>
        <div style="margin-top:8px;">
          <div id="keypad"></div>
          <p id="codeDisplay"></p>
        </div>
      </details>
    </aside>

    <!-- ── CENTRE : PROJECTS ── -->
    <main class="main-column projects-column">
      <section class="project-section">
        <h2>Project Overviews</h2>
        <ul>
          <li>
            <a href="posts/chronolisten.html">ChronoListen, Audiobook Player for Apple Watch</a>
            <p class="project-summary">The only app that syncs M4B audiobooks directly to Apple Watch with no subscription, no cloud, and no third-party servers.</p>
          </li>
          <li>
            <a href="posts/pacesetter-launch.html">Plains Pacesetter Step Challenge</a>
            <p class="project-summary">Built the data infrastructure for a company wide step challenge using Power Apps, MS Fabric SQL, and Power BI.</p>
          </li>
          <li>
            <a href="posts/killing-expensive-enterprise-software.html">Cheque Image Viewer</a>
            <p class="project-summary">Replaced legacy enterprise software with a custom Flask app, saving $70kUSD/month by building a modern cheque retrieval system.</p>
          </li>
        </ul>
      </section>

      <section class="project-section">
        <h2>Interactive Projects</h2>
        <ul>
          <li>
            <a href="pages/mind-map.html">Mind Map</a>
            <p class="project-summary">Interactive mind mapping tool with physics sim nodes, connections, and export/import functionality.</p>
          </li>
          <li>
            <a href="pages/video-presenter.html">Video Presenter</a>
            <p class="project-summary">Mark pause points in videos and present them like a slideshow, it's PowerPoint, but with video slides.</p>
          </li>
          <li>
            <a href="pages/cartoguesser.html">CartoGuesser</a>
            <p class="project-summary">A cyberpunk themed map guessing game built with Leaflet for interactive geography challenges.</p>
          </li>
          <li>
            <a href="pages/unyellow.html">Unyellow</a>
            <p class="project-summary">Upload photos with yellow tint and automatically correct the colors with adjustable RGB sliders.</p>
          </li>
          <li>
            <a href="pages/wallfacer.html">Wallfacer</a>
            <p class="project-summary">An infinite CRT-inspired image canvas that maps a coordinate grid onto a curved surface.</p>
          </li>
          <li>
            <a href="pages/brown-noise.html">Brown Noise Generator</a>
            <p class="project-summary">Web brown noise generator with volume and warmth controls and a live waveform visualiser.</p>
          </li>
        </ul>
      </section>

        <div class="buttons88x31" align="center">
          <img src="https://raw.githubusercontent.com/vilgacx/88x31/main/gifs/html3.gif" alt="HTML Power">
          <button id="lava-toggle-btn" class="lava-button">Lava Lamp</button>
        <a href="https://oyster-app-qu3oz.ondigitalocean.app/" target="_blank" rel="noopener">
          <img src="https://raw.githubusercontent.com/vilgacx/88x31/main/gifs/click_here.gif" alt="Click Here">
        </a>
        <img src="https://raw.githubusercontent.com/vilgacx/88x31/main/gifs/best_viewed_with_monitor.gif" alt="Best Viewed with Monitor">
      </div>
    </main>

    <!-- ── RIGHT : BLOG POSTS ── -->
    <aside class="sidebar blog-sidebar">
      <h2>Blog Posts</h2>
      <ul>
        <li><time datetime="2026-03-30">30 Mar 2026</time> <a href="posts/chronolisten.html">I Built the Audiobook App That Didn't Exist</a></li>
        <li><time datetime="2025-08-21">21 Aug 2025</time> <a href="posts/lifehacks.html">Lifehacks</a></li>
        <li><time datetime="2025-06-20">20 Jun 2025</time> <a href="posts/software-isnt-dead-your-time-is-now.html">Software Isn't Dead. Your Time Is Now</a></li>
        <li><time datetime="2025-06-15">15 Jun 2025</time> <a href="posts/killing-expensive-enterprise-software.html">Expensive Enterprise Software Is Dying. I Saved $70K/Month by Killing It.</a></li>
        <li><time datetime="2025-05-05">5 May 2025</time> <a href="posts/pacesetter-launch.html">Launching the Plains Pacesetter Step Challenge</a></li>
        <li><time datetime="2025-04-30">30 Apr 2025</time> <a href="posts/deploying-python-apps-databricks.html">Deploying Python Apps on Databricks: What No One Tells You</a></li>
        <li><time datetime="2024-11-30">30 Nov 2024</time> <a href="posts/killing-it-in-cs-part-2.html">Killing It in Computer Science (Part 2)</a></li>
        <li><time datetime="2024-11-25">25 Nov 2024</time> <a href="posts/ai-mistakes-internship-apps.html">The Worst Ways to Use AI in Internship / Job Apps</a></li>
        <li><time datetime="2024-11-20">20 Nov 2024</time> <a href="posts/internships-hard-to-get.html">Internships Are Hard to Get, These Tips Might Help</a></li>
        <li><time datetime="2024-11-15">15 Nov 2024</time> <a href="posts/three-best-strategies-cs-degree.html">Three Strategies for Killing a CS Degree</a></li>
      </ul>
    </aside>

  </div><!-- /content-wrapper -->

  <!-- secret clue #2 hidden for screen readers -->
  <p style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;">
    <strong>I</strong>nquisitive explorers <strong>N</strong>otice
    <strong>I</strong>nitials of the list. <strong>T</strong>ranslate
    <strong>I</strong>mages of letters as <strong>A</strong>SCII.
    <strong>L</strong>ook carefully, <strong>S</strong>eeker!
    <strong>-</strong>
    <strong>T</strong>hat's the <strong>O</strong>ne path.
    <strong>-</strong>
    <strong>A</strong>fter decoding, <strong>S</strong>ubmit
    <strong>C</strong>ollected <strong>I</strong>ntegers.
  </p>
  <a href="/wip/index.html" style="display:none" aria-hidden="true" tabindex="-1">WIP</a>
  <script src="assets/js/styleToggle.js"></script>
  <script type="module" src="assets/js/lavaToggle.js"></script>
  <script src="assets/js/keypad.js"></script>
  <script src="assets/js/mobileCTA.js"></script>
  <script src="assets/js/terminal.js"></script>
</body>
</html>