const btn = document.getElementById('menuBtn');

const drawer = document.getElementById('mobileMenu');

btn?.addEventListener('click', () => {

const open = drawer.classList.toggle('open');

btn.setAttribute('aria-expanded', String(open));

});

drawer?.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>{

drawer.classList.remove('open');

btn.setAttribute('aria-expanded','false');

}));

// Fill current year

const yearEl = document.getElementById('year');

if(yearEl){ yearEl.textContent = new Date().getFullYear(); }

// Auto-sync projects with GitHub (client-side)

// Configure your username via <meta name="gh-username" content="your-github">

const meta = document.querySelector('meta[name="gh-username"]');

const username = meta?.content?.trim();

const grid = document.getElementById('projectGrid');

async function fetchRepos(user){

const resp = await fetch(`https://api.github.com/users/${user}/repos?per_page=100&sort=updated`);

if(!resp.ok) throw new Error('GitHub API error');

return await resp.json();

}

async function fetchPins(){

try{

const r = await fetch('/pins.json', {cache:'no-store'});

if(r.ok){ return await r.json(); }

}catch(e){}

return [];

}

function prioritizeRepos(repos, pins){

const byName = new Map(repos.map(r=>[r.name.toLowerCase(), r]));

const chosen = [];

// 1) add pinned in order if exist

pins.forEach(name => {

const r = byName.get(String(name).toLowerCase());

if(r) chosen.push(r);

});

// 2) add remaining, sorted by stargazers then recent update

const rest = repos

.filter(r => !chosen.includes(r) && !r.fork && !r.archived)

.sort((a,b)=> (b.stargazers_count - a.stargazers_count) || (new Date(b.pushed_at) - new Date(a.pushed_at)));

return chosen.concat(rest);

}

function createCard(repo){

const card = document.createElement('article');

card.className = 'card project';

const title = document.createElement('h3');

title.textContent = repo.name;

const desc = document.createElement('p');

desc.className = 'muted';

desc.textContent = repo.description || 'No description provided.';

const chips = document.createElement('div');

chips.className = 'chips';

// Try to surface top languages and stars

if(repo.language){

const c = document.createElement('span'); c.className='chip'; c.textContent = repo.language; chips.appendChild(c);

}

const s = document.createElement('span'); s.className='chip'; s.textContent = `★ ${repo.stargazers_count}`; chips.appendChild(s);

const u = document.createElement('span'); u.className='chip'; u.textContent = new Date(repo.pushed_at).toISOString().slice(0,10); chips.appendChild(u);

const links = document.createElement('div');

links.className = 'links';

const repoA = document.createElement('a'); repoA.href = repo.html_url; repoA.target = '_blank'; repoA.rel = 'noopener'; repoA.className = 'btn'; repoA.textContent = 'Repo'; links.appendChild(repoA);

if(repo.homepage){ const demo = document.createElement('a'); demo.href = repo.homepage; demo.target='_blank'; demo.rel='noopener'; demo.className='btn'; demo.textContent='Demo'; links.appendChild(demo); }

card.append(title, desc, chips, links);

return card;

}

async function init(){

if(!grid || !username) return;

try{

const [repos, pins] = await Promise.all([fetchRepos(username), fetchPins()]);

const ordered = prioritizeRepos(repos, pins);

const frag = document.createDocumentFragment();

ordered.slice(0, 12).forEach(r => frag.appendChild(createCard(r)));

grid.textContent = '';

grid.appendChild(frag);

}catch(err){

grid.innerHTML = '<p class="muted">Unable to load projects from GitHub right now.</p>';

console.error(err);

}

}

init();

:root{

--bg: #0e1116;

--surface: #121725;

--surface-2: #131a2a;

--text: #e8eef5;

--muted: #9aa6b2;

--accent: #6aa9ff;

--accent-2: #67d1c4;

--border: #24314a;

--radius: 18px;

--shadow: 0 10px 30px rgba(0,0,0,.35);

}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{margin:0;background:var(--bg);color:var(--text);font:16px/1.7 ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif}

.container{max-width:1000px;margin-inline:auto;padding:20px}

header{position:sticky;top:0;background:linear-gradient(to bottom, rgba(14,17,22,.92), rgba(14,17,22,.65) 60%, transparent);backdrop-filter:saturate(1.1) blur(8px);z-index:20}

.nav{display:flex;align-items:center;justify-content:space-between;gap:12px}

.brand{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.2px}

.logo{width:36px;height:36px;border-radius:50%;background:radial-gradient(85% 85% at 25% 20%, var(--accent-2), var(--accent));box-shadow:0 0 30px rgba(103,209,196,.18)}

.nav-links{display:none;gap:6px;align-items:center}

.nav-links a{color:var(--muted);text-decoration:none;padding:10px 12px;border-radius:12px}

.nav-links a:focus,.nav-links a:hover{background:#0f1422;color:#d9e4f2}

.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:#0f1422;color:#cfe0f3}

@media(min-width:820px){

.nav-links{display:flex}

.menu-btn{display:none}

}

.drawer{position:fixed;inset:auto 0 0 0;transform:translateY(105%);transition:transform .22s ease; background:rgba(15,20,34,.96);backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:12px 16px}

.drawer.open{transform:translateY(0)}

.drawer a{display:block;padding:12px;border-radius:12px;color:#d9e4f2;text-decoration:none}

.drawer a+a{margin-top:6px}

@media(min-width:820px){.drawer{display:none}}

.grid{display:grid;gap:16px}

.cols-2{grid-template-columns:1fr}

.cols-3{grid-template-columns:1fr}

@media(min-width:700px){.cols-2{grid-template-columns:1fr 1fr}}

@media(min-width:940px){.cols-3{grid-template-columns:repeat(3,1fr)}}

section{padding-block:36px}

.card{background:linear-gradient(180deg,var(--surface-2),#0f1626);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}

.chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#0f1626;border:1px solid var(--border);font-size:13px;color:#cdd7e6}

.chips{display:flex;gap:8px;flex-wrap:wrap}

h1{font-size:clamp(28px,4.2vw,44px);line-height:1.15;margin:0}

h2{font-size:clamp(20px,2.6vw,28px);margin:0 0 10px}

h3{font-size:18px;margin:0}

p{margin:0}

.muted{color:var(--muted)}

.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;text-decoration:none;border:1px solid var(--border);background:#11192a;color:#e8eef5;box-shadow:var(--shadow)}

.btn.primary{background:linear-gradient(180deg,var(--accent),#528ee2)}

.project{display:flex;flex-direction:column;gap:10px}

.project .links{display:flex;gap:10px;flex-wrap:wrap}

.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:22px 0}

.footer{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;color:#9fb0c6;padding-bottom:32px}

.social{display:flex;gap:10px}

.social a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#c7d2df;border:1px solid var(--border);border-radius:999px;padding:8px 12px;background:#0f1626}

<html lang="en">

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>Certifications · Erik Aranda‑Wikman</title>

<meta name="description" content="Personal portfolio of Erik Aranda‑Wikman" />

<meta property="og:title" content="Certifications · Erik Aranda‑Wikman" />

<meta property="og:description" content="Personal portfolio" />

<meta property="og:type" content="website" />

<meta name="color-scheme" content="dark" />

<meta name="gh-username" content="your-github" />

<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='%230e1116'/%3E%3Ctext x='50' y='58' font-size='56' text-anchor='middle' fill='%236aa9ff' font-family='Arial,Helvetica,sans-serif'%3EE%3C/text%3E%3C/svg%3E" />

<link rel="stylesheet" href="assets/style.css" />

<header>

<div class="container nav">

<div class="brand">

<div class="logo" aria-hidden="true"></div>

<span>Erik Aranda‑Wikman</span>

</div>

<nav class="nav-links" aria-label="Primary">

<a href="index.html">Projects</a>

<a href="experience.html">Experience</a>

<a href="education.html">Education</a>

<a href="skills.html">Skills</a>

<a href="certifications.html" style="color:#d9e4f2;background:#0f1422">Certifications</a>

<a href="publications.html">Publications</a>

<a href="#contact">Contact</a>

</nav>

<button class="menu-btn" id="menuBtn" aria-expanded="false" aria-controls="mobileMenu" aria-label="Open menu">☰</button>

</div>

<div class="drawer" id="mobileMenu" role="dialog" aria-label="Mobile Menu">

<a href="index.html">Projects</a>

<a href="experience.html">Experience</a>

<a href="education.html">Education</a>

<a href="skills.html">Skills</a>

<a href="certifications.html">Certifications</a>

<a href="publications.html">Publications</a>

<a href="#contact">Contact</a>

</div>

</header>

<main class="container">

<section id="certifications">

<h2>Certifications</h2>

<div class="grid cols-2" style="margin-top:10px">

<article class="card">

<h3>Certification Name</h3>

<p class="muted">Issuer · Year · Credential ID</p>

</article>

<article class="card">

<h3>Another Certification</h3>

<p class="muted">Issuer · Year</p>

</article>

</div>

</section>

<section id="contact">

<div class="divider" role="separator" aria-hidden="true"></div>

<h2>Contact</h2>

<p class="muted">Open to interesting work and collaborations.</p>

<div style="display:flex;gap:10px;margin-top:12px;flex-wrap:wrap">

<a class="btn" href="mailto:hello@yourdomain.com">Email me</a>

<a class="btn" href="https://www.linkedin.com/in/your-handle" target="_blank" rel="noopener">LinkedIn</a>

<a class="btn" href="https://x.com/your-handle" target="_blank" rel="noopener">Twitter/X</a>

</div>

</section>

<footer class="footer">

<div class="social">

<a href="https://github.com/your-github" target="_blank" rel="noopener" aria-label="GitHub">GitHub</a>

<a href="https://linkedin.com/in/your-handle" target="_blank" rel="noopener" aria-label="LinkedIn">LinkedIn</a>

<a href="https://x.com/your-handle" target="_blank" rel="noopener" aria-label="Twitter">X</a>

</div>

<small>© <span id="year"></span> Erik Aranda‑Wikman. Dark‑mode, mobile‑first.</small>

</footer>

</main>

<script src="assets/app.js"></script>

<html lang="en">

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>Education · Erik Aranda‑Wikman</title>

<meta name="description" content="Personal portfolio of Erik Aranda‑Wikman" />

<meta property="og:title" content="Education · Erik Aranda‑Wikman" />

<meta property="og:description" content="Personal portfolio" />

<meta property="og:type" content="website" />

<meta name="color-scheme" content="dark" />

<meta name="gh-username" content="your-github" />

<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='%230e1116'/%3E%3Ctext x='50' y='58' font-size='56' text-anchor='middle' fill='%236aa9ff' font-family='Arial,Helvetica,sans-serif'%3EE%3C/text%3E%3C/svg%3E" />

<link rel="stylesheet" href="assets/style.css" />

<header>

<div class="container nav">

<div class="brand">

<div class="logo" aria-hidden="true"></div>

<span>Erik Aranda‑Wikman</span>

</div>

<nav class="nav-links" aria-label="Primary">

<a href="index.html">Projects</a>

<a href="experience.html">Experience</a>

<a href="education.html" style="color:#d9e4f2;background:#0f1422">Education</a>

<a href="skills.html">Skills</a>

<a href="certifications.html">Certifications</a>

<a href="publications.html">Publications</a>

<a href="#contact">Contact</a>

</nav>

<button class="menu-btn" id="menuBtn" aria-expanded="false" aria-controls="mobileMenu" aria-label="Open menu">☰</button>

</div>

<div class="drawer" id="mobileMenu" role="dialog" aria-label="Mobile Menu">

<a href="index.html">Projects</a>

<a href="experience.html">Experience</a>

<a href="education.html">Education</a>

<a href="skills.html">Skills</a>

<a href="certifications.html">Certifications</a>

<a href="publications.html">Publications</a>

<a href="#contact">Contact</a>

</div>

</header>

<main class="container">

<section id="education">

<h2>Education</h2>

<div class="grid cols-2" style="margin-top:10px">

<article class="card">

<h3>MPA — University of San Francisco</h3>

<p class="muted">Year · Public Administration</p>

</article>

<article class="card">

<h3>BA — Sonoma State University</h3>

<p class="muted">Year · Criminal Justice & Criminology</p>

</article>

</div>

</section>

<section id="contact">

<div class="divider" role="separator" aria-hidden="true"></div>

<h2>Contact</h2>

<p class="muted">Open to interesting work and collaborations.</p>

<div style="display:flex;gap:10px;margin-top:12px;flex-wrap:wrap">

<a class="btn" href="mailto:hello@yourdomain.com">Email me</a>

<a class="btn" href="https://www.linkedin.com/in/your-handle" target="_blank" rel="noopener">LinkedIn</a>

<a class="btn" href="https://x.com/your-handle" target="_blank" rel="noopener">Twitter/X</a>

</div>

</section>

<footer class="footer">

<div class="social">

<a href="https://github.com/your-github" target="_blank" rel="noopener" aria-label="GitHub">GitHub</a>

<a href="https://linkedin.com/in/your-handle" target="_blank" rel="noopener" aria-label="LinkedIn">LinkedIn</a>

<a href="https://x.com/your-handle" target="_blank" rel="noopener" aria-label="Twitter">X</a>

</div>

<small>© <span id="year"></span> Erik Aranda‑Wikman. Dark‑mode, mobile‑first.</small>

</footer>

</main>

<script src="assets/app.js"></script>