Ryan Schuchard — Climate Solutions
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
“`
:root {
–bg-primary: #0f1419;
–bg-secondary: #1a1f2e;
–text-primary: #e8eaed;
–text-secondary: #9aa0a6;
–accent: #4a9eff;
–accent-hover: #6bb0ff;
}
/* Theme variations – uncomment one to try it */
/*
[data-theme=”warm”] {
–bg-primary: #1a1612;
–bg-secondary: #2a241f;
–text-primary: #f4f1ea;
–text-secondary: #b8b0a3;
–accent: #d4a574;
–accent-hover: #e0b687;
}
[data-theme=”forest”] {
–bg-primary: #0d1b1e;
–bg-secondary: #1a2f33;
–text-primary: #e8f4f0;
–text-secondary: #8fa8a3;
–accent: #5fb3a1;
–accent-hover: #7ac4b3;
}
[data-theme=”purple”] {
–bg-primary: #15111b;
–bg-secondary: #251e2f;
–text-primary: #ede8f4;
–text-secondary: #a89bb3;
–accent: #9d7bff;
–accent-hover: #b496ff;
}
*/
html {
scroll-behavior: smooth;
}
body {
font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background-color: var(–bg-primary);
color: var(–text-primary);
line-height: 1.6;
}
/* Header */
header {
position: fixed;
top: 0;
width: 100%;
background-color: rgba(15, 20, 25, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
nav {
max-width: 1200px;
margin: 0 auto;
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.2rem;
font-weight: 600;
color: var(–text-primary);
text-decoration: none;
letter-spacing: -0.02em;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
color: var(–text-secondary);
text-decoration: none;
font-size: 0.95rem;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(–accent);
}
.theme-toggle {
background: none;
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(–text-secondary);
padding: 0.5rem 1rem;
border-radius: 6px;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.3s;
}
.theme-toggle:hover {
border-color: var(–accent);
color: var(–accent);
}
/* Sections */
section {
min-height: 100vh;
padding: 8rem 2rem 4rem;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 800px;
width: 100%;
}
/* Hero Section */
#hero {
background-color: var(–bg-primary);
}
h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1rem;
letter-spacing: -0.03em;
line-height: 1.1;
}
.pronunciation {
color: var(–text-secondary);
font-size: 1.1rem;
font-style: italic;
margin-bottom: 2rem;
display: block;
}
.tagline {
font-size: 1.5rem;
color: var(–text-secondary);
margin-bottom: 3rem;
line-height: 1.5;
}
.cta-button {
display: inline-block;
padding: 1rem 2rem;
background-color: var(–accent);
color: var(–bg-primary);
text-decoration: none;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s;
border: none;
font-size: 1rem;
}
.cta-button:hover {
background-color: var(–accent-hover);
transform: translateY(-2px);
}
.scroll-indicator {
margin-top: 4rem;
color: var(–text-secondary);
font-size: 0.9rem;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(10px); }
}
/* Work Section */
#work {
background-color: var(–bg-secondary);
}
h2 {
font-size: 2.5rem;
margin-bottom: 3rem;
letter-spacing: -0.02em;
}
.work-item {
margin-bottom: 3rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.work-item:last-child {
border-bottom: none;
}
h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(–accent);
}
p {
color: var(–text-secondary);
line-height: 1.8;
margin-bottom: 1rem;
}
/* About Section */
#about {
background-color: var(–bg-primary);
}
.about-content {
display: grid;
gap: 2rem;
}
/* Contact Section */
#contact {
background-color: var(–bg-secondary);
}
.contact-links {
display: flex;
gap: 1.5rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.contact-link {
color: var(–accent);
text-decoration: none;
font-size: 1.1rem;
transition: color 0.3s;
}
.contact-link:hover {
color: var(–accent-hover);
text-decoration: underline;
}
footer {
text-align: center;
padding: 2rem;
color: var(–text-secondary);
font-size: 0.9rem;
background-color: var(–bg-primary);
}
/* Mobile */
@media (max-width: 768px) {
nav {
flex-direction: column;
gap: 1rem;
}
.nav-links {
gap: 1rem;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
.tagline {
font-size: 1.2rem;
}
section {
padding: 6rem 1.5rem 3rem;
}
}
“`
“`
Ryan Schuchard
(pronounced “shoe-hard”)
Policy and programs leader developing climate, wellbeing, and transportation solutions.
// My Work
Climate Solutions
My focus is climate initiatives that improve well-being, a category that can deliver the majority of deep greenhouse gas emissions reductions plus resilience and a just transition—while also making life better anyway.
Systems Change
I work on large-scale interventions that address root causes and create systemic transformation in how we approach climate action and sustainable development.
Collaboration
Building partnerships across sectors to scale solutions that matter most for people and planet.
// About Me
I’m dedicated to developing and scaling climate solutions that prioritize human well-being alongside environmental impact. This approach recognizes that the most sustainable solutions are those that tangibly improve people’s lives.
My work focuses on identifying and advancing interventions that can deliver significant emissions reductions while simultaneously enhancing quality of life, building community resilience, and supporting a just transition to a sustainable future.
I believe the most powerful climate solutions are those that people want because they make life better, not just because they’re necessary.
const themes = [‘default’, ‘warm’, ‘forest’, ‘purple’];
let currentTheme = 0;
function cycleTheme() {
currentTheme = (currentTheme + 1) % themes.length;
if (currentTheme === 0) {
document.documentElement.removeAttribute(‘data-theme’);
} else {
document.documentElement.setAttribute(‘data-theme’, themes[currentTheme]);
}
}
// Smooth scroll with offset for fixed header
document.querySelectorAll(‘a[href^=”#”]’).forEach(anchor => {
anchor.addEventListener(‘click’, function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute(‘href’));
if (target) {
window.scrollTo({
top: target.offsetTop – 80,
behavior: ‘smooth’
});
}
});
});
“`
