Skip to content

Commit 1721e27

Browse files
devbotmanclaude
devbotman
and
claude
committed
Initial portfolio hub
Root GitHub Pages site at devbotman.github.io — links to all projects. Includes hero, stats bar, project cards (TPM Command Center + MA Housing Tracker), about section, and contact links. Dark theme, scroll fade-ins. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
0 parents  commit 1721e27

1 file changed

Lines changed: 286 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Devon O'Rourke — TPM & Builder</title>
7+
<meta name="description" content="Distinguished Technical Program Manager. Building tools at the intersection of automation, data, and infrastructure.">
8+
<style>
9+
:root {
10+
--bg: #0d1117;
11+
--bg2: #161b22;
12+
--bg3: #21262d;
13+
--border: #30363d;
14+
--accent: #58a6ff;
15+
--green: #3fb950;
16+
--purple: #bc8cff;
17+
--amber: #e3b341;
18+
--text: #e6edf3;
19+
--text2: #8b949e;
20+
--text3: #6e7681;
21+
--r: 10px;
22+
--mono: 'SF Mono','Fira Code',monospace;
23+
}
24+
* { box-sizing: border-box; margin: 0; padding: 0; }
25+
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
26+
27+
/* Nav */
28+
nav {
29+
position: sticky; top: 0; z-index: 100;
30+
background: rgba(13,17,23,0.9); backdrop-filter: blur(12px);
31+
border-bottom: 1px solid var(--border);
32+
display: flex; align-items: center; justify-content: space-between;
33+
padding: 0 40px; height: 56px;
34+
}
35+
.nav-logo { font-weight: 700; font-size: 15px; letter-spacing: -0.3px; }
36+
.nav-logo span { color: var(--accent); }
37+
.nav-links { display: flex; gap: 24px; }
38+
.nav-links a { color: var(--text2); text-decoration: none; font-size: 14px; transition: color .2s; }
39+
.nav-links a:hover { color: var(--text); }
40+
.nav-cta { background: var(--accent); color: #0d1117; font-weight: 600; font-size: 13px; padding: 7px 18px; border-radius: 6px; text-decoration: none; }
41+
42+
/* Hero */
43+
.hero { max-width: 860px; margin: 0 auto; padding: 100px 40px 72px; }
44+
.hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
45+
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
46+
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }
47+
.eyebrow-text { font-size: 13px; color: var(--text2); }
48+
h1 { font-size: clamp(38px, 5.5vw, 62px); font-weight: 800; letter-spacing: -2px; line-height: 1.05; margin-bottom: 20px; }
49+
h1 em { font-style: normal; color: var(--accent); }
50+
.hero-sub { font-size: 17px; color: var(--text2); max-width: 520px; margin-bottom: 40px; }
51+
.hero-sub strong { color: var(--text); }
52+
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
53+
.chip { background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 4px 14px; font-size: 12px; color: var(--text2); font-family: var(--mono); }
54+
.chip.hi { border-color: var(--accent); color: var(--accent); }
55+
.hero-links { display: flex; gap: 12px; flex-wrap: wrap; }
56+
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 22px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: opacity .2s, background .2s; }
57+
.btn-p { background: var(--accent); color: #0d1117; }
58+
.btn-p:hover { opacity: .85; }
59+
.btn-s { background: var(--bg2); color: var(--text); border: 1px solid var(--border); }
60+
.btn-s:hover { background: var(--bg3); }
61+
62+
/* Stats bar */
63+
.stats { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 36px 40px; }
64+
.stats-inner { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; }
65+
.stat { text-align: center; }
66+
.stat-n { font-size: 32px; font-weight: 800; letter-spacing: -1px; color: var(--accent); }
67+
.stat-l { font-size: 12px; color: var(--text2); margin-top: 4px; }
68+
69+
/* Projects */
70+
.projects { max-width: 860px; margin: 0 auto; padding: 80px 40px; }
71+
.section-tag { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }
72+
h2 { font-size: 28px; font-weight: 800; letter-spacing: -.6px; margin-bottom: 8px; }
73+
.section-sub { font-size: 15px; color: var(--text2); margin-bottom: 48px; }
74+
75+
.project-grid { display: grid; gap: 20px; }
76+
77+
.pcard {
78+
background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r);
79+
display: grid; grid-template-columns: 1fr auto;
80+
padding: 28px 32px; gap: 20px; align-items: start;
81+
text-decoration: none; color: var(--text);
82+
transition: border-color .2s, transform .2s;
83+
}
84+
.pcard:hover { border-color: var(--accent); transform: translateY(-2px); }
85+
.pcard.wip { border-color: var(--border); opacity: 0.75; }
86+
.pcard-badge {
87+
font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
88+
padding: 3px 10px; border-radius: 20px; white-space: nowrap; align-self: start;
89+
}
90+
.badge-live { background: rgba(63,185,80,.15); color: var(--green); border: 1px solid rgba(63,185,80,.3); }
91+
.badge-building { background: rgba(227,179,65,.12); color: var(--amber); border: 1px solid rgba(227,179,65,.3); }
92+
.badge-planned { background: var(--bg3); color: var(--text3); border: 1px solid var(--border); }
93+
.pcard-icon { font-size: 28px; margin-bottom: 14px; }
94+
.pcard h3 { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
95+
.pcard p { font-size: 14px; color: var(--text2); margin-bottom: 16px; line-height: 1.5; }
96+
.pcard-tags { display: flex; flex-wrap: wrap; gap: 6px; }
97+
.ptag { background: var(--bg3); border-radius: 4px; padding: 2px 8px; font-size: 11px; font-family: var(--mono); color: var(--text3); }
98+
99+
/* About */
100+
.about { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
101+
.about-inner { max-width: 860px; margin: 0 auto; padding: 80px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
102+
@media(max-width:640px){ .about-inner{grid-template-columns:1fr} .pcard{grid-template-columns:1fr} }
103+
.about h2 { margin-bottom: 16px; }
104+
.about p { font-size: 15px; color: var(--text2); margin-bottom: 14px; }
105+
.about p strong { color: var(--text); }
106+
.about-links { display: flex; flex-direction: column; gap: 10px; }
107+
.about-link {
108+
display: flex; align-items: center; gap: 12px;
109+
background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
110+
padding: 12px 16px; text-decoration: none; color: var(--text);
111+
transition: border-color .2s;
112+
}
113+
.about-link:hover { border-color: var(--accent); }
114+
.about-link-icon { font-size: 18px; }
115+
.about-link-text { font-size: 13px; font-weight: 600; }
116+
.about-link-sub { font-size: 11px; color: var(--text3); }
117+
118+
/* Footer */
119+
footer { text-align: center; padding: 36px 40px; font-size: 13px; color: var(--text3); border-top: 1px solid var(--border); }
120+
footer a { color: var(--text2); text-decoration: none; }
121+
footer a:hover { color: var(--text); }
122+
123+
.fade-in { opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s; }
124+
.fade-in.visible { opacity: 1; transform: none; }
125+
</style>
126+
</head>
127+
<body>
128+
129+
<nav>
130+
<div class="nav-logo">dev<span>botman</span></div>
131+
<div class="nav-links">
132+
<a href="#projects">Projects</a>
133+
<a href="#about">About</a>
134+
</div>
135+
<a href="https://www.linkedin.com/in/devonorourke/" target="_blank" class="nav-cta">LinkedIn →</a>
136+
</nav>
137+
138+
<!-- Hero -->
139+
<div class="hero">
140+
<div class="hero-eyebrow">
141+
<div class="dot"></div>
142+
<span class="eyebrow-text">Distinguished TPM · Open to Staff+ roles in Boston MA &amp; Remote</span>
143+
</div>
144+
<h1>Devon O'Rourke<br><em>TPM &amp; Builder</em></h1>
145+
<p class="hero-sub">
146+
10 years delivering <strong>5G infrastructure</strong>, <strong>cloud platform programs</strong>, and
147+
<strong>hardware/software systems</strong> at scale. I also build the tools that make my work better.
148+
</p>
149+
<div class="hero-chips">
150+
<span class="chip hi">5G / Telecom</span>
151+
<span class="chip hi">GCP · AWS</span>
152+
<span class="chip hi">E2E Program Delivery</span>
153+
<span class="chip">Python</span>
154+
<span class="chip">Playwright</span>
155+
<span class="chip">LLM / AI</span>
156+
<span class="chip">Flask</span>
157+
<span class="chip">Data Engineering</span>
158+
<span class="chip">Agile / SAFe</span>
159+
</div>
160+
<div class="hero-links">
161+
<a href="https://www.linkedin.com/in/devonorourke/" target="_blank" class="btn btn-p">
162+
View LinkedIn →
163+
</a>
164+
<a href="https://github.com/devbotman" target="_blank" class="btn btn-s">
165+
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
166+
GitHub
167+
</a>
168+
<a href="mailto:orourke.landry@gmail.com" class="btn btn-s">orourke.landry@gmail.com</a>
169+
</div>
170+
</div>
171+
172+
<!-- Stats -->
173+
<div class="stats">
174+
<div class="stats-inner">
175+
<div class="stat fade-in"><div class="stat-n">$8.38M</div><div class="stat-l">Program budget owned E2E</div></div>
176+
<div class="stat fade-in"><div class="stat-n">90K hrs</div><div class="stat-l">Engineering time recovered</div></div>
177+
<div class="stat fade-in"><div class="stat-n">40%</div><div class="stat-l">Deployment time reduction</div></div>
178+
<div class="stat fade-in"><div class="stat-n">$200M</div><div class="stat-l">Vertical opportunity identified</div></div>
179+
<div class="stat fade-in"><div class="stat-n">10 yrs</div><div class="stat-l">Technical program delivery</div></div>
180+
</div>
181+
</div>
182+
183+
<!-- Projects -->
184+
<div class="projects" id="projects">
185+
<div class="section-tag fade-in">Projects</div>
186+
<h2 class="fade-in">Things I've built</h2>
187+
<p class="section-sub fade-in">Open-source tools at the intersection of automation, data, and program management.</p>
188+
189+
<div class="project-grid">
190+
191+
<!-- TPM Command Center -->
192+
<a href="https://github.com/devbotman/tpm-command-center" target="_blank" class="pcard fade-in">
193+
<div>
194+
<div class="pcard-icon">🎯</div>
195+
<h3>TPM Command Center</h3>
196+
<p>Self-hosted job search automation platform. Scrapes 250+ company ATS boards (Greenhouse, Workday, Ashby, Lever, LinkedIn), scores jobs with a local LLM, and surfaces ranked matches in a real-time Flask dashboard — no subscriptions or API keys required.</p>
197+
<div class="pcard-tags">
198+
<span class="ptag">Python</span>
199+
<span class="ptag">Playwright</span>
200+
<span class="ptag">Flask + SSE</span>
201+
<span class="ptag">Ollama</span>
202+
<span class="ptag">SQLite</span>
203+
<span class="ptag">CrewAI</span>
204+
</div>
205+
</div>
206+
<span class="pcard-badge badge-live">Live</span>
207+
</a>
208+
209+
<!-- MA Housing Tracker -->
210+
<a href="https://github.com/devbotman/ma-housing-tracker" target="_blank" class="pcard wip fade-in">
211+
<div>
212+
<div class="pcard-icon">🏠</div>
213+
<h3>MA Housing Market Tracker</h3>
214+
<p>Real-time housing market analytics dashboard. Tracks median sale prices by MA town and county, property tax trends with YoY changes, 30/15yr mortgage and refinance rates over the last 60 days, and national price trends by state — all from public data sources.</p>
215+
<div class="pcard-tags">
216+
<span class="ptag">Python</span>
217+
<span class="ptag">FRED API</span>
218+
<span class="ptag">Zillow Data</span>
219+
<span class="ptag">Pandas</span>
220+
<span class="ptag">Chart.js</span>
221+
<span class="ptag">SQLite</span>
222+
</div>
223+
</div>
224+
<span class="pcard-badge badge-building">Building</span>
225+
</a>
226+
227+
</div>
228+
</div>
229+
230+
<!-- About -->
231+
<div class="about" id="about">
232+
<div class="about-inner">
233+
<div>
234+
<div class="section-tag fade-in">About</div>
235+
<h2 class="fade-in">Background</h2>
236+
<p class="fade-in">I'm a <strong>Distinguished Technical Program Manager</strong> at Verizon, based in the Boston MA area. I've spent 10 years delivering complex technical programs — from <strong>5G NR deployments at Gillette Stadium</strong> to owning an <strong>$8.38M broadband infrastructure program</strong> end-to-end.</p>
237+
<p class="fade-in">My technical background spans <strong>GCP/AWS cloud infrastructure</strong>, network engineering, hardware/software development lifecycles, and building internal tooling with Python and SQL. I care about removing friction from engineering teams — whether that's 90,000 hours of process waste or a 40% reduction in deployment time.</p>
238+
<p class="fade-in">Outside of work I build tools. The projects here grew out of real problems I wanted solved.</p>
239+
</div>
240+
<div class="fade-in">
241+
<div class="about-links">
242+
<a href="https://www.linkedin.com/in/devonorourke/" target="_blank" class="about-link">
243+
<span class="about-link-icon">💼</span>
244+
<div>
245+
<div class="about-link-text">LinkedIn</div>
246+
<div class="about-link-sub">linkedin.com/in/devonorourke</div>
247+
</div>
248+
</a>
249+
<a href="https://github.com/devbotman/tpm-command-center" target="_blank" class="about-link">
250+
<span class="about-link-icon">🎯</span>
251+
<div>
252+
<div class="about-link-text">TPM Command Center</div>
253+
<div class="about-link-sub">Job search automation · 250+ ATS scrapers</div>
254+
</div>
255+
</a>
256+
<a href="https://github.com/devbotman/ma-housing-tracker" target="_blank" class="about-link">
257+
<span class="about-link-icon">🏠</span>
258+
<div>
259+
<div class="about-link-text">MA Housing Tracker</div>
260+
<div class="about-link-sub">Housing market analytics · In progress</div>
261+
</div>
262+
</a>
263+
<a href="mailto:orourke.landry@gmail.com" class="about-link">
264+
<span class="about-link-icon">✉️</span>
265+
<div>
266+
<div class="about-link-text">Get in touch</div>
267+
<div class="about-link-sub">orourke.landry@gmail.com</div>
268+
</div>
269+
</a>
270+
</div>
271+
</div>
272+
</div>
273+
</div>
274+
275+
<footer>
276+
Devon O'Rourke · Distinguished TPM · Boston, MA ·
277+
<a href="https://www.linkedin.com/in/devonorourke/">LinkedIn</a> ·
278+
<a href="https://github.com/devbotman">GitHub</a>
279+
</footer>
280+
281+
<script>
282+
const obs = new IntersectionObserver(es => es.forEach(e => { if(e.isIntersecting) e.target.classList.add('visible'); }), {threshold:0.08});
283+
document.querySelectorAll('.fade-in').forEach(el => obs.observe(el));
284+
</script>
285+
</body>
286+
</html>

0 commit comments

Comments
 (0)