path: root/docs/superpowers/plans/2026-03-27-visual-refactor.md

# Visual Refactor — Corporate Hacker Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Refactor danix.me's graphic layer toward "corporate hacker" — better typography, glass cards with glow, button fix — while keeping all colors and animations intact.

**Architecture:** Pure CSS + targeted HTML changes. No new dependencies, no JS changes. Three font roles (Oxanium headings, IBM Plex Sans body, JetBrains Mono mono). Glass card style replaces solid `--bg2` cards across all four sections.

**Tech Stack:** Hugo templates (`.html` partials), CSS custom properties, Google Fonts, YAML data files.

---

## Task 1: Typography Foundation

**Files:**
- Modify: `themes/danixme/layouts/partials/head.html` (line 71)
- Modify: `themes/danixme/assets/css/main.css` (`:root` block, prose selectors)

- [ ] **Step 1: Add IBM Plex Sans to Google Fonts import**

In `themes/danixme/layouts/partials/head.html`, replace line 71:

```html
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,300&family=Oxanium:wght@700;800&display=swap" rel="stylesheet" />
```

With:

```html
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,300&family=Oxanium:wght@700;800&display=swap" rel="stylesheet" />
```

- [ ] **Step 2: Add `--font-body` CSS variable**

In `themes/danixme/assets/css/main.css`, replace:

```css
  --font-mono:   'JetBrains Mono', 'Courier New', monospace;
  --font-head:   'Oxanium', sans-serif;
```

With:

```css
  --font-mono:   'JetBrains Mono', 'Courier New', monospace;
  --font-head:   'Oxanium', sans-serif;
  --font-body:   'IBM Plex Sans', system-ui, sans-serif;
```

- [ ] **Step 3: Apply IBM Plex Sans to hero prose elements**

In `main.css`, replace:

```css
/* ── Tagline ── */
.hero-tagline {
  font-size: 0.93rem;
  color: var(--text-dim);
  max-width: 500px;
  margin-bottom: 2.5rem;
```

With:

```css
/* ── Tagline ── */
.hero-tagline {
  font-family: var(--font-body);
  font-size: 0.93rem;
  color: var(--text-dim);
  max-width: 500px;
  margin-bottom: 2.5rem;
```

Also add `font-family: var(--font-body);` to `.scroll-indicator`. Find the block:

```css
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
```

And replace with:

```css
.scroll-indicator {
  font-family: var(--font-body);
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
```

- [ ] **Step 4: Apply IBM Plex Sans to About, Education, and form elements**

In `main.css`, replace:

```css
.about-bio p {
  color: var(--text-dim);
  font-size: 0.95rem;
```

With:

```css
.about-bio p {
  font-family: var(--font-body);
  color: var(--text-dim);
  font-size: 0.95rem;
```

Replace:

```css
.edu-desc {
  font-size: 0.88rem;
  color: var(--text-dim);
```

With:

```css
.edu-desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-dim);
```

Replace:

```css
.cf-field label {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
```

With:

```css
.cf-field label {
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
```

Replace:

```css
.cf-field input,
.cf-field textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
```

With:

```css
.cf-field input,
.cf-field textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
```

- [ ] **Step 5: Verify typography**

Start the dev server:
```bash
cd /home/danix/Programming/AI/claude/danixme && hugo server --disableFastRender
```

Open http://localhost:1313. Check:
- Hero tagline and scroll label render in a proportional sans-serif (not monospace)
- About bio paragraphs render in IBM Plex Sans
- Education descriptions render in IBM Plex Sans
- Contact form labels and input text use IBM Plex Sans
- All terminal windows, navigation, section eyebrows, card titles still use their original mono/Oxanium fonts

- [ ] **Step 6: Commit**

```bash
git add themes/danixme/layouts/partials/head.html themes/danixme/assets/css/main.css
git commit -m "feat: add IBM Plex Sans body font, apply to prose elements"
```

---

## Task 2: Button Hover Fix

**Files:**
- Modify: `themes/danixme/assets/css/main.css` (`.btn-primary:hover` block)

- [ ] **Step 1: Fix `.btn-primary:hover` background**

In `main.css`, replace:

```css
.btn-primary:hover {
  background: #fff;
  box-shadow: 0 0 24px rgba(168,85,247,0.45);
```

With:

```css
.btn-primary:hover {
  background: #c084fc;
  box-shadow: 0 0 24px rgba(168,85,247,0.45);
```

- [ ] **Step 2: Verify**

With `hugo server` running, hover over the "Contact" (primary) button in the hero. It should shift to a lighter purple — not white.

- [ ] **Step 3: Commit**

```bash
git add themes/danixme/assets/css/main.css
git commit -m "fix: btn-primary hover color purple instead of white"
```

---

## Task 3: Skills Data — Level Labels

**Files:**
- Modify: `data/skills.yaml`

- [ ] **Step 1: Replace decimal levels with string labels**

Replace the full contents of `data/skills.yaml` with:

```yaml
- icon: "fa-solid fa-crosshairs"
  name_en: "Penetration Testing"
  name_it: "Penetration Testing"
  level: "Intermediate"
  tags: [Metasploit, "Burp Suite", nmap, SQLMap]

- icon: "fa-solid fa-network-wired"
  name_en: "Network Security"
  name_it: "Sicurezza di Rete"
  level: "Foundational"
  tags: [Wireshark, "TCP/IP", Firewalls, VPN]

- icon: "fa-brands fa-linux"
  name_en: "Linux / Kali"
  name_it: "Linux / Kali"
  level: "Advanced"
  tags: ["Kali Linux", Bash, "Priv. Esc.", "File System"]

- icon: "fa-solid fa-user-secret"
  name_en: "OSINT"
  name_it: "OSINT"
  level: "Foundational"
  tags: [Maltego, Shodan, Recon-ng]

- icon: "fa-solid fa-terminal"
  name_en: "Scripting"
  name_it: "Scripting"
  level: "Intermediate"
  tags: [Python, Bash, PowerShell]

- icon: "fa-solid fa-shield-halved"
  name_en: "Web Security"
  name_it: "Sicurezza Web"
  level: "Intermediate"
  tags: ["OWASP Top 10", XSS, SQLi, IDOR]
```

- [ ] **Step 2: Commit**

```bash
git add data/skills.yaml
git commit -m "refactor: skills level from decimal to string label"
```

---

## Task 4: Card CSS — Glass Hybrid Style

**Files:**
- Modify: `themes/danixme/assets/css/main.css`

Replaces background/border/hover on all four card types. Adds `.skill-level` badge and `.card--green` modifier. Removes progress bar CSS. Restyling `.service-subtitle` and `.project-subtitle` as card-tags. Adds IBM Plex Sans to card descriptions.

- [ ] **Step 1: Replace `.service-card` CSS**

Replace:

```css
.service-card {
  border: 1px solid var(--border);
  background: var(--bg2);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, background 0.2s;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.service-card:hover {
  border-color: rgba(168,85,247,0.28);
  background: var(--surface);
}
```

With:

```css
.service-card {
  background: rgba(16,30,45,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(168,85,247,0.12);
  border-left: 2px solid var(--muted);
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: border-left-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.service-card::before { display: none; }
.service-card:hover {
  border-left-color: var(--accent);
  box-shadow: 0 0 22px rgba(168,85,247,0.10);
  background: rgba(16,30,45,0.75);
}
```

- [ ] **Step 2: Restyle `.service-subtitle` as card-tag and apply IBM Plex Sans to `.service-desc`**

Replace:

```css
.service-subtitle {
  font-size: 0.76rem;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin-bottom: 0.9rem;
}
.service-desc {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.85;
```

With:

```css
.service-subtitle {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  transition: color 0.25s;
}
.service-card:hover .service-subtitle { color: var(--text-dim); }
.service-desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.85;
```

- [ ] **Step 3: Replace `.skill-card` CSS and remove progress bar CSS**

Replace:

```css
.skill-card {
  background: var(--bg2);
  padding: 1.5rem;
  transition: background 0.2s;
}
.skill-card:hover { background: var(--surface); }
```

With:

```css
.skill-card {
  background: rgba(16,30,45,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(168,85,247,0.12);
  border-left: 2px solid var(--muted);
  padding: 1.5rem;
  transition: border-left-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.skill-card:hover {
  border-left-color: var(--accent);
  box-shadow: 0 0 22px rgba(168,85,247,0.10);
  background: rgba(16,30,45,0.75);
}
.skill-card.card--green:hover {
  border-left-color: var(--accent2);
  box-shadow: 0 0 22px rgba(0,255,136,0.07);
}
```

Then remove the progress bar CSS entirely. Replace:

```css
.skill-track {
  height: 2px;
  background: var(--border);
  margin-top: 0.75rem;
  overflow: hidden;
}
.skill-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(0.16,1,0.3,1);
}
.skill-fill.go { transform: scaleX(var(--w, 1)); }
```

With:

```css
.skill-level {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--muted);
  padding: 0.15rem 0.45rem;
  margin-top: 0.6rem;
  margin-bottom: 0.2rem;
}
.skill-card.card--green .skill-level {
  color: var(--accent2);
  border-color: var(--accent2);
}
```

- [ ] **Step 4: Replace `.cert-card` CSS**

Replace:

```css
.cert-card {
  border: 1px solid var(--border);
  background: var(--bg2);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
```

With:

```css
.cert-card {
  background: rgba(16,30,45,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(168,85,247,0.12);
  border-left: 2px solid var(--muted);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-left-color 0.25s, box-shadow 0.25s, background 0.25s;
}
```

Replace:

```css
.cert-card::before {
  content: '';
  position: absolute;
  top: 0; inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.cert-card:hover {
  border-color: rgba(168,85,247,0.28);
  box-shadow: 0 0 40px rgba(168,85,247,0.04);
}
```

With:

```css
.cert-card::before { display: none; }
.cert-card:hover {
  border-left-color: var(--accent);
  box-shadow: 0 0 22px rgba(168,85,247,0.10);
  background: rgba(16,30,45,0.75);
}
```

Also add IBM Plex Sans to cert description. Replace:

```css
.cert-desc {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.85;
```

With:

```css
.cert-desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.85;
```

- [ ] **Step 5: Replace `.project-card` CSS and restyle `.project-subtitle`**

Replace:

```css
.project-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, transform 0.25s;
}

.project-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
```

With:

```css
.project-card {
  background: rgba(16,30,45,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(168,85,247,0.12);
  border-left: 2px solid var(--muted);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-left-color 0.25s, box-shadow 0.25s, background 0.25s, transform 0.25s;
}

.project-card:hover {
  border-left-color: var(--accent);
  box-shadow: 0 0 22px rgba(168,85,247,0.10);
  background: rgba(16,30,45,0.75);
  transform: translateY(-3px);
}
```

Restyle `.project-subtitle` as card-tag. Replace:

```css
.project-subtitle {
  font-size: 0.8rem;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
```

With:

```css
.project-subtitle {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  transition: color 0.25s;
}
.project-card:hover .project-subtitle { color: var(--text-dim); }
```

Also add IBM Plex Sans to project description. Replace:

```css
.project-desc {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 0;
```

With:

```css
.project-desc {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 0;
```

- [ ] **Step 6: Verify cards**

With `hugo server` running, check each section:
- Services: cards have glass background, purple left border that lights up on hover, subtitle appears as small muted mono tag, description in IBM Plex Sans
- Skills: cards have glass style, no progress bar visible, `.skill-level` badge area is ready (will be populated in Task 5)
- Certs: glass style, no top gradient stripe, purple left border glow on hover
- Projects: glass style with lift (`translateY`) on hover, subtitle appears as small muted mono tag, description in IBM Plex Sans
- Collab card (dashed placeholder): still renders with dashed border, distinct from regular project cards

- [ ] **Step 7: Commit**

```bash
git add themes/danixme/assets/css/main.css
git commit -m "feat: glass hybrid card style across all sections"
```

---

## Task 5: Skills HTML — Remove Progress Bar, Add Level Badge

**Files:**
- Modify: `themes/danixme/layouts/partials/skills.html`

- [ ] **Step 1: Update skills.html**

Replace the full contents of `themes/danixme/layouts/partials/skills.html` with:

```html
<section id="skills">
  <div class="container">
    <div class="section-eyebrow reveal">{{ i18n "section_skills" }}</div>
    <h2 class="section-title reveal">{{ i18n "skills_title" }}</h2>

    <div class="skills-grid reveal" id="skillsGrid">
      {{ $lang := .Site.Language.Lang }}
      {{ range hugo.Data.skills }}
      <div class="skill-card{{ if eq .level "Advanced" }} card--green{{ end }}">
        <div class="skill-head">
          <div class="skill-icon"><i class="{{ .icon }}"></i></div>
          <div class="skill-name">
            {{ if eq $lang "it" }}{{ .name_it }}{{ else }}{{ .name_en }}{{ end }}
          </div>
        </div>
        <span class="skill-level">{{ .level }}</span>
        <div class="skill-tags">
          {{ range .tags }}<span class="tag">{{ . }}</span>{{ end }}
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
```

Key changes from original:
- Removed `<div class="skill-track"><div class="skill-fill" style="--w:{{ .level }}"></div></div>`
- Added `<span class="skill-level">{{ .level }}</span>` (renders the string label, e.g. "Advanced")
- Added conditional `card--green` class on the card when `level == "Advanced"`

- [ ] **Step 2: Verify skills section**

With `hugo server` running, open http://localhost:1313 and scroll to Skills:
- Each skill card shows a small bordered badge with the level label ("Advanced", "Intermediate", "Foundational") below the skill name
- The Linux / Kali card (Advanced) has a green left border glow on hover and a green-accented level badge
- No progress bars anywhere in the section
- Tech tags (Metasploit, Burp Suite, etc.) still render below the level badge

- [ ] **Step 3: Commit**

```bash
git add themes/danixme/layouts/partials/skills.html
git commit -m "feat: replace skill progress bars with level tag badges"
```

---

## Self-Review Notes

**Spec coverage check:**
- ✅ Typography: IBM Plex Sans added, applied to all prose elements
- ✅ Hero: typography-only change (tagline + scroll label), all effects untouched
- ✅ Button hover: `#c084fc` fix applied
- ✅ Skills data: decimal → string labels
- ✅ Card glass style: all 4 card types covered
- ✅ Card-tag pattern: service-subtitle and project-subtitle restyled as mono tags
- ✅ Skill level badge: replaces progress bar
- ✅ `card--green` modifier: Advanced skills get green glow
- Services/Projects/Certs sections: no HTML changes needed (existing subtitle fields repurposed via CSS)

**No placeholders:** All steps contain exact code.

**Type/name consistency:** `card--green` CSS class matches `card--green` used in Task 5 template. `skill-level` CSS class matches `skill-level` HTML element in Task 5. `--font-body` var defined in Task 1 Step 2, used in Task 1 Steps 3–4 and Task 4 Steps 2–5.