Refactor website

app.js

@@ -0,0 +1,89 @@
+/* ════════════════════════════════════════════════
+   MasterCruelty — render + tab logic
+   ════════════════════════════════════════════════ */
+
+const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({
+  '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+}[c]));
+
+const projectCard = (p) => `
+  <a class="card project-card" href="${esc(p.href)}" target="_blank" rel="noopener">
+    <div class="card-head">
+      <span class="card-tag">${esc(p.tag)}</span>
+      <span class="card-ext">↗</span>
+    </div>
+    <h3>${esc(p.title)}</h3>
+    <p>${esc(p.desc)}</p>
+    <div class="card-tech">${p.tech.map((t) => `<span>${esc(t)}</span>`).join('')}</div>
+  </a>
+`;
+
+const socialCard = (s) => `
+  <a class="card social-card ${esc(s.brand)}" href="${esc(s.href)}" target="_blank" rel="${esc(s.rel || 'noopener')}">
+    <div class="card-head">
+      <span class="card-tag">${esc(s.tag)}</span>
+      <span class="card-ext">↗</span>
+    </div>
+    <h3>${esc(s.title)}</h3>
+    <p>${esc(s.desc)}</p>
+    <span class="card-cta">${esc(s.cta)}</span>
+  </a>
+`;
+
+const pressCard = (p) => `
+  <a class="card press-card" href="${esc(p.href)}" target="_blank" rel="${esc(p.rel || 'noopener')}">
+    <div class="card-head">
+      <span class="card-tag">${esc(p.tag)}</span>
+      <span class="card-ext">↗</span>
+    </div>
+    <h3>${esc(p.title)}</h3>
+    <p>${esc(p.desc)}</p>
+    <span class="card-cta">${esc(p.cta)}</span>
+  </a>
+`;
+
+const pill = (s) => `<span class="pill">${esc(s)}</span>`;
+
+const linkRow = (l) => `
+  <a class="link-row" href="${esc(l.href)}" target="_blank" rel="noopener">
+    <span class="link-key">${esc(l.key)}</span>
+    <span class="link-val">${esc(l.val)}</span>
+    <span class="link-arrow">↗</span>
+  </a>
+`;
+
+const stat = (s) => `
+  <div class="stat">
+    <div class="stat-num">${esc(s.num)}${s.plus ? '<span class="stat-plus">+</span>' : ''}</div>
+    <div class="stat-label">${esc(s.label)}</div>
+  </div>
+`;
+
+const fill = (id, html) => {
+  const el = document.getElementById(id);
+  if (el) el.innerHTML = html;
+};
+
+fill('pills',      SITE.skills.map(pill).join(''));
+fill('links',      SITE.links.map(linkRow).join(''));
+fill('stats',      SITE.stats.map(stat).join(''));
+fill('university', SITE.university.map(projectCard).join(''));
+fill('personal',   SITE.personal.map(projectCard).join(''));
+fill('socials',    SITE.socials.map(socialCard).join(''));
+fill('press',      SITE.press.map(pressCard).join(''));
+
+const tabs   = document.querySelectorAll('.tab-btn');
+const panels = document.querySelectorAll('.tab-panel');
+const hero   = document.getElementById('hero');
+
+tabs.forEach((btn) => {
+  btn.addEventListener('click', () => {
+    const target = btn.dataset.tab;
+    tabs.forEach((b) => b.classList.toggle('active', b === btn));
+    panels.forEach((p) => p.classList.toggle('active', p.id === 'tab-' + target));
+    hero.classList.toggle('visible', target === 'home');
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  });
+});
+
+document.getElementById('year').textContent = new Date().getFullYear();

data.js

@@ -0,0 +1,173 @@
+/* ════════════════════════════════════════════════
+   MasterCruelty — site content
+   Edit the data here; markup is generated in app.js
+   ════════════════════════════════════════════════ */
+
+const SITE = {
+  skills: [
+    'Python', 'Telegram Bots', 'Linux', 'Data Analysis', 'C / Go', 'Cloud',
+  ],
+
+  links: [
+    { key: 'github',    val: '@MasterCruelty',  href: 'https://github.com/MasterCruelty' },
+    { key: 'telegram',  val: 'atm channel',     href: 'https://t.me/atmshitpostingChannel' },
+    { key: 'facebook',  val: 'atm shitposting', href: 'https://www.facebook.com/atmshitposting/' },
+    { key: 'instagram', val: '@atm_shitposting', href: 'https://www.instagram.com/atm_shitposting' },
+  ],
+
+  stats: [
+    { num: '15', plus: true,  label: 'public repos' },
+    { num: '2017',            label: 'atm shitposting founded' },
+    { num: '∞',               label: 'cups of coffee' },
+  ],
+
+  university: [
+    {
+      tag: 'embedded',
+      title: 'Alarm Project',
+      desc: 'Embedded systems coursework — a small alarm built around a microcontroller.',
+      tech: ['C', 'Arduino'],
+      href: 'https://github.com/MasterCruelty/alarm-project',
+    },
+    {
+      tag: 'architecture',
+      title: 'Half-Life Assembly',
+      desc: 'Computer architecture project, working close to the metal in assembly.',
+      tech: ['Assembly', 'x86'],
+      href: 'https://github.com/MasterCruelty/halflifeassembly',
+    },
+    {
+      tag: 'software-eng',
+      title: 'Bike Sharing',
+      desc: 'Full software engineering exercise — from requirements to a working prototype.',
+      tech: ['Java', 'UML'],
+      href: 'https://github.com/MasterCruelty/bikesharingproject',
+    },
+    {
+      tag: 'thesis',
+      title: "Bachelor's Thesis — IAC",
+      desc: "Final dissertation work for the bachelor's degree.",
+      tech: ['Research', 'LaTeX'],
+      href: 'https://github.com/MasterCruelty/Thesis-IAC',
+    },
+    {
+      tag: 'notes',
+      title: 'Statistic Stuffs',
+      desc: 'A growing pile of notes and exercises on statistics.',
+      tech: ['Stats', 'R'],
+      href: 'https://github.com/MasterCruelty/StatisticStuffs',
+    },
+    {
+      tag: 'algorithms',
+      title: 'C / Go Algorithms',
+      desc: 'Notes and source code for classic algorithms, in C and Go.',
+      tech: ['C', 'Go'],
+      href: 'https://github.com/MasterCruelty/C-Go-Algorithms',
+    },
+    {
+      tag: 'cloud',
+      title: 'Cloud Computing',
+      desc: 'A simple cloud architecture project for the cloud computing course.',
+      tech: ['Cloud', 'Docker'],
+      href: 'https://github.com/MasterCruelty/cloud-computing-technologies',
+    },
+  ],
+
+  personal: [
+    {
+      tag: 'telegram',
+      title: 'my-tg-app',
+      desc: 'A Telegram userbot packed with utilities I use every day.',
+      tech: ['Python', 'Telethon'],
+      href: 'https://github.com/MasterCruelty/my-tg-app',
+    },
+    {
+      tag: 'telegram',
+      title: 'robbot',
+      desc: 'My personal Telegram bot — group helper and tinker playground.',
+      tech: ['Python', 'Bot API'],
+      href: 'https://github.com/MasterCruelty/robbot',
+    },
+    {
+      tag: 'linux',
+      title: 'eMerger',
+      desc: 'A handy CLI tool for Linux devices, built with the Mergers crew.',
+      tech: ['Shell', 'Linux'],
+      href: 'https://github.com/TheMergers/emerger',
+    },
+    {
+      tag: 'transit',
+      title: 'Metro Flow Router',
+      desc: 'Calculates routes and fetches live data about metro systems.',
+      tech: ['Python', 'Graphs'],
+      href: 'https://github.com/MasterCruelty/MetroFlowRouter',
+    },
+    {
+      tag: 'data',
+      title: 'GoKart Data Hub',
+      desc: 'Data analysis on go-kart races — telemetry meets weekend hobby.',
+      tech: ['Python', 'Pandas'],
+      href: 'https://github.com/MasterCruelty/gokart-data-hub',
+    },
+    {
+      tag: 'data',
+      title: 'Telegram Chat Insights',
+      desc: 'Userbot that runs simple analytics on your personal chat interactions.',
+      tech: ['Python', 'Telethon'],
+      href: 'https://github.com/MasterCruelty/TelegramChatInsights',
+    },
+    {
+      tag: 'template',
+      title: 'tg-bot-skeleton',
+      desc: 'A starter template to spin up a Telegram bot or userbot fast.',
+      tech: ['Python', 'Boilerplate'],
+      href: 'https://github.com/MasterCruelty/tg-bot-skeleton',
+    },
+  ],
+
+  socials: [
+    {
+      brand: 'facebook',
+      tag: 'main',
+      title: 'Facebook',
+      desc: "The community's main page — original memes and chronicles.",
+      cta: 'visit on facebook →',
+      href: 'https://www.facebook.com/atmshitposting/',
+    },
+    {
+      brand: 'instagram',
+      tag: 'visual',
+      title: 'Instagram',
+      desc: 'Visual content and a steady feed of fresh memes.',
+      cta: 'visit on instagram →',
+      href: 'https://www.instagram.com/atm_shitposting',
+    },
+    {
+      brand: 'telegram',
+      tag: 'updates',
+      title: 'Telegram',
+      desc: 'Official channel for updates and behind-the-scenes posts.',
+      cta: 'visit on telegram →',
+      href: 'https://t.me/atmshitpostingChannel',
+      rel: 'noopener noreferrer nofollow',
+    },
+  ],
+
+  press: [
+    {
+      tag: 'interview',
+      title: 'Linea Diretta — Medium',
+      desc: 'ATM themselves interviewing the community and its memes.',
+      cta: 'read the interview →',
+      href: 'https://medium.com/lineadiretta/atm-incontra-suo-figlio-nato-a-suon-di-meme-cb6d82baaaea',
+      rel: 'noopener noreferrer nofollow',
+    },
+    {
+      tag: 'video',
+      title: 'Milano AllNews — YouTube',
+      desc: 'Video interview by Milano AllNews on the page and its origins.',
+      cta: 'watch the video →',
+      href: 'https://www.youtube.com/watch?v=d8mGHGavPSk&ab_channel=MilanoAllNews',
+    },
+  ],
+};