Build A Personal Portfolio Webpage

** start of undefined **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portafolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="hero">
<nav id="navbar">
<h2 class="hero__title">Personal Portafolio</h2>
<ul>
<li class="ul__li"><a href="#" class="cta">Inicio</a></li>
<li class="ul__li"><a href="#" class="cta">Acerca de mí</a></li>
<li class="ul__li"><a href="#" class="cta">Contacto</a></li>
</ul>
</nav>
<section class="hero__main" id="welcome-section">

<h1 class="title">Mi nombre es <span class="efect"></span></h1>
<p class="hero__paragraph">Lorem ipsum dolor sit amet consectetur

adipisicing elit. Autem laborum id cumque sed recusandae fugit libero atque nostrum
culpa molestias, ducimus praesentium sequi, inventore, quidem assumenda sapiente!
Placeat, iste dolores? </p>
</section>
<section id="projects">
<h2 class="project-tile"><a href="#" id="profile-
link"target="_blank">Mis Proyectos</a></h2>
</section>
</header>
<script>
document.addEventListener('DOMContentLoaded', function () {
var texto = "Emmanuel Mercado Fuentes";
var velocidadEscritura = 120; // Ajusta la velocidad de escritura (en
milisegundos)
var container = document.querySelector('.efect');

var i = 0;
function escribirTexto() {
if (i < texto.length) {
container.innerHTML += texto.charAt(i);
i++;
setTimeout(escribirTexto, velocidadEscritura);
} else {
// Agregar animación de cambio de color al texto
container.style.animation = "changeColor 4s infinite"; // número de colores
}
}
// Inicia el efecto de escritura
setTimeout(escribirTexto, velocidadEscritura);
});
</script>
</body>
</html>
** end of undefined **
** start of undefined **
@import url(https://fonts.googleapis.com/css2?
family=Poppins:wght@100;200;300;400;500;600;800;900&display=swap);
body {
font-family: 'Poppins', sans-serif;
background-image: url(https://midu.dev/images/wallpapers/una-taza-de-
javascript.png);
color: white;
background-repeat: no-repeat;
}
*{
margin: 0;
text-decoration: none;
line-height: 1.5;
list-style: none;
text-align: center;
flex-wrap: wrap;
}
#navbar{
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
}
header{
margin: 0 auto;
width: 95%;
max-width: 1200px;
}
ul{
display: flex;
}
li{
margin-right: 15px;
}
.title{
font-size: 2.5em;
color: #3CD4F0;
}
.hero__main{
display: flex;
flex-direction: column;
/* border: 3px solid crimson; */
height: 400px;
align-items: center;
justify-content: center;
}
body {
background-image: url(https://midu.dev/images/wallpapers/una-taza-de-
javascript.png);
color: white;
background-repeat: no-repeat;
margin: 0; /* Asegura que no haya márgenes en el cuerpo de la página */
}
.efect {
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #000; /* Cursor efecto */
animation: cursor-blink 0.8s infinite; /* Animación del cursor parpadeante */
display: inline-block; /* Asegura que la animación de cambio de color funcione
correctamente */
line-height: 1.5; /* Ajusta la altura de línea */
vertical-align: middle; /* Alinea verticalmente en el medio del contenedor */
flex-wrap: wrap;
}
@keyframes cursor-blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
@keyframes changeColor {
0% {
color: red; /* Primer color */
}
5% {
color: orange; /* Segundo color */
}
10% {
color: yellow; /* Tercer color */
}
15% {
color: green; /* Cuarto color */
}
20% {
color: blue; /* Quinto color */
}
25% {
color: indigo; /* Sexto color */
}
30% {
color: violet; /* Séptimo color */
}
35% {
color: pink; /* Octavo color */
}
40% {
color: cyan; /* Noveno color */
}
45% {
color: magenta; /* Décimo color */
}
50% {
color: lime; /* Undécimo color */
}
55% {
color: teal; /* Duodécimo color */
}
60% {
color: brown; /* Decimotercer color */
}
65% {
color: purple; /* Decimocuarto color */
}
70% {
color: gold; /* Decimoquinto color */
}
75% {
color: silver; /* Decimosexto color */
}
80% {
color: gray; /* Decimoséptimo color */
}
85% {
color: coral; /* Decimoctavo color */
}
90% {
color: navy; /* Decimonoveno color */
}
95% {
color: olive; /* Vigésimo color */
}
100% {
color: red; /* Vuelve al primer color para cerrar el bucle */
}
}
@media screen and (max-width:375px){

body{
flex-wrap: wrap;
}
}
** end of undefined **

Build A Personal Portfolio Webpage

Uploaded by

Copyright:

Available Formats

You might also like

Build A Personal Portfolio Webpage

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Build A Personal Portfolio Webpage

Uploaded by

Copyright:

Available Formats

start of undefined

<section class="hero__main" id="welcome-section">

<p class="hero__paragraph">Lorem ipsum dolor sit amet consectetur

var container = document.querySelector('.efect');

@media screen and (max-width:375px){

You might also like