Skip to content

Commit 297a5a7

Browse files
devsart95claude
devsart95
and
claude
committed
feat(skills): rediseño Skills Map — 6 dominios con brand dots y audit de repos
- 6 dominios basados en repos reales: AI & LLMs, SaaS & ERP Builder, Web & Apps (FAST BUILDER), Python & Data, Bots & Mensajería, Cloud & DevOps - Brand color dots en cada chip de tecnología (TypeScript, Python, WhatsApp, etc.) - Grid 3 columnas en desktop (minmax 300px), 1 en mobile - Traducciones ES/EN/JA para los 2 nuevos dominios (python, saas) - Sin referencias a OpenClaw, Codex ni Claude Code Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent a3a00b2 commit 297a5a7

File tree

3 files changed

+151
-39
lines changed

3 files changed

+151
-39
lines changed

‎src/components/sections/Skills.tsx‎

Lines changed: 106 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,19 @@ import { useRef, type ReactNode } from 'react'
22
import { useScrollReveal } from '../../hooks/useScrollReveal'
33
import { useLang } from '../../context/LangContext'
44

5+
interface Tool {
6+
label: string
7+
color?: string
8+
}
9+
510
interface Domain {
611
id: string
712
color: string
813
badge?: string
914
titleKey: string
1015
subKey: string
1116
icon: ReactNode
12-
tools: string[]
17+
tools: Tool[]
1318
}
1419

1520
const DOMAINS: Domain[] = [
@@ -24,20 +29,84 @@ const DOMAINS: Domain[] = [
2429
<path d="M4.93 4.93l2.12 2.12M16.95 16.95l2.12 2.12M4.93 19.07l2.12-2.12M16.95 7.05l2.12-2.12"/>
2530
</svg>
2631
),
27-
tools: ['Anthropic API', 'OpenAI API', 'Grok — xAI', 'Gemini API', 'Vertex AI', 'Google AI Studio', 'LLM Integration', 'Agents & Workflows'],
32+
tools: [
33+
{ label: 'Anthropic API', color: '#d97706' },
34+
{ label: 'OpenAI API', color: '#10a37f' },
35+
{ label: 'Grok — xAI', color: '#e2e8f0' },
36+
{ label: 'Gemini API', color: '#4285f4' },
37+
{ label: 'Vertex AI', color: '#34a853' },
38+
{ label: 'Google AI Studio', color: '#ea4335' },
39+
{ label: 'LLM Pipelines' },
40+
{ label: 'Multi-agent Systems' },
41+
{ label: 'n8n AI Workflows', color: '#ef6c00' },
42+
],
2843
},
2944
{
30-
id: 'cloud', color: '#38bdf8',
31-
titleKey: 'Cloud & Infra', subKey: 'skills.cloud.sub',
45+
id: 'saas', color: '#22d3ee', badge: 'LATAM',
46+
titleKey: 'skills.saas.title', subKey: 'skills.saas.sub',
3247
icon: (
3348
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
34-
<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/>
49+
<rect x="2" y="3" width="20" height="14" rx="2"/>
50+
<path d="M8 21h8M12 17v4"/>
51+
<path d="M7 7h3M7 11h5M14 7h3"/>
52+
</svg>
53+
),
54+
tools: [
55+
{ label: 'SaaS Architecture' },
56+
{ label: 'ERP Systems' },
57+
{ label: 'Multi-tenant Apps' },
58+
{ label: 'CRM / POS' },
59+
{ label: 'Fiscal Integrations' },
60+
{ label: 'Vertical SaaS LATAM' },
61+
{ label: 'Turborepo Monorepo', color: '#ef4444' },
62+
{ label: 'tRPC', color: '#398ccb' },
63+
{ label: 'Drizzle ORM', color: '#c4e34a' },
64+
],
65+
},
66+
{
67+
id: 'dev', color: '#34d399', badge: 'FAST BUILDER',
68+
titleKey: 'Web & Apps', subKey: 'skills.dev.sub',
69+
icon: (
70+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
71+
<polyline points="16 18 22 12 16 6"/>
72+
<polyline points="8 6 2 12 8 18"/>
3573
</svg>
3674
),
37-
tools: ['GCP (Google Cloud)', 'Terraform', 'VPS Linux', 'Docker / Compose', 'Linux', 'macOS', 'Bash Scripting'],
75+
tools: [
76+
{ label: 'TypeScript', color: '#3178c6' },
77+
{ label: 'React', color: '#61dafb' },
78+
{ label: 'Next.js', color: '#e2e8f0' },
79+
{ label: 'Node.js', color: '#539e43' },
80+
{ label: 'Astro', color: '#ff5d01' },
81+
{ label: 'Flutter', color: '#54c5f8' },
82+
{ label: 'REST API Design' },
83+
{ label: 'NestJS', color: '#e0234e' },
84+
{ label: 'Git / CI/CD', color: '#f05032' },
85+
],
3886
},
3987
{
40-
id: 'bots', color: '#fb923c',
88+
id: 'python', color: '#fb923c',
89+
titleKey: 'skills.python.title', subKey: 'skills.python.sub',
90+
icon: (
91+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
92+
<path d="M8 3h8a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H8a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h8"/>
93+
<circle cx="9.5" cy="7.5" r=".5" fill="currentColor"/>
94+
<circle cx="14.5" cy="16.5" r=".5" fill="currentColor"/>
95+
</svg>
96+
),
97+
tools: [
98+
{ label: 'Python', color: '#3776ab' },
99+
{ label: 'FastAPI', color: '#009688' },
100+
{ label: 'Django', color: '#0c4b33' },
101+
{ label: 'Pydantic', color: '#e92063' },
102+
{ label: 'PostgreSQL', color: '#336791' },
103+
{ label: 'Pandas / NumPy' },
104+
{ label: 'PDF Processing' },
105+
{ label: 'Script Automation' },
106+
],
107+
},
108+
{
109+
id: 'bots', color: '#f472b6',
41110
titleKey: 'skills.bots.title', subKey: 'skills.bots.sub',
42111
icon: (
43112
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
@@ -47,18 +116,33 @@ const DOMAINS: Domain[] = [
47116
<path d="M8 15h.01M12 15h.01M16 15h.01"/>
48117
</svg>
49118
),
50-
tools: ['Python Ecosystem', 'Jupyter Notebooks', 'LLM Pipelines', 'Script Automation'],
119+
tools: [
120+
{ label: 'WhatsApp API', color: '#25d366' },
121+
{ label: 'Telegram API', color: '#2ca5e0' },
122+
{ label: 'AI Chatbots' },
123+
{ label: 'n8n Workflows', color: '#ef6c00' },
124+
{ label: 'LLM Integration' },
125+
{ label: 'Automation Pipelines' },
126+
{ label: 'Bot Builders' },
127+
],
51128
},
52129
{
53-
id: 'dev', color: '#34d399',
54-
titleKey: 'Dev & APIs', subKey: 'skills.dev.sub',
130+
id: 'cloud', color: '#38bdf8',
131+
titleKey: 'Cloud & DevOps', subKey: 'skills.cloud.sub',
55132
icon: (
56133
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
57-
<polyline points="16 18 22 12 16 6"/>
58-
<polyline points="8 6 2 12 8 18"/>
134+
<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/>
59135
</svg>
60136
),
61-
tools: ['TypeScript / JS', 'React / Next.js', 'Node.js', 'PostgreSQL', 'REST API Design', 'Git / CI/CD'],
137+
tools: [
138+
{ label: 'GCP', color: '#4285f4' },
139+
{ label: 'Terraform', color: '#7b42bc' },
140+
{ label: 'Docker / Compose', color: '#2496ed' },
141+
{ label: 'GitHub Actions', color: '#e2e8f0' },
142+
{ label: 'VPS Linux', color: '#fcc624' },
143+
{ label: 'Caddy / Traefik' },
144+
{ label: 'Bash Scripting' },
145+
],
62146
},
63147
]
64148

