Galleria: hahmokuvaukset ja ehdotetut roolit kaikille 21 avatarille
Jokaiselle avatarille lisätty: - Ehdotettu rooli (Arkkitehti, CI/CD, UI/UX, Tech Lead, SRE jne.) - Persoonakuvaus joka kuvaa hahmon luonnetta ja erikoisosaamista Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -5045,37 +5045,38 @@ uv run python crew.py "FastAPI + SQLite CRUD API"
|
||||
// ── Hahmogalleria ──
|
||||
(function renderGallery() {
|
||||
const ALL_AVATARS = [
|
||||
{ file: 'kipina_notext.png', name: 'Salamanteri', role: 'Koodari' },
|
||||
{ file: 'karhunpentu.png', name: 'Karhunpentu', role: 'Manageri' },
|
||||
{ file: 'kettu_notext.png', name: 'Kettu', role: 'Asiakas' },
|
||||
{ file: 'pesukarhu_notext.png', name: 'Pesukarhu', role: 'Data' },
|
||||
{ file: 'susi_notext.png', name: 'Pikkususi', role: 'QA' },
|
||||
{ file: 'laiskiainen_notext.png', name: 'Laiskiainen', role: 'DevOps' },
|
||||
{ file: 'aikuinen_susi.png', name: 'Aikuinen susi', role: 'Tarkkailija' },
|
||||
{ file: 'gecko_notext.png', name: 'Gecko', role: 'Tofuist / IaC' },
|
||||
{ file: 'bear.png', name: 'Karhu', role: '' },
|
||||
{ file: 'beaver.png', name: 'Majava', role: '' },
|
||||
{ file: 'chameleon.png', name: 'Kameleontti', role: '' },
|
||||
{ file: 'elephant.png', name: 'Norsu', role: '' },
|
||||
{ file: 'gecko.png', name: 'Gecko v2', role: '' },
|
||||
{ file: 'lion.png', name: 'Leijona', role: '' },
|
||||
{ file: 'mantis.png', name: 'Rukoilijasirkka', role: '' },
|
||||
{ file: 'owl.png', name: 'Pöllö', role: '' },
|
||||
{ file: 'penguin.png', name: 'Pingviini', role: '' },
|
||||
{ file: 'serpent.png', name: 'Kyy', role: 'DevSecOps' },
|
||||
{ file: 'spider.png', name: 'Hämähäkki', role: '' },
|
||||
{ file: 'tortoise.png', name: 'Kilpikonna', role: '' },
|
||||
{ file: 'walrus.png', name: 'Mursu', role: '' },
|
||||
{ file: 'kipina_notext.png', name: 'Salamanteri', role: 'Koodari', desc: 'Kipinä-tiimin sydän. Tulinen koodari joka liikkuu ketterästi koodikantojen halki ja sytyttää projektit käyntiin.' },
|
||||
{ file: 'karhunpentu.png', name: 'Karhunpentu', role: 'Manageri', desc: 'Utelias ja päättäväinen tiiminvetäjä. Pilkkoo isot projektit hallittaviksi tehtäviksi ja pitää tiimin kasassa.' },
|
||||
{ file: 'kettu_notext.png', name: 'Kettu', role: 'Asiakas', desc: 'Ovela tuoteomistaja joka tietää mitä haluaa. Määrittelee vaatimukset ja priorisoi ominaisuudet.' },
|
||||
{ file: 'pesukarhu_notext.png', name: 'Pesukarhu', role: 'Data', desc: 'Näppäräsorminen tietokantaguru. Pesee datan puhtaaksi, suunnittelee skeemat ja optimoi kyselyt.' },
|
||||
{ file: 'susi_notext.png', name: 'Pikkususi', role: 'QA', desc: 'Tarkkasilmäinen laadunvartija. Haistaa bugit kaukaa ja kirjoittaa testit jotka pitävät koodin kurissa.' },
|
||||
{ file: 'laiskiainen_notext.png', name: 'Laiskiainen', role: 'DevOps', desc: 'Rauhallinen automaatioasiantuntija. Automatisoi kaiken ettei kenenkään tarvitse tehdä turhaa käsityötä.' },
|
||||
{ file: 'aikuinen_susi.png', name: 'Aikuinen susi', role: 'Tarkkailija', desc: 'Kokenut valvoja joka näkee metsän puilta. Seuraa kokonaisuutta ja varoittaa riskeistä ennen kuin ne realisoituvat.' },
|
||||
{ file: 'gecko_notext.png', name: 'Gecko', role: 'IaC / Infra', desc: 'Piirilevylisko joka kiipeää infrastruktuurin joka tasolle. OpenTofu, Terraform ja pilvi-arkkitehtuuri ovat sen reviiriä.' },
|
||||
{ file: 'bear.png', name: 'Karhu', role: 'Arkkitehti', desc: 'Voimakas järjestelmäarkkitehti palvelinräkit selässään. Suunnittelee kantavat rakenteet joiden päälle koko projekti nojaa.' },
|
||||
{ file: 'beaver.png', name: 'Majava', role: 'CI/CD', desc: 'Ahkera rakentaja CI/CD-työkalut käsissään. Rakentaa putkistot ja automaatiot jotka pitävät koodin virtaamassa tuotantoon.' },
|
||||
{ file: 'chameleon.png', name: 'Kameleontti', role: 'UI/UX', desc: 'Värejä vaihtava muotoilija UI-elementtien ympäröimänä. Sopeutuu jokaiseen designjärjestelmään ja tekee käyttöliittymistä kauniita.' },
|
||||
{ file: 'elephant.png', name: 'Norsu', role: 'Tietokannat', desc: 'Piirilevykuvioinen muistimestari joka ei unohda mitään. Tietokantojen skaalaus ja datan eheys ovat sen erikoisalaa.' },
|
||||
{ file: 'gecko.png', name: 'Gecko v2', role: 'IaC / Infra', desc: 'Vaihtoehtoinen infrastruktuurilisko. Sama IaC-osaaminen, eri visuaalinen tyyli.' },
|
||||
{ file: 'lion.png', name: 'Leijona', role: 'Tech Lead', desc: 'Majesteettinen tekninen johtaja joka inspiroi tiimiä. Tekee arkkitehtuuripäätökset ja varmistaa teknisen vision.' },
|
||||
{ file: 'mantis.png', name: 'Rukoilijasirkka', role: 'Code Review', desc: 'Tarkka ja kärsivällinen koodiarvioija. Odottaa hiljaa ja iskee kun näkee bugin — yksikään virhe ei pääse läpi.' },
|
||||
{ file: 'owl.png', name: 'Pöllö', role: 'Analyytikko', desc: 'Viisas yötyöläinen joka näkee pimeässäkin. Analysoi lokit, metriikat ja suorituskyvyn — löytää vastaukset datasta.' },
|
||||
{ file: 'penguin.png', name: 'Pingviini', role: 'Linux / Backend', desc: 'Tyylikäs Linux-asiantuntija joka viihtyy kylmässä palvelinhuoneessa. Backend-kehitys ja järjestelmäohjelmointi.' },
|
||||
{ file: 'serpent.png', name: 'Kyy', role: 'DevSecOps', desc: 'Valpas tietoturva-agentti piirilevykuvioinen keho. Löytää haavoittuvuudet, auditoi koodin ja varmistaa OWASP-yhteensopivuuden.' },
|
||||
{ file: 'spider.png', name: 'Hämähäkki', role: 'Verkko / API', desc: 'Kutoo monimutkaisia verkkoja — API-rajapinnat, mikropalvelut ja integraatiot ovat sen verkkoa.' },
|
||||
{ file: 'tortoise.png', name: 'Kilpikonna', role: 'Legacy / Migraatio', desc: 'Hidas mutta varma. Erikoistunut vanhojen järjestelmien modernisointiin ja turvallisiin migraatioihin.' },
|
||||
{ file: 'walrus.png', name: 'Mursu', role: 'SRE / Ops', desc: 'Raskaan sarjan operaattori panssaroidussa haarniskassa. Pitää tuotannon pystyssä ja vastaa kun pagerduty piippaa.' },
|
||||
];
|
||||
const grid = document.getElementById('gallery-grid');
|
||||
if (!grid) return;
|
||||
grid.innerHTML = ALL_AVATARS.map(a => {
|
||||
const path = '/avatars/' + a.file;
|
||||
return `<div style="background:#161b22;border:1px solid #30363d;border-radius:12px;padding:12px;text-align:center;cursor:pointer;transition:all 0.2s" onclick="navigator.clipboard.writeText('${path}');this.querySelector('.gallery-copied').style.opacity=1;setTimeout(()=>this.querySelector('.gallery-copied').style.opacity=0,1000)" onmouseover="this.style.borderColor='#58a6ff';this.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='#30363d';this.style.transform=''">
|
||||
return `<div style="background:#161b22;border:1px solid #30363d;border-radius:12px;padding:14px;text-align:center;cursor:pointer;transition:all 0.2s" onclick="navigator.clipboard.writeText('${path}');this.querySelector('.gallery-copied').style.opacity=1;setTimeout(()=>this.querySelector('.gallery-copied').style.opacity=0,1000)" onmouseover="this.style.borderColor='#58a6ff';this.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='#30363d';this.style.transform=''">
|
||||
<img src="${path}" style="width:80px;height:80px;border-radius:14px;border:2px solid #30363d;object-fit:cover;margin-bottom:8px">
|
||||
<div style="font-weight:600;font-size:13px;color:#f0f6fc">${a.name}</div>
|
||||
${a.role ? `<div style="font-size:11px;color:#58a6ff;margin-top:2px">${a.role}</div>` : ''}
|
||||
<div style="font-size:10px;color:#484f58;margin-top:4px;font-family:monospace">${a.file}</div>
|
||||
<div style="font-size:11px;color:#8b949e;margin-top:6px;line-height:1.4;text-align:left">${a.desc}</div>
|
||||
<div style="font-size:10px;color:#484f58;margin-top:6px;font-family:monospace">${a.file}</div>
|
||||
<div class="gallery-copied" style="font-size:10px;color:#3fb950;margin-top:4px;opacity:0;transition:opacity 0.3s">Kopioitu!</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
|
||||
Reference in New Issue
Block a user