From 19dff730dd62a1b2aa86f0b2bb98902001ea235e Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Fri, 27 Mar 2026 18:39:12 +0100 Subject: add visual refactor design spec (corporate hacker direction) Typography: Oxanium + IBM Plex Sans + JetBrains Mono. Cards: glass + glow + left accent border hybrid. Hero: keep all effects. Buttons: fix white hover. Co-Authored-By: Claude Sonnet 4.6 --- .../specs/2026-03-27-visual-refactor-design.md | 128 +++++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 docs/superpowers/specs/2026-03-27-visual-refactor-design.md (limited to 'docs/superpowers/specs') diff --git a/docs/superpowers/specs/2026-03-27-visual-refactor-design.md b/docs/superpowers/specs/2026-03-27-visual-refactor-design.md new file mode 100644 index 0000000..de6e54e --- /dev/null +++ b/docs/superpowers/specs/2026-03-27-visual-refactor-design.md @@ -0,0 +1,128 @@ +# Visual Refactor — Corporate Hacker + +**Date:** 2026-03-27 +**Status:** Approved + +## Goal + +Refactor the graphic aspect of danix.me toward a "corporate hacker" look: more professional and credible, while keeping the existing color palette (purple `#a855f7`, green `#00ff88`, dark navy `#060b10`) and the core cyber/terminal aesthetic. + +--- + +## 1. Typography System + +Three-tier hierarchy applied globally across all sections and components. + +| Role | Font | Applied To | +|---|---|---| +| Display / Headings | Oxanium | Section titles, nav logo, hero name, card titles | +| Body | IBM Plex Sans | Descriptions, bio, form labels, card body text, all prose | +| Mono | JetBrains Mono | Terminals, category tags, eyebrows, labels, badges | + +**Implementation:** Add `IBM+Plex+Sans:wght@300;400;600` to the Google Fonts import in `head.html`. In `main.css`, explicitly assign IBM Plex Sans to all elements currently inheriting the monospace body fallback (`.about-bio p`, `.service-card p`, section descriptions, form labels, etc.). + +--- + +## 2. Hero Section + +No structural or animation changes. Keep all current effects: +- Matrix rain canvas (opacity 13%) +- Scanlines overlay +- Dot grid background +- Ambient purple radial glow +- Glitch animation on hero name + +**Typography-only change:** Hero subtitle/description and scroll indicator label switch from monospace to IBM Plex Sans. + +--- + +## 3. Cards — All Sections + +All cards (Services, Skills, Projects, Certs) adopt a unified glass hybrid style. + +### Visual style +``` +background: rgba(16,30,45,0.55) +backdrop-filter: blur(6px) +border: 1px solid rgba(168,85,247,0.12) +border-left: 2px solid #304860 + +:hover + border-left-color: #a855f7 + box-shadow: 0 0 22px rgba(168,85,247,0.10) + background: rgba(16,30,45,0.75) +``` + +**Green variant** — used for defensive/positive cards (e.g. "Security Audit" service, high-proficiency skills): +``` +:hover + border-left-color: #00ff88 + box-shadow: 0 0 22px rgba(0,255,136,0.07) +``` + +### Content structure (three tiers) +1. **Category tag** — JetBrains Mono, `0.55rem`, uppercase, `letter-spacing: 0.12em`, color `#304860`, brightens to `#7a9bb8` on hover +2. **Title** — Oxanium, bold +3. **Description** — IBM Plex Sans, `0.7rem`, `line-height: 1.6`, color `#7a9bb8` + +### Skill cards specifically +- **Remove:** progress bar HTML and CSS entirely +- **Add:** skill level as a tag badge in JetBrains Mono +- `data/skills.yaml` — change `level` field from decimal to string label: + - `≥ 0.90` → `"Advanced"` + - `0.70–0.89` → `"Intermediate"` + - `< 0.70` → `"Foundational"` +- Mapped values for current skills: + - Penetration Testing (0.75) → `Intermediate` + - Network Security (0.68) → `Foundational` + - Linux / Kali (0.95) → `Advanced` + - OSINT (0.62) → `Foundational` + - Scripting (0.85) → `Intermediate` + - Web Security (0.77) → `Intermediate` + +### Project cards +Image area kept. Card body gets the three-tier tag/title/description structure. + +### Cert cards +Same glass style. Badge image stays. Category tag added. + +--- + +## 4. Buttons + +Single fix in `main.css`: + +```css +/* Before */ +.btn-primary:hover { background: #fff; } + +/* After */ +.btn-primary:hover { background: #c084fc; } +``` + +All other button states (`.btn-outline`, `.btn-cv`, active states) unchanged. + +--- + +## Files to Modify + +| File | Changes | +|---|---| +| `themes/danixme/layouts/partials/head.html` | Add IBM Plex Sans to Google Fonts import | +| `themes/danixme/assets/css/main.css` | Font assignments, card styles, button hover fix, remove progress bar CSS | +| `themes/danixme/layouts/partials/services.html` | Add category tag to each service card | +| `themes/danixme/layouts/partials/skills.html` | Remove progress bar HTML, add level tag badge | +| `themes/danixme/layouts/partials/projects.html` | Add category tag to each project card | +| `themes/danixme/layouts/partials/certs.html` | Add category tag to each cert card | +| `data/skills.yaml` | Change `level` from decimal to string label | + +--- + +## Out of Scope + +- Nav bar — no changes +- Footer — no changes +- Terminal components (hero terminal, about terminal) — no changes +- Contact form layout — no changes +- Color palette — no changes +- Light mode — no changes (inherits improvements automatically via CSS variables) -- cgit v1.2.3