@@ -101,7 +185,15 @@ export function Skills() {
101185
</div>
102186
<div className="sd-tools">
103187
{d.tools.map(tool => (
104-
<span key={tool} className="sd-tool">{tool}</span>
188+
<span key={tool.label} className="sd-tool">
189+
{tool.color && (
190+
<span
191+
className="sd-tool-dot"
192+
style={{ background: tool.color }}
193+
/>
194+
)}
195+
{tool.label}
196+
</span>
105197
))}
106198
</div>
107199
</div>

‎src/i18n/translations.ts‎

Lines changed: 33 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,17 @@ export const translations = {
3838
'stack.tag': '// stack',
3939
'stack.h2': 'Tecnologías',
4040
// Skills
41-
'skills.tag': '// skills',
42-
'skills.h2': 'Skills Map',
43-
'skills.ai.sub': 'Modelos de lenguaje e integración de IA',
44-
'skills.cloud.sub':'Infraestructura en la nube y servidores',
45-
'skills.bots.title':'Bots & Automatización',
46-
'skills.bots.sub': 'Pipelines, scripts y bots inteligentes',
47-
'skills.dev.sub': 'Stack fullstack y diseño de interfaces',
41+
'skills.tag': '// skills',
42+
'skills.h2': 'Skills Map',
43+
'skills.ai.sub': 'Modelos de lenguaje e integración de IA',
44+
'skills.cloud.sub': 'Infraestructura en la nube y servidores',
45+
'skills.bots.title': 'Bots & Mensajería',
46+
'skills.bots.sub': 'Canales conversacionales y automatización inteligente',
47+
'skills.dev.sub': 'TypeScript, React, Next.js y APIs modernas',
48+
'skills.python.title': 'Python & Data',
49+
'skills.python.sub': 'Backend, procesamiento de datos y scripts avanzados',
50+
'skills.saas.title': 'SaaS & ERP Builder',
51+
'skills.saas.sub': 'Productos verticales, ERP y SaaS para LATAM',
4852
// Connect
4953
'connect.tag': '// social',
5054
'connect.h2': 'Conectar',
@@ -101,13 +105,17 @@ export const translations = {
101105
'stack.tag': '// stack',
102106
'stack.h2': 'Technologies',
103107
// Skills
104-
'skills.tag': '// skills',
105-
'skills.h2': 'Skills Map',
106-
'skills.ai.sub': 'Language models & AI integration',
107-
'skills.cloud.sub': 'Cloud infrastructure & servers',
108-
'skills.bots.title':'Bots & Automation',
109-
'skills.bots.sub': 'Pipelines, scripts & smart bots',
110-
'skills.dev.sub': 'Fullstack development & UI design',
108+
'skills.tag': '// skills',
109+
'skills.h2': 'Skills Map',
110+
'skills.ai.sub': 'Language models & AI integration',
111+
'skills.cloud.sub': 'Cloud infrastructure & servers',
112+
'skills.bots.title': 'Bots & Messaging',
113+
'skills.bots.sub': 'Conversational channels & smart automation',
114+
'skills.dev.sub': 'TypeScript, React, Next.js & modern APIs',
115+
'skills.python.title': 'Python & Data',
116+
'skills.python.sub': 'Backend, data processing & advanced scripts',
117+
'skills.saas.title': 'SaaS & ERP Builder',
118+
'skills.saas.sub': 'Vertical products, ERP & SaaS for LATAM',
111119
// Connect
112120
'connect.tag': '// social',
113121
'connect.h2': 'Connect',
@@ -164,13 +172,17 @@ export const translations = {
164172
'stack.tag': '// stack',
165173
'stack.h2': '技術スタック',
166174
// Skills
167-
'skills.tag': '// skills',
168-
'skills.h2': 'スキルマップ',
169-
'skills.ai.sub': '言語モデルとAI統合',
170-
'skills.cloud.sub': 'クラウドインフラとサーバー',
171-
'skills.bots.title':'ボット & 自動化',
172-
'skills.bots.sub': 'パイプライン、スクリプト、スマートボット',
173-
'skills.dev.sub': 'フルスタック開発とUI設計',
175+
'skills.tag': '// skills',
176+
'skills.h2': 'スキルマップ',
177+
'skills.ai.sub': '言語モデルとAI統合',
178+
'skills.cloud.sub': 'クラウドインフラとサーバー',
179+
'skills.bots.title': 'ボット & メッセージング',
180+
'skills.bots.sub': '会話チャネルとスマート自動化',
181+
'skills.dev.sub': 'TypeScript、React、Next.js とモダンAPI',
182+
'skills.python.title': 'Python & データ',
183+
'skills.python.sub': 'バックエンド、データ処理、スクリプト',
184+
'skills.saas.title': 'SaaS & ERPビルダー',
185+
'skills.saas.sub': 'LATAMのバーティカルプロダクト・ERP・SaaS',
174186
// Connect
175187
'connect.tag': '// social',
176188
'connect.h2': 'コンタクト',

‎src/index.css‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -483,8 +483,8 @@ h2 {
483483
/* ── SKILLS MAP ───────────────────────────────────── */
484484
.skills-map {
485485
display: grid;
486-
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
487-
gap: 16px;
486+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
487+
gap: 14px;
488488
}
489489
.skill-domain {
490490
position: relative;
@@ -543,26 +543,34 @@ h2 {
543543
display: flex; flex-wrap: wrap; gap: 6px;
544544
}
545545
.sd-tool {
546+
display: inline-flex; align-items: center; gap: 5px;
546547
font-family: 'JetBrains Mono', monospace;
547-
font-size: 11px; padding: 3px 10px;
548+
font-size: 11px; padding: 3px 10px 3px 8px;
548549
background: rgba(255,255,255,.025);
549550
border: 1px solid var(--border);
550551
border-radius: 3px; color: var(--muted2);
551552
transition: color 150ms, border-color 150ms;
552553
cursor: default;
553554
}
555+
.sd-tool-dot {
556+
width: 6px; height: 6px;
557+
border-radius: 50%;
558+
flex-shrink: 0;
559+
opacity: .75;
560+
}
554561
.skill-domain:hover .sd-tool:hover {
555562
color: var(--sd-color, var(--accent));
556563
border-color: color-mix(in srgb, var(--sd-color, var(--accent)) 50%, transparent);
557564
}
565+
.skill-domain:hover .sd-tool:hover .sd-tool-dot { opacity: 1; }
558566
/* light theme */
559567
[data-theme="light"] .skill-domain { background: rgba(255,255,255,.88); }
560568
[data-theme="light"] .sd-tool {
561569
background: rgba(15,23,42,.03);
562570
border-color: rgba(15,23,42,.1);
563571
color: var(--muted2);
564572
}
565-
@media (max-width: 600px) {
573+
@media (max-width: 680px) {
566574
.skills-map { grid-template-columns: 1fr; }
567575
}
568576

0 commit comments

Comments
 (0)