Desarrollo de una aplicacion portfolio web full stack que muestra los datos personales, estudios, experiencia laboral, habilidades blandas y duras y proyectos, permitiendo editar los datos que ya existen y agregar nuevos.
📂 Explora los documentos »
Ver lanzamiento inicial
·
Reportar un error
·
Solicitar función
Contenidos
Este portfolio es el proyecto integrador de "Argentina Programa: Segunda Etapa #YoProgramo" que tenia como objetivo formar programadxres capaces de desarrollar una aplicación web full stack, que mostrará: tus datos personales, estudios cursados, experiencia laboral, conocimiento de las tecnologías y habilidades que posea. Es decir, crear un portfolio web. Esta aplicación tiene una arquitectura distribuida y contiene un diseño de interfaz de usuario (front end) que muestra la información, una base de datos que almacena la información ingresada y cuenta con las APIs necesarias para proveer a través de internet la información (back end).
Link del back-end del proyecto: ⋄ click aca ⋄
( ▲ )
-
-
-
- para el versionado de la aplicación
-
- para el deployment
( ▲ )
Este portfolio fue el primer proyecto que realice en programación, se trata de un portfolio web SPA(Single Page Aplication), consumiendo una API que cree utilizando Java para poder modificar, agregar, traer y eliminar información de la base de datos.
∆ nota: en este repositorio se encuentra desarrollada la parte resaltada
Diagrama Entidad-Relacion 🔎
∆ nota: este diagrama lo realice inicialmente como parte de los desafios de modulo propuestos por el propgrama, mas adelante agregue los campos "email" y "password" a la tabla "person" para crear los métodos de login.
Link del front-end del proyecto: ⋄ click aca ⋄
Link del back-end del proyecto: ⋄ click aca ⋄
Fue un curso completamente auto gestionado seguí la maquetación que fue dada en el curso y pude darle la funcionalidades requeridas, las cuales son:
- < navbar > En esta sección tenemos la barra de navegación, la cual posee el logo de Argentina Programa, las redes sociales (editables en modo administrador), botón de login y botón para el modo nocturno
- < navegación > En esta sección tenemos botones que nos dirigen a las distintas secciones del portfolio
- < introducción > En esta sección tenemos banner, información personal e imagen personal
- < sobre mi > En esta sección tenemos mi información personal más detallada y stack tecnológico manejado hasta el momento
- < formación académica > En esta sección tenemos toda mi información académica
- < esperiencia > En esta sección tenemos toda mi información laboral
- < habilidades > En esta sección tenemos toda la información de las habilidades técnicas y blandas
- < proyectos > En esta sección tenemos toda la información de proyectos realizados por mi
- < footer > En esta sección tenemos la licencia
Vista normal 🔎
Vista desde un movil 🔎
Gif - vista normal 🔎
Gif - vista con acceso a edición 🔎
( ▲ )
- Estos son las versiones de las tecnologias utilizadas dentro de mi proyecto.
Angular CLI: 15.0.0
Node: 18.12.1
Package Manager: npm 8.19.2
OS: win32 x64
Angular: 15.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
| Package | Version |
|---|---|
| @angular-devkit/architect | 0.1500.0 |
| @angular-devkit/build-angular | 15.0.0 |
| @angular-devkit/core | 15.0.0 |
| @angular-devkit/schematics | 15.0.0 |
| @schematics/angular | 15.0.0 |
| rxjs | 7.5.7 |
| typescript | 4.8.4 |
Para obtener una copia local en funcionamiento, seguí estos pasos :
-
Instalar el Administrador de paquetes de nodos. Node Package Manager (npm) es un repositorio de software para paquetes de JavaScript. Podes descargarlo ⋄ aca ⋄
-
Istalar angular CLI version 15
- npm
$ npm install -g @angular/cli
-
Clona el proyecto localmente.
git clone https://github.com/hebelia/front-end.git
-
Instalar paquetes npm.
npm install
-
Si encuentra algún informe de vulnerabilidad, corríjalo con:
npm audit fix
-
Abrir el proyecto en un navegador.
ng serve
( ▲ )
✔️ Mostrar información traida desde la base de datos
✔️ Ingresar con usuario/mail y contraseña para poder acceder al modo edición
✔️Editar la información de las distintas secciones
✔️Agregar nuevos apartados
✔️Uso de formularios reactivos
✔️Verificación de datos
✔️Eliminar la información
✔️Botones para redirigir al inicio
✔️Diseño responsive
- Toggle light & dark mode
- Mas funciones de accesibilidad
- Forma de contacto enviando un mail/mensaje dentro de la página
( ▲ )
Las contribuciones y sugerencias son lo que hace que la comunidad de código abierto sea un lugar increíble para aprender, inspirar y crear. Al estar comenzando mi camino en la programación cualquier contribución que hagas es apreciada enormemente 😄
📌 Las sugerencias al repositorio se pueden hacer generando un fork y haciendo un pull request o abriendo simplemente un "issue" con la etiqueta "mejora".
Sugerencias: ⋄ click aca ⋄ ver la lista completa de las características propuestas (y los problemas conocidos).
( ▲ )
( ▲ )
< Copyright © 2022 by Hebe Lia Romeu, all rights reserved >
Ir a `LICENSE.txt` para más información.