SPA para mostrar un curriculum – Antonio García Prats

Voy a crear una SPA para mostrar un curriculum profesional. Este proyecto podéis copiarlo y compartirlo libremente. A continuación, incluiré los pasos detallados, el código necesario y explicaciones completas sobre cada comando y archivo generado.

1. Instalación de Angular CLI

Angular CLI es una herramienta que facilita la creación, desarrollo y construcción de aplicaciones Angular.

npm install -g @angular/cli

Este comando instala la herramienta de línea de comandos de Angular de forma global. Con Angular CLI podemos generar un proyecto y sus componentes de forma estructurada y rápida.

2. Crear un nuevo proyecto Angular

Ejecutamos el siguiente comando:

ng new professional-cv

Descripción:

ng new: Comando para crear un nuevo proyecto Angular.
professional-cv: Nombre del proyecto.

Durante la creación:

Elige CSS como preprocesador de estilos para simplificar.
La estructura del proyecto se genera automáticamente.

Navegar al directorio del proyecto

cd professional-cv

Esto nos mueve al directorio donde se encuentra el proyecto recién creado.

4. Generar componentes para la SPA

Angular usa componentes para dividir la lógica y la interfaz en bloques reutilizables. Vamos a crear los siguientes componentes:

header: Para mostrar el encabezado del currículum.
about: Para mostrar información personal.
experience: Para listar experiencia laboral.
skills: Para mostrar habilidades técnicas.
contact: Para mostrar información de contacto.

Ejecuta los comandos:

ng generate component header
ng generate component about
ng generate component experience
ng generate component skills
ng generate component contact

Explicación:

ng generate component [nombre] o ng g c [nombre]: Comando para generar un componente Angular.
Esto crea un directorio para el componente con los archivos:
- .component.ts: Contiene la lógica de la vista.
- .component.html: Contiene el HTML del componente.
- .component.css: Contiene los estilos específicos del componente.
- .component.spec.ts: Contiene las pruebas del componente.

5. Modificar el archivo `app.component.html`

El archivo src/app/app.component.html es el punto de entrada de nuestra aplicación. Reemplázalo con:

<app-header></app-header>
<app-about></app-about>
<app-experience></app-experience>
<app-skills></app-skills>
<app-contact></app-contact>

Esto incluye los componentes que hemos creado en la vista principal.

6. Implementar los componentes

Header Component

src/app/header/header.component.html:

<header>
  <h1>John Doe</h1>
  <h2>Software Developer</h2>
</header>

src/app/header/header.component.css:

header {
  text-align: center;
  background-color: #f4f4f9;
  padding: 20px;
}

About Component

src/app/about/about.component.html:

<section>
  <h2>About Me</h2>
  <p>I am a passionate software developer with over 5 years of experience...</p>
</section>

src/app/about/about.component.css:

section {
  padding: 20px;
  background-color: #e8e8e8;
}

Experience Component

src/app/experience/experience.component.html:

<section>
  <h2>Experience</h2>
  <ul>
    <li>Software Engineer at XYZ Corp (2020-2023)</li>
    <li>Frontend Developer at ABC Inc. (2017-2020)</li>
  </ul>
</section>

src/app/experience/experience.component.css:

section {
  padding: 20px;
}
ul {
  list-style: none;
  padding: 0;
}

Skills Component

src/app/skills/skills.component.html:

<section>
  <h2>Skills</h2>
  <ul>
    <li>Angular</li>
    <li>TypeScript</li>
    <li>JavaScript</li>
    <li>HTML/CSS</li>
  </ul>
</section>

src/app/skills/skills.component.css:

ul {
  display: flex;
  flex-wrap: wrap;
}
li {
  margin: 10px;
}

Contact Component

src/app/contact/contact.component.html:

<section>
  <h2>Contact</h2>
  <p>Email: john.doe@example.com</p>
  <p>Phone: +123456789</p>
</section>

src/app/contact/contact.component.css:

section {
  text-align: center;
}

7. Ejecutar la aplicación

Para iniciar el servidor de desarrollo, ejecuta:

ng serve

Esto arranca la aplicación en http://localhost:4200/.

8. Estructura del proyecto

La estructura principal de los archivos se ve así:

src/
├── app/
│   ├── header/
│   │   ├── header.component.html
│   │   ├── header.component.css
│   │   ├── header.component.ts
│   ├── about/
│   ├── experience/
│   ├── skills/
│   ├── contact/
│   ├── app.component.html
│   ├── app.component.css
│   ├── app.component.ts
├── assets/
├── environments/

Te invito a que me cuentes cuál es tu proyecto para ayudarte a hacerte realidad. Tienes a tu disposición mis datos de contacto en mi página web profesional.