About Component

​

Overview

​

Purpose

• Provide detailed developer introduction
• Highlight key technologies and skills
• Emphasize practical experience and deployment capabilities
• Showcase professional interests and goals

​

Component Structure

import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  imports: [],
  templateUrl: './about.html',
  styleUrl: './about.css'
})
export class About {

}

​

HTML Template

<section class="py-10">
  <h2 class="text-2xl font-bold leading-tight tracking-tight px-4 pb-4 text-gray-900 dark:text-white">
    Sobre Mí
  </h2>
  <p class="text-gray-600 dark:text-gray-300 text-base font-normal leading-relaxed px-4">
    Desarrollador web jr con conocimientos en Angular, Node.js, Spring Boot, PostgreSQL y Docker, 
    enfocado en crear aplicaciones eficientes y escalables.
    Cuento con experiencia práctica en el desarrollo de CRUD completos, consumo de APIs REST, 
    integración de frontend y backend, y despliegue de aplicaciones en AWS EC2 y Vercel.
    Apasionado por la tecnología, la optimización de interfaces y el aprendizaje continuo, 
    busco aportar valor a equipos ágiles de desarrollo y proyectos innovadores.
  </p>
</section>

​

Content Breakdown

​

Section Heading

<h2 class="text-2xl font-bold leading-tight tracking-tight px-4 pb-4 text-gray-900 dark:text-white">
  Sobre Mí
</h2>

• Uses semantic <h2> tag
• Bold, large text (24px)
• Consistent padding with other sections

​

Biography Text

1. Technical Stack
   • Frontend: Angular
   • Backend: Node.js, Spring Boot
   • Database: PostgreSQL
   • DevOps: Docker
2. Practical Experience
   • Full CRUD development
   • REST API consumption
   • Frontend-backend integration
   • Cloud deployment (AWS EC2, Vercel)
3. Professional Focus
   • Efficient and scalable applications
   • Interface optimization
   • Continuous learning
   • Agile team collaboration

​

Typography

• Readable line height: leading-relaxed
• Base font size: text-base (16px)
• Muted text color: text-gray-600 dark:text-gray-300
• Consistent horizontal padding: px-4

​

Design Approach

• Simple and clean: Single paragraph format keeps bio scannable
• Content-focused: No distracting imagery or backgrounds
• Balanced spacing: py-10 on section provides breathing room

​

Dark Mode Support

• Heading: dark:text-white
• Body text: dark:text-gray-300
• Maintains readability across themes

​

Use Case

• Understanding of the developer’s expertise
• Insight into practical capabilities
• Context for the projects showcase that follows