* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
body {
background: linear-gradient(135deg, #f0f9ff 0%, #fef2f2 100%);
color: var(--dark);
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Header */
header {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
padding: 60px 20px;
text-align: center;
border-radius: 0 0 30px 30px;
margin-bottom: 40px;
position: relative;
overflow: hidden;
}
header::before {
content: "🤖";
position: absolute;
font-size: 300px;
opacity: 0.1;
right: -50px;
top: -50px;
}
.header-content {
position: relative;
z-index: 2;
}
h1 {
font-size: 3.5rem;
margin-bottom: 10px;
background: linear-gradient(45deg, #fff, #c7d2fe);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.tagline {
font-size: 1.3rem;
opacity: 0.9;
margin-bottom: 30px;
}
.badges {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.badge {
background: rgba(255, 255, 255, 0.2);
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
backdrop-filter: blur(10px);
}
/* Navigation */
.nav-tabs {
display: flex;
justify-content: center;
gap: 10px;
margin: 30px 0;
flex-wrap: wrap;
}
.tab-btn {
padding: 12px 24px;
background: white;
border: 2px solid #e2e8f0;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
}
.tab-btn.active {
background: var(--primary);
color: white;
border-color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
}
.tab-btn:hover:not(.active) {
border-color: var(--primary);
transform: translateY(-2px);
}
/* Content Sections */
.tab-content {
display: none;
animation: fadeIn 0.5s ease;
}
.tab-content.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
section {
background: white;
border-radius: 20px;
padding: 40px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
border: 1px solid #f1f5f9;
}
h2 {
color: var(--primary);
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 3px solid #e2e8f0;
font-size: 2rem;
}
h3 {
color: var(--dark);
margin: 20px 0 15px;
font-size: 1.5rem;
}
/* Cards */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin: 25px 0;
}
.card {
background: var(--light);
border-radius: 15px;
padding: 25px;
border-left: 5px solid var(--accent);
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.card h4 {
color: var(--primary);
margin-bottom: 15px;
font-size: 1.2rem;
}
/* Code Blocks */
.code-block {
background: #1e293b;
color: #e2e8f0;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
overflow-x: auto;
font-family: 'Courier New', monospace;
}
.code-comment { color: #94a3b8; }
.code-keyword { color: #f472b6; }
.code-string { color: #86efac; }
.code-function { color: #60a5fa; }
/* Lists */
.checklist {
list-style: none;
margin: 20px 0;
}
.checklist li {
padding: 10px 0 10px 35px;
position: relative;
}
.checklist li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--success);
font-weight: bold;
font-size: 1.2rem;
}
/* Tables */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th {
background: var(--primary);
color: white;
padding: 15px;
text-align: left;
}
td {
padding: 15px;
border-bottom: 1px solid #e2e8f0;
}
tr:nth-child(even) {
background: #f8fafc;
}
/* Metrics */
.metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 30px 0;
}
.metric-card {
text-align: center;
padding: 25px;
background: white;
border-radius: 15px;
border: 2px solid #e2e8f0;
}
.metric-number {
font-size: 2.5rem;
font-weight: bold;
color: var(--primary);
margin-bottom: 10px;
}
/* Buttons */
.btn {
display: inline-block;
padding: 12px 24px;
background: var(--primary);
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.3s;
margin: 10px 5px;
}
.btn:hover {
background: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
}
.btn-secondary {
background: var(--secondary);
}
.btn-secondary:hover {
background: #6d28d9;
}
/* Footer */
footer {
text-align: center;
padding: 40px 20px;
color: #64748b;
border-top: 1px solid #e2e8f0;
margin-top: 50px;
}
/* Print Styles */
@media print {
.nav-tabs, .btn, footer {
display: none;
}
section {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}
.container {
padding: 0;
}
header {
border-radius: 0;
}
}
/* Responsive */
@media (max-width: 768px) {
h1 {
font-size: 2.5rem;
}
section {
padding: 25px;
}
.cards-grid {
grid-template-columns: 1fr;
}
.metrics {
grid-template-columns: 1fr;
}
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
CV + GitHub | Especialista en Automatización Sin Código
No-Code Expert
RPA Developer
Process Optimization
Workflow Automation
<div class="container">
<div class="nav-tabs">
<button class="tab-btn active" data-tab="cv">📄 Currículum</button>
<button class="tab-btn" data-tab="github">🐙 GitHub</button>
<button class="tab-btn" data-tab="linkedin">💼 LinkedIn</button>
<button class="tab-btn" data-tab="portfolio">🎨 Portfolio Web</button>
<button class="tab-btn" data-tab="projects">🚀 Proyectos</button>
</div>
<!-- CV Section -->
<div id="cv" class="tab-content active">
<section>
<h2><i class="fas fa-file-alt"></i> Sección de Habilidades Técnicas</h2>
<div class="cards-grid">
<div class="card">
<h4><i class="fas fa-robot"></i> Automatización Sin Código</h4>
<ul class="checklist">
<li>Zapier & Make (Integromat)</li>
<li>Microsoft Power Automate</li>
<li>Google Apps Script</li>
<li>Airtable Automations</li>
<li>Notion Workflows</li>
</ul>
</div>
<div class="card">
<h4><i class="fas fa-cogs"></i> RPA (Robotic Process Automation)</h4>
<ul class="checklist">
<li>UiPath Studio</li>
<li>Automation Anywhere</li>
<li>Blue Prism</li>
<li>Process Analysis</li>
<li>Bot Deployment</li>
</ul>
</div>
<div class="card">
<h4><i class="fas fa-code"></i> Desarrollo & Integración</h4>
<ul class="checklist">
<li>API Integration</li>
<li>Webhooks</li>
<li>Python Scripting</li>
<li>JavaScript/Google Apps Script</li>
<li>Database Management</li>
</ul>
</div>
</div>
</section>
<section>
<h2><i class="fas fa-briefcase"></i> Experiencia Laboral - Ejemplo</h2>
<div class="code-block">
# Especialista en Automatización de Procesos Empresa: TechSolutions Inc. | Periodo: 2022 - Presente
# Logros Clave: 1. Automatización del pipeline de leads con Zapier y Airtable → Reducción del tiempo de cualificación: 48h → 2h (96% mejora)
2. Implementación de sistema RPA para procesamiento de facturas → 500+ documentos/mes procesados automáticamente → Ahorro: $15,000/año en costos operativos
3. Desarrollo de scripts en Google Apps Script para reportes → Ahorro de 15 horas/semana al equipo comercial → 95% de precisión en datos automatizados
<section>
<h2><i class="fas fa-chart-line"></i> Métricas de Impacto</h2>
<div class="metrics">
<div class="metric-card">
<div class="metric-number">200+</div>
<p>Horas mensuales ahorradas</p>
</div>
<div class="metric-card">
<div class="metric-number">95%</div>
<p>Reducción de errores manuales</p>
</div>
<div class="metric-card">
<div class="metric-number">15+</div>
<p>Procesos automatizados</p>
</div>
<div class="metric-card">
<div class="metric-number">$50K+</div>
<p>Ahorro anual estimado</p>
</div>
</div>
</section>
</div>
<!-- GitHub Section -->
<div id="github" class="tab-content">
<section>
<h2><i class="fab fa-github"></i> Estructura del Repositorio</h2>
<div class="code-block">
automation-portfolio/ ├── README.md # Portada del portfolio ├── projects/ # Proyectos individuales │ ├── email-notification-system/ │ │ ├── README.md │ │ ├── zapier-export.json │ │ ├── workflow-diagram.png │ │ └── metrics.md │ ├── data-backup-automation/ │ └── report-generator/ ├── documentation/ # Guías y documentación │ ├── getting-started.md │ ├── best-practices.md │ └── case-studies/ ├── templates/ # Plantillas reutilizables │ ├── zapier-templates/ │ └── airtable-templates/ └── tools-scripts/ # Scripts y herramientas ├── google-apps-script/ └── python-scripts/
<section>
<h2><i class="fas fa-code-branch"></i> README.md Ejemplo</h2>
<div class="code-block">
# 🤖 Automation Portfolio
## 🚀 About Collection of no-code and low-code automation projects demonstrating expertise in:
- Business Process Automation
- System Integration
- Workflow Optimization
- RPA Development
## 📂 Featured Projects
### 1. Email Notification System ⭐
- Description: Real-time monitoring of important emails
- Tools: Zapier, Gmail API, Slack Webhooks
- Results: 80% faster response time
- View Documentation
### 2. Weekly Report Automation
-
Description: Automated reports from multiple data sources
-
Tools: Google Apps Script, Sheets, Data Studio
-
Results: Saves 6 hours weekly
<section> <h2><i class="fas fa-project-diagram"></i> Proyecto Individual - Ejemplo</h2> <div class="cards-grid"> <div class="card"> <h4><i class="fas fa-envelope"></i> Email Notification System</h4> <p><strong>Problema:</strong> Respuesta lenta a emails críticos</p> <p><strong>Solución:</strong> Automatización Gmail → Slack</p> <p><strong>Resultado:</strong> 80% reducción tiempo de respuesta</p> <a href="#" class="btn">Ver Proyecto</a> </div> <div class="card"> <h4><i class="fas fa-file-invoice-dollar"></i> Invoice Processing</h4> <p><strong>Problema:</strong> Procesamiento manual de facturas</p> <p><strong>Solución:</strong> RPA con UiPath</p> <p><strong>Resultado:</strong> 500+ facturas/mes automáticas</p> <a href="#" class="btn">Ver Proyecto</a> </div> <div class="card"> <h4><i class="fas fa-chart-bar"></i> Report Generator</h4> <p><strong>Problema:</strong> Reportes manuales semanales</p> <p><strong>Solución:</strong> Google Apps Script + Sheets</p> <p><strong>Resultado:</strong> 6 horas/semana ahorradas</p> <a href="#" class="btn">Ver Proyecto</a> </div> </div> </section> </div> <!-- LinkedIn Section --> <div id="linkedin" class="tab-content"> <section> <h2><i class="fab fa-linkedin"></i> Perfil de LinkedIn Optimizado</h2> <h3>Headline Recomendada:</h3> <div class="code-block">
Especialista en Automatización de Procesos | No-Code & RPA Expert Transformo procesos manuales en flujos automáticos +200 horas mensuales ahorradas | +15 procesos optimizados
<h3>Habilidades para Agregar:</h3>
<div class="cards-grid">
<div class="card">
<h4><i class="fas fa-star"></i> Top Skills</h4>
<ul class="checklist">
<li>Process Automation</li>
<li>Robotic Process Automation (RPA)</li>
<li>Workflow Optimization</li>
<li>Business Process Improvement</li>
</ul>
</div>
<div class="card">
<h4><i class="fas fa-tools"></i> Tools</h4>
<ul class="checklist">
<li>Zapier</li>
<li>UiPath</li>
<li>Google Apps Script</li>
<li>Power Automate</li>
<li>Airtable</li>
</ul>
</div>
</div>
<h3>Publicación Ejemplo:</h3>
<div class="card">
<p><strong>🚀 Acabo de automatizar otro proceso que consumía 5 horas semanales!</strong></p>
<p>📌 <strong>Proceso:</strong> Reporte semanal de ventas</p>
<p>🔧 <strong>Herramientas:</strong> Google Sheets + Apps Script + Data Studio</p>
<p>⏱️ <strong>Ahorro:</strong> 20 horas mensuales</p>
<p>🎯 <strong>Resultado:</strong> Reportes automáticos + dashboard en tiempo real</p>
<p>#Automatizacion #NoCode #Productividad #DigitalTransformation</p>
</div>
</section>
</div>
<!-- Portfolio Web Section -->
<div id="portfolio" class="tab-content">
<section>
<h2><i class="fas fa-globe"></i> Portfolio Web - Opciones</h2>
<div class="cards-grid">
<div class="card">
<h4><i class="fab fa-github"></i> GitHub Pages</h4>
<p><strong>Ventajas:</strong></p>
<ul class="checklist">
<li>Totalmente gratuito</li>
<li>Integrado con tu repositorio</li>
<li>Fácil de mantener</li>
</ul>
<a href="#" class="btn">Ver Demo</a>
</div>
<div class="card">
<h4><i class="fas fa-sticky-note"></i> Notion Public Page</h4>
<p><strong>Ventajas:</strong></p>
<ul class="checklist">
<li>Muy fácil de crear</li>
<li>Actualización en tiempo real</li>
<li>Excelente para documentación</li>
</ul>
<a href="#" class="btn">Ver Demo</a>
</div>
<div class="card">
<h4><i class="fas fa-palette"></i> Carrd/About.me</h4>
<p><strong>Ventajas:</strong></p>
<ul class="checklist">
<li>Profesional y elegante</li>
<li>Optimizado para CV</li>
<li>Móvil responsive</li>
</ul>
<a href="#" class="btn">Ver Demo</a>
</div>
</div>
<h3>Elementos Clave para tu Portfolio:</h3>
<table>
<thead>
<tr>
<th>Sección</th>
<th>Contenido</th>
<th>Importancia</th>
</tr>
</thead>
<tbody>
<tr>
<td>Proyectos Destacados</td>
<td>3-5 proyectos con resultados medibles</td>
<td>⭐️⭐️⭐️⭐️⭐️</td>
</tr>
<tr>
<td>Casos de Estudio</td>
<td>Problema → Solución → Resultado</td>
<td>⭐️⭐️⭐️⭐️⭐️</td>
</tr>
<tr>
<td>Herramientas</td>
<td>Stack tecnológico con logos</td>
<td>⭐️⭐️⭐️⭐️</td>
</tr>
<tr>
<td>Testimonios</td>
<td>Feedback de clientes/colegas</td>
<td>⭐️⭐️⭐️</td>
</tr>
<tr>
<td>Blog/Recursos</td>
<td>Tutoriales y guías</td>
<td>⭐️⭐️⭐️</td>
</tr>
</tbody>
</table>
</section>
</div>
<!-- Projects Section -->
<div id="projects" class="tab-content">
<section>
<h2><i class="fas fa-rocket"></i> Proyectos Destacados</h2>
<div class="cards-grid">
<div class="card">
<h4><i class="fas fa-bolt"></i> Sistema de Alertas en Tiempo Real</h4>
<p><strong>Stack:</strong> Zapier + Slack + Google Sheets</p>
<p><strong>Impacto:</strong> Reducción de 2h → 5min por alerta</p>
<div class="code-block" style="font-size: 0.9rem;">
// Flujo: Gmail → Zapier → Slack → Logging Trigger: New email with label "URGENT" Action 1: Parse sender & subject Action 2: Send to #alerts Slack channel Action 3: Log to Google Sheet for tracking
<div class="card">
<h4><i class="fas fa-robot"></i> Procesamiento de Facturas RPA</h4>
<p><strong>Stack:</strong> UiPath + Excel + SAP</p>
<p><strong>Impacto:</strong> 500+ facturas/mes automáticas</p>
<div class="code-block" style="font-size: 0.9rem;">
// Automatización RPA completa
-
Descarga facturas del email
-
Extrae datos con OCR
-
Valida contra SAP
-
Archiva en SharePoint
-
Notifica aprobación/rechazo
<h3>Métricas de Todos los Proyectos:</h3> <table> <thead> <tr> <th>Proyecto</th> <th>Horas Ahorradas/Mes</th> <th>ROI Estimado</th> <th>Estado</th> </tr> </thead> <tbody> <tr> <td>Email Notification System</td> <td>40 horas</td> <td>$8,000/año</td> <td><span style="color: var(--success);">✅ Activo</span></td> </tr> <tr> <td>Invoice Processing RPA</td> <td>80 horas</td> <td>$15,000/año</td> <td><span style="color: var(--success);">✅ Activo</span></td> </tr> <tr> <td>Weekly Report Automation</td> <td>24 horas</td> <td>$5,000/año</td> <td><span style="color: var(--success);">✅ Activo</span></td> </tr> <tr> <td>Lead Capture Workflow</td> <td>60 horas</td> <td>$12,000/año</td> <td><span style="color: var(--warning);">🔄 En desarrollo</span></td> </tr> </tbody> </table> </section> <section> <h2><i class="fas fa-download"></i> Acciones Disponibles</h2> <div style="text-align: center; padding: 30px;"> <button class="btn" onclick="window.print()"> <i class="fas fa-print"></i> Imprimir Portafolio </button> <button class="btn btn-secondary" onclick="downloadHTML()"> <i class="fas fa-download"></i> Descargar como HTML </button> <button class="btn" onclick="copyToClipboard()"> <i class="fas fa-copy"></i> Copiar Contenido CV </button> </div> </section> </div>🚀 Consejo Profesional: Actualiza tu portfolio cada 3 meses con nuevos proyectos y métricas
📧 Contacto de Ejemplo: automation@portfolio.com | LinkedIn: linkedin.com/in/automation-expert
© 2024 Portafolio de Automatización - Diseñado para demostrar habilidades sin código
<script> // Tab Navigation document.querySelectorAll('.tab-btn').forEach(button => { button.addEventListener('click', () => { // Remove active class from all buttons and contents document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active')); document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); // Add active class to clicked button button.classList.add('active'); // Show corresponding content const tabId = button.getAttribute('data-tab'); document.getElementById(tabId).classList.add('active'); }); }); // Download HTML function function downloadHTML() { const htmlContent = document.documentElement.outerHTML; const blob = new Blob([htmlContent], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'portfolio-automatizacion.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); alert('✅ Portafolio descargado como HTML'); } // Copy CV content to clipboard function copyToClipboard() { const cvContent = document.getElementById('cv').innerText; navigator.clipboard.writeText(cvContent) .then(() => alert('✅ Contenido del CV copiado al portapapeles')) .catch(err => alert('❌ Error al copiar: ' + err)); } // Auto-update year document.addEventListener('DOMContentLoaded', () => { const year = new Date().getFullYear(); document.querySelector('footer p:last-child').innerHTML = `© ${year} Portafolio de Automatización - Diseñado para demostrar habilidades sin código`; }); </script>