Portafolio personal bilingüe (Español/Inglés) que combina mis dos especialidades profesionales: Desarrollo Web y Análisis de Datos. Diseñado para ser rápido, responsivo y mostrar mis habilidades de forma profesional.
- ✅ Soporte bilingüe completo (Español/Inglés)
- ✅ Selector de idioma intuitivo en el navbar
- ✅ URLs localizadas (
/para español,/enpara inglés) - ✅ Traducciones dinámicas en todos los componentes
- ✅ Diseño minimalista con alternancia de fondos (blanco/beige)
- ✅ Componentes modulares reutilizables
- ✅ Totalmente responsivo (móvil, tablet, desktop)
- ✅ Animaciones suaves y efectos hover
- ✅ Paleta de colores profesional y accesible
- Hero - Presentación con llamado a la acción
- Sobre Mí - Descripción profesional y habilidades técnicas
- Portafolios - Dos tarjetas para acceder a portafolios especializados:
- 📊 Analista de Datos →
/data-analyst - 💻 Desarrollador Web →
/web-developer
- 📊 Analista de Datos →
- Contacto - Formulario funcional integrado con Formspree
- ✅ Navegación dinámica según idioma
- ✅ SEO optimizado con meta tags
- ✅ Rendimiento ultra-rápido gracias a Astro
- ✅ Formulario de contacto funcional
- ✅ Favicon personalizado con iniciales "AO"
- ✅ Foto de perfil en el navbar
- Astro 5.13.11 - Framework para sitios web ultra-rápidos
- JavaScript/TypeScript - Lenguaje de programación
- CSS3 - Estilos con variables CSS y diseño responsive
- astro-i18next - Sistema de internacionalización
- i18next - Framework de traducciones
- Astro Icon - Gestión de iconos SVG
- Formspree - Backend para formulario de contacto
- GitHub Pages - Hosting gratuito y confiable
mi-portafolio/
├── public/
│ ├── favicon.svg # Icono del sitio
│ └── locales/ # Archivos de traducción JSON
│ ├── es/translation.json
│ └── en/translation.json
├── src/
│ ├── assets/
│ │ └── images/
│ │ └── profile.jpg # Foto de perfil
│ ├── components/
│ │ ├── About.astro # Sección "Sobre Mí"
│ │ ├── Contact.astro # Formulario de contacto
│ │ ├── DataProjectCard.astro # Tarjeta de proyecto de datos
│ │ ├── DataProyectGallery.astro
│ │ ├── Footer.astro # Pie de página
│ │ ├── Header.astro
│ │ ├── Hero.astro # Sección principal
│ │ ├── LanguageSelector.astro # Selector de idioma
│ │ ├── Navbar.astro # Barra de navegación
│ │ ├── PortfolioCards.astro # Tarjetas de portafolios
│ │ ├── ProjectCard.astro # Tarjeta de proyecto web
│ │ ├── Projects.astro # Galería de proyectos
│ │ ├── SiteSEO.astro
│ │ ├── SkillIcon.astro # Icono de habilidad
│ │ └── Welcome.astro
│ ├── data/
│ │ └── navLinks.js # Enlaces de navegación dinámicos
│ ├── layouts/
│ │ └── Layout.astro # Layout principal
│ ├── pages/
│ │ ├── index.astro # Página principal (ES)
│ │ ├── data-analyst.astro # Portafolio de análisis de datos
│ │ ├── web-developer.astro # Portafolio de desarrollo web
│ │ └── en/
│ │ └── index.astro # Página principal (EN)
│ ├── styles/
│ │ └── global.css # Estilos globales y variables
│ └── utils/
│ └── translations.js # Sistema de traducciones
├── astro-i18next.config.mjs # Configuración i18n
├── astro.config.mjs # Configuración de Astro
├── package.json
└── README.md
--color-fondo: #f8f7f4; /* Beige claro */
--color-fondo-secundario: #ffffff; /* Blanco */
--color-texto-principal: #2d3748; /* Gris oscuro */
--color-texto-secundario: #718096; /* Gris medio */
--color-primario: #4299e1; /* Azul (Web Dev) */
--color-data: #667eea; /* Morado (Data Analyst) */- Node.js 18+ instalado
- npm o pnpm
- Clona el repositorio:
git clone https://github.com/Armando8a-dev/mi-portafolio.git
cd mi-portafolio- Instala las dependencias:
npm install- Ejecuta el servidor de desarrollo:
npm run dev- Abre tu navegador en:
http://localhost:4321
| Comando | Acción |
|---|---|
npm run dev |
Inicia servidor de desarrollo en localhost:4321 |
npm run build |
Construye el sitio para producción en ./dist/ |
npm run preview |
Vista previa del build localmente |
npm run astro |
Ejecuta comandos CLI de Astro |
El sistema de i18n está implementado en src/utils/translations.js:
export const translations = {
es: { /* traducciones en español */ },
en: { /* traducciones en inglés */ }
};- Edita
src/utils/translations.js - Añade la clave en ambos idiomas (es/en)
- Usa en tus componentes:
---
import { getTranslations } from '../utils/translations';
const currentLang = Astro.url.pathname.startsWith('/en') ? 'en' : 'es';
const t = getTranslations(currentLang);
---
<h1>{t.hero.greeting}</h1>- Proyectos con React, Angular, Astro
- Enfoque en Frontend moderno
- Muestra de aplicaciones interactivas
- Proyectos con Python, SQL, Tableau
- Visualizaciones de datos
- Insights y storytelling con datos
Este portafolio está configurado para desplegarse en GitHub Pages:
- Asegúrate de tener configurado
baseenastro.config.mjs:
export default defineConfig({
site: 'https://Armando8a-dev.github.io',
base: '/mi-portafolio'
});- Ejecuta el build:
npm run build- Despliega en GitHub Pages (configurado en el repositorio)
- Hero y About: Edita
src/utils/translations.js - Foto de perfil: Reemplaza
src/assets/images/profile.jpg - Favicon: Actualiza
public/favicon.svg - Enlaces sociales: Modifica
src/components/Footer.astro - Formulario: Cambia el endpoint en
src/components/Contact.astro
Para Web Developer:
Edita src/components/Projects.astro y agrega un nuevo <ProjectCard>
Para Data Analyst:
Edita src/components/DataProyectGallery.astro y agrega un nuevo <DataProjectCard>
Las sugerencias y mejoras son bienvenidas. Si encuentras algún error o tienes ideas:
- Abre un Issue
- Envía un Pull Request
Este proyecto es de código abierto y está disponible bajo la licencia MIT.
Armando Ochoa
- 🌐 Portafolio
- 🐙 GitHub
- Astro por su increíble framework
- GitHub por el hosting gratuito
- Formspree por la integración de formularios
- La comunidad de desarrollo web por la inspiración
⭐ Si te gusta este proyecto, ¡dale una estrella en GitHub!
-
Instala las dependencias:
npm install
-
Inicia el servidor de desarrollo:
npm run dev
¡Y listo! Abre http://localhost:4321 (o el puerto que hayas configurado) en tu navegador para ver el proyecto.