Skip to content

Commit

Permalink
stijlen van de blog
Browse files Browse the repository at this point in the history
  • Loading branch information
@SamaraFellaDina
SamaraFellaDina committed Jun 18, 2024
1 parent 4108649 commit a0a8911
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 7 deletions.
20 changes: 16 additions & 4 deletions data.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@
"title": "Digital gardening",
"presentor": "Justus Sturkenboom",
"type": "presentatie",
"short-description": "Justus heeft ons meer vertelt over `digital gardening`, waarbij hij stapsgewijs laat weten hoe jij je eigen plekje claimt op het web.",
"short-description": "Justus heeft ons meer vertelt over <code>digital gardening</code>, waarbij hij stapsgewijs laat weten hoe jij je eigen plekje claimt op het web.",
"date": "15-03-2024",
"semester":"2",
"description": "<p>Justus heeft ons meer vertelt over `digital gardening`, waarbij hij stapsgewijs laat weten hoe jij je eigen plekje claimt op het web.</p><h2>Wat is Digital gardening?</h2><ul><li>Een authentieke manier van een website zonder het geprojecteerde beeld van andere websites</li><li>Freestylen</li></ul><h3>1. Iedere keer dat je web doorloopt ondek je nieuwe dingen</h3><ul><li>Typografie</li><li>Tijdlijn</li><li>Zorg dat concepten samenhangen</li></ul><h3>2. Continue groei</h3><ul><li>Het. is. nooit. af.</li></ul><h3>3. Imperfectie & publiek leren</h3><ul><li>Het hoeft niet perfect te zijn je mag de ontwikkeling laten zien.</li></ul><h3>4. Erg persoonlijk en origineel</h3><ul><li>Organiseer een tuin op jou ideeen</li></ul><h3>5. Samengaan van grote diverse inhoud</h3><ul><Li>claim jou plekje op het web</Li></ul><h3>6. onafhankelijheid</h3><ul><li>Wees de baas van je eigen data</li></ul><h3>Indieweb</h3><ul><li>oope -> Mijn link en het blijft mijn data</li><li>Pesos -> Data op eigen platform, word gedeeld op socials en platformen hebben machtiging op mijn data</li></ul>",
"description": "<p>Justus heeft ons meer vertelt over </code>digital gardening</code>, waarbij hij stapsgewijs laat weten hoe jij je eigen plekje claimt op het web.</p><h2>Wat is Digital gardening?</h2><ul><li>Een authentieke manier van een website zonder het geprojecteerde beeld van andere websites</li><li>Freestylen</li></ul><h3>1. Iedere keer dat je web doorloopt ondek je nieuwe dingen</h3><ul><li>Typografie</li><li>Tijdlijn</li><li>Zorg dat concepten samenhangen</li></ul><h3>2. Continue groei</h3><ul><li>Het. is. nooit. af.</li></ul><h3>3. Imperfectie & publiek leren</h3><ul><li>Het hoeft niet perfect te zijn je mag de ontwikkeling laten zien.</li></ul><h3>4. Erg persoonlijk en origineel</h3><ul><li>Organiseer een tuin op jou ideeen</li></ul><h3>5. Samengaan van grote diverse inhoud</h3><ul><Li>claim jou plekje op het web</Li></ul><h3>6. onafhankelijheid</h3><ul><li>Wees de baas van je eigen data</li></ul><h3>Indieweb</h3><ul><li>oope -> Mijn link en het blijft mijn data</li><li>Pesos -> Data op eigen platform, word gedeeld op socials en platformen hebben machtiging op mijn data</li></ul>",
"link-Github":""
},
{
Expand Down Expand Up @@ -104,7 +104,7 @@
"short_description": "Alles over Transitions en transform in css",
"date": "",
"semester":"1",
"description": "<h3>Transitions</h3><p>Wat houdt transitions in? Dit zijn de properties die ervoor zorgen dat je een element kan laten in een `:hover` element. Het heet dan ook transities, omdat de vorm wijzig door bepaalde acties of triggers.</p><h4>De basics</h4><p>Voor Transitions heb je verschillende waarden die je er op kan gebruiken. Deze kunnen ook gedefineerd worden op de `x`, `y` en zelfs de `z` as. Je hebt de volgende 3 waardes:</p><ul><li>`Rotate`: laat het element natuurlijk draaien</li><li>`Translate`: Kan de plaats van een element defineren</li><li>`Scale`: Bepaalt de grootte van het element</li></ul><p>Vervolgens kan je een `:hover` animatie ook defineren op duration, delay en zelfs timing-function. Wat houdt dat in</p><ul><li>`transition-duration`: Bepaald hoe lang een animatie duurt wanneer je eroverheen hovert.</li><li>`transition-delay`: Bepaald hoelang het duurt totdat de animatie afspeeld.</li><li>`transition-timing-function`: Bepaald de flow van de animatie. Denk aan een ease, ease-in of een ease-out animatie bijvoorbeeld. Dit zijn animatieflows die ook in programma's als AfterEffect en PremierePro worden gebruikt. Verder heb je ook flows als linear, waarbij de animatie in een gelijk tempo de animatie laat verlopen. </li></ul><p>Je kan het `transition` element ook in een short-hand term bepalen.</p><img src='https://github.com/SamaraFellaDina/we-love-web-notes/assets/144009778/24ca9504-f1cd-45a5-a63b-341cb090df94'><p>Met de shorthand methode gaat de eerste waarde over de `transiton-duration`, bij de tweede waarde over `transition-delay` en de laatste over de `transition-timing-function`.</p><h4>Wat valt nog meer op?</h4><p>Je kan ook een custom timing-function geven aan een element. Je kan hem dus aanpassen, maar hoe doe je dat? Er werd een site laten zien genaamd <a href='https://matthewlein.com/tools/ceaser'>Ceaser</a>, waarbij gemakkelijk de code werd bepaald voor een transitie. Zo kan je uiteindelijk een custom transitie geven aan een animatie.</p>",
"description": "<h3>Transitions</h3><p>Wat houdt transitions in? Dit zijn de properties die ervoor zorgen dat je een element kan laten in een <code>:hover</code> element. Het heet dan ook transities, omdat de vorm wijzig door bepaalde acties of triggers.</p><h4>De basics</h4><p>Voor Transitions heb je verschillende waarden die je er op kan gebruiken. Deze kunnen ook gedefineerd worden op de </code>x</code>, </code>y</code> en zelfs de </code>z</code> as. Je hebt de volgende 3 waardes:</p><ul><li></code>Rotate</code>: laat het element natuurlijk draaien</li><li><code>Translate</code>: Kan de plaats van een element defineren</li><li></code>Scale</code>: Bepaalt de grootte van het element</li></ul><p>Vervolgens kan je een </code>:hover</code> animatie ook defineren op duration, delay en zelfs timing-function. Wat houdt dat in</p><ul><li></code>transition-duration</code>: Bepaald hoe lang een animatie duurt wanneer je eroverheen hovert.</li><li><code>transition-delay</code>: Bepaald hoelang het duurt totdat de animatie afspeeld.</li><li></code>transition-timing-function</code>: Bepaald de flow van de animatie. Denk aan een ease, ease-in of een ease-out animatie bijvoorbeeld. Dit zijn animatieflows die ook in programma's als AfterEffect en PremierePro worden gebruikt. Verder heb je ook flows als linear, waarbij de animatie in een gelijk tempo de animatie laat verlopen. </li></ul><p>Je kan het </code>transition</code> element ook in een short-hand term bepalen.</p><img src='https://github.com/SamaraFellaDina/we-love-web-notes/assets/144009778/24ca9504-f1cd-45a5-a63b-341cb090df94'><p>Met de shorthand methode gaat de eerste waarde over de </code>transiton-duration</code>, bij de tweede waarde over <code>transition-delay</code> en de laatste over de </code>transition-timing-function</code>.</p><h4>Wat valt nog meer op?</h4><p>Je kan ook een custom timing-function geven aan een element. Je kan hem dus aanpassen, maar hoe doe je dat? Er werd een site laten zien genaamd <a href='https://matthewlein.com/tools/ceaser'>Ceaser</a>, waarbij gemakkelijk de code werd bepaald voor een transitie. Zo kan je uiteindelijk een custom transitie geven aan een animatie.</p>",
"link-Github": "https://github.com/SamaraFellaDina/we-love-web-notes/wiki/6.-Css-challenge-transitions-&-transforms"
},
{
Expand All @@ -130,5 +130,17 @@
"semester":"1",
"description": "<img src='https://private-user-images.githubusercontent.com/144009778/332064856-958058d6-c867-46d8-abbf-1c84b4f53dd9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTc5NDQzMzMsIm5iZiI6MTcxNzk0NDAzMywicGF0aCI6Ii8xNDQwMDk3NzgvMzMyMDY0ODU2LTk1ODA1OGQ2LWM4NjctNDZkOC1hYmJmLTFjODRiNGY1M2RkOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjA5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYwOVQxNDQwMzNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03MDhmNDhkMjFkNjMyYWM4MzYzN2FkZmYxZjI5YTJmNjkwNjU5ZGVmOGE2ZDQ4MTk4Nzc4NjhiNWE5NjIwN2Y2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.lxzNrM-SoiNYBI-jIYZ8VdnPyobnBynrmwqZaZgEMbM'><p><a href='https://miocene.io/'>Julia Miocene </a>is een product designer die specialiseert is in het maken van geanimeerde code en speelt hier veel mee. In haar presentatie laat ze een aantal voorbeelden zien waaraan ze heeft gewerkt. Mijn eerste impressie was dat ik het er zelf nogal gecompliceerd uit vond zien, aangezien ik veel met After Effects heb gewerkt wat heel erg anders werkt.</p><h3>Wie is Julia Miocene?</h3><p>Zij maakt veel boeiende css animaties voor verschillende bedrijven en haar doel bij het maken van deze animaties is om meer leven aan te brengen hieraan. Op <a href='https://codepen.io/miocene'>Codepen</a> vind je veel meer werk van haar waarmee zij experimenteert. Zoals het <a href='https://codepen.io/miocene/pen/PoRbQJM'>voorbeeld</a> hieronder.</p><img src='https://private-user-images.githubusercontent.com/144009778/332064599-2dfcd95f-c106-43bb-8bd4-379f7cbf4ebc.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTc5NDQzMzMsIm5iZiI6MTcxNzk0NDAzMywicGF0aCI6Ii8xNDQwMDk3NzgvMzMyMDY0NTk5LTJkZmNkOTVmLWMxMDYtNDNiYi04YmQ0LTM3OWY3Y2JmNGViYy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjA5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYwOVQxNDQwMzNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hODAwNTFhNzljYzkyMWY0YjFhMWMyMGExNDgyZWYyMzNlOTY1M2RlMGIyYjhmMGRiZThkNWNjNDY4NWQ2MDNjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.pRBeU1BMKVKWcdBnruFAwopP6vqLeKDLAXKBfEkBg7g'><h3>Meer willen leren?</h3><p>Voor degenen die geïnteresseerd waren in het starten met CSS-animaties, raadde ze bronnen aan zoals Codepen.io/challenges, Cssbattle.dev, en 100daysCSS.com.</p>",
"link-Github":"https://github.com/SamaraFellaDina/we-love-web-notes/wiki/9-%E2%80%90-Julia-Miocene"
}
},
{
"id": "12",
"slug": "Hello-world",
"title": "Hello world",
"presentor": "Hello world",
"type": "JS-fundamentals",
"short-description": "In deze blog ga ik kijken naar de verschillende Js fundamentals. Ik ga hier naar de belangrijke punten kijken die via deze bron word gegeven.",
"date": "",
"semester":"2",
"description":"",
"link-Github":"https://github.com/SamaraFellaDina/js-fundamentals/wiki/0-%E2%80%90-Hello-world"
}
]}
6 changes: 3 additions & 3 deletions public/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ a {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.hoofdpagina {
Expand Down Expand Up @@ -163,6 +164,7 @@ a {
/* Styles for the hovered element */
.hoofdpagina-blogs ul li:hover {
transform: scale(1.5); /* Scale up the hovered element */
transition-duration: 200ms ease-out;
border-radius: 15em;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
z-index: 10; /* Bring the hovered element to the front */
Expand Down Expand Up @@ -226,9 +228,7 @@ a {

.artikel {
background-color: var(--color-light-pink);
display: flex;
align-items: flex-start;
flex-direction: column;

}

.artikel section {
Expand Down

0 comments on commit a0a8911

Please sign in to comment.