Code Portfolio

HTML
CSS
Javascript

<!DOCTYPE html>
  <html lang="nl">

<head>
    <meta charset="UTF-8">
    <title>Home pagina portfolio</title>
    <link rel="stylesheet" href="css/css.css">
  </head>

<header class="">
      <h1>Daan Zwarthoed Portfolio</h1>
      <nav>
        <ul class="navigatie">
          <li class='linkOverMij'>Over mij</li>

<li class='linkGoals'>Goals</li>

<li class='linkContact'>Contact</li>
        </ul>
      </nav>

</header>

<main>

<div class="overMij">
        <span>
          <article>
            <h2>Over mij</h2>
            <p>Hallo, ik ben Daan Zwarthoed. Ik zit nu in mijn 2de jaar van Communication Multimedia design nadat ik in jaar 1 mijn propedeuse heb gehaald.
              Ik ben opzoek naar een stage in Frontend van 1 februari t/m 9 april 2021.</p>
          </article>
        </span>

<article>
          <h2>Mijn skills</h2>
          <p>Waar ik het beste in ben en het leukste vindt is Front-end. Ik vindt dit super leuk en vindt ook dat ik er goed in ben. HTML en CSS kan ik goed. Javascript is een stuk lastiger, maar ook hier kom ik meestal snel uit.</p>
          <p>Ik heb daarnaast ervaring met Adobe programma's zoals animate, illustrator, photoshop, XD en InDesign. </p>
          <p>U kunt ook nog kijken naar een aantal van mijn projecten.</p>
    <div w3-include-html="index.html"></div>

</article>

<div class="skills">
            <div></div>
          <a href="inleidingProgrammerenEindopdracht/pesten.html" target="_blank">pesten nagemaakt</a>

<a href="passieProject/index.html" class="middleLink" target="_blank">passie project</a>

<a href='link naar zelfgemaakte kijk naar deze code document' target="_blank">Code dit document</a>

</div>

<div class="MijnWerk">
        <h2>MijnWerk</h2>
        <embed src="images/portfolioZelf.pdf" width="100%" height="100%" type="application/pdf">
      </div>

<div class="goals">
        <article>
          <h2>Mijn goals in een stage</h2>
          <p>Er zijn 3 dingen waar ik graag aan wil werken in mijn stage.</p>
          <p>Als ik aan een en/of twee van deze doelen kan werken zal ik in mijn stage al super tevreden zijn.</p>
          <ul>

<li> <img src="images/html-css-js.png" alt="">
              <p>Ik wil ten eerste heel graag nog beter worden in HTML, CSS en Javascript. Ik ben hier al redelijk goed in. Maar ik weert ook dat er nog heel veel te leren valt.</p>
            </li>
            <li> <img src="images/cms.png" alt="">
              <p>Het tweede is CMS systemen zoals Wordpress. Ik heb hier nog weinig mee gewerkt en ben hier nog niet heel goed mee. Hier zou ik het leuk vinden om aan te werken. Ik realiseer namelijk dat ik later veel mee ga werken dus het is goed om
                daar
                nu mee te oefenen.</p>
            </li>
            <li><img src="images/jQuery.webp" alt="">
              <p>Het derde waar ik graag nog mee wil gaan werken is jQuery. Ik heb dit tot nu toe 1 keer gebruikt en ik vindt dit nog erg lastig. Ik zou hier graag meer over leren aangeizen het het coderen een stuk makkelijker kan maken</p>
            </li>

</ul>

</article>

</div>

<div class="contact">
        <h2>Contact</h2>
        <p>Hier zijn nog een aantal manieren om contact op te nemen. Ik reageer het snelste op whatsapp, maar andere opties zijn ook goed. Ik hoop u snel te spreken en fijne dag nog!</p>
        <span>
          <h3>Telefoonnummer: 06-25152933</h3>
          <a href="https://wa.link/ng2u4o" target="_blank">App mij</a>
        </span>
        <span>
          <h3>G-mail: daan.zwarthoed@gmail.com</h3>
          <a href="mailto:daan.zwarthoed@gmail.com">Stuur een mail</a>
        </span>
        <span>
          <h3>LinkedIn: Daan-Zwarthoed</h3>
          <a href="https://www.linkedin.com/in/daan-zwarthoed-1853421bb" target="_blank">LinkedIn</a>
        </span>
        <span>
          <h3>Woonplaats: Markelerbergpad 541, Amsterdam</h3>
          <a href="https://www.google.com/maps/place/OurDomain+Amsterdam+South+East/@52.2975543,4.9556101,17z/data=!3m1!4b1!4m5!3m4!1s0x47c60beff7edc3e5:0x28f848dd6a9cc4a!8m2!3d52.2975543!4d4.9577988" target="_blank">Locatie huis</a>
        </span>

</div>

</main>

</body>

</html>

/*begin algemeen*/
  *,
  html {
    box-sizing: border-box;
    margin: 0;
    color: white;
  }

p, li, a{
     font-size: 1.05em;
  }

header, footer {
    position: fixed;
    height: 5vh;
    width: 100vw;
    z-index: 10;
  }

/*Einde algemeen*/
  /* begin header */
  header {
    top: 0;
    padding: 1vw;
    padding-left: 1vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

nav li {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 8vw;
    border-radius: 10vw;
    margin: 1vw;
    height: 1.5em ;
    color: #667aff;
  }

/* einde header */
  /* begin div */
  main>div {
    padding: 1vw;
    padding-top: 8vh;
    padding-bottom: 8vh;
    height: 100vh;
  }

div h2 {
    margin-bottom: 1vh;
  }

.overMij {
    background-color: #667aff;
  }

.MijnWerk {
    background-color: #4f66ff;
  }

.goals {
    background-color: #3b54ff;
  }

.contact {
    background-color: #2b46ff;
  }

/* einde div */

/* begin over mij */
  .overMij{
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-content:flex-start;
    flex-wrap: wrap;
  }

.overMij > * {
    width: 600px;
    margin-bottom: 1vh;
    margin-top: 1vh;
  }

.overMij img {
   width: 300px;
  }

.skills{
    border-style: solid;
    border-color: white;
    display: flex;
    height: 200px;
    justify-content: space-around;
    position: relative;
    overflow: hidden;
  }

.skills div{
    position: absolute;
    border-style: solid;
    border-color: white;
    top: 75%;
    left: 50%;
    transform: translate(-50%, 0) rotate(45deg);
    width: 710px;
    height: 710px;

}

.skills a {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding-left: 10px; padding-right: 10px;
    width: 150px;
    border-radius: 100px;
    height: 1.5em;
    color: #667aff;
    text-decoration: none;
    margin-top: 50px;
  }

.middleLink{
    margin-top: 100px !important;
  z-index: 10;
  }

nav li:hover, a:hover, footer p:hover, .middleLink:hover{
    cursor: pointer;
    color: black !important;
  }
  /* einde over mij */

/* Begin CV */

/* Einde CV */

/* begin goals*/
  .goals article ul {
    margin-top: 1vh;
    height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

.goals ul {
    padding-left: 0;
  }

.goals article li {
    display: inline-flex;
    border-style: solid;
    border-color: white;
    height: 10.5em;
    padding: 0.3vh;
  }

.goals article img {
    display: inline-flex;
    width: 10em;
    object-fit:contain;
    margin-right: 1vw;
  }

.goals article li p{
    display: flex;
    justify-content: center;
    align-items:  center;
  }

/* einde goals */
  /* begin contact */
  .contact span {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    width: 48vw;
    height: 38vh;
  }

.contact span a {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 20vw;
    border-radius: 10vw;
    margin: 1vw;
    height: 6vh;
    color: #2b46ff;
    text-decoration: none;
  }

/* einde contact */
  /* begin footer */
  footer {
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
  }

footer p {
    background-color: white;
    width: 8vw;
    border-radius: 10vw;
    margin: 1vw;
    height: 3vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

/* einde footer */
  /* begin actief verandert */
  .actief {
    color: black !important;
  }

.kleurOverMij {
    color: #667aff;
  }

.kleurCV {
    color: #4f66ff;
  }

.kleurGoals {
    color: #3b54ff;
  }

.kleurContact {
    color: #2b46ff;
  }

.achtergrondKleurOverMij {
    background-color: #667aff;
  }

.achtergrondKleurCV {
    background-color: #4f66ff;
  }

.achtergrondKleurGoals {
    background-color: #3b54ff;
  }

.achtergrondKleurContact {
    background-color: #2b46ff;
  }

/* einde actief verandert */

/*jslint browser: true, devel: true, eqeq: true, plusplus: true, sloppy: true, vars: true, white: true*/

/*eslint-env browser*/

/*eslint 'no-console': 0*/
  // Start variablen nodig
  var overMij = document.querySelector('.overMij');
  var CV = document.querySelector('.CV');
  var goals = document.querySelector('.goals')
  var contact = document.querySelector('.contact');

var linkOverMij = document.querySelector('.linkOverMij');
  var linkCV = document.querySelector('.linkCV');
  var linkGoals = document.querySelector('.linkGoals');
  var linkContact = document.querySelector('.linkContact');

var currentPage = linkOverMij;
  var i;
  var k;
  var a;
  var e;
  var goDown = document.querySelector('.goDown');

var navigatie = document.querySelector('.navigatie');
  var kleurenArray = ['kleurOverMij', 'kleurCV', 'kleurGoals', 'kleurContact'];
  var veranderenArray = [goDown, linkOverMij, linkCV, linkGoals, linkContact];
  var gekozenKleur;

var scrollCV= CV.getBoundingClientRect().top + window.scrollY;
  var scrollGoals = goals.getBoundingClientRect().top + window.scrollY;
  var scrollContact = contact.getBoundingClientRect().top + window.scrollY;

var header = document.querySelector('header');
  var footer = document.querySelector('footer');
  var body= document.querySelector('body');
  var achtergrondKleurArray = ['achtergrondKleurOverMij', 'achtergrondKleurCV', 'achtergrondKleurGoals', 'achtergrondKleurContact'];
  var achtergrondVeranderenArray = [header, footer, body];
  var gekozenAchtergrondKleur;
  // Einde variablen nodig

// Start pagina updaten
  function updatePage() {
    currentPage.classList.remove('actief')

for (k = 0; k < kleurenArray.length; k++) {
      goDown.classList.remove(kleurenArray[k]);
      linkOverMij.classList.remove(kleurenArray[k]);
      linkCV.classList.remove(kleurenArray[k]);
      linkGoals.classList.remove(kleurenArray[k]);
      linkContact.classList.remove(kleurenArray[k]);
    }

for (a = 0; a <= achtergrondVeranderenArray.length; a++) {
     header.classList.remove(achtergrondKleurArray[a]);
     footer.classList.remove(achtergrondKleurArray[a]);
     body.classList.remove(achtergrondKleurArray[a]);
    }

if (scrollY < scrollCV) {
      currentPage = linkOverMij;
      gekozenKleur = 'kleurOverMij'
      gekozenAchtergrondKleur = 'achtergrondKleurOverMij';
      goDown.innerHTML = 'Go down'

} else if (scrollY < scrollGoals) {
      currentPage = linkCV
      gekozenKleur = 'kleurCV'
      gekozenAchtergrondKleur = 'achtergrondKleurCV';
      goDown.innerHTML = 'Go down'

} else if (scrollY < scrollContact) {
      currentPage = linkGoals;
      gekozenKleur = 'kleurGoals'
      gekozenAchtergrondKleur = 'achtergrondKleurGoals';
      goDown.innerHTML = 'Go down'

} else {
      currentPage = linkContact;
      gekozenKleur = 'kleurContact'
      gekozenAchtergrondKleur = 'achtergrondKleurContact';
      goDown.innerHTML = 'To top'
    }

for (var i = 0; i < veranderenArray.length; i++) {
      veranderenArray[i].classList.add(gekozenKleur)
    }
    for (var e = 0; e < achtergrondVeranderenArray.length; e++) {
      achtergrondVeranderenArray[e].classList.add(gekozenAchtergrondKleur)
    }
    currentPage.classList.add('actief');
  }
  updatePage();
  window.addEventListener('scroll', updatePage);
  // Einde pagina updaten

// Begin scrollen met knopjes bovenin
  function scroll(link) {
      if (link.classList[0] == 'linkOverMij') {
        overMij.scrollIntoView({
          behavior: 'smooth'
        });
      } else if (link.classList[0] == 'linkCV') {
        CV.scrollIntoView({
          behavior: 'smooth'
        });
      } else if (link.classList[0] == 'linkGoals') {
        goals.scrollIntoView({
          behavior: 'smooth'
        });
      } else if (link.classList[0] == 'linkContact') {
        contact.scrollIntoView({
          behavior: 'smooth'
        });
    }
    updatePage();

}

function triggerScroll() {
    scroll(this);
  }
  var t;

function navigatieUpdaten() {

li = document.querySelectorAll('li');
    for (t = 0; t < li.length; t++) {
      result = li[t];
      result.addEventListener('click', triggerScroll);
    }

}
  navigatieUpdaten();

// Einde scrollen met knopjes bovenin

// Begin pagedown onderin
  function pageDown(page) {
    if (page.classList[0] == 'linkOverMij') {
      CV.scrollIntoView({
        behavior: 'smooth'
      });
    } else if (page.classList[0] == 'linkCV') {
      goals.scrollIntoView({
        behavior: 'smooth'
      });
    } else if (page.classList[0] == 'linkGoals') {
      contact.scrollIntoView({
        behavior: 'smooth'
      });
    } else if (page.classList[0] == 'linkContact') {
      overMij.scrollIntoView({
        behavior: 'smooth'
      });
    }
    updatePage();
  }

goDown.addEventListener('click', function() {
    pageDown(currentPage);
  })

// Einde pagedown onderin