"Technical skills" in het Nederlands betekent "technische vaardigheden". Dit verwijst naar de specifieke kennis en expertise die nodig is om bepaalde taken uit te voeren, vaak in een vakgebied zoals IT, engineering, wetenschap, of een ambacht.

"Personal skills" in het Nederlands betekent "persoonlijke vaardigheden". Dit verwijst naar de zachte vaardigheden (soft skills) die te maken hebben met persoonlijke eigenschappen, zoals communicatie, probleemoplossend vermogen, empathie, zelfmanagement, en teamwork. Deze vaardigheden zijn belangrijk voor interacties en persoonlijke ontwikkeling.

"Native speaker" in het Nederlands betekent "moedertaalspreker". Dit verwijst naar iemand die een bepaalde taal vanaf jonge leeftijd heeft geleerd en deze als zijn of haar eerste taal (moedertaal) spreekt. Een moedertaalspreker heeft meestal een natuurlijke beheersing van de taal, inclusief subtiele nuances en culturele contexten.

Om het niveau van taalvaardigheid te beschrijven, wordt vaak het Common European Framework of Reference for Languages (CEFR) gebruikt. Dit raamwerk verdeelt taalvaardigheid in zes niveaus:

Basisgebruiker

1. A1 (Beginner):

   • Begrijpt en gebruikt eenvoudige woorden en zinnen.
   • Kan zichzelf voorstellen en eenvoudige vragen beantwoorden.
   • Heeft hulp nodig in gesprekken.

2. A2 (Pre-Intermediate):

   • Begrijpt eenvoudige zinnen en veelgebruikte uitdrukkingen.
   • Kan eenvoudige taken uitvoeren, zoals boodschappen doen of de weg vragen.
   • Kan eenvoudige gesprekken voeren over vertrouwde onderwerpen.

Onafhankelijke gebruiker

3. B1 (Intermediate):

   • Begrijpt de hoofdpunten van gesprekken over alledaagse onderwerpen.
   • Kan zich redden in situaties tijdens reizen.
   • Kan eenvoudige teksten schrijven en praten over interesses of ervaringen.

4. B2 (Upper-Intermediate):

   • Begrijpt complexe teksten en kan spontaan en vloeiend communiceren.
   • Kan argumenten en standpunten duidelijk uitleggen.
   • Geschikt voor professioneel gebruik en studie.

Vaardige gebruiker

5. C1 (Advanced):

   • Begrijpt lange en complexe teksten, zowel inhoudelijk als impliciet.
   • Kan vloeiend en spontaan communiceren zonder veel aarzeling.
   • Geschikt voor academische of professionele contexten.

6. C2 (Proficient):

   • Begrijpt vrijwel alles wat wordt gelezen of gehoord.
   • Kan complexe informatie samenvatten en zich zeer nauwkeurig uitdrukken.
   • Communiceert op moedertaalniveau.

Andere termen voor taalvaardigheid:

• Native Speaker / Moedertaalspreker: Iemand die de taal als moedertaal spreekt.
• Vloeiend / Fluent: Spreekt de taal zonder moeite, meestal op B2/C1-niveau.
• Conversatievaardig: Kan gesprekken voeren, vaak op A2/B1-niveau.

Wil je een formele beoordeling, dan wordt vaak een CEFR-certificaat gevraagd via erkende tests zoals TOEFL, IELTS, DELF, of Goethe-certificaten.

"Education" in het Nederlands betekent "onderwijs" of "opleiding", afhankelijk van de context:

1. Onderwijs:

   • Verwijst naar het algemene systeem van leren en scholing.
   • Bijvoorbeeld: "Het onderwijssysteem in Nederland."

2. Opleiding:

   • Verwijst naar een specifieke cursus, training of studie.
   • Bijvoorbeeld: "Ik heb een opleiding gevolgd in informatica."

Contexten:

• Basis- en voortgezet onderwijs: Primair en secundair onderwijs.
• Hoger onderwijs: Universitaire en hogeschoolopleidingen.
• Beroepsonderwijs: Praktijkgerichte opleidingen (zoals MBO in Nederland).
• Zelfstudie/E-learning: Informele vormen van leren.

Als je "education" op je cv vermeldt, zou je dit kunnen vertalen naar "opleidingen" of "studieachtergrond".

Hier is een verbeterde versie van je "Over mij"-tekst met een betere grammatica, zinsstructuur en een professionele toon:

Over mij

Mijn naam is Yagmur en ik ben een 21-jarige student. Momenteel studeer ik ICT & Media aan Fontys Hogescholen in Eindhoven. Ik heb een passie voor ontwerpen en digitale kunst, en ben altijd op zoek naar manieren om mijn creatieve vaardigheden verder te ontwikkelen. Momenteel zit ik in het tweede semester van mijn opleiding, waarvoor ik deze digitale portfolio heb gemaakt.

In het verleden heb ik mijn HAVO-diploma behaald. Na de middelbare school heb ik 2,5 jaar Industrieel Product Ontwerpen (IPO) en Werktuigbouwkunde (WTB) gestudeerd aan het hbo. Helaas heb ik deze opleidingen niet afgerond vanwege de omstandigheden rondom Covid-19. Vervolgens heb ik kort Toegepaste Wiskunde (TW) gevolgd, maar deze studie voldeed niet aan mijn verwachtingen. Na uitgebreid onderzoek en het bijwonen van een meeloopdag, ontdekte ik ICT. Deze studie past perfect bij mij en ik geniet er tot nu toe enorm van.

Mijn softwarevaardigheden sluiten goed aan bij deze branche. Tijdens mijn tijd bij IPO heb ik al veel geleerd over de Adobe-programma’s, en deze kennis heb ik in de afgelopen twee semesters verder uitgebreid binnen ICT. Daarnaast heb ik ervaring opgedaan met Solidworks, wat tot nu toe niet direct nodig was, maar zeker een waardevolle vaardigheid is. Binnen ICT heb ik vooral gewerkt met Figma, en ben ik momenteel ook bezig met het leren van Blender om mijn 3D-ontwerpvaardigheden te ontwikkelen.

