143 src/app/components/photo-gallery/photo-gallery.component.html
View file
@@ -1,45 +1,144 @@
<figure class="lightbox" [ngClass]="{'lightbox-visible': lightBox === true}">
<img class="lightbox-img">
<a class="close" (click)="lightBoxClose()">sluiten<svg class="close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 18"><g id="Laag_2-2" data-name="Laag 2"><line class="line" y1="1" x2="24" y2="1"/><line class="line" y1="17" x2="24" y2="17"/></g></svg>
</a>
</figure>
<!-- Bedrijf foto's -->
<figure>
<img [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/arbeidskamer.jpg" alt="">
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/arbeidskamer.jpg" alt="">
<figcaption>De arbeidskamer</figcaption>
</figure>
<figure>
<img [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/werkplek.jpg" alt="">
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/werkplek.jpg" alt="">
<figcaption>Mijn werkplek met daarnaast Fabio</figcaption>
</figure>
<figure>
<img [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/standup2.jpg" alt="">
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/standup2.jpg" alt="">
<figcaption>Alle aanwezige projectleiders en mensen van de productie komen bij elkaar tijdens de stand-up</figcaption>
</figure>
<figure>
<img [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/standup.jpg" alt="">
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/standup.jpg" alt="">
<figcaption>Scrummaster Thomas voor het scrumbord tijdens de stand-up</figcaption>
</figure>
<figure>
<img [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/review.jpg" alt="">
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/review.jpg" alt="">
<figcaption>Een presentatie van Joanne tijdens de review</figcaption>
</figure>
<figure>
<img [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/refinement.jpg" alt="">
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/refinement.jpg" alt="">
<figcaption>Backlog items pokeren bij de refinement</figcaption>
</figure>
<figure>
<img [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/refinement2.jpg" alt="">
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/refinement2.jpg" alt="">
<figcaption>Thomas zoekend naar het aantal punten dat hij het item schat</figcaption>
</figure>

<!-- Hedon foto's -->
<figure>
<img [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/hedon-header.jpg" alt="">
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/hedon/hedon-header.jpg" alt="">
<figcaption>Hedon - foto van een optreden</figcaption>
</figure>
<figure>
<img [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/hedon-header.jpg" alt="">
<figcaption>Hedon - foto van een optreden</figcaption>
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/hedon/hedon-homepage.png" alt="">
<figcaption>Hedon - een screenshot van de homepage</figcaption>
</figure>
<figure>
<img [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/hedon-header.jpg" alt="">
<figcaption>Hedon - foto van een optreden</figcaption>
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/hedon/bp-before.png" alt="">
<figcaption>Hedon - het bestelproces voordat de stijl was toegevoegd</figcaption>
</figure>
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/hedon/bp-after.png" alt="">
<figcaption>Hedon - het bestelproces nadat de stijl was toegevoegd</figcaption>
</figure>

<!-- 100-100-100 foto's -->
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/100-100-100/100-100-100-homepage.png" alt="">
<figcaption>100-100-100 - een screenshot van de homepage</figcaption>
</figure>
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/100-100-100/editie-1.png" alt="">
<figcaption>100-100-100 - een screenshot van editie Echt-Susteren</figcaption>
</figure>
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/100-100-100/editie-2.png" alt="">
<figcaption>100-100-100 - een screenshot van editie Vlaardingen</figcaption>
</figure>
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/100-100-100/editie-3.png" alt="">
<figcaption>100-100-100 - een screenshot van editie Bernheze</figcaption>
</figure>

<!-- bfo foto's -->
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/bfo/bfo-header.jpg" alt="">
<figcaption>BFO 2017 - een beeld van het festival op 5 mei 2016</figcaption>
</figure>
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/bfo/bfo-kickoff.jpg" alt="">
<figcaption>BFO 2017 - de leerlingen van Landstede Av-productie wordt gepresenteerd hoe 5 mei ongeveer zal lopen.</figcaption>
</figure>
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/bfo/bfo-regie.jpg" alt="">
<figcaption>BFO 2017 - binnen de regiewagen met op het witte scherm de animatie voor de sponsornamen</figcaption>
</figure>
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/bfo/bfo-screen.jpg" alt="">
<figcaption>BFO 2017 - Blaudzun op het podium en op het scherm met de sponsornamen eroverheen</figcaption>
</figure>
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/bfo/bfo-artiest.png" alt="">
<figcaption>BFO 2017 - artiest Blaudzun in het BFO/Jij &amp; Overijssel template voor Twitter</figcaption>
</figure>
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/bfo/bfo-template.png" alt="">
<figcaption>BFO 2017 - een live-blog post in het template</figcaption>
</figure>

<!-- voerdam foto's -->
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/voerdam/style-old.jpg" alt="">
<figcaption>Voerdam - de 1ste styleguide</figcaption>
</figure>
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/voerdam/screen-1.jpg" alt="">
<figcaption>Voerdam - het ‘kies een restaurant’ scherm van de 2de versie</figcaption>
</figure>
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/voerdam/screen-2.jpg" alt="">
<figcaption>Voerdam - het ‘bestel' scherm van de 2de versie</figcaption>
</figure>

<!-- JIJ foto's -->
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/jij/jij-header.jpg" alt="">
<figcaption>Jij &amp; Overijssel - een poster van het initiatief 'groen, groener, groenst'</figcaption>
</figure>
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/jij/jij-screen.jpg" alt="">
<figcaption>Jij &amp; Overijssel - de huidige homepagina</figcaption>
</figure>
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/jij/jij-wireframe.jpg" alt="">
<figcaption>Jij &amp; Overijssel - de wireframe voor het re-design van de homepagina</figcaption>
</figure>

<!-- Schone IJsseloevers foto's -->
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/ijssel/homepage.jpg" alt="">
<figcaption>Schone IJsseloevers - een screenshot van de homepagina</figcaption>
</figure>
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/ijssel/concept-first.jpg" alt="">
<figcaption>Schone IJsseloevers - het eerste concept van de lifecycle</figcaption>
</figure>
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/ijssel/steps.jpg" alt="">
<figcaption>Schone IJsseloevers - de stappen na het onderzoeken van de lifecycle van het afval dat in het water terecht komt</figcaption>
</figure>
<figure class="img-figure">
<img class="img-hover" (click)="lightBoxOpen($event)" [ngClass]="{'fade-in': imgLoaded === true}" src="assets/img/ijssel/ijsseloevers.jpg" alt="">
<figcaption>Schone IJsseloevers - het uiteindelijke concept van de lifecycle</figcaption>
</figure>


3 src/app/components/photo-gallery/photo-gallery.component.scss
View file
@@ -1,3 +1,4 @@
@import 'src/assets/scss/utils/all';
@import 'src/assets/scss/extends/all';
@import 'src/assets/scss/components/photo-gallery/all';
@import 'src/assets/scss/components/photo-gallery/all';
@import 'src/assets/scss/components/lightbox/all';
37 src/app/components/photo-gallery/photo-gallery.component.ts
View file
@@ -1,25 +1,38 @@
import { Component, OnInit } from '@angular/core';
import { Component, AfterViewInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AppService } from '../../services/app.service';

@Component({
selector: 'app-photo-gallery',
templateUrl: './photo-gallery.component.html',
styleUrls: ['./photo-gallery.component.scss']
styleUrls: ['./photo-gallery.component.scss'],
providers: [AppService]
})
export class PhotoGalleryComponent implements OnInit {
export class PhotoGalleryComponent implements AfterViewInit {
private data: any;
imgLoaded: boolean = false;
private lightBox: boolean = false;
private projects: any;
private projectImg: any;
private imgSrc: any;

constructor(private router: Router) {
constructor(private route: ActivatedRoute, private router: Router, private appService: AppService) {
};

ngOnInit() {
const imgs = document.querySelectorAll('img');
Array.from(imgs).forEach( (el) => {
el.onload = () => {
this.imgLoaded = true;
console.log(this.imgLoaded)
};
});
ngAfterViewInit() {
this.imgLoaded = true;
};

lightBoxOpen(event) {
const imgSrc = event.target.src;
this.lightBox = true;
document.querySelector('.lightbox-img').setAttribute('src', imgSrc);
document.body.style.overflow = 'hidden';
};

lightBoxClose() {
this.lightBox = false;
document.body.style.overflow = 'auto';
}
};

49 src/app/components/project/project.component.html
View file
@@ -1,27 +1,38 @@

<header class="project-header" [ngClass]="{'scrollTrue': projectScroll == true}">
<header class="project-header" [ngClass]="{'scrollTrue': projectScroll === true}">
<img class="bg-img" *ngIf="headerImg" [src]="data.headerImg" alt="project-foto">
<h1 class="project-title">{{data?.name}}</h1>
</header>
<div class="wrapper">
<aside class="bar-left">
<figure class="">
<img alt="foto">
<figcaption></figcaption>
</figure>
</aside>
<main class="project-story">
<h1>Inleiding</h1>
<p>{{data?.intro}}</p>
<figure class="lightbox" [ngClass]="{'lightbox-visible': lightBox === true}">
<img class="lightbox-img">
<a class="close" (click)="lightBoxClose()">sluiten<svg class="close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 18"><g id="Laag_2-2" data-name="Laag 2"><line class="line" y1="1" x2="24" y2="1"/><line class="line" y1="17" x2="24" y2="17"/></g></svg>
</a>
</figure>
<aside class="bar-left">
<figure *ngFor="let item of imgLeft">
<img class="img-hover" (click)="lightBoxOpen($event)" src="{{item.img}}" alt="foto">
<figcaption>{{item.description}}</figcaption>
</figure>
</aside>
<main class="project-story">
<h1>Inleiding</h1>
<p>{{data?.intro}}</p>

<h1>Proces</h1>
<p>{{data?.process}}</p>
</main>
<aside class="bar-right">
<figure class="img-1">
<img src="" alt="">
<figcaption></figcaption>
</figure>
</aside>
<h1>Proces</h1>
<p>{{data?.process}}</p>

<h1>Wat heb ik hiervan geleerd?</h1>
<p>{{data?.learned}}</p>

<h1 *ngIf="data?.projectLink">Link</h1>
<a class="project-link" [attr.href]="data?.projectLink" target="_blank">{{data?.projectLink}}</a>
</main>
<aside class="bar-right">
<figure *ngFor="let item of imgRight">
<img class="img-hover" (click)="lightBoxOpen($event)" src="{{item.img}}" alt="foto">
<figcaption>{{item.description}}</figcaption>
</figure>
</aside>
</div>
<app-footer [nextLink]="nextLink"></app-footer>
3 src/app/components/project/project.component.scss
View file
@@ -1,3 +1,4 @@
@import 'src/assets/scss/utils/all';
@import 'src/assets/scss/extends/all';
@import 'src/assets/scss/components/project/all';
@import 'src/assets/scss/components/project/all';
@import 'src/assets/scss/components/lightbox/all';
53 src/app/components/project/project.component.ts
View file
@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, AfterViewInit } from '@angular/core';
import { Route, ActivatedRoute, Router } from '@angular/router';
import { AppService } from '../../services/app.service';
import { HostListener} from '@angular/core';
@@ -10,24 +10,26 @@ import { HostListener} from '@angular/core';
})


export class ProjectComponent implements OnInit {
export class ProjectComponent implements AfterViewInit {
private data: any;
public nextLink: any;
private headerImg: any;
private imgLeft: any;
private imgLeft: Array<any>;
private imgRight: Array<any>;
private projectScroll = false;
private img: string;
private lightBox: boolean = false;
private projectLink: any;

constructor(private route: ActivatedRoute, private router: Router, private appService: AppService) {

this.router.events.subscribe((val) => {
// standard settings
document.body.scrollTop = 0;
this.projectScroll = false;
});
}

ngOnInit() {
ngAfterViewInit() {
this.route.params.subscribe((a: any) => {
// standard settings
window.scrollTo(0, 0);
document.body.style.pointerEvents = 'none';
this.projectScroll = false;

this.appService.getData(a.link).subscribe(b => {
this.data = b.find(c => c.link === a.link);
@@ -38,25 +40,40 @@ export class ProjectComponent implements OnInit {
this.headerImg = {
url: this.data.headerImg
};
this.imgLeft = {
img: this.data.imgLeft
};
this.imgLeft = this.data.imgLeft;
this.imgRight = this.data.imgRight;
this.projectLink = this.data.projectLink;
console.log(this.data);
});
});
}

lightBoxOpen(event) {
const imgSrc = event.target.src;
this.lightBox = true;
document.querySelector('.lightbox-img').setAttribute('src', imgSrc);
document.body.style.overflow = 'hidden';
};

lightBoxClose() {
this.lightBox = false;
document.body.style.overflow = 'auto';
}

@HostListener('window:scroll', [])
onWindowScroll() {
this.projectScroll = true;
@HostListener('window:scroll', ['$event'])
onWindowScroll($event) {
const docReady = document.readyState === 'complete';
const hasClass = document.querySelector('.project-header').classList.contains('scrollTrue');

if (document.body.scrollTop > 0 && !(document.querySelector('.project-header').classList.contains('scrollTrue'))) {
document.body.style.overflow = 'hidden';
if (document.body.scrollTop > 0 && !hasClass && docReady) {
document.body.style.overflow = 'hidden';
this.projectScroll = true;
};

if (document.body.style.overflow === 'hidden') {
setTimeout(function() {
document.body.style.overflow = 'auto';
document.body.style.pointerEvents = 'all';
}, 1600);
};
}
5 src/app/components/projects-intro/projects-intro.component.html
View file
@@ -6,7 +6,10 @@ <h1 *ngSwitchCase="'concepten'">
Concepten
</h1>
<h1 *ngSwitchDefault></h1>
</div>
<article *ngSwitchCase="'realisaties'">Als interactief mediavormgever moet ik opdrachten goed volgens de eisen kunnen uitvoeren. Tijdens mijn stage krijg ik veel opdrachten waarin ik kan laten zien dat ik de opdrachten kan uitvoeren volgens de verwachting van de opdrachtgever. In dit verslag vertel ik over 3 van deze opdrachten die ik uitgevoerd heb.</article>
<article *ngSwitchCase="'concepten'">Voordat er een idee tot een eindproduct ontwikkeld is, moet er eerst een concept bedacht en uitgewerkt worden. Soms moet er echt vanuit een idee iets bedacht worden en soms moet er concept bedacht worden om een bestaand product te verbeteren of te herzien. Tijdens mijn stage heb ik hier een aantal opdrachten van uitgevoerd. In dit hoofdstuk beschrijf ik het proces en bepaalde keuzes van 3 door mij gemaakte concepten zal beschrijven.</article>
<article *ngSwitchDefault></article>
</div>
<router-outlet></router-outlet>

<app-footer [nextLink]="nextLink" [ngClass]="{'invisible': notVisible === true}"></app-footer>
2 src/app/components/projects-intro/projects-intro.component.scss
View file
@@ -1,3 +1,3 @@
@import 'src/assets/scss/utils/all';
@import 'src/assets/scss/extends/all';
@import 'src/assets/scss/components/projects-intro/all';
@import 'src/assets/scss/components/text-only/all';
3 src/app/components/projects-intro/projects-intro.component.ts
View file
@@ -36,11 +36,12 @@ export class ProjectsIntroComponent implements OnInit {
};
};
});

this.appService.getGlobalData().subscribe(a => {
this.projects = a;
});
this.router.events.subscribe((val) => {

this.router.events.subscribe((val) => {
const url = this.router.url;
const checkIfParent = url.split('/').pop();
if (checkIfParent !== 'realisaties' && checkIfParent !== 'concepten') {
151 src/assets/data/data.json
View file

Large diffs are not rendered by default.

BIN +3.43 MB src/assets/data/stageverslag.pdf
View file
Binary file not shown.
0 src/assets/img/100-100-100-header.jpg → ...ts/img/100-100-100/100-100-100-header.jpg
View file
File renamed without changes.
BIN +96.7 KB src/assets/img/100-100-100/100-100-100-homepage.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +1.28 MB src/assets/img/100-100-100/editie-1.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +1.15 MB src/assets/img/100-100-100/editie-2.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +1.13 MB src/assets/img/100-100-100/editie-3.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +291 KB src/assets/img/bfo/bfo-artiest.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +794 KB src/assets/img/bfo/bfo-header.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +1.13 MB src/assets/img/bfo/bfo-kickoff.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +338 KB src/assets/img/bfo/bfo-regie.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +189 KB src/assets/img/bfo/bfo-screen.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +238 KB src/assets/img/bfo/bfo-template.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +362 KB src/assets/img/hedon/bp-after.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +867 KB src/assets/img/hedon/bp-before.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 src/assets/img/hedon-header.jpg → src/assets/img/hedon/hedon-header.jpg
View file
File renamed without changes.
BIN +168 KB src/assets/img/hedon/hedon-homepage.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +113 KB src/assets/img/ijssel/concept-first.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +139 KB src/assets/img/ijssel/homepage.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +3.27 MB src/assets/img/ijssel/ijssel-header.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +239 KB src/assets/img/ijssel/ijsseloevers.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +292 KB src/assets/img/ijssel/steps.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +706 KB src/assets/img/jij/jij-header.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +2.22 MB src/assets/img/jij/jij-screen.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +130 KB src/assets/img/jij/jij-wireframe.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +54.1 KB src/assets/img/voerdam/screen-1.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +50.2 KB src/assets/img/voerdam/screen-2.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +98.7 KB src/assets/img/voerdam/style-old.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN +276 KB src/assets/img/voerdam/voerdam-header.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 src/assets/scss/base.scss
View file
@@ -8,6 +8,10 @@ body {
color: black;
}

.invisible {
display: none;
}

.main-wrapper {
min-height: 100vh;
height: auto;
@@ -20,8 +24,13 @@ h1, h2, h3, h4, h5 {
font-family: $font-bold;
}

p, figcaption {
p, figcaption, article {
font-family: $font-light !important;
line-height: 1.6;
letter-spacing: .02em;
}

figcaption {
color: $color-grey;
font-size: $font-sm;
}
9 src/assets/scss/components/intro/_img.scss
View file
@@ -3,7 +3,14 @@ img {
transform: translate(-50%, -50%);
width: calc(100vw - 144px);
height: calc(100vh - 144px);
opacity: .6;
opacity: 0;
object-fit: cover;
object-position: center center;
z-index: -1;
animation: fadeIn forwards 1s .4s;
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity: .1;}
}
2 src/assets/scss/components/lightbox/_all.scss
View file
@@ -0,0 +1,2 @@
@import 'animations';
@import 'lightbox';
21 src/assets/scss/components/lightbox/_animations.scss
View file
@@ -0,0 +1,21 @@
.lightbox-visible {
visibility: visible !important;

&:before {
animation: slideIn .6s ease-in-out forwards;
}

.lightbox-img, .close {
animation: fadeIn .4s ease-in-out forwards .6s;
}
}

@keyframes slideIn {
from {left: -100%; opacity: 0;}
to {left: 0%; opacity: 1;}
}

@keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
70 src/assets/scss/components/lightbox/_lightbox.scss
View file
@@ -0,0 +1,70 @@
.lightbox {
width: calc(100vw - 144px);
height: calc(100vh - 144px);
visibility: hidden;
position: fixed;
overflow: hidden;
z-index: 1;

&:before {
content: '';
display: block;
z-index: 0;
position: absolute;
height: 100%;
width: 100%;
background-color: white;
opacity: 0;
left: -100%;
}

&-img {
opacity: 0 !important;
max-height: calc(100% - 40px);
max-width: 100%;
margin: 0 auto;
display: block;
}

.close {
display: inline-block;
margin: 20px auto;
color: $color-primary;
position: relative;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
opacity: 0;
font-family: $font-light;

&-icon {
@include size(14px, 12px);
margin-left: 8px;

.line {
fill:none;
stroke:#2131ff;
stroke-miterlimit:10;
stroke-width: 1.5px;
}
.line:first-child {
transform: translate(3px ,18px) rotate(-45deg);;
}

.line:last-child {
transform: translate(15px, -10.5px) rotate(45deg);
}
}
}
}

.img-hover {
transform: none;
transition: .2s ease-in-out;
cursor: zoom-in;
}

.img-hover:hover {
transform: scale(1.05);
}
6 src/assets/scss/components/photo-gallery/_animations.scss
View file
@@ -1,8 +1,8 @@
figure img {
animation: fadeIn forwards .4s ease-in 1.5s;
.img-figure .fade-in {
animation: fadeInImg forwards .4s ease-in 1.5s;
}

@keyframes fadeIn {
@keyframes fadeInImg {
from {opacity: 0;}
to {opacity: 1;}
}
6 src/assets/scss/components/photo-gallery/_figure.scss
View file
@@ -1,9 +1,9 @@
figure {
.img-figure {
@include size(calc(50% - 40px), 50vh);
float: left;
display: flex;
flex-direction: row-reverse;
margin: 20px 20px;
margin: 40px 20px;


img {
@@ -18,7 +18,5 @@ figure {
figcaption {
margin-right: 10px;
word-wrap: break-word;
color: $color-grey;
font-size: $font-sm;
}
}
2 src/assets/scss/components/project/_header.scss
View file
@@ -9,7 +9,7 @@

.bg-img {
@extend %bg-img;
opacity: .6;
opacity: .5;
}

.project-title {
7 src/assets/scss/components/project/_main.scss
View file
@@ -16,7 +16,12 @@
}

p {
font-size: $font-md;
margin-bottom: 60px;
}

.project-link {
font-family: $font-light;
color: $color-primary;
text-decoration: underline;
}
}
2 src/assets/scss/components/project/_sidebar.scss
View file
@@ -9,7 +9,7 @@
object-fit: cover;
object-position: center center;
width: 100%;
height: 360px;
height: 100%;
}
}

3 src/assets/scss/components/projects-intro/_all.scss
View file
@@ -1,3 +0,0 @@
.invisible {
display: none;
}
2 src/assets/scss/components/text-only/_all.scss
View file
@@ -0,0 +1,2 @@
@import 'article';
@import 'title';
9 src/assets/scss/components/text-only/_article.scss
View file
@@ -0,0 +1,9 @@
article {
max-width: 40vw;
display: block;
margin: 20px auto;

&.first {
margin: 40px auto;
}
}
19 src/assets/scss/components/text-only/_title.scss
View file
@@ -0,0 +1,19 @@
h1, h2 {
text-align: center;
margin-top: 20px;
}

h1 {
font-size: $title-sm;
font-family: $font-title;
}

h2 {
font-size: $font-lg;
}

h3 {
margin-top: 20px;
text-transform: uppercase;
font-size: em(16px);
}
2 src/styles.css
View file