Scribd
Upload
13K views4 pages

Build A Personal Portfolio Webpage

The document is an HTML page for a personal portfolio website with the following key elements: - A header section with navigation links and an introduction with the name of the creator displayed using a JavaScript text animation effect. - A projects section to showcase examples of the creator's work. - Accompanying CSS stylesheet defining styles for typography, layout, navigation and other elements. It also includes the keyframe animation used for the text effect.

Uploaded by

EMANUEL
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
13K views4 pages

Build A Personal Portfolio Webpage

The document is an HTML page for a personal portfolio website with the following key elements: - A header section with navigation links and an introduction with the name of the creator displayed using a JavaScript text animation effect. - A projects section to showcase examples of the creator's work. - Accompanying CSS stylesheet defining styles for typography, layout, navigation and other elements. It also includes the keyframe animation used for the text effect.

Uploaded by

EMANUEL
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

** 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 {
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; /* Asegura que no haya márgenes en el cuerpo de la página */
}

.efect {
font-family: 'Poppins', sans-serif;
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 **

You might also like