<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>[YOUR NAME] — [YOUR TITLE]</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet" />
<style>
/* ─── TOKENS ─────────────────────────────────────────── */
:root {
--ink: #1c1e22;
--ink-light: #4a4f5a;
--ink-muted: #8a9099;
--surface: #f8f7f4;
--white: #ffffff;
--rule: #e2e0db;
--navy: #1b2d4f;
--accent: #2a5298;
--accent-lt: #e8edf5;
--font-serif: 'DM Serif Display', Georgia, serif;
--font-sans: 'DM Sans', system-ui, sans-serif;
--max: 1100px;
--gap: clamp(48px, 8vw, 96px);
}
```
/* ─── RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
background: var(--surface);
color: var(--ink);
font-size: 16px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
/* ─── UTILITY ─────────────────────────────────────────── */
.container {
max-width: var(--max);
margin: 0 auto;
padding: 0 clamp(24px, 5vw, 64px);
}
.section {
padding: var(--gap) 0;
border-top: 1px solid var(--rule);
}
.label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 32px;
display: flex;
align-items: center;
gap: 12px;
}
.label::after {
content: '';
flex: 1;
height: 1px;
background: var(--rule);
}
h2 {
font-family: var(--font-serif);
font-size: clamp(26px, 3.5vw, 38px);
font-weight: 400;
color: var(--navy);
line-height: 1.25;
margin-bottom: 20px;
}
p { color: var(--ink-light); max-width: 62ch; }
/* ─── NAV ─────────────────────────────────────────────── */
nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(248, 247, 244, 0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--rule);
}
.nav-inner {
max-width: var(--max);
margin: 0 auto;
padding: 0 clamp(24px, 5vw, 64px);
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-name {
font-size: 14px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--navy);
}
.nav-links {
display: flex;
gap: 32px;
}
.nav-links a {
font-size: 13px;
color: var(--ink-muted);
font-weight: 400;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--navy); }
/* ─── HERO ─────────────────────────────────────────────── */
#hero {
padding: clamp(72px, 12vw, 140px) 0 var(--gap);
border-top: none;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: end;
}
.hero-eyebrow {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 20px;
}
.hero-name {
font-family: var(--font-serif);
font-size: clamp(40px, 6vw, 72px);
font-weight: 400;
color: var(--navy);
line-height: 1.08;
margin-bottom: 16px;
}
.hero-title {
font-size: clamp(15px, 2vw, 18px);
color: var(--ink-light);
font-weight: 300;
margin-bottom: 36px;
line-height: 1.5;
}
.hero-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--navy);
color: #fff;
padding: 13px 28px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
transition: background 0.2s;
}
.hero-cta:hover { background: var(--accent); }
.hero-cta svg { transition: transform 0.2s; }
.hero-cta:hover svg { transform: translateX(4px); }
.hero-right {
display: flex;
flex-direction: column;
gap: 28px;
padding-bottom: 4px;
}
.hero-stat {
border-left: 2px solid var(--accent);
padding-left: 20px;
}
.hero-stat-num {
font-family: var(--font-serif);
font-size: 32px;
color: var(--navy);
line-height: 1;
margin-bottom: 4px;
}
.hero-stat-label {
font-size: 13px;
color: var(--ink-muted);
}
/* ─── COMPETENCIES ────────────────────────────────────── */
.competency-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
margin-top: 40px;
}
.competency-card {
background: var(--white);
padding: 32px 28px;
transition: background 0.2s;
}
.competency-card:hover { background: var(--accent-lt); }
.comp-icon {
width: 36px;
height: 36px;
background: var(--accent-lt);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.comp-icon svg { color: var(--accent); }
.comp-title {
font-size: 14px;
font-weight: 500;
color: var(--navy);
margin-bottom: 8px;
}
.comp-desc {
font-size: 13px;
color: var(--ink-muted);
line-height: 1.6;
max-width: none;
}
/* ─── PROBLEMS ────────────────────────────────────────── */
.problems-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
margin-top: 40px;
}
.problem-item {
display: flex;
gap: 20px;
padding-bottom: 28px;
border-bottom: 1px solid var(--rule);
}
.problem-item:last-child { border-bottom: none; padding-bottom: 0; }
.problem-num {
font-family: var(--font-serif);
font-size: 28px;
color: var(--rule);
line-height: 1;
flex-shrink: 0;
margin-top: -2px;
user-select: none;
}
.problem-text strong {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--navy);
margin-bottom: 4px;
}
.problem-text span {
font-size: 13px;
color: var(--ink-muted);
line-height: 1.6;
}
/* ─── CASE SNAPSHOTS ──────────────────────────────────── */
.cases-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 40px;
}
.case-card {
background: var(--white);
border: 1px solid var(--rule);
padding: 32px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.case-card:hover {
border-color: var(--accent);
box-shadow: 0 4px 24px rgba(42, 82, 152, 0.06);
}
.case-tag {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
background: var(--accent-lt);
padding: 4px 10px;
display: inline-block;
margin-bottom: 20px;
}
.case-headline {
font-size: 15px;
font-weight: 500;
color: var(--navy);
margin-bottom: 12px;
line-height: 1.4;
}
.case-body {
font-size: 13px;
color: var(--ink-muted);
line-height: 1.65;
max-width: none;
}
.case-outcome {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--rule);
font-size: 12px;
color: var(--ink-muted);
display: flex;
align-items: center;
gap: 8px;
}
.case-outcome::before {
content: '';
width: 20px;
height: 2px;
background: var(--accent);
flex-shrink: 0;
}
/* ─── TOOLS ───────────────────────────────────────────── */
.tools-layout {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 64px;
margin-top: 40px;
}
.tools-intro p { font-size: 14px; }
.tool-groups {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.tool-group-title {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
.tool-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.tool-item {
font-size: 13px;
color: var(--ink-light);
display: flex;
align-items: center;
gap: 10px;
}
.tool-item::before {
content: '';
width: 4px;
height: 4px;
background: var(--accent);
border-radius: 50%;
flex-shrink: 0;
}
/* ─── PHILOSOPHY ──────────────────────────────────────── */
.philosophy-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
margin-top: 40px;
}
blockquote {
font-family: var(--font-serif);
font-size: clamp(22px, 3vw, 32px);
color: var(--navy);
line-height: 1.35;
font-style: italic;
position: relative;
padding-left: 28px;
border-left: 3px solid var(--accent);
}
.principles {
display: flex;
flex-direction: column;
gap: 20px;
}
.principle {
display: flex;
gap: 16px;
align-items: flex-start;
}
.principle-dot {
width: 8px;
height: 8px;
background: var(--navy);
border-radius: 50%;
margin-top: 7px;
flex-shrink: 0;
}
.principle strong {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--navy);
margin-bottom: 4px;
}
.principle span {
font-size: 13px;
color: var(--ink-muted);
line-height: 1.6;
}
/* ─── CONTACT ─────────────────────────────────────────── */
#contact { background: var(--navy); }
#contact .label { color: rgba(255,255,255,0.35); }
#contact .label::after { background: rgba(255,255,255,0.12); }
#contact h2 { color: #fff; }
#contact p { color: rgba(255,255,255,0.55); }
.contact-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
margin-top: 40px;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-field label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
}
.form-field input,
.form-field textarea,
.form-field select {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
color: #fff;
padding: 12px 16px;
font-family: var(--font-sans);
font-size: 14px;
outline: none;
transition: border-color 0.2s;
resize: none;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(255,255,255,0.25); }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { border-color: rgba(255,255,255,0.4); }
.form-field select {
appearance: none;
cursor: pointer;
color: rgba(255,255,255,0.25);
}
.form-field select option { background: var(--navy); color: #fff; }
.btn-submit {
background: #fff;
color: var(--navy);
border: none;
padding: 14px 32px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
align-self: flex-start;
transition: background 0.2s, color 0.2s;
}
.btn-submit:hover { background: var(--accent-lt); color: var(--accent); }
.contact-info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 32px;
}
.contact-note {
font-size: 14px;
color: rgba(255,255,255,0.45);
line-height: 1.7;
max-width: 38ch;
}
.linkedin-link {
display: inline-flex;
align-items: center;
gap: 10px;
color: rgba(255,255,255,0.6);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
border: 1px solid rgba(255,255,255,0.2);
padding: 12px 20px;
width: fit-content;
transition: border-color 0.2s, color 0.2s;
}
.linkedin-link:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
/* ─── FOOTER ─────────────────────────────────────────── */
footer {
background: #12203a;
padding: 24px 0;
}
.footer-inner {
max-width: var(--max);
margin: 0 auto;
padding: 0 clamp(24px, 5vw, 64px);
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-copy {
font-size: 12px;
color: rgba(255,255,255,0.25);
}
/* ─── ANIMATIONS ──────────────────────────────────────── */
.fade-in {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 768px) {
.hero-grid,
.problems-layout,
.tools-layout,
.philosophy-layout,
.contact-layout,
.competency-grid { grid-template-columns: 1fr; }
.competency-grid { background: transparent; border: none; gap: 16px; }
.competency-card { border: 1px solid var(--rule); }
.cases-grid { grid-template-columns: 1fr; }
.tool-groups { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.nav-links { display: none; }
.hero-right { flex-direction: row; flex-wrap: wrap; }
}
```
</style>
</head>
<body>
<!-- NAV -->
<nav>
<div class="nav-inner">
<span class="nav-name"><!-- [YOUR NAME] -->[First Last]</span>
<ul class="nav-links">
<li><a href="#competencies">Expertise</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#tools">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<!-- HERO -->
<section id="hero" class="section" style="border-top:none;">
<div class="container">
<div class="hero-grid">
<div class="fade-in">
<p class="hero-eyebrow"><!-- [YOUR DOMAIN / SPECIALTY] -->Finance · Strategy · Operations</p>
<h1 class="hero-name"><!-- [YOUR NAME] -->First<br>Last</h1>
<p class="hero-title">
<!-- [YOUR TITLE / ONE-LINE POSITIONING] -->
Senior professional specializing in financial analysis,<br>
operational strategy, and complex problem-solving.
</p>
<a href="#contact" class="hero-cta">
Get in Touch
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</a>
</div>
<div class="hero-right fade-in" style="transition-delay:0.15s">
<div class="hero-stat">
<div class="hero-stat-num"><!-- [X]+ -->15+</div>
<div class="hero-stat-label">Years of professional experience</div>
</div>
<div class="hero-stat">
<div class="hero-stat-num"><!-- [X]+ -->$2B+</div>
<div class="hero-stat-label"><!-- [Context for this figure] -->Value of transactions and programs managed</div>
</div>
<div class="hero-stat">
<div class="hero-stat-num"><!-- [X]+ -->3</div>
<div class="hero-stat-label"><!-- [Sectors / Functions / etc.] -->Sectors: public, private, and nonprofit</div>
</div>
</div>
</div>
</div>
</section>
<!-- COMPETENCIES -->
<section id="competencies" class="section">
<div class="container">
<p class="label">Core Competencies</p>
<h2>Where I add the most value</h2>
<div class="competency-grid">
<!-- Repeat or replace these cards with your actual competencies -->
<div class="competency-card fade-in">
<div class="comp-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
</div>
<p class="comp-title"><!-- [Competency 1] -->Financial Modeling & Analysis</p>
<p class="comp-desc"><!-- [Short description] -->Building rigorous models that support executive decision-making, from scenario analysis to long-range forecasting and capital planning.</p>
</div>
<div class="competency-card fade-in" style="transition-delay:0.08s">
<div class="comp-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
</div>
<p class="comp-title"><!-- [Competency 2] -->Operational Strategy</p>
<p class="comp-desc"><!-- [Short description] -->Diagnosing organizational inefficiencies and designing structured solutions that scale — balancing speed, cost, and risk.</p>
</div>
<div class="competency-card fade-in" style="transition-delay:0.16s">
<div class="comp-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
</div>
<p class="comp-title"><!-- [Competency 3] -->Program & Project Management</p>
<p class="comp-desc"><!-- [Short description] -->Leading cross-functional initiatives with clear governance, milestone tracking, and stakeholder alignment from initiation through delivery.</p>
</div>
<div class="competency-card fade-in" style="transition-delay:0.04s">
<div class="comp-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
</div>
<p class="comp-title"><!-- [Competency 4] -->Stakeholder Communication</p>
<p class="comp-desc"><!-- [Short description] -->Translating complex financial and operational findings into clear, decision-ready formats for boards, executives, and oversight bodies.</p>
</div>
<div class="competency-card fade-in" style="transition-delay:0.12s">
<div class="comp-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
</div>
<p class="comp-title"><!-- [Competency 5] -->Data & Reporting Systems</p>
<p class="comp-desc"><!-- [Short description] -->Designing reporting frameworks and dashboards that provide leadership with timely, accurate visibility across financial and operational metrics.</p>
</div>
<div class="competency-card fade-in" style="transition-delay:0.2s">
<div class="comp-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
</div>
<p class="comp-title"><!-- [Competency 6] -->Risk & Compliance</p>
<p class="comp-desc"><!-- [Short description] -->Identifying material risks, building internal controls, and ensuring adherence to regulatory and policy requirements without impeding operations.</p>
</div>
</div>
</div>
</section>
<!-- PROBLEMS -->
<section id="problems" class="section">
<div class="container">
<p class="label">Problems I Help Solve</p>
<h2>Where I'm typically called in</h2>
<div class="problems-layout">
<div>
<!-- Customize or replace these problem statements -->
<div class="problem-item fade-in">
<span class="problem-num">01</span>
<div class="problem-text">
<strong><!-- [Problem Title] -->Financial ambiguity slowing decisions</strong>
<span><!-- [Description] -->Situations where leadership lacks a reliable financial picture — unclear forecasts, inconsistent reporting, or models that don't reflect operational reality.</span>
</div>
</div>
<div class="problem-item fade-in">
<span class="problem-num">02</span>
<div class="problem-text">
<strong><!-- [Problem Title] -->Programs drifting without accountability</strong>
<span><!-- [Description] -->Initiatives that were well-scoped but lack the structure to stay on track — no clear owner, no milestone cadence, no escalation path.</span>
</div>
</div>
<div class="problem-item fade-in">
<span class="problem-num">03</span>
<div class="problem-text">
<strong><!-- [Problem Title] -->Rapid growth outpacing operations</strong>
<span><!-- [Description] -->Organizations scaling faster than their internal systems — where manual workarounds are creating risk and the need for structure is urgent.</span>
</div>
</div>
</div>
<div>
<div class="problem-item fade-in">
<span class="problem-num">04</span>
<div class="problem-text">
<strong><!-- [Problem Title] -->Regulatory or audit exposure</strong>
<span><!-- [Description] -->Environments requiring remediation, improved documentation, or stronger controls to satisfy oversight requirements or prepare for review.</span>
</div>
</div>
<div class="problem-item fade-in">
<span class="problem-num">05</span>
<div class="problem-text">
<strong><!-- [Problem Title] -->Cross-functional misalignment</strong>
<span><!-- [Description] -->Finance, operations, and leadership working from different data — creating friction, duplication of effort, and delayed decisions.</span>
</div>
</div>
<div class="problem-item fade-in">
<span class="problem-num">06</span>
<div class="problem-text">
<strong><!-- [Problem Title] -->Strategy without implementation</strong>
<span><!-- [Description] -->Organizations with strong strategic vision but limited capacity to translate it into execution — milestones, owners, budgets, and results.</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CASE SNAPSHOTS -->
<section id="work" class="section">
<div class="container">
<p class="label">Selected Work</p>
<h2>Anonymized case snapshots</h2>
<div class="cases-grid">
<!-- Replace with your own anonymized case examples -->
<div class="case-card fade-in">
<span class="case-tag"><!-- [Sector] -->Public Sector · Finance</span>
<p class="case-headline"><!-- [Case Title] -->Redesigning a $400M budget process for a government agency</p>
<p class="case-body"><!-- [Brief description] -->Led an end-to-end redesign of a multi-department budget process that had been reliant on disconnected spreadsheets and manual reconciliation. Established a unified reporting structure, trained stakeholders, and implemented a governance calendar.</p>
<p class="case-outcome"><!-- [Outcome] -->Reduced close cycle from 14 days to 5 days; improved forecast accuracy by 30%</p>
</div>
<div class="case-card fade-in" style="transition-delay:0.1s">
<span class="case-tag"><!-- [Sector] -->Private Sector · Operations</span>
<p class="case-headline"><!-- [Case Title] -->Operational turnaround for a mid-market services firm</p>
<p class="case-body"><!-- [Brief description] -->Embedded with executive leadership to diagnose margin compression across three service lines. Identified structural cost drivers, built a prioritized remediation roadmap, and managed execution through to stabilization.</p>
<p class="case-outcome"><!-- [Outcome] -->Restored EBITDA margin to target within two quarters; created $8M in recurring savings</p>
</div>
<div class="case-card fade-in" style="transition-delay:0.05s">
<span class="case-tag"><!-- [Sector] -->Nonprofit · Strategy</span>
<p class="case-headline"><!-- [Case Title] -->Program evaluation and funding model redesign</p>
<p class="case-body"><!-- [Brief description] -->Assessed the financial sustainability of a multi-program nonprofit. Restructured reporting to funders, built a cost-per-outcome framework, and advised on diversification of revenue streams.</p>
<p class="case-outcome"><!-- [Outcome] -->Secured $12M in new multi-year funding commitments; improved board financial literacy</p>
</div>
<div class="case-card fade-in" style="transition-delay:0.15s">
<span class="case-tag"><!-- [Sector] -->Cross-sector · Program Management</span>
<p class="case-headline"><!-- [Case Title] -->Enterprise-wide systems implementation</p>
<p class="case-body"><!-- [Brief description] -->Managed the finance workstream for a major ERP implementation across eight business units. Coordinated data migration, process redesign, user training, and go-live support under a compressed timeline.</p>
<p class="case-outcome"><!-- [Outcome] -->On-time delivery across all finance modules with zero material audit findings post-launch</p>
</div>
</div>
</div>
</section>
<!-- TOOLS -->
<section id="tools" class="section">
<div class="container">
<p class="label">Technical Skills</p>
<div class="tools-layout">
<div class="tools-intro fade-in">
<h2>Tools & technical proficiency</h2>
<p style="margin-top:16px; font-size:14px;"><!-- [Optional context sentence] -->A working toolkit built across years of applied use in financial, operational, and analytical environments.</p>
</div>
<div class="tool-groups fade-in" style="transition-delay:0.1s">
<!-- Replace with your actual tools and categories -->
<div>
<p class="tool-group-title">Financial & Analytics</p>
<ul class="tool-list">
<li class="tool-item"><!-- -->Excel / Google Sheets (advanced)</li>
<li class="tool-item"><!-- -->Power BI / Tableau</li>
<li class="tool-item"><!-- -->SQL (intermediate)</li>
<li class="tool-item"><!-- -->Python (data analysis)</li>
</ul>
</div>
<div>
<p class="tool-group-title">Planning & Reporting</p>
<ul class="tool-list">
<li class="tool-item"><!-- -->[ERP System, e.g. SAP / Oracle]</li>
<li class="tool-item"><!-- -->[FP&A Tool, e.g. Adaptive / Planful]</li>
<li class="tool-item"><!-- -->Hyperion / Essbase</li>
<li class="tool-item"><!-- -->Workday Financials</li>
</ul>
</div>
<div>
<p class="tool-group-title">Project & Operations</p>
<ul class="tool-list">
<li class="tool-item"><!-- -->Smartsheet / MS Project</li>
<li class="tool-item"><!-- -->Jira / Confluence</li>
<li class="tool-item"><!-- -->Monday.com</li>
<li class="tool-item"><!-- -->SharePoint</li>
</ul>
</div>
<div>
<p class="tool-group-title">Credentials & Training</p>
<ul class="tool-list">
<li class="tool-item"><!-- [Credential 1] -->[CPA / CFA / MBA / PMP]</li>
<li class="tool-item"><!-- [Credential 2] -->[Certification or degree]</li>
<li class="tool-item"><!-- [Credential 3] -->[Additional training]</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- PHILOSOPHY -->
<section id="philosophy" class="section">
<div class="container">
<p class="label">Professional Philosophy</p>
<div class="philosophy-layout">
<div class="fade-in">
<blockquote>
<!-- [Your guiding professional belief or philosophy — 1–2 sentences] -->
"Good analysis doesn't just answer the question asked — it surfaces the question that should have been asked first."
</blockquote>
</div>
<div class="principles fade-in" style="transition-delay:0.1s">
<!-- Replace with your actual working principles -->
<div class="principle">
<div class="principle-dot"></div>
<div>
<strong><!-- [Principle 1 title] -->Structure before speed</strong>
<span><!-- [Brief description] -->Taking time to define the problem correctly saves multiples of that time downstream. I work to build shared clarity before moving into execution.</span>
</div>
</div>
<div class="principle">
<div class="principle-dot"></div>
<div>
<strong><!-- [Principle 2 title] -->Trust through precision</strong>
<span><!-- [Description] -->Numbers, language, and commitments should all be treated with the same discipline. Reliability is built one accurate statement at a time.</span>
</div>
</div>
<div class="principle">
<div class="principle-dot"></div>
<div>
<strong><!-- [Principle 3 title] -->Simplicity is earned</strong>
<span><!-- [Description] -->The clearest, most actionable output is usually the hardest to produce. I do the hard work so that the people I serve don't have to.</span>
</div>
</div>
<div class="principle">
<div class="principle-dot"></div>
<div>
<strong><!-- [Principle 4 title] -->Context before conclusions</strong>
<span><!-- [Description] -->Every organization has history, constraints, and culture that shape what's possible. I listen before I recommend.</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT -->
<section id="contact" class="section" style="border-top: 1px solid rgba(255,255,255,0.08);">
<div class="container">
<p class="label">Contact</p>
<h2>Let's connect</h2>
<p style="margin-bottom:0;"><!-- [Optional: brief note on types of inquiries you welcome] -->Open to senior roles, consulting engagements, and advisory conversations. Please include context on your situation or organization.</p>
<div class="contact-layout">
<form class="contact-form" onsubmit="handleSubmit(event)">
<div class="form-row">
<div class="form-field">
<label>Name</label>
<input type="text" placeholder="Your name" required />
</div>
<div class="form-field">
<label>Organization</label>
<input type="text" placeholder="Company or institution" />
</div>
</div>
<div class="form-field">
<label>Email</label>
<input type="email" placeholder="your@email.com" required />
</div>
<div class="form-field">
<label>Nature of inquiry</label>
<select>
<option value="" disabled selected>Select one</option>
<option>Full-time opportunity</option>
<option>Consulting or contract engagement</option>
<option>Advisory or board role</option>
<option>Collaboration or partnership</option>
<option>Other</option>
</select>
</div>
<div class="form-field">
<label>Message</label>
<textarea rows="4" placeholder="Brief context on your situation or what you're looking for…"></textarea>
</div>
<button type="submit" class="btn-submit">Send Inquiry</button>
<p id="form-success" style="display:none; color:rgba(255,255,255,0.5); font-size:13px; margin-top:8px;">Thank you — I'll be in touch shortly.</p>
</form>
<div class="contact-info">
<p class="contact-note">
<!-- [Optional note about response time or engagement preferences] -->
I typically respond within 2–3 business days. I'm selective about the work I take on, but always happy to have a preliminary conversation.
</p>
<a href="<!-- [YOUR LINKEDIN URL] -->#" class="linkedin-link" target="_blank">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
View LinkedIn Profile
</a>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer-inner">
<span class="footer-copy">© <span id="year"></span> <!-- [YOUR NAME] -->First Last. All rights reserved.</span>
<span class="footer-copy"><!-- [Optional: tagline or city] -->Available for select engagements</span>
</div>
</footer>
<script>
// Year
document.getElementById('year').textContent = new Date().getFullYear();
// Scroll fade-in
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); } });
}, { threshold: 0.1 });
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
// Form
function handleSubmit(e) {
e.preventDefault();
document.getElementById('form-success').style.display = 'block';
e.target.reset();
}
</script>
</body>
</html>