Custom-Built with Vanilla Web Technologies
🇺🇸 English Version
This project originated as a foundational landing page and has matured into a sophisticated personal brand ecosystem. Developed entirely with Vanilla HTML5, CSS3, and JavaScript, it showcases my professional Reskilling journey—merging 7 years of operational leadership with a deep technical focus on Data Science and Full-Stack Development.
Front End with Netlify: https://portfolio-clio-salgado.netlify.app
- Pure CSS3 Mastery: 100% custom styling including a 3D rotating carousel, 3D flip cards for soft skills, and complex keyframe animations (Typing effect, bouncing buttons, and neural network simulations) without external UI libraries.
- Intelligent UI/UX: Responsive architecture with Dark/Light mode persistence and a full bilingual toggle (EN/ES) managed via LocalStorage.
- Dynamic Terminal Home: A custom-coded interactive terminal that simulates data processing and neural network initialization using asynchronous JavaScript.
- Context-Aware CV: A logic-based download system that delivers the specific Resume (EN or ES) matching the user's current session language.
- Advanced Project Engine: * Filtered search by category (Full-Stack vs. Data) with a custom search engine and real-time suggestions.
- Interactive modals with expandable image galleries and smart pagination.
- Automated Contact System: Integrated with EmailJS, featuring bidirectional automated flows: personalized confirmations for the user (in their language) and detailed lead alerts for me.
- Engagement: Integrated JS Confetti triggers and dynamic interaction hooks.
- HTML5: Semantic and accessible structure.
- CSS3: Custom properties (variables), Flexbox/Grid, 3D Transforms, and advanced Animations.
- JavaScript (ES6+): Modular architecture, DOM manipulation, and State persistence.
📁 PROJECTS&PORTFOLIO_CLIO/
├── 📁 assets/
| |___ 📁 css/
│ | └── style.css
| |___ 📁 html/
| |___ 📁 img/
│ | └── 02.join_posts-users-like.png
│ | └── auth-mailer-api_security.png
│ | └── auth-mailer-api_signup.png
│ | └── auth-mailer-api_user_created.png
│ | └── auth-mailer.png
│ | └── blog_db-1.png
│ | └── blog_db.png
│ | └── booking-app_erd-db.png
│ | └── booking.png
│ | └── Currículo_Clio-Salgado.pdf
│ | └── espana.png
│ | └── form_usercrud.png
│ | └── fortune_cookie.png
│ | └── fortune_cookie1.png
│ | └── fortune_cookie2.png
│ | └── gallery_movies_pipelines.png
│ | └── gallery_movies.png
│ | └── loading_weather.png
│ | └── location_card.png
│ | └── logo.svg
│ | └── me2.jpg
│ | └── pipelines_bookingapp.png
│ | └── poke.png
│ | └── pokecard.png
│ | └── pokedex.png
│ | └── portfolio.png
│ | └── Professional_Resume_Clio.pdf
│ | └── project_1.png
│ | └── project_2.png
│ | └── project_3.png
│ | └── project_4.png
│ | └── project_5.png
│ | └── projects.png
│ | └── reino-unido.png
│ | └── residents_card.png
│ | └── rickandmorty_loading.png
│ | └── skills.png
│ | └── testing_2.png
│ | └── usercrud_home.png
│ | └── usercrud_loading.png
│ | └── weather.png
│ | └── weather1.png
| |___ 📁 js/
| | |___ 📁 components/
│ | | └── confettiEffect.js
│ | | └── selected_menu.js
| | |___ 📁 helpers/
│ | | └── date_updater.js
│ | | └── language.js
│ | | └── loader.js
│ | | └── modal.js
│ | | └── pagination.js
│ | | └── projects.js
│ | | └── reload_page.js
│ | | └── send_form.js
│ | | └── translations.js
| | |___ main.js
| |___ 📁 lang/
| | |___ index.html (version español)
├── index.html (versión inglés)
├── README.md- Clone the repository
git clone [https://github.com/Clic-stack/Portafolio.git](https://github.com/Clic-stack/Portafolio.git)-
(Optional) Install the
vscode-pdfextension in Visual Studio Code to preview resumes directly in the code. -
Open the
index.htmlfile in your browser or useLive Serverto view it locally.
Phase 1: Advanced Analytics (Data Science Focus) 📊
[ ] Data Visualization Dashboard: Implement charts using D3.js or Chart.js to show real-time portfolio traffic and project engagement metrics.
[ ] Predictive Recommendation Engine: Develop a small Python/Flask microservice to suggest projects to recruiters based on their interests.
Phase 2: Technical Excellence & Scalability 🛠️
[ ] TypeScript Migration: Refactor all core logic and helpers to TypeScript for better type safety and maintainability.
[ ] Automated Testing: Implementation of unit tests with Jest for critical components like the search engine and bilingual toggle.
Phase 3: Performance & DevOps 🚀
[ ] CI/CD Pipeline: Automate deployment and testing flows using GitHub Actions.
[ ] Performance Optimization: Achieve a consistent 100/100 score on Google Lighthouse by optimizing assets and implementing lazy loading for all project modals.
Clio Salgado - Data Scientist & Full-Stack Developer
"Transforming technical knowledge into digital solutions with purpose."
🇲🇽 Versión en Español
Este proyecto nació como una landing page básica y ha madurado hasta convertirse en un ecosistema sofisticado de marca personal. Desarrollado íntegramente con HTML5, CSS3 y JavaScript Vanilla, refleja mi proceso de Reskilling profesional: la fusión de 7 años de liderazgo operativo con un enfoque técnico en Ciencia de Datos y Desarrollo Full-Stack.
Front End con Netlify: https://portfolio-clio-salgado.netlify.app
- Dominio de CSS3 Puro: Estilos 100% personalizados que incluyen un carrusel rotativo 3D, flip cards 3D para soft skills y animaciones complejas de keyframes (efecto typing, botones dinámicos y simulación de redes neuronales) sin librerías externas.
- UI/UX Inteligente: Arquitectura responsiva con persistencia de modo Claro/Oscuro y selector bilingüe (EN/ES) gestionado a través de LocalStorage.
- Home con Terminal Dinámica: Una terminal interactiva programada desde cero que simula el procesamiento de datos e inicialización de redes mediante JavaScript asíncrono.
- CV Contextual: Sistema de descarga basado en lógica que entrega el Currículum específico (EN o ES) según el idioma seleccionado por el usuario.
- Motor de Proyectos Avanzado: * Búsqueda filtrada por categoría (Full-Stack vs. Data) con buscador inteligente y sugerencias en tiempo real.
- Modales interactivos con galerías expandibles y paginación dinámica.
- Contacto Automatizado: Integración con EmailJS con flujos bidireccionales: confirmaciones automáticas para el usuario (en su idioma) y alertas detalladas de leads para mi gestión.
- Engagement: Disparadores de JS Confetti y ganchos de interacción dinámica.
- HTML5: Estructura semántica, accesible y bilingüe.
- CSS3: Propiedades personalizadas (variables), Flexbox/Grid, Transformaciones 3D y Animaciones avanzadas.
- JavaScript (ES6+): Arquitectura modular, manipulación del DOM y persistencia de estado.
📁 PROJECTS&PORTFOLIO_CLIO/
├── 📁 assets/
| |___ 📁 css/
│ | └── style.css
| |___ 📁 html/
| |___ 📁 img/
│ | └── 02.join_posts-users-like.png
│ | └── auth-mailer-api_security.png
│ | └── auth-mailer-api_signup.png
│ | └── auth-mailer-api_user_created.png
│ | └── auth-mailer.png
│ | └── blog_db-1.png
│ | └── blog_db.png
│ | └── booking-app_erd-db.png
│ | └── booking.png
│ | └── Currículo_Clio-Salgado.pdf
│ | └── espana.png
│ | └── form_usercrud.png
│ | └── fortune_cookie.png
│ | └── fortune_cookie1.png
│ | └── fortune_cookie2.png
│ | └── gallery_movies_pipelines.png
│ | └── gallery_movies.png
│ | └── loading_weather.png
│ | └── location_card.png
│ | └── logo.svg
│ | └── me2.jpg
│ | └── pipelines_bookingapp.png
│ | └── poke.png
│ | └── pokecard.png
│ | └── pokedex.png
│ | └── portfolio.png
│ | └── Professional_Resume_Clio.pdf
│ | └── project_1.png
│ | └── project_2.png
│ | └── project_3.png
│ | └── project_4.png
│ | └── project_5.png
│ | └── projects.png
│ | └── reino-unido.png
│ | └── residents_card.png
│ | └── rickandmorty_loading.png
│ | └── skills.png
│ | └── testing_2.png
│ | └── usercrud_home.png
│ | └── usercrud_loading.png
│ | └── weather.png
│ | └── weather1.png
| |___ 📁 js/
| | |___ 📁 components/
│ | | └── confettiEffect.js
│ | | └── selected_menu.js
| | |___ 📁 helpers/
│ | | └── date_updater.js
│ | | └── language.js
│ | | └── loader.js
│ | | └── modal.js
│ | | └── pagination.js
│ | | └── projects.js
│ | | └── reload_page.js
│ | | └── send_form.js
│ | | └── translations.js
| | |___ main.js
| |___ 📁 lang/
| | |___ index.html (version español)
├── index.html (versión inglés)
├── README.md- Clona este repositorio:
git clone https://github.com/Clic-stack/Portafolio.git-
Agrega la extensión
vscode-pdfen Visual Studio Code solo si deseas ver los currículos desde la parte del código. -
Abre el archivo
index.htmlen tu navegador o usa una extensión comoLive Serverpara visualizarlo localmente.
Fase 1: Analítica Avanzada (Enfoque en Ciencia de Datos) 📊
[ ] Dashboard de Visualización de Datos: Implementar gráficas interactivas con D3.js o Chart.js para mostrar métricas de tráfico en tiempo real y el nivel de interacción con los proyectos.
[ ] Motor de Recomendación Predictivo: Desarrollar un microservicio en Python/Flask que sugiera proyectos específicos a los reclutadores basándose en sus intereses o perfil de búsqueda.
Fase 2: Excelencia Técnica y Escalabilidad 🛠️
[ ] Migración a TypeScript: Refactorizar toda la lógica central y los helpers a TypeScript para garantizar una mayor seguridad en los tipos de datos y facilitar el mantenimiento a largo plazo.
[ ] Pruebas Automatizadas: Implementación de pruebas unitarias con Jest para componentes críticos, como el motor de búsqueda y el selector de idioma.
Fase 3: Rendimiento y DevOps 🚀
[ ] Pipeline de CI/CD: Automatizar los flujos de despliegue y pruebas utilizando GitHub Actions.
[ ] Optimización de Rendimiento: Alcanzar una puntuación constante de 100/100 en Google Lighthouse mediante la optimización de recursos (assets) e implementación de lazy loading en todos los modales de proyectos.
Clio Salgado - Científica de Datos & Desarrolladora Full-Stack
"Transformando el conocimiento técnico en soluciones digitales con propósito."