url/resume-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
49cab62d10e722688c1a91acefe824a20064136e
resume-site/index.html
T

582 lines
18 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paul Niland - CV</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background: #f5f6fa;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.card {
background: #ffffff;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
margin-bottom: 30px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.header {
background: #2c3e50;
color: white;
padding: 40px;
text-align: center;
position: relative;
overflow: hidden;
}
.header::before {
display: none;
}
.header-content {
position: relative;
z-index: 1;
}
.name {
font-size: 3rem;
font-weight: 700;
margin-bottom: 10px;
}
.chinese-name {
font-size: 1.2rem;
opacity: 0.9;
margin-bottom: 20px;
}
.contact-info {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
margin-top: 20px;
}
.contact-item {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
}
.tagline {
font-size: 1.1rem;
font-style: italic;
margin-top: 15px;
opacity: 0.9;
}
.section {
padding: 30px;
}
.section-title {
font-size: 2rem;
color: #2c3e50;
margin-bottom: 25px;
text-align: center;
position: relative;
padding-bottom: 15px;
cursor: pointer;
user-select: none;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.section-title:hover {
color: #667eea;
transform: translateY(-2px);
}
.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: #667eea;
border-radius: 2px;
}
.collapse-icon {
font-size: 1.2rem;
transition: transform 0.3s ease;
color: #667eea;
}
.collapsed .collapse-icon {
transform: rotate(-90deg);
}
.section-content {
max-height: 2000px;
overflow: hidden;
transition: max-height 0.5s ease, opacity 0.3s ease, padding 0.3s ease;
opacity: 1;
}
.collapsed .section-content {
max-height: 0;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
}
.collapse-all-container {
text-align: center;
margin-bottom: 20px;
}
.collapse-all-btn {
background: #667eea;
color: white;
border: none;
padding: 12px 24px;
border-radius: 25px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}
.collapse-all-btn:hover {
background: #5a67d8;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.experience-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 25px;
margin-bottom: 30px;
}
.experience-item {
background: #f8f9fa;
border-radius: 12px;
padding: 25px;
border-left: 4px solid #667eea;
transition: all 0.3s ease;
}
.experience-item:hover {
transform: translateX(5px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.15);
}
.job-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
flex-wrap: wrap;
gap: 10px;
}
.company {
font-weight: 700;
font-size: 1.2rem;
color: #2c3e50;
}
.duration {
background: #667eea;
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
.position {
font-size: 1.1rem;
color: #495057;
margin-bottom: 12px;
font-weight: 600;
}
.responsibilities {
color: #6c757d;
line-height: 1.7;
}
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
margin-top: 20px;
}
.skill-item {
background: #667eea;
color: white;
padding: 12px 18px;
border-radius: 25px;
text-align: center;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
cursor: pointer;
}
.skill-item:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.intro-text {
background: #f8f9fa;
padding: 25px;
border-radius: 12px;
font-size: 1.1rem;
line-height: 1.7;
color: #495057;
text-align: justify;
margin-bottom: 30px;
border-left: 4px solid #28a745;
}
.region-header {
background: #28a745;
color: white;
padding: 15px 25px;
border-radius: 8px;
margin: 25px 0 15px 0;
font-size: 1.3rem;
font-weight: 600;
text-align: center;
}
.teaching-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.teaching-item {
background: #fff3cd;
border-radius: 12px;
padding: 20px;
border-left: 4px solid #ffc107;
}
.school-name {
font-weight: 700;
font-size: 1.1rem;
color: #856404;
margin-bottom: 8px;
}
.teaching-details {
color: #6c5b00;
font-size: 0.95rem;
line-height: 1.6;
}
@media (max-width: 768px) {
.container {
padding: 10px;
}
.name {
font-size: 2.2rem;
}
.contact-info {
flex-direction: column;
gap: 15px;
}
.section {
padding: 20px;
}
.experience-grid {
grid-template-columns: 1fr;
}
.job-header {
flex-direction: column;
align-items: flex-start;
}
}
.fade-in {
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.8s ease forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
</style>
</head>
<body>
<header>
<h1>Paul Niland</h1>
<p><a href="mailto:paul@niland.tw">Contact: paul@niland</a></p>
<a href="assets/Resume-2023.pdf" download>📄 Download CV</a>
</header>
<section id="about">
<h2>About Me</h2>
<p>Experienced professional across communications, analysis, project management, and teaching. Adaptable and international in scope.</p>
</section>
<details>
<summary>🌍 Experience</summary>
<div class="filters">
<button onclick="filterExp('all')">All</button>
<button onclick="filterExp('tech')">Tech</button>
<button onclick="filterExp('teaching')">Teaching</button>
<button onclick="filterExp('gov')">Government</button>
</div>
<!-- Skills -->
<div class="card fade-in">
<div class="section">
<h2 class="section-title" onclick="toggleSection(this)">
Core Skills & Competencies
<span class="collapse-icon">▼</span>
</h2>
<div class="section-content">
<div class="skills-grid">
<div class="skill-item">Business Analysis</div>
<div class="skill-item">Change Management</div>
<div class="skill-item">Compliance</div>
<div class="skill-item">ISO 27001</div>
<div class="skill-item">Mentoring</div>
<div class="skill-item">Migration</div>
<div class="skill-item">Performance Analysis</div>
<div class="skill-item">Process Audit</div>
<div class="skill-item">Project Management</div>
<div class="skill-item">Project Planning</div>
<div class="skill-item">Reporting</div>
<div class="skill-item">Risk Assessment</div>
<div class="skill-item">Service Level Agreements</div>
<div class="skill-item">Class Preparation</div>
<div class="skill-item">Activity Planning </div>
</div>
</div>
</div>
</div>
<script>
// Collapsible sections functionality
function toggleSection(titleElement) {
const section = titleElement.closest('.section');
section.classList.toggle('collapsed');
}
function toggleAllSections() {
const sections = document.querySelectorAll('.section');
const btnText = document.getElementById('collapse-btn-text');
const allCollapsed = document.querySelectorAll('.section.collapsed').length === sections.length - 1; // -1 because header isn't collapsible
sections.forEach(section => {
// Skip the header section
if (!section.closest('.header')) {
if (allCollapsed) {
section.classList.remove('collapsed');
} else {
section.classList.add('collapsed');
}
}
});
btnText.textContent = allCollapsed ? 'Collapse All Sections' : 'Expand All Sections';
}
// Add smooth scrolling and enhanced animations
document.addEventListener('DOMContentLoaded', function() {
// Intersection Observer for scroll animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.animationPlayState = 'running';
}
});
}, observerOptions);
// Observe all cards
document.querySelectorAll('.card').forEach(card => {
observer.observe(card);
});
// Add hover effects to experience items
document.querySelectorAll('.experience-item, .teaching-item').forEach(item => {
item.addEventListener('mouseenter', function() {
this.style.transform = 'translateX(5px) scale(1.02)';
});
item.addEventListener('mouseleave', function() {
this.style.transform = 'translateX(0) scale(1)';
});
});
// Add click animation to skill items
document.querySelectorAll('.skill-item').forEach(skill => {
skill.addEventListener('click', function() {
this.style.transform = 'scale(0.95)';
setTimeout(() => {
this.style.transform = 'scale(1.05)';
}, 100);
setTimeout(() => {
this.style.transform = 'scale(1)';
}, 200);
});
});
});
</script>
<!-- Contact Section -->
<div class="card fade-in">
<div class="section">
<h2 class="section-title" onclick="toggleSection(this)">
📬 Get in Touch
<span class="collapse-icon">▼</span>
</h2>
<div class="section-content">
<form action="mailto:paul@niland.tw" method="POST" enctype="text/plain">
<label for="name">Name</label>
<input type="text" id="name" name="name" required style="width:100%; padding:10px; margin-bottom:10px;">
<label for="email">Email</label>
<input type="email" id="email" name="email" required style="width:100%; padding:10px; margin-bottom:10px;">
<label for="message">Message</label>
<textarea id="message" name="message" rows="4" required style="width:100%; padding:10px; margin-bottom:10px;"></textarea>
<!-- Honeypot for spam protection -->
<div style="display:none;">
<label for="company">Company</label>
<input type="text" id="company" name="company">
</div>
<button type="submit" style="background:#667eea; color:white; padding:10px 20px; border:none; border-radius:20px; cursor:pointer;">
Send Message
</button>
</form>
</div>
</div>
</div>
<script>
// Collapsible sections functionality
function toggleSection(titleElement) {
const section = titleElement.closest('.section');
section.classList.toggle('collapsed');
}
function toggleAllSections() {
const sections = document.querySelectorAll('.section');
const btnText = document.getElementById('collapse-btn-text');
const allCollapsed = document.querySelectorAll('.section.collapsed').length === sections.length - 1; // -1 because header isn't collapsible
sections.forEach(section => {
// Skip the header section
if (!section.closest('.header')) {
if (allCollapsed) {
section.classList.remove('collapsed');
} else {
section.classList.add('collapsed');
}
}
});
btnText.textContent = allCollapsed ? 'Collapse All Sections' : 'Expand All Sections';
}
// Add smooth scrolling and enhanced animations
document.addEventListener('DOMContentLoaded', function() {
// Intersection Observer for scroll animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.animationPlayState = 'running';
}
});
}, observerOptions);
// Observe all cards
document.querySelectorAll('.card').forEach(card => {
observer.observe(card);
});
// Add hover effects to experience items
document.querySelectorAll('.experience-item, .teaching-item').forEach(item => {
item.addEventListener('mouseenter', function() {
this.style.transform = 'translateX(5px) scale(1.02)';
});
item.addEventListener('mouseleave', function() {
this.style.transform = 'translateX(0) scale(1)';
});
});
// Add click animation to skill items
document.querySelectorAll('.skill-item').forEach(skill => {
skill.addEventListener('click', function() {
this.style.transform = 'scale(0.95)';
setTimeout(() => {
this.style.transform = 'scale(1.05)';
}, 100);
setTimeout(() => {
this.style.transform = 'scale(1)';
}, 200);
});
});
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink