Files
job-dashboard/timeline.html

395 lines
16 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Career Arc · Anthony Martin</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{
--bg:#0a0a0a;
--surface:#111;
--border:rgba(255,255,255,0.06);
--text:#c8c8c8;
--text-b:#e8e8e8;
--text-m:#777;
--text-dim:#555;
--green:#1a472a;
--green-l:#2d7a47;
--gold:#d4a843;
--cream:#f5f0e8;
--radius:6px;
}
body{
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
::selection{background:rgba(212,168,67,0.2);color:var(--cream)}
a{color:var(--green-l);text-decoration:none}
a:hover{color:var(--gold)}
/* Container */
.container{max-width:720px;margin:0 auto;padding:3rem 1.5rem 4rem}
/* Hero */
.hero{margin-bottom:3rem}
.hero h1{font-size:2rem;font-weight:700;color:var(--text-b);letter-spacing:-0.02em;margin-bottom:0.3rem}
.hero p{font-size:0.9rem;color:var(--text-m);line-height:1.5}
/* Section heading */
.section-heading{
font-size:0.7rem;
font-weight:600;
color:var(--gold);
text-transform:uppercase;
letter-spacing:0.1em;
margin-bottom:1.25rem;
padding-top:2rem;
}
.section-heading:first-of-type{padding-top:0}
/* Role card */
.role-card{
margin-bottom:1.5rem;
opacity:0;
animation:fadeIn 0.5s ease both;
}
.role-card:nth-child(1){animation-delay:0.05s}
.role-card:nth-child(2){animation-delay:0.1s}
.role-card:nth-child(3){animation-delay:0.15s}
.role-card:nth-child(4){animation-delay:0.2s}
.role-card:nth-child(5){animation-delay:0.25s}
.role-card:nth-child(6){animation-delay:0.3s}
.role-header{
display:flex;
justify-content:space-between;
align-items:baseline;
flex-wrap:wrap;
gap:0.3rem;
margin-bottom:0.15rem;
}
.role-title{font-size:1rem;font-weight:600;color:var(--text-b)}
.role-date{font-size:0.78rem;color:var(--text-dim);white-space:nowrap}
.role-company{font-size:0.85rem;color:var(--green-l);font-weight:500;margin-bottom:0.5rem}
.role-summary{font-size:0.82rem;color:var(--text);line-height:1.6;margin-bottom:0.5rem}
/* Expand toggle */
.expand-btn{
font-size:0.72rem;color:var(--text-dim);cursor:pointer;
background:none;border:none;padding:0;display:inline-flex;align-items:center;gap:0.3rem;
transition:color 0.2s;
}
.expand-btn:hover{color:var(--gold)}
.expand-btn .arrow{display:inline-block;font-size:0.55rem;transition:transform 0.2s}
.expand-btn.open .arrow{transform:rotate(180deg)}
.details{
max-height:0;overflow:hidden;
transition:max-height 0.35s ease,opacity 0.25s ease;
opacity:0;
}
.details.open{max-height:2000px;opacity:1}
.details ul{list-style:none;padding:0.6rem 0 0}
.details ul li{
padding:0.25rem 0;font-size:0.78rem;color:var(--text);line-height:1.55;
padding-left:1rem;position:relative;
}
.details ul li::before{content:'→';position:absolute;left:0;color:var(--gold);font-size:0.7rem}
.details .tags{
display:flex;flex-wrap:wrap;gap:0.3rem;padding-top:0.6rem;margin-top:0.6rem;
border-top:1px solid var(--border);
}
.details .tags span{
background:rgba(26,71,42,0.15);color:var(--text-m);
font-size:0.65rem;padding:0.15rem 0.5rem;border-radius:3px;
}
/* Education */
.edu-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.edu-card{
background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
padding:1rem 1.1rem;opacity:0;animation:fadeIn 0.5s ease 0.35s both;
}
.edu-card h3{font-size:0.85rem;font-weight:600;color:var(--text-b);margin-bottom:0.1rem}
.edu-card .detail{font-size:0.75rem;color:var(--text-m);margin-bottom:0.1rem}
.edu-card .year{font-size:0.65rem;color:var(--green-l)}
/* Skills section */
.skills-grid{display:flex;flex-wrap:wrap;gap:0.4rem}
.skill-tag{
background:var(--surface);border:1px solid var(--border);border-radius:100px;
padding:0.3rem 0.9rem;font-size:0.72rem;color:var(--text);
opacity:0;animation:fadeIn 0.4s ease both;
}
.skill-tag:nth-child(1){animation-delay:0.05s}
.skill-tag:nth-child(2){animation-delay:0.08s}
.skill-tag:nth-child(3){animation-delay:0.11s}
.skill-tag:nth-child(4){animation-delay:0.14s}
.skill-tag:nth-child(5){animation-delay:0.17s}
.skill-tag:nth-child(6){animation-delay:0.2s}
.skill-tag:nth-child(7){animation-delay:0.23s}
.skill-tag:nth-child(8){animation-delay:0.26s}
.skill-tag:nth-child(9){animation-delay:0.29s}
.skill-tag:nth-child(10){animation-delay:0.32s}
.skill-tag:hover{border-color:rgba(212,168,67,0.3);color:var(--cream)}
/* Present banner */
.present-banner{
background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
padding:1.2rem 1.3rem;margin-bottom:2rem;position:relative;overflow:hidden;
}
.present-banner::before{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.present-banner .label{
font-size:0.6rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--gold);font-weight:600;margin-bottom:0.3rem;
}
.present-banner .label .dot{
display:inline-block;width:6px;height:6px;background:var(--gold);border-radius:50%;
margin-right:0.35rem;vertical-align:middle;animation:pulse 2s ease-in-out infinite;
}
.present-banner h2{font-size:1.05rem;font-weight:600;color:var(--text-b);margin-bottom:0.2rem}
.present-banner p{font-size:0.8rem;color:var(--text);line-height:1.55}
/* Footer */
.footer{text-align:center;padding:2rem 0 0;color:var(--text-dim);font-size:0.7rem}
/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.35}}
/* Reduced motion */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
.role-card,.skill-tag,.edu-card{opacity:1!important;transform:none!important}
}
/* Mobile */
@media(max-width:550px){
.container{padding:2rem 1rem 3rem}
.edu-grid{grid-template-columns:1fr}
.role-header{flex-direction:column;align-items:flex-start}
}
</style>
</head>
<body>
<div class="container">
<!-- Hero -->
<div class="hero">
<h1>Career Arc</h1>
<p>Marketing &amp; communications professional · Energy transition · Perth, WA</p>
<p style="margin-top:0.2rem;font-size:0.82rem;color:var(--text-dim)">15+ years across 3 companies · 6 roles</p>
</div>
<!-- Present -->
<div class="present-banner">
<div class="label"><span class="dot"></span>Present</div>
<h2>Open to Opportunities</h2>
<p>Recently finished a Marketing Advisor role at Pacific Energy. Actively exploring corporate marketing, communications and digital strategy roles in Perth and across WA.</p>
</div>
<h2 class="section-heading">Career Progression</h2>
<!-- 1. Pacific Energy -->
<div class="role-card">
<div class="role-header">
<span class="role-title">Marketing Advisor</span>
<span class="role-date">Jun 2025 Jul 2026</span>
</div>
<div class="role-company">Pacific Energy · Kewdale, Perth WA</div>
<div class="role-summary">Corporate marketing, digital content, technical communications, major events and marketing AI strategy.</div>
<button class="expand-btn" onclick="toggleDetails(this)"><span class="arrow"></span> <span class="lb">Show achievements</span></button>
<div class="details">
<ul>
<li>Developed and rolled out a social media strategy and capability content series across LinkedIn and corporate channels</li>
<li>Defined Pacific Energy's marketing AI strategy and identified practical applications across content, digital workflows and operations</li>
<li>Led marketing collaboration on the corporate website, named Science and Sustainability Website of the Year at the 2026 Australian Web Awards</li>
<li>End-to-end marketing delivery for Australian Clean Energy Summit and Pilbara Summit — sponsorship activation, creative, content, logistics</li>
<li>Translated complex project information into executive comms covering battery storage, remote power, hybrid systems</li>
<li>Maintained brand voice and visual standards across digital, print, signage, social and event channels</li>
</ul>
<div class="tags">
<span>B2B Marketing</span><span>AI Strategy</span><span>Web Awards</span><span>Event Management</span><span>Corporate Comms</span>
</div>
</div>
</div>
<!-- 2. Horizon Power -->
<div class="role-card">
<div class="role-header">
<span class="role-title">Marketing Specialist</span>
<span class="role-date">2019 Sep 2024</span>
</div>
<div class="role-company">Horizon Power · Perth, WA</div>
<div class="role-summary">Integrated marketing, regulated communications, customer engagement and energy transition programs.</div>
<button class="expand-btn" onclick="toggleDetails(this)"><span class="arrow"></span> <span class="lb">Show achievements</span></button>
<div class="details">
<ul>
<li>Led integrated marketing and customer communication campaigns across digital, social, email, direct mail, television, print and community channels</li>
<li>Managed annual marketing budgets exceeding $2 million, using research and audience segmentation to prioritise investment</li>
<li>Led marketing for the WA EV Network — the state's electric vehicle charging infrastructure rollout</li>
<li>Supported launch of Smart Connect Solar and other distributed energy initiatives</li>
<li>Directed compliance-critical communications for government price changes, energy concessions and cost-of-living initiatives</li>
<li>Created the Bright Horizons STEM program, providing solar-powered education kits to remote schools</li>
</ul>
<div class="tags">
<span>Integrated Campaigns</span><span>$2M+ Budget</span><span>WA EV Network</span><span>Energy Transition</span><span>Regulatory Comms</span>
</div>
</div>
</div>
<!-- 3. Synergy: Energy Solutions Marketing Specialist -->
<div class="role-card">
<div class="role-header">
<span class="role-title">Energy Solutions Marketing Specialist</span>
<span class="role-date">2015 2018</span>
</div>
<div class="role-company">Synergy · Perth, WA</div>
<div class="role-summary">Commercial growth and customer experience across renewable energy products, digital channels and agency management.</div>
<button class="expand-btn" onclick="toggleDetails(this)"><span class="arrow"></span> <span class="lb">Show achievements</span></button>
<div class="details">
<ul>
<li>Led development of the SolarReturn proposition from research through launch, contributing to a 40% sales increase in year one</li>
<li>Managed three-plus creative, digital and media agencies, improving conversion rates by 35% through iterative optimisation</li>
<li>Mapped the end-to-end solar customer journey, reducing inquiry-to-sale timeframes by 20%</li>
<li>Converted renewable energy policy, rebates and feed-in tariffs into accessible customer communications across TV, radio, outdoor, social, email and SMS</li>
</ul>
<div class="tags">
<span>Product Launch</span><span>SolarReturn</span><span>Agency Management</span><span>Conversion Optimisation</span>
</div>
</div>
</div>
<!-- 4. Synergy: Business Segment Coordinator -->
<div class="role-card">
<div class="role-header">
<span class="role-title">Business Segment Coordinator</span>
<span class="role-date">2014 2015</span>
</div>
<div class="role-company">Synergy · Perth, WA</div>
<div class="role-summary">Financial and portfolio management, enterprise communications and cross-functional coordination.</div>
<button class="expand-btn" onclick="toggleDetails(this)"><span class="arrow"></span> <span class="lb">Show achievements</span></button>
<div class="details">
<ul>
<li>Managed Synergy's streetlighting portfolio and resolved $1.3 million in billing discrepancies through detailed contract and process reviews</li>
<li>Introduced stronger reconciliation controls and led cross-functional input into the Annual Review of Products and Pricing</li>
<li>Developed a company-wide communications framework across email, SMS and print for 1M+ customers</li>
</ul>
<div class="tags">
<span>Financial Management</span><span>Billing Resolution</span><span>Enterprise Comms</span>
</div>
</div>
</div>
<!-- 5. Synergy: Assistant Product Manager -->
<div class="role-card">
<div class="role-header">
<span class="role-title">Assistant Product Manager, Industrial &amp; Commercial</span>
<span class="role-date">2012 2014</span>
</div>
<div class="role-company">Synergy · Perth, WA</div>
<div class="role-summary">Product and sales development for commercial renewable energy products, digital sales platforms and training.</div>
<button class="expand-btn" onclick="toggleDetails(this)"><span class="arrow"></span> <span class="lb">Show achievements</span></button>
<div class="details">
<ul>
<li>Developed and launched the Synergy Sellback Program, enabling commercial customers to receive value from exported renewable energy</li>
<li>Created an online sales platform with pricing calculators and training material</li>
<li>Supported sales performance 150% above target through platform and training initiatives</li>
</ul>
<div class="tags">
<span>Product Development</span><span>Sellback Program</span><span>Digital Platform</span><span>Sales Enablement</span>
</div>
</div>
</div>
<!-- 6. Synergy: Billing Officer -->
<div class="role-card">
<div class="role-header">
<span class="role-title">Billing Officer</span>
<span class="role-date">2010 2012</span>
</div>
<div class="role-company">Synergy · Perth, WA</div>
<div class="role-summary">Customer billing, enquiry management, dispute resolution and data accuracy in a regulated energy retail environment.</div>
<button class="expand-btn" onclick="toggleDetails(this)"><span class="arrow"></span> <span class="lb">Show achievements</span></button>
<div class="details">
<ul>
<li>Managed billing enquiries, account corrections and dispute resolution for residential and small business customers</li>
<li>Ensured data accuracy and compliance in a regulated energy retail environment</li>
</ul>
<div class="tags">
<span>Customer Service</span><span>Billing Operations</span><span>Dispute Resolution</span>
</div>
</div>
</div>
<h2 class="section-heading">Education</h2>
<div class="edu-grid">
<div class="edu-card">
<h3>University of Western Australia</h3>
<div class="detail">Bachelor of Commerce — Marketing &amp; Management</div>
<div class="year">2005 2010</div>
</div>
<div class="edu-card">
<h3>University of Western Australia</h3>
<div class="detail">Bachelor of Arts — History &amp; Politics</div>
<div class="year">2005 2010</div>
</div>
</div>
<h2 class="section-heading">Professional Development</h2>
<div class="skills-grid">
<span class="skill-tag">IAP2 Essentials of Engagement (2023)</span>
<span class="skill-tag">AIM Time Management (2024)</span>
<span class="skill-tag">AI in Marketing — RMIT (2019)</span>
<span class="skill-tag">ADMA WFH Marketing Masterclass (2020)</span>
</div>
<h2 class="section-heading">Core Capabilities</h2>
<div class="skills-grid">
<span class="skill-tag">Marketing Strategy</span>
<span class="skill-tag">Integrated Campaigns</span>
<span class="skill-tag">Corporate Communications</span>
<span class="skill-tag">Digital &amp; AI Marketing</span>
<span class="skill-tag">Brand Management</span>
<span class="skill-tag">Stakeholder Engagement</span>
<span class="skill-tag">Event Management</span>
<span class="skill-tag">Budget Management</span>
<span class="skill-tag">Social Media Strategy</span>
<span class="skill-tag">Energy Transition</span>
</div>
<div class="footer">
<p>Anthony Martin · <a href="https://anthony.martinwa.org" target="_blank">anthony.martinwa.org</a></p>
<p style="margin-top:0.3rem;color:var(--text-dim)">Built by the Rhino in the Green Jacket · Jul 2026</p>
</div>
</div>
<script>
function toggleDetails(btn){
const card=btn.parentElement;
const details=card.querySelector('.details');
const lbl=btn.querySelector('.lb');
const isOpen=details.classList.contains('open');
details.classList.toggle('open');
btn.classList.toggle('open');
if(lbl) lbl.textContent=isOpen?'Show achievements':'Hide achievements';
}
// Keyboard support
document.querySelectorAll('.expand-btn').forEach(function(btn){
btn.setAttribute('tabindex','0');
btn.addEventListener('keydown',function(e){
if(e.key==='Enter'||e.key===' '){e.preventDefault();toggleDetails(this);}
});
});
</script>
</body>
</html>