diff options
| -rw-r--r-- | docs/superpowers/plans/2026-03-27-visual-refactor.md | 718 |
1 files changed, 718 insertions, 0 deletions
diff --git a/docs/superpowers/plans/2026-03-27-visual-refactor.md b/docs/superpowers/plans/2026-03-27-visual-refactor.md new file mode 100644 index 0000000..7b76c9a --- /dev/null +++ b/docs/superpowers/plans/2026-03-27-visual-refactor.md @@ -0,0 +1,718 @@ +# 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. |