1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
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)
|
