El día de hoy les traigo un repositorio que les puede ser de utilidad para presentar su perfil profesional online, con una plantilla CSS profesional y un desarrollo en Angular que puede ser hosteado en un servidor gratuito.
¿Por qué tener un CV Web?
- Te diferencia de un CV tradicional, además tenes mejores posibilidades de presentación visual respecto a la hoja A4 del fichero docx.
- Es más fácil de compartir, solo necesitas pasar el enlace, sin necesidad de compartir un archivo.
- Puede ser el comienzo de tu portfolio laboral o marca personal, dicho cv puede ser al puerta de entrada a mostrar otros proyectos que hayas desarrollado.
Repositorio: https://github.com/nbent1996/filenotfound-cv.git
Puntos que vamos a tratar en este artículo
- Levantar el proyecto en tu pc y compilación para despliegue en el hosting.
- Desarrollo en Angular tomando como base la plantilla
- Generar despliegue en Netlify (hosting gratuito)
- Indexar en Google
Levantar el proyecto en mi máquina y compilarlo
Primeramente necesitaremos instalar node.js en nuestro equipo (link para descargar).
Luego debemos instalar Angular con el siguiente comando:
npm install -g @angular/cli
Verificamos instalación:
ng version
Para desplegar el proyecto en localhost ejecutamos lo siguiente:
ng serve
Nuestro sitio quedara disponible en http://localhost:4200, ahora es donde empezaremos a realizar cambios.
El otro tema, que necesitaremos recordar al final es el comando para hacer el build de despliegue en el hosting, que es el siguiente:
ng build --configuration production
Desarrollo en Angular tomando como base la plantilla
El proyecto angular esta separado por componentes, entre los cuales tenemos un header, un footer y distintas secciones que son referentes a nuestro CV. Primeramente vamos a modificar contenido del mismo, así que revisaremos los siguientes archivos:
src/app/layout/footer/footer.html
src/app/layout/header/header.html
En los mismos pondremos nuestros datos, links de referencia en el footer a linkedin, github y portfolio si lo tenemos, en el header tenemos la foto, links a secciones del cv y no mucho más.
En el tema de la foto lo que se necesita es una foto con relación 1:1 (ej: 500x500px) y recorte circular, para esto podemos visitar el siguiente sitio: https://circlecropimage.com/es/ , y hacemos el recorte según lo necesitemos.
Para modificaciones de contenido tenemos los siguientes ficheros:
src\app\sections\contact\contact.html
src\app\sections\education\education.html
src\app\sections\hero\hero.html
src\app\sections\profile-summary\profile-summary.html
Acá tenemos algo de contenido estático por modificar.
Después tenemos en ficheros typescript unos array con la data más importante del CV que serían Educación, Experiencia, Stack Tecnológico y Proyectos.
src\app\sections\education\education.ts
src\app\sections\experience\experience.ts
src\app\sections\projects\projects.ts
src\app\sections\tech-stack\tech-stack.ts
Después tenemos el fichero index.html que tiene algunas cosas interesantes:
<!doctype html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-E6NSTKT8SV"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-E6NSTKT8SV');
</script>
<meta charset="utf-8">
<title>NicolasBentancorCV</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="description" content="CV profesional de Nicolás Bentancor, desarrollador Java FullStack con experiencia en Spring Boot, Quarkus, Angular, DB2, PostgreSQL, Docker y automatización de pruebas.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://cv.filenotfound.com.uy/">
<meta property="og:title" content="Nicolas Bentancor | Java FullStack Developer">
<meta property="og:description" content="CV profesional de Nicolás Bentancor, desarrollador Java FullStack con experiencia en Spring Boot, Quarkus, Angular, DB2, PostgreSQL, Docker y testing automatizado.">
<meta property="og:url" content="https://cv.filenotfound.com.uy/">
<meta property="og:type" content="website">
<meta property="og:image" content="https://cv.filenotfound.com.uy/assets/preview-cv.png">
<meta property="og:image:secure_url" content="https://cv.filenotfound.com.uy/assets/preview-cv.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Nicolas Bentancor | Java FullStack Developer">
<meta name="twitter:description" content="CV profesional de Nicolás Bentancor, desarrollador Java FullStack.">
<meta name="twitter:image" content="https://cv.filenotfound.com.uy/assets/preview-cv.png">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Nicolas Bentancor",
"url": "https://cv.filenotfound.com.uy/",
"jobTitle": "Java FullStack Developer",
"description": "Desarrollador Java FullStack con experiencia en Spring Boot, Quarkus, Angular, DB2, PostgreSQL, Docker y automatización de pruebas.",
"sameAs": [
"https://filenotfound.com.uy/",
"https://www.linkedin.com/in/nicolasbentancor/"
],
"knowsAbout": [
"Java",
"Spring Boot",
"Quarkus",
"Angular",
"DB2",
"PostgreSQL",
"Docker",
"JUnit",
"Mockito",
"SonarQube",
"REST APIs"
]
}
</script>
</head>
<body>
<app-root></app-root>
</body>
</html>
La etiqueta meta name=”description” es la que muestra el fragmento de texto cuando encontramos nuestro CV en google.
Las etiquetas que empiezan con “og” son las que nos permiten configurar como se mostrara el preview de nuestro cv al compartir el CV en alguna red social, para esto tenemos la imagen que está en el siguiente link: https://cv.filenotfound.com.uy/assets/preview-cv.png
Esto no esta incluido en el proyecto, pero debemos generar una de 1200 x 630px y guardarlo dentro de public_html en nuestro hosting en la ruta assets/preview-cv.png.
Las etiquetas meta que tienen en su valor “twitter” son las que usa Twitter o X para cuando compartimos el link allí.
Despues tenemos el siguiente bloque:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Nicolas Bentancor",
"url": "https://cv.filenotfound.com.uy/",
"jobTitle": "Java FullStack Developer",
"description": "Desarrollador Java FullStack con experiencia en Spring Boot, Quarkus, Angular, DB2, PostgreSQL, Docker y automatización de pruebas.",
"sameAs": [
"https://filenotfound.com.uy/",
"https://www.linkedin.com/in/nicolasbentancor/"
],
"knowsAbout": [
"Java",
"Spring Boot",
"Quarkus",
"Angular",
"DB2",
"PostgreSQL",
"Docker",
"JUnit",
"Mockito",
"SonarQube",
"REST APIs"
]
}
</script>
Acá lo que se hace es darle un bloque de datos a Google, para explicarles quien somos y que representa nuestro sitio (es un insumo para el motor de búsqueda).
Con esto estaríamos finalizando lo que respecta a contenido, en lo que respecta a CSS cada componente del proyecto angular tiene su propia hoja de estilos, podemos inspeccionar color por color de cada elemento con herramientas del desarrollador (CTRL + SHIFT + I) y realizar retoques en ese sentido, también se pueden armar hojas de estilo nuevas desde 0 según lo que se quiera lograr (en mi caso no soy muy experto en hojas de estilo).
Con esto estaría pronta la parte desarrollo, seguimos con el siguiente punto.
Generar despliegue en Netlify (Hosting gratuito)
Si bien yo no uso este servicio, un colega que lo utiliza para sus proyectos me comentó que le resultó bueno y tiene el plus de ser gratuito. En Netlify nos registramos: https://app.netlify.com/signup
Después de registrarnos y llenar algunos datos nos encontramos con lo siguiente:
Se puede subir un zip con el contenido de nuestro proyecto o importar el proyecto Github si lo subimos a dicha herramienta.
Para subir el zip con todos los ficheros debemos ejecutar el siguiente comando en nuestro terminal:
ng build --configuration production
Esto nos genera un compilado y los ficheros estan en la carpeta dist.
Nosotros debemos guardar en un fichero zip todo el contenido de la carpeta browser, y subirlo en el sitio de Netlify.
Una vez finalizado el deploy visualizaremos un panel como el siguiente:
Nuestro CV ya está online, bajo un subdominio de netlify.app, si ingresamos en el mismo veremos nuestro CV.
Para modificar el “velvety-semolina-4a763a”, que es un nombre random que se asignó vamos a Quick Setup, buscamos un nombre disponible y estaría pronto lo que es el deploy.
Ahora continuaremos con el siguiente punto.
Indexar en Google
Esto es un adicional, que para que nuestro CV sea encontrado en Google, debemos indexarlo en Search Console.
Para esto nos vamos al siguiente link: https://search.google.com/search-console/about
Acá ingresamos con nuestra cuenta Google, y vamos a ir a donde nos permite Añadir propiedad.
Debemos ingresar el dominio de nuestra página:
Luego de esto la herramienta nos pedirá que subamos al directorio raíz de nuestro hosting un archivo html que les servirá para verificar que es nuestro el sitio.
Después de subir el fichero html, hacemos click en verificar y si nos salta un tick en verde, habremos verificado la misma.
Tenemos que agregar en la raíz de nuestro hosting los ficheros robots.txt y sitemap.xml, que son los siguientes:
User-agent: *
Allow: /
Sitemap: https://cvnicolasbentancor.netlify.app/sitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://cvnicolasbentancor.netlify.app/</loc>
<lastmod>2026-05-23</lastmod>
<priority>1.0</priority>
</url>
</urlset>
Recordar antes de subirlos, editarlos y poner las URL correspondientes a su sitio.
Para verificar que estos ficheros están correctamente subidos podemos entrar en las siguientes URL y debemos ver contenido:
https://cvnicolasbentancor.netlify.app/robots.txt
https://cvnicolasbentancor.netlify.app/sitemap.xml
Una vez terminamos esto nos vamos nuevamente a Search Console y en la barra superior ponemos la url de nuestro CV.
Si nos aparece de esta manera, indica que ya está en Google nuestra página, en algunos casos tarda unas horas en verificarse.
