jpegg.dev/about.html at main · jpeggdev/jpegg.dev · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About - jpegg.dev</title>
  <meta name="description" content="Learn about Jeff Pegg and jpegg.dev - 25+ years of software development experience building enterprise systems and developer tools.">
  <meta property="og:title" content="About - jpegg.dev">
  <meta property="og:description" content="Learn about Jeff Pegg and jpegg.dev - 25+ years of software development experience building enterprise systems and developer tools.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://jpegg.dev/about">
  <meta property="og:site_name" content="jpegg.dev">
  <meta property="og:image" content="https://jpegg.dev/assets/og-image.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="About jpegg.dev - 25+ years of software development experience">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="About - jpegg.dev">
  <meta name="twitter:description" content="Learn about Jeff Pegg and jpegg.dev - 25+ years of software development experience building enterprise systems and developer tools.">
  <meta name="twitter:image" content="https://jpegg.dev/assets/twitter-image.png">
  <link rel="canonical" href="https://jpegg.dev/about">
  <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
  <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
            mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'monospace'],
          }
        }
      }
    }
  </script>
  <link rel="preconnect" href="https://rsms.me/">
  <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
  <link rel="stylesheet" href="css/styles.css">
  <!-- 100% privacy-first analytics -->
  <script async src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
</head>
<body class="bg-white text-slate-900 antialiased min-h-dvh flex flex-col">
  <!-- Header -->
  <header class="sticky top-0 z-40 bg-white/95 backdrop-blur border-b border-slate-200">
    <nav class="mx-auto max-w-5xl px-6 py-4 flex items-center justify-between">
      <a href="/" class="font-mono text-xl font-semibold text-slate-900 hover:text-blue-600 transition-colors">
        {jpegg}
      </a>

      <ul class="hidden md:flex items-center gap-8">
        <li><a href="/" class="text-slate-600 hover:text-slate-900 transition-colors">Home</a></li>
        <li><a href="/about.html" class="text-slate-900 font-medium">About</a></li>
        <li><a href="/products.html" class="text-slate-600 hover:text-slate-900 transition-colors">Products</a></li>
        <li><a href="/contact.html" class="text-slate-600 hover:text-slate-900 transition-colors">Contact</a></li>
      </ul>

      <button id="mobile-menu-btn" class="md:hidden p-2 text-slate-600 hover:text-slate-900" aria-label="Open menu">
        <svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </nav>

    <div id="mobile-menu" class="hidden md:hidden border-t border-slate-200 bg-white">
      <ul class="px-6 py-4 space-y-4">
        <li><a href="/" class="block text-slate-600 hover:text-slate-900">Home</a></li>
        <li><a href="/about.html" class="block text-slate-900 font-medium">About</a></li>
        <li><a href="/products.html" class="block text-slate-600 hover:text-slate-900">Products</a></li>
        <li><a href="/contact.html" class="block text-slate-600 hover:text-slate-900">Contact</a></li>
      </ul>
    </div>
  </header>

  <main class="flex-1">
    <!-- Hero -->
    <section class="py-20 md:py-28">
      <div class="mx-auto max-w-5xl px-6">
        <h1 class="text-4xl md:text-5xl font-semibold text-slate-900 text-balance">
          Built by a Developer Who's Been There
        </h1>
        <p class="mt-6 text-lg md:text-xl text-slate-600 max-w-2xl text-pretty">
          When you've spent 25+ years building software, you learn what works and what doesn't. jpegg.dev is the result of that experience.
        </p>
      </div>
    </section>

    <!-- Story -->
    <section class="py-16 bg-slate-50">
      <div class="mx-auto max-w-5xl px-6">
        <div class="max-w-3xl">
          <h2 class="text-2xl font-semibold text-slate-900">The Story</h2>

          <div class="mt-6 space-y-4 text-slate-600 text-pretty">
            <p>
              I'm Jeff Pegg, and I started coding professionally in 1997 at WebZone while still in high school. Within two years, I'd built a data integration tool for AS/400 systems that IBM licensed—a pretty good start for a teenager.
            </p>
            <p>
              From there, I moved through the full spectrum of software development. Enterprise web applications at Halo/XOR serving clients like Thrifty Car Rental. Systems management and infrastructure at Data Exchange, where I managed 440+ endpoints across multiple locations and led a critical legacy-to-cloud migration.
            </p>
            <p>
              At Gladius Solutions, I delivered solutions for Fortune 500 automotive insurance clients and architected a feature-rich React Native mobile app. I've led development teams, mentored junior engineers, and worked across every layer of the stack—C#, TypeScript, PHP, React, Vue, SQL Server, PostgreSQL, and more.
            </p>
            <p>
              Along the way, I've also built indie products. SidelineScout was a sports analytics platform for real-time football video analysis with sideline coaching tools. Now, I'm channeling that experience into API Dev Studio—a tool I wished existed during all those years of API development work.
            </p>
            <p>
              jpegg.dev exists to build developer tools that solve real problems, designed by someone who's actually lived those problems.
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Experience Highlights -->
    <section class="py-16">
      <div class="mx-auto max-w-5xl px-6">
        <h2 class="text-2xl font-semibold text-slate-900">Experience</h2>

        <div class="mt-8 grid md:grid-cols-2 gap-8">
          <div class="flex items-start gap-4">
            <div class="flex-shrink-0 size-12 rounded-lg bg-slate-100 flex items-center justify-center">
              <span class="text-xl font-semibold text-slate-700">25+</span>
            </div>
            <div>
              <h3 class="font-semibold text-slate-900">Years of Experience</h3>
              <p class="mt-1 text-slate-600">Professional software development since 1997</p>
            </div>
          </div>

          <div class="flex items-start gap-4">
            <div class="flex-shrink-0 size-12 rounded-lg bg-slate-100 flex items-center justify-center">
              <span class="text-lg font-semibold text-slate-700">500</span>
            </div>
            <div>
              <h3 class="font-semibold text-slate-900">Fortune 500 Clients</h3>
              <p class="mt-1 text-slate-600">Enterprise solutions for major corporations</p>
            </div>
          </div>

          <div class="flex items-start gap-4">
            <div class="flex-shrink-0 size-12 rounded-lg bg-slate-100 flex items-center justify-center">
              <svg class="size-6 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
              </svg>
            </div>
            <div>
              <h3 class="font-semibold text-slate-900">Team Leadership</h3>
              <p class="mt-1 text-slate-600">Led teams and mentored junior developers</p>
            </div>
          </div>

          <div class="flex items-start gap-4">
            <div class="flex-shrink-0 size-12 rounded-lg bg-slate-100 flex items-center justify-center">
              <svg class="size-6 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
              </svg>
            </div>
            <div>
              <h3 class="font-semibold text-slate-900">Full Stack</h3>
              <p class="mt-1 text-slate-600">C#, TypeScript, PHP, React, Vue, mobile, databases</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Mission -->
    <section class="py-16 bg-slate-50">
      <div class="mx-auto max-w-5xl px-6">
        <div class="max-w-2xl">
          <h2 class="text-2xl font-semibold text-slate-900">Mission</h2>
          <p class="mt-4 text-lg text-slate-600 text-pretty">
            Build developer tools that solve real problems—tools I wish I had during 25 years of building software. No bloat, no unnecessary complexity. Just well-crafted solutions from someone who understands the work.
          </p>
        </div>
      </div>
    </section>
  </main>

  <!-- Footer -->
  <footer class="bg-slate-50 border-t border-slate-200 mt-auto">
    <div class="mx-auto max-w-5xl px-6 py-12">
      <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-8">
        <div>
          <a href="/" class="font-mono text-lg font-semibold text-slate-900">{jpegg}</a>
          <p class="mt-2 text-slate-600 text-sm">Building developer tools with 25+ years of experience.</p>
        </div>

        <ul class="flex flex-wrap gap-6 text-sm">
          <li><a href="/" class="text-slate-600 hover:text-slate-900 transition-colors">Home</a></li>
          <li><a href="/about.html" class="text-slate-600 hover:text-slate-900 transition-colors">About</a></li>
          <li><a href="/products.html" class="text-slate-600 hover:text-slate-900 transition-colors">Products</a></li>
          <li><a href="/contact.html" class="text-slate-600 hover:text-slate-900 transition-colors">Contact</a></li>
          <li><a href="https://apidevstudio.com" target="_blank" rel="noopener" class="text-slate-600 hover:text-slate-900 transition-colors">API Dev Studio</a></li>
        </ul>
      </div>

      <div class="mt-8 pt-8 border-t border-slate-200 text-sm text-slate-500">
        &copy; 2026 jpegg.dev. All rights reserved.
      </div>
    </div>
  </footer>

  <script>
    const btn = document.getElementById('mobile-menu-btn');
    const menu = document.getElementById('mobile-menu');
    btn.addEventListener('click', () => {
      menu.classList.toggle('hidden');
    });
  </script>
</body>
</html>