rubenterre / miportfolio

New Rubén Terré portfolio's version

Portafolio web de Rubén Terré

¡Bienvenido a mi portafolio web! Este proyecto está desarrollado utilizando ViteJS, JavaScript, SASS y MaterializeCSS.

Sitio web: rubenterre.com

En él encontrarás información sobre mis habilidades, proyectos, experiencia laboral y formación académica. Además, podrás descargar mi currículum y ponerte en contacto conmigo.

Tecnologías Utilizadas

• ViteJS: Un constructor de aplicaciones frontend rápido y optimizado.
• JavaScript: Lenguaje de programación utilizado para la interactividad en el sitio.
• SASS: Preprocesador CSS que facilita la escritura de estilos de manera eficiente y modular.
• MaterializeCSS: Framework CSS basado en Material Design, utilizado para crear una interfaz de usuario atractiva y responsiva.
• Sketch: Herramienta utilizada para el diseño inicial de la página.

Estructura del proyecto

/
├── public/
│   ├── favicon/
│   │   └── (favicon en varios tamaños)
│   ├── icons/
│   │    └── skills/
│   │    │  └── (imágenes de iconos de habilidades)
│   │    └── social/
│   │       └── (imágenes de iconos de redes sociales)
│   ├── images/
│   │    └── (imágenes de proyectos, libro...)
│   ├── logos/
│   │    └── (imágenes de logos de empresas e instituciones)
│   ├── Ruben_Arturo_Terre_Lameiro_CV_2024.pdf
│   ├── Ruben_Terre_Logo.svg
│   └── rubenterre_OGraph.jpg
│ 
├── src/
│   ├── json/
│   │    └── desarrollo.json
│   │    └── design.json
│   │    └── experiencia.json
│   │    └── formacion.json
│   │    └── proyectos.json
│   ├── components/
│   │    └── Experiencia.js
│   │    └── Header.js
│   │    └── Footer.js
│   │    └── Formacion.js
│   │    └── Habilidades.js
│   │    └── Inicio.js
│   │    └── materialize.js
│   │    └── Projects.js
│   │    └── Noticias.js
│   │    └── sidenav.js
│   ├─ styles/
│   │    ├──components/
│   │    │    └── _global.scss
│   │    │    └── _grid.scss
│   │    │    └── _navbar.scss
│   │    │    └── _normalize.scss
│   │    │    └── _sidenav.scss
│   │    │    └── _variables.scss
│   │    │    └── _modal.scss
│   │    ├── fonts/
│   │    │    └── Poppins-Bold.ttf
│   │    │    └── Poppins-Medium.ttf
│   │    │    └── Poppins-Regular.ttf
│   │    └── style.scss
│   │    └── customn-materialize.scss
│   └── main.js
├── package.json
├── package-lock.json
├── LICENSE
├── index.html
├── .gitignore
├── .gitatributes
└── README.md

Metodologías y mejores prácticas

Metodología BEM

Para mantener un código CSS organizado y modular, he utilizado la metodología BEM (Block, Element, Modifier). Esto permite un fácil mantenimiento y escalabilidad del proyecto.

Accesibilidad

He seguido las mejores prácticas para asegurar que la página sea accesible para todos los usuarios, incluyendo aquellos con discapacidades. Esto incluye el uso adecuado de etiquetas ARIA, contraste de colores, y navegación mediante teclado.

Rendimiento

Para optimizar el rendimiento, he minimizado el uso de recursos y asegurado que la página se cargue rápidamente. Esto incluye la compresión de imágenes y el uso eficiente de scripts.

Instalación y Uso

1. Clona este repositorio:

   git clone https://github.com/rubenterre/MiPortfolio.git