Deze versie is iets professioneler en overzichtelijker, zonder de persoonlijke toon te verliezen. Laat weten als je nog iets wilt aanpassen! 😊

Natuurlijk! Hier is een aangepaste versie die wat informeler en persoonlijker is, zodat het meer lijkt alsof jij het zelf hebt geschreven:

Over mij

Hoi! Mijn naam is Yagmur en ik ben 21 jaar. Ik studeer ICT & Media aan Fontys Hogescholen in Eindhoven. Ontwerpen en digitale kunst zijn echt mijn passie, en ik vind het geweldig om creatief bezig te zijn. Ik zit nu in het tweede semester van mijn studie en een van de opdrachten is om een digitale portfolio te maken, dus hier ben ik!

Voor deze studie heb ik HAVO gedaan. Daarna heb ik 2,5 jaar Industrieel Product Ontwerpen (IPO) en Werktuigbouwkunde (WTB) op het hbo gevolgd. Door de omstandigheden met Covid-19 heb ik deze opleidingen helaas niet af kunnen maken. Vervolgens heb ik een korte tijd Toegepaste Wiskunde (TW) gedaan, maar dat bleek niet echt mijn ding te zijn. Na wat onderzoek en een meeloopdag ben ik uiteindelijk bij ICT beland. Tot nu toe vind ik het superleuk en merk ik dat het echt bij me past.

Qua softwarevaardigheden heb ik al een goede basis die bij deze studie past. Bij IPO leerde ik werken met veel Adobe-programma’s, en tijdens ICT heb ik die kennis verder uitgebreid. Ook heb ik ervaring met Solidworks, wat ik nu niet direct gebruik, maar het is wel handig om te kunnen. In mijn ICT-studie werk ik veel met Figma, en ik ben ook bezig om mezelf Blender aan te leren om meer te doen met 3D-ontwerpen.

Deze versie klinkt meer alsof het in jouw eigen woorden is geschreven, maar met een betere flow en iets nettere zinsopbouw. Hopelijk voelt het zo beter aan! 😊

Hier is de tekst met correcte spelling en grammatica, zonder dat de zinnen volledig zijn veranderd:

Mijn naam is Yagmur. Ik ben een 21-jarige student. Ik studeer ICT & Media aan Fontys Hogescholen in Eindhoven. Ik heb een passie voor ontwerpen en ben altijd op zoek naar manieren om mijn creatieve vaardigheden te verbeteren. Ik zit momenteel in het tweede semester van mijn opleiding. Hiervoor moet ik een digitale portfolio maken.

Ik ben afgestudeerd op HAVO. Hierna heb ik 2,5 jaar Industrieel Product Ontwerpen (IPO) en Werktuigbouwkunde (WTB) gedaan op het hbo. Deze heb ik helaas niet afgerond door de omstandigheden met Covid-19. Daarna heb ik een korte periode Toegepaste Wiskunde (TW) gedaan. Deze opleiding voldeed niet aan mijn verwachtingen. Nadat ik goed onderzoek had gedaan en een meeloopdag had gevolgd, ben ik beland bij ICT. Ik vind het tot nu toe heel erg leuk en het past helemaal bij mij.

Mijn softwarevaardigheden sluiten aan bij deze branche. Bij IPO had ik al veel van de Adobe-programma’s geleerd. Deze vaardigheden heb ik de afgelopen twee semesters bij ICT nog meer verbeterd. Ook had ik geleerd hoe ik met Solidworks moet werken. Dit heb ik tot nu toe nog niet nodig gehad, maar het is een handige skill om te hebben. Bij ICT heb ik vooral geleerd om te werken met Figma. Ik ben momenteel ook aan het oefenen met Blender.

Alle fouten zijn gecorrigeerd, maar ik heb je eigen stijl zoveel mogelijk behouden! 😊

Om een vergelijkbaar ontwerp te maken met HTML en CSS, kun je een combinatie van flexbox en aangepaste stijlen gebruiken. Hier is een voorbeeld van hoe je het kunt opzetten:

HTML Code

html
KopiërenBewerken
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header>
      <h1>Portfolio</h1>
    </header>

    <div class="skills-section">
      <div class="column">
        <h2>Technische vaardigheden</h2>
        <div class="skills-icons">
          <img src="icons/ai.png" alt="Adobe Illustrator">
          <img src="icons/ps.png" alt="Photoshop">
          <img src="icons/id.png" alt="InDesign">
          <img src="icons/pr.png" alt="Premiere Pro">
          <img src="icons/figma.png" alt="Figma">
          <img src="icons/blender.png" alt="Blender">
          <img src="icons/solidworks.png" alt="SolidWorks">
        </div>
      </div>
      <div class="column">
        <h2>Persoonlijke vaardigheden</h2>
        <div class="skills-bars">
          <div class="skill">
            <p>Creativiteit</p>
            <div class="progress"><span style="width: 90%;"></span></div>
          </div>
          <div class="skill">
            <p>Teamwork</p>
            <div class="progress"><span style="width: 75%;"></span></div>
          </div>
          <div class="skill">
            <p>Verantwoordelijkheid</p>
            <div class="progress"><span style="width: 85%;"></span></div>
          </div>
          <div class="skill">
            <p>Communicatie</p>
            <div class="progress"><span style="width: 80%;"></span></div>
          </div>
        </div>
      </div>
    </div>

    <div class="languages-section">
      <h2>Talen</h2>
      <ul>
        <li>Nederlands - Advanced</li>
        <li>Engels - Advanced</li>
        <li>Turks - Advanced</li>
      </ul>
    </div>

    <div class="education-section">
      <h2>Opleidingen</h2>
      <ul>
        <li>Fontys Hogescholen (2020-2023) - Industrieel Product Ontwerpen en Werktuigbouwkunde</li>
        <li>Fontys Hogescholen (2023) - Toegepaste Wiskunde</li>
        <li>Fontys Hogescholen (2024 - heden) - ICT & Media</li>
      </ul>
    </div>

    <div class="contact-section">
      <h2>Contact</h2>
      <ul>
        <li>Helmond, Nederland</li>
        <li>+31 6 82 97 40 23</li>
        <li>yagmur.karabulut@live.nl</li>
        <li>Yagmur Karabulut</li>
      </ul>
    </div>
  </div>
</body>
</html>

CSS Code

css
KopiërenBewerken
/* General styles */
body {
  font-family: Arial, sans-serif;
  background-color: #2C003E;
  color: white;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

header h1 {
  text-align: center;
  margin-bottom: 30px;
}

/* Skills Section */
.skills-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.column {
  flex: 1;
  margin-right: 20px;
}

.column:last-child {
  margin-right: 0;
}

.skills-icons img {
  width: 40px;
  margin: 5px;
}

/* Progress Bars */
.skills-bars .skill {
  margin-bottom: 15px;
}

.skills-bars .progress {
  background: #4F4F4F;
  border-radius: 5px;
  overflow: hidden;
  height: 10px;
  margin-top: 5px;
}

.skills-bars .progress span {
  display: block;
  height: 100%;
  background: #FF007F;
}

/* Languages Section */
.languages-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Education Section */
.education-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.education-section ul li {
  margin-bottom: 10px;
}

/* Contact Section */
.contact-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-section ul li {
  margin-bottom: 10px;
}

Uitleg

1. Structuur met HTML:

   • Gebruik <div>-elementen om de secties in te delen.
   • Voeg kopteksten toe met <h2> en lijsten met <ul> en <li>.

2. Stijl met CSS:

   • Gebruik flexbox (display: flex) voor het indelen van de layout.
   • Stijl de progressiebalken met div-elementen en span om verschillende vaardigheidsniveaus te tonen.
   • Voeg iconen toe met <img> en zorg dat ze gestandaardiseerd worden.

3. Aanpassingen:

   • Pas de kleuren, marges of lettertypen aan om het ontwerp meer te personaliseren.
   • Voeg de daadwerkelijke icoonbestanden toe en verwijder eventuele voorbeeldbestanden (zoals icons/ai.png).

Laat me weten als je hulp nodig hebt bij het toevoegen van extra details of als je specifieke iconen wilt toevoegen! 😊

Om een Font Awesome-icoon zoals <i class="fa-solid fa-desktop"> te gebruiken, volg je deze stappen:

1. Voeg Font Awesome toe aan je project

Je kunt Font Awesome eenvoudig toevoegen via een CDN (Content Delivery Network). Plaats de volgende <link>-tag in het <head>-gedeelte van je HTML-bestand:

html
KopiërenBewerken
<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>

Dit zorgt ervoor dat je Font Awesome-iconen kunt gebruiken zonder dat je iets hoeft te downloaden.

2. Gebruik het icoon in je HTML

Je kunt een icoon toevoegen met de <i>-tag of <span>-tag en de Font Awesome-klasse. Bijvoorbeeld:

html
KopiërenBewerken
<i class="fa-solid fa-desktop" style="color: #ffffff;"></i>

• fa-solid: Stelt in dat je een "solid" icoon gebruikt.
• fa-desktop: Het specifieke icoon dat je wilt tonen.
• style="color: #ffffff;": Hiermee kun je de kleur van het icoon aanpassen.

3. Optionele aanpassingen

Je kunt extra stijlen en aanpassingen toevoegen met CSS of inline style:

Grootte aanpassen

Font Awesome-iconen zijn standaard in te stellen met klassen voor grootte:

html
KopiërenBewerken
<i class="fa-solid fa-desktop fa-lg"></i> <!-- Iets groter -->
<i class="fa-solid fa-desktop fa-2x"></i> <!-- 2x zo groot -->
<i class="fa-solid fa-desktop fa-3x"></i> <!-- 3x zo groot -->

Kleur aanpassen

Je kunt de kleur aanpassen via CSS:

html
KopiërenBewerken
<i class="fa-solid fa-desktop" style="color: #ff007f;"></i> <!-- Roze -->

Of gebruik een klasse in je eigen CSS:

html
KopiërenBewerken
<style>
  .custom-icon {
    color: #4CAF50; /* Groen */
    font-size: 30px; /* Grootte */
  }
</style>

<i class="fa-solid fa-desktop custom-icon"></i>

4. Extra tips

• Zorg dat je altijd de juiste Font Awesome-versie gebruikt. De fa-solid is alleen beschikbaar vanaf Font Awesome 5 of hoger.
• Je kunt ook andere stijlen proberen zoals:
  • fa-regular voor "regular" iconen.
  • fa-brands voor merken (bijvoorbeeld Facebook, Twitter).

Voorbeeld

Hier is een compleet voorbeeld:

html
KopiërenBewerken
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Awesome Example</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <style>
    .custom-icon {
      color: #4CAF50;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <h1>Mijn Font Awesome Icoon</h1>
  <i class="fa-solid fa-desktop" style="color: #ff007f;"></i>
  <i class="fa-solid fa-desktop fa-3x"></i>
  <i class="fa-solid fa-desktop custom-icon"></i>
</body>
</html>

Dit toont meerdere variaties van het desktop-icoon met verschillende stijlen! 😊

Om ervoor te zorgen dat de icoon en de tekst naast elkaar staan, kun je CSS gebruiken met behulp van flexbox of een andere eenvoudige stylingmethode.

Optie 1: Gebruik Flexbox

Flexbox is de beste manier om items naast elkaar uit te lijnen.

HTML

html
KopiërenBewerken
<div class="icon-text">
  <i class="fa-solid fa-desktop fa-2x"></i>
  <h2>Technische vaardigheden</h2>
</div>

CSS

css
KopiërenBewerken
.icon-text {
  display: flex;
  align-items: center; /* Zorgt dat ze verticaal gecentreerd staan */
  gap: 10px; /* Voeg ruimte toe tussen icoon en tekst */
}

.icon-text i {
  color: #4CAF50; /* Optioneel: Kies een kleur voor de icoon */
}

Optie 2: Gebruik display: inline-block

Als je geen Flexbox wilt gebruiken, kun je de inline-block-methode proberen.

HTML

html
KopiërenBewerken
<div class="icon-text-inline">
  <i class="fa-solid fa-desktop fa-2x"></i>
  <h2>Technische vaardigheden</h2>
</div>

CSS

css
KopiërenBewerken
.icon-text-inline i,
.icon-text-inline h2 {
  display: inline-block;
  vertical-align: middle; /* Zorgt dat ze verticaal gecentreerd zijn */
  margin: 0; /* Verwijdert extra marges */
}

.icon-text-inline i {
  margin-right: 10px; /* Ruimte tussen icoon en tekst */
}

Optie 3: Gebruik float

Hoewel minder modern, werkt float ook voor eenvoudige ontwerpen.

HTML

html
KopiërenBewerken
<div class="icon-text-float">
  <i class="fa-solid fa-desktop fa-2x"></i>
  <h2>Technische vaardigheden</h2>
</div>

CSS

css
KopiërenBewerken
.icon-text-float i {
  float: left;
  margin-right: 10px; /* Ruimte tussen icoon en tekst */
}

.icon-text-float h2 {
  overflow: hidden; /* Zorgt dat de tekst niet overlapt */
  line-height: 1.5; /* Aanpassen aan de icoonhoogte, indien nodig */
}

Aanbevolen oplossing: Flexbox

De Flexbox-oplossing is het meest flexibel en wordt aanbevolen, omdat het eenvoudig aanpasbaar is aan verschillende schermformaten en ontwerpen.

Laat weten of je nog extra hulp nodig hebt! 😊

Hier is de CSS die je kunt gebruiken om de lijststijl in dezelfde opmaak te krijgen als in de afbeelding. Dit zorgt ervoor dat de tekst mooi wordt uitgelijnd en de datum aan de rechterkant staat, terwijl de inhoud visueel goed georganiseerd blijft.

CSS

css
KopiërenBewerken
/* Algemene stijl voor de lijst */
li {
  display: flex;
  justify-content: space-between; /* Zorgt dat de datum rechts staat */
  align-items: flex-start; /* Zorgt dat tekst bovenaan begint */
  padding: 10px 0; /* Ruimte tussen lijstitems */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Optioneel: scheidingslijn */
  list-style: none; /* Geen opsommingstekens */
}

/* Schoolnaam en jaartal stijl */
.school {
  font-weight: bold; /* Maakt de schoolnaam dikker */
  flex: 2; /* Zorgt dat de schoolnaam meer ruimte krijgt */
  color: #fff; /* Witte tekstkleur */
}

/* Jaar stijl */
.jaar {
  flex: 1; /* Reserveert minder ruimte voor het jaar */
  text-align: right; /* Plaatst het jaartal rechts */
  color: rgba(255, 255, 255, 0.7); /* Iets lichtere tekstkleur */
  font-size: 0.9rem; /* Kleinere tekst */
}

/* Studie stijl */
.studie {
  flex: 3; /* Zorgt dat de studieomschrijving meer ruimte krijgt */
  line-height: 1.5; /* Meer ruimte tussen regels */
  color: rgba(255, 255, 255, 0.9); /* Witte tekstkleur met lichte transparantie */
}

Uitleg

1. Flexbox:

   • display: flex; wordt gebruikt om de items (school, jaar, en studie) naast elkaar te plaatsen.
   • justify-content: space-between; zorgt ervoor dat de inhoud verdeeld wordt met ruimte tussen de items.
   • align-items: flex-start; lijnt de inhoud aan de bovenkant uit.

2. flex-eigenschap:

   • Hiermee wordt bepaald hoeveel ruimte elk element inneemt. De flex: 2, flex: 1, en flex: 3 zorgen dat de tekst proportioneel wordt verdeeld.

3. Kleuren en lettertypen:

   • color: rgba(255, 255, 255, 0.9); zorgt voor een subtiele witte kleur met transparantie.
   • Gebruik een passend lettertype dat bij de rest van je design past (bijvoorbeeld "Roboto" of "Arial").

4. Responsiviteit:

   • Deze CSS werkt goed op een breed scherm, maar je kunt extra media queries toevoegen als je meer aanpassingen voor kleinere schermen wilt.

HTML

Hier is hoe je dit lijstitem kunt gebruiken in een volledige lijst:

html
KopiërenBewerken
<ul>
  <li>
    <p class="school">Fontys Hogescholen</p>
    <p class="jaar">2020-2023</p>
    <p class="studie">
      Industrieel Product Ontwerpen <br>
      Werktuigbouwkunde <br>
      HBO Bachelor
    </p>
  </li>
</ul>

Met deze opmaak krijg je een strak en goed uitgelijnd resultaat zoals in de afbeelding. Laat me weten als je hulp nodig hebt bij verdere aanpassingen! 😊

Om dit ontwerp te reproduceren met HTML en CSS, kun je de volgende code gebruiken. Het ontwerp in de afbeelding heeft een duidelijke scheiding tussen de schoolnaam, jaartal, en beschrijving. Hierbij maak ik gebruik van Flexbox voor de uitlijning en wat aanpassingen voor typografie.

HTML

html
KopiërenBewerken
<section class="opleiding">
  <h2><i class="fa-solid fa-book-open"></i> Opleidingen</h2>
  <ul>
    <li>
      <div class="header">
        <p class="school">Fontys Hogescholen</p>
        <p class="jaar">2020 - 2023</p>
      </div>
      <p class="studie">
        Industrieel Product Ontwerpen <br>
        Werktuigbouwkunde <br>
        HBO Bachelor
      </p>
    </li>
    <li>
      <div class="header">
        <p class="school">Fontys Hogescholen</p>
        <p class="jaar">2023 - 2023</p>
      </div>
      <p class="studie">
        Toegepaste Wiskunde <br>
        HBO Bachelor
      </p>
    </li>
    <li>
      <div class="header">
        <p class="school">Fontys Hogescholen</p>
        <p class="jaar">2024 - now</p>
      </div>
      <p class="studie">
        ICT & Media <br>
        HBO Associate Degree
      </p>
    </li>
  </ul>
</section>

CSS

css
KopiërenBewerken
/* Algemene sectie */
.opleiding {
  color: white;
  font-family: 'Arial', sans-serif;
  margin: 20px 0;
}

.opleiding h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Stijlen voor de lijst */
.opleiding ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.opleiding li {
  margin-bottom: 20px;
}

/* Schoolnaam en jaartal */
.header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.school {
  font-size: 1.2rem;
  font-weight: bold;
}

.jaar {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Studie-informatie */
.studie {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 5px;
  line-height: 1.5;
}

Resultaat

• De schoolnaam is vetgedrukt en groter.
• Het jaartal staat rechts uitgelijnd en heeft een lichtere kleur.
• De beschrijving van de opleiding (studie) staat eronder, met een subtiele marge en regelafstand.
• Het ontwerp is simpel, netjes en responsief.

Optioneel: Font Awesome

Als je het boekicoontje naast "Opleidingen" wilt gebruiken, voeg je de Font Awesome-stylesheet toe in je <head>:

html
KopiërenBewerken
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">

Met deze code krijg je een ontwerp dat overeenkomt met je voorbeeld. Laat me weten of je nog aanpassingen nodig hebt! 😊

Om ervoor te zorgen dat de schoolnaam en het jaartal naast elkaar staan, terwijl het jaartal een kleinere tekstgrootte heeft, kun je Flexbox gebruiken. Hieronder vind je een aangepaste versie van de HTML en CSS:

HTML

html
KopiërenBewerken
<li>
  <div class="header">
    <p class="school">Fontys Hogescholen</p>
    <p class="jaar">2020 - 2023</p>
  </div>
  <p class="studie">
    Industrieel Product Ontwerpen <br>
    Werktuigbouwkunde <br>
    HBO Bachelor
  </p>
</li>

CSS

css
KopiërenBewerken
/* Header-stijl voor school en jaartal */
.header {
  display: flex;
  justify-content: space-between; /* Plaatst items aan de uiteinden */
  align-items: baseline; /* Lijnt items uit op de basislijn van de tekst */
  margin-bottom: 5px; /* Ruimte tussen de header en de studie-informatie */
}

.school {
  font-size: 1.2rem; /* Grotere tekstgrootte voor de schoolnaam */
  font-weight: bold; /* Maakt de tekst vet */
  color: white; /* Witte kleur */
}

.jaar {
  font-size: 0.9rem; /* Kleinere tekstgrootte voor het jaartal */
  color: rgba(255, 255, 255, 0.7); /* Lichtere witte kleur */
  margin-left: 10px; /* Optioneel: ruimte tussen de schoolnaam en het jaartal */
}

Uitleg

1. display: flex; in .header:

   • Hiermee worden de schoolnaam en het jaartal naast elkaar geplaatst.
   • justify-content: space-between; zorgt dat de schoolnaam links staat en het jaartal rechts uitgelijnd is.

2. Tekstgrootte en kleur:

   • De schoolnaam is iets groter met font-size: 1.2rem.
   • Het jaartal is kleiner met font-size: 0.9rem en heeft een lichtere kleur door rgba(255, 255, 255, 0.7).

3. Verticale uitlijning met align-items: baseline;:

   • Zorgt ervoor dat de schoolnaam en het jaartal netjes op dezelfde tekstlijn worden uitgelijnd.

4. Marges:

   • Een kleine marge links (margin-left: 10px) of onder (margin-bottom: 5px) geeft extra ruimte tussen elementen voor een nettere opmaak.

Resultaat

De schoolnaam en het jaartal staan naast elkaar, met de schoolnaam in een groter lettertype en het jaartal rechts uitgelijnd en iets kleiner. Dit zorgt voor een strakke en goed georganiseerde presentatie. 😊

Het probleem waarbij het jaartal helemaal naar de rechterkant van het scherm wordt verplaatst, wordt veroorzaakt door de justify-content: space-between in de Flexbox. Dit zorgt ervoor dat de items (schoolnaam en jaartal) aan de uiterste randen van hun container worden geplaatst.

Om ervoor te zorgen dat de schoolnaam en het jaartal direct naast elkaar staan, kun je de volgende aanpassingen maken:

Oplossing: Gebruik gap in plaats van space-between

De gap-eigenschap zorgt voor ruimte tussen de schoolnaam en het jaartal zonder dat ze uit elkaar worden getrokken.

Aangepaste CSS

css
KopiërenBewerken
.header {
  display: flex;
  align-items: baseline; /* Lijnt de tekst verticaal uit op de basislijn */
  gap: 10px; /* Ruimte tussen de schoolnaam en het jaartal */
}

.school {
  font-size: 1.2rem; /* Grotere tekst voor de schoolnaam */
  font-weight: bold;
  color: white;
}

.jaar {
  font-size: 0.9rem; /* Kleinere tekstgrootte voor het jaartal */
  color: rgba(255, 255, 255, 0.7);
}

Uitleg

1. gap: 10px;:

   • Deze eigenschap voegt een vaste ruimte toe tussen de schoolnaam en het jaartal, zonder de elementen uit elkaar te trekken.

2. Geen justify-content:

   • We verwijderen justify-content: space-between;, omdat dit de items naar de uiterste randen van de container plaatst.

3. Flexbox blijft handig:

   • De display: flex; zorgt ervoor dat de items netjes naast elkaar blijven staan.

HTML blijft hetzelfde

Je hoeft niets aan de HTML te veranderen. Gebruik dezelfde structuur:

html
KopiërenBewerken
<li>
  <div class="header">
    <p class="school">Fontys Hogescholen</p>
    <p class="jaar">2020 - 2023</p>
  </div>
  <p class="studie">
    Industrieel Product Ontwerpen <br>
    Werktuigbouwkunde <br>
    HBO Bachelor
  </p>
</li>

Wat je kunt verwachten

De schoolnaam en het jaartal staan nu direct naast elkaar met een kleine ruimte (bijvoorbeeld 10px) ertussen, dankzij de gap-eigenschap. Ze worden niet langer uit elkaar getrokken. Laat me weten of dit je probleem oplost! 😊

Je HTML en CSS zijn goed georganiseerd! Op basis van je code en opmaakdoelen kan ik enkele verbeteringen en correcties aanbrengen, zodat de structuur en stijl overeenkomen met wat je wilt bereiken:

Verbeteringen aan CSS

1. education-section Jaartal en Schoolnaam Direct naast elkaar

Het probleem met te veel ruimte tussen de schoolnaam en het jaartal kan worden opgelost door gap te beperken of door de Flexbox-instellingen te verbeteren.

Aangepaste CSS voor .edu-header:

css
KopiërenBewerken
.edu-header {
  display: flex;
  justify-content: space-between; /* Verdeel items zonder extra ruimte */
  align-items: baseline; /* Zorg dat ze op dezelfde tekstlijn staan */
  gap: 5px; /* Beperk ruimte tussen school en jaartal */
  margin-bottom: 5px; /* Ruimte tussen de header en de studie-informatie */
}

2. Algemene marges en paddings verbeteren

Voor consistentie in de hele lay-out kun je de marges en padding van alle secties uniform maken.

CSS voor .container en secties:

css
KopiërenBewerken
.container {
  padding: 20px 90px; /* Zorgt voor ruimte rondom de inhoud */
}

section {
  margin-bottom: 40px; /* Voeg ruimte tussen secties toe */
}

3. Verbetering van Progress Bars

De progress bars voor persoonlijke vaardigheden zien er goed uit, maar je kunt wat flair toevoegen door een subtiele schaduw toe te voegen en de achtergrondkleur te verzachten.

CSS voor .skills-bars .progress:

css
KopiërenBewerken
.skills-bars .progress {
  background: #3B3B3B; /* Zachtere achtergrondkleur */
  border-radius: 20px;
  overflow: hidden;
  height: 30px; /* Iets kleinere hoogte */
  margin-top: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Subtiele schaduw */
}

.skills-bars .progress span {
  display: block;
  height: 100%;
  background: linear-gradient(to right, #FF007F, #D20C65); /* Gradientkleur */
}

4. Consistente icon-afmetingen

Zorg ervoor dat de iconen in de icon-text-sectie (zoals in technische vaardigheden) consistent blijven in grootte en uitlijning.

CSS voor .icon-text img:

css
KopiërenBewerken
.icon-text img {
  width: 50px; /* Zorg voor consistente grootte */
  height: 50px; /* Voorkom dat iconen onregelmatig worden geschaald */
  object-fit: contain; /* Zorgt dat iconen proportioneel blijven */
}

HTML Aanpassing

Voor de edu-header waar de schoolnaam en jaartal naast elkaar staan, voeg een extra container toe om duidelijkere scheiding te krijgen:

html
KopiërenBewerken
<div class="edu-header">
  <p class="school">Fontys Hogescholen</p>
  <p class="jaar">2020-2023</p>
</div>

Geoptimaliseerde Structuur

Voorbeeld Progress Bars:

Als je meer flexibiliteit wilt in progress bars, kun je dit in je HTML toepassen:

html
KopiërenBewerken
<div class="skills-bars">
  <div class="skill">
    <p>Creativiteit</p>
    <div class="progress">
      <span style="width: 90%;"></span>
    </div>
  </div>
</div>

Resultaat

• Schoolnaam en jaartal: Worden netjes uitgelijnd met een kleine ruimte ertussen en consistent in lettergrootte.
• Progress bars: Hebben een moderne uitstraling met een subtiele schaduw en een kleurrijke gradient.
• Icons: Hebben een uniforme grootte en blijven proportioneel.

Met deze aanpassingen behoud je de originele structuur, maar wordt alles iets strakker en visueel aantrekkelijker. Laat me weten als je nog specifieke aanpassingen wilt! 😊

Om de personal skills sectie aan de rechterkant te plaatsen en de technical skills en talen secties links onder elkaar te positioneren, kun je Flexbox gebruiken op de container waarin deze secties zich bevinden.

CSS Aanpassingen

1. Voeg Flexbox toe aan de .container

Je kunt de container die alle secties bevat instellen met display: flex; en vervolgens de layout aanpassen:

css
KopiërenBewerken
.container {
  display: flex;
  justify-content: space-between; /* Verspreid secties naar links en rechts */
  align-items: flex-start; /* Lijn de secties aan de bovenkant uit */
  flex-wrap: wrap; /* Zorg dat de inhoud op kleinere schermen wrapt */
  padding: 20px 90px; /* Extra padding voor consistentie */
}

2. Style de kolommen

Om ervoor te zorgen dat de technical skills en talen onder elkaar staan aan de linkerkant, gebruik je een aparte kolom:

css
KopiërenBewerken
.technical-skills-section, .languages-section {
  width: 48%; /* Beide secties nemen samen bijna de helft van de breedte */
  margin-bottom: 20px; /* Ruimte tussen de secties */
}

.personal-skills-section {
  width: 48%; /* Personal skills neemt de andere helft in */
  margin-left: auto; /* Zorgt dat deze aan de rechterkant staat */
}

3. Flex-wrap bij kleinere schermen

Voor responsieve weergave voeg je een media query toe, zodat de secties op kleinere schermen onder elkaar worden weergegeven:

css
KopiërenBewerken
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* Zet alles onder elkaar op kleinere schermen */
  }

  .technical-skills-section, .languages-section, .personal-skills-section {
    width: 100%; /* Zet alle secties op volledige breedte */
  }
}

HTML Structuur

De structuur blijft grotendeels hetzelfde, maar zorg ervoor dat technical skills en talen samen in de linkerkolom zitten:

html
KopiërenBewerken
<section class="inhoud">
  <div class="container">
    <!-- Linkerkolom: Technical Skills en Talen -->
    <div class="left-column">
      <div class="technical-skills-section">
        <div class="icon-text">
          <img src="images/technische.png" alt="technische vaardigheden icon">
          <h2>Technische vaardigheden</h2>
        </div>
        <div class="skills-icons">
          <img src="images/illustrator.png" alt="Adobe Illustrator">
          <img src="images/photoshop.png" alt="Photoshop">
          <img src="images/indesign.png" alt="InDesign">
          <img src="images/premier.png" alt="Premiere Pro"> <br>
          <img src="images/figma.png" alt="Figma">
          <img src="images/blender.png" alt="Blender">
          <img src="images/solidworks.png" alt="SolidWorks">
        </div>
      </div>

      <div class="languages-section">
        <div class="icon-text">
          <img src="images/talen.png" alt="talen icon">
          <h2>Talen</h2>
        </div>
        <ul>
          <li>Nederlands - Advanced</li>
          <li>Engels - Advanced</li>
          <li>Turks - Advanced</li>
        </ul>
      </div>
    </div>

    <!-- Rechterkolom: Personal Skills -->
    <div class="personal-skills-section">
      <div class="icon-text">
        <img src="images/persoonlijke.png" alt="persoonlijke vaardigheden icon">
        <h2>Persoonlijke vaardigheden</h2>
      </div>
      <div class="skills-bars">
        <div class="skill">
          <p>Creativiteit</p>
          <div class="progress"><span style="width: 90%;"></span></div>
        </div>
        <div class="skill">
          <p>Teamwork</p>
          <div class="progress"><span style="width: 75%;"></span></div>
        </div>
        <div class="skill">
          <p>Verantwoordelijkheid</p>
          <div class="progress"><span style="width: 85%;"></span></div>
        </div>
        <div class="skill">
          <p>Communicatie</p>
          <div class="progress"><span style="width: 80%;"></span></div>
        </div>
      </div>
    </div>
  </div>
</section>

Resultaat

1. Desktop-weergave:

   • De technical skills staan links bovenaan, met de talen er direct onder.
   • De personal skills staan rechts, netjes uitgelijnd.

2. Responsieve weergave (mobiel):

   • Alle secties worden onder elkaar weergegeven.

Laat me weten als je extra hulp nodig hebt of iets niet duidelijk is! 😊

Om een lange tekst leesbaarder te maken door het toevoegen van witruimte, kun je CSS gebruiken om marges, regelafstand en tekstuitlijning toe te passen. Hieronder staan enkele handige technieken:

1. Regelafstand instellen

De regelafstand bepaalt de ruimte tussen de regels van je tekst.

css
KopiërenBewerken
p {
  line-height: 1.6; /* Verhoog de regelafstand voor betere leesbaarheid */
}

2. Marges toevoegen

Voeg marges toe rond de tekst om ruimte te creëren tussen tekstblokken.

css
KopiërenBewerken
p {
  margin-bottom: 20px; /* Ruimte onder elk tekstblok */
}

3. Tekstbreedte beperken

Te lange regels tekst kunnen moeilijk te lezen zijn. Beperk de breedte van de tekst met max-width.

css
KopiërenBewerken
p {
  max-width: 800px; /* Beperk de breedte van de tekst */
  margin: 0 auto; /* Centreer de tekst als de breedte is beperkt */
}

4. Padding toevoegen

Gebruik padding om ruimte binnen een container toe te voegen.

css
KopiërenBewerken
.text-container {
  padding: 20px; /* Voeg ruimte binnen de container toe */
}

5. Uitlijning aanpassen

Gebruik tekstuitlijning om een meer evenwichtige presentatie te creëren:

css
KopiërenBewerken
p {
  text-align: justify; /* Uitlijning van tekst, gelijkmatige marges aan beide zijden */
}

Voorbeeld CSS

Hier is een complete voorbeeldstijl die alle bovenstaande technieken combineert:

css
KopiërenBewerken
.text-container {
  max-width: 800px; /* Beperk de breedte van de tekstcontainer */
  margin: 0 auto; /* Centreer de tekstcontainer */
  padding: 20px; /* Voeg binnenruimte toe */
  background-color: #f9f9f9; /* Optionele achtergrondkleur voor contrast */
  border-radius: 10px; /* Rond de hoeken af */
}

.text-container p {
  line-height: 1.8; /* Verhoog de regelafstand */
  margin-bottom: 20px; /* Voeg ruimte toe onder elk tekstblok */
  text-align: justify; /* Zorg voor nette uitlijning */
}

HTML Voorbeeld

Plaats je lange tekst in een container met de klasse .text-container:

html
KopiërenBewerken
<div class="text-container">
  <p>
    Dit is een voorbeeld van een lange tekst. Door witruimte toe te voegen met marges, padding en een beperkte tekstbreedte, wordt de tekst veel leesbaarder.
  </p>
  <p>
    Probeer altijd genoeg witruimte rond en tussen je tekst te gebruiken, zodat het ontwerp niet te druk wordt.
  </p>
</div>

Resultaat

Met bovenstaande aanpassingen:

• Is je tekst leesbaarder door voldoende witruimte.
• Wordt de tekst visueel aantrekkelijk door de juiste breedte en uitlijning.
• Voelt het geheel professioneler aan.

Laat weten als je specifieke hulp nodig hebt! 😊

Om een nieuwe pagina te maken met 6 blokken, waarbij elk blok een afbeelding heeft en een titel aan de onderkant, kun je HTML en CSS gebruiken. Hier is een voorbeeld van hoe je dit kunt implementeren:

HTML Code

html
KopiërenBewerken
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project Blokken</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <section class="projects-section">
    <h1>Projecten</h1>
    <div class="projects-grid">
      <!-- Blok 1 -->
      <div class="project-block">
        <img src="images/project1.jpg" alt="Project 1">
        <h3>Project Titel 1</h3>
      </div>
      <!-- Blok 2 -->
      <div class="project-block">
        <img src="images/project2.jpg" alt="Project 2">
        <h3>Project Titel 2</h3>
      </div>
      <!-- Blok 3 -->
      <div class="project-block">
        <img src="images/project3.jpg" alt="Project 3">
        <h3>Project Titel 3</h3>
      </div>
      <!-- Blok 4 -->
      <div class="project-block">
        <img src="images/project4.jpg" alt="Project 4">
        <h3>Project Titel 4</h3>
      </div>
      <!-- Blok 5 -->
      <div class="project-block">
        <img src="images/project5.jpg" alt="Project 5">
        <h3>Project Titel 5</h3>
      </div>
      <!-- Blok 6 -->
      <div class="project-block">
        <img src="images/project6.jpg" alt="Project 6">
        <h3>Project Titel 6</h3>
      </div>
    </div>
  </section>
</body>
</html>

CSS Code

css
KopiërenBewerken
/* Algemene styling */
body {
  font-family: 'Arial', sans-serif;
  background-color: #2C143C; /* Donkerpaarse achtergrond */
  color: white;
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
  color: #FCFD9D; /* Gele kleur voor de titel */
  margin: 20px 0;
}

/* Sectie styling */
.projects-section {
  padding: 20px;
}

/* Grid layout voor projecten */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Drie kolommen */
  gap: 20px; /* Ruimte tussen de blokken */
  padding: 20px;
}

/* Projectblok styling */
.project-block {
  background-color: #44224E; /* Iets lichtere paarse achtergrond */
  border-radius: 10px; /* Afgeronde hoeken */
  overflow: hidden;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtiele schaduw */
}

.project-block img {
  width: 100%; /* Afbeelding vult het blok volledig */
  height: 150px; /* Stel een vaste hoogte in voor afbeeldingen */
  object-fit: cover; /* Zorgt dat de afbeelding proportioneel blijft */
}

.project-block h3 {
  margin: 10px 0;
  font-size: 1.2rem;
  color: #FFF;
}

/* Responsiviteit */
@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr); /* Twee kolommen op kleinere schermen */
  }
}

@media (max-width: 480px) {
  .projects-grid {
    grid-template-columns: 1fr; /* Eén kolom op heel kleine schermen */
  }
}

Wat doet de code?

1. HTML:

   • Elk projectblok (project-block) bevat een afbeelding en een titel.
   • Er zijn 6 blokken in totaal, elk met een andere afbeelding en titel.

2. CSS:

   • Grid Layout: grid-template-columns: repeat(3, 1fr); zorgt voor een layout met 3 kolommen.
   • Afbeeldingen: Worden proportioneel weergegeven met een vaste hoogte en object-fit: cover.
   • Styling: Achtergrondkleuren, schaduwen en afgeronde hoeken maken de blokken visueel aantrekkelijk.

3. Responsiviteit:

   • Voor schermen kleiner dan 768px worden de blokken in 2 kolommen weergegeven.
   • Voor schermen kleiner dan 480px worden de blokken in 1 kolom weergegeven.

Afbeeldingen toevoegen

Vervang images/project1.jpg tot images/project6.jpg door de daadwerkelijke afbeeldingsbestanden van je projecten.

Met deze setup heb je een aantrekkelijke, responsieve pagina met 6 projectblokken die zowel op desktop als mobiel goed werken! 😊

Bij het configureren van FileZilla om je website te hosten op de HERA-server van Fontys, zijn er een paar gegevens die je nodig hebt. Over het algemeen ontvang je deze informatie van Fontys in de vorm van een e-mail of via hun online documentatie. Hier is een overzicht van wat je moet invullen:

1. FileZilla Instellen

Open FileZilla en ga naar de Site Manager via het menu (of druk op Ctrl + S).

Vereiste Informatie:

• Host: Dit is de servernaam van de HERA-host.

  • Dit is meestal iets als hera.fontys.nl of een andere specifieke servernaam.
  • Controleer de documentatie van Fontys of vraag dit na bij de IT-helpdesk.

• Port: Gebruik poort 22 (SFTP, veilige verbinding).

• Protocol: Kies SFTP - SSH File Transfer Protocol.

• Logontype: Kies Normaal.

• Gebruikersnaam: Dit is je Fontys-gebruikersnaam (bijvoorbeeld s123456).

• Wachtwoord: Dit is je Fontys-wachtwoord dat je gebruikt om in te loggen op je studentaccount.

2. Voorbeeld Configuratie

Zo zou je configuratie er in FileZilla uitzien:

• Host: hera.fontys.nl
• Port: 22
• Protocol: SFTP - SSH File Transfer Protocol
• Gebruikersnaam: s123456 (jouw Fontys-ID)
• Wachtwoord: Het wachtwoord dat je gebruikt voor je Fontys-account.

Klik daarna op Verbinden.

3. Uploaden van je Website

1. Na verbinding maak je verbinding met je HERA-server.
2. Aan de rechterkant van FileZilla zie je je serverbestanden (de HERA-mapstructuur).
3. Upload je bestanden in de juiste directory (meestal de public_html map of een map met een vergelijkbare naam).
4. Zorg dat je index.html bestand correct staat, omdat dit de hoofdpagina van je website is.

4. Waar kun je je website bekijken?

Na het uploaden kun je jouw website bekijken via een URL die Fontys aan jou heeft gegeven. Dit is vaak:

arduino
KopiërenBewerken
http://hera.fontys.nl/~[jouwgebruikersnaam]/

Bijvoorbeeld:

arduino
KopiërenBewerken
http://hera.fontys.nl/~s123456/

Problemen oplossen

Als je niet meer weet wat de exacte instellingen zijn:

1. Controleer de e-mail van Fontys waarin de HERA-hostinginformatie staat.
2. Neem contact op met de IT-helpdesk van Fontys. Zij kunnen je exact vertellen wat je hostnaam en andere instellingen moeten zijn.

Laat weten als je meer hulp nodig hebt! 😊