# 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)