Fork deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: docs/INSTRUCTIONS.md

iO | Portfolio

📚 Inhoudsopgave

• Beschrijving
• Gebruik
• Kenmerken
• Installatie
• Bronnen
• Licentie

Beschrijving

iO wilde graag een mooie en unieke cv-webpagina waar hiring managers van bedrijven gemakkelijk via URL een front-ontwikkelaar cv kunnen bekijken

Gebruik

De highring manager, de eindgebruiker kan gemakkelijk de cv van een front-ontwikkelaar bekijken via een URL. De cv-pagina bevat leuke animaties en kan worden doorlopen door te scrollen.

Kenmerken

Mijn cv-webpagina bevat verschillende animaties, ik heb een typeWriter effect de h1 van mijn pagina gevoegd, vond het een leuke animatie om te implementer. Hiervoor heb ik Html Css JavaScript gebruik van gemaakt.

• HTML

        <!------------------------------------ HOME -->
        <section class="home" id="home">
            <div class="home-data">
                <h1 class="home-title">
                    Hoi,<br />Ik ben <span class="home-title-color">Beau</span> <br>
                    <span id="typewriter" class="typewriter"></span>
                </h1>

• JAVASCRIPT

// -------------------------- TypeWriter
const text = "Frontend Master"; // Tekst die getypt moet worden
const delay = 100; // Vertraging tussen elke letter (in milliseconden)

const typewriter = document.getElementById('typewriter');
let index = 0;

function type() {
  if (index < text.length) {
    typewriter.textContent += text.charAt(index);
    index++;
    setTimeout(type, delay);
  } else {
    setTimeout(erase, 2000); // Wacht 2 seconden voordat de tekst wordt gewist
  }
}

function erase() {
  if (index >= 0) {
    typewriter.textContent = text.substring(0, index);
    index--;
    setTimeout(erase, delay);
  } else {
    index = 0;
    setTimeout(type, delay); // Begin opnieuw met typen
  }
}

window.addEventListener('load', type);

• CSS

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  margin: -5px;
  letter-spacing: 0.15em;
}

.typewriter::after {
  content: "|"; /* Knipperende cursor */
  display: inline-block;
  animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
  from,
  to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

#typewriter {
  font-family: "poppins", sans-serif;
}

Installatie

In dit project is gebruik gemaakt van : Node Express EJS Voor het installeren van node gebruikte ik het commando npm init om node te initialiseren. Volgens deze modules kunnen geinstalleerd worden doormiddel van: npm install, express , ejs

Om de applicatie te laten werken, voer dan het volgende commando uit: npm start

Bronnen

• MDN
• CSS Tricks
• Dribbble
• Colooors
• codepen
• Cyclic

Licentie

This project is licensed under the terms of the MIT license.