Portfolio

Toen ik aankwam bij iDotmedia had ik zelf al een WordPress Thema geinstalleerd op “darudel.nl/marthijn” gecombineerd met een thema en wat van mijn eigen design. Compleet rommeltje was het. Ik had graag willen leren hoe je zelf een thema creëert en je eigen design daarboven op bouwt.

Hierdoor ben ik tussen de opdracht van iDotmedia kleine schetsen gaan maken die al aardig in de buurt kwamen voor mijn ultieme portfolio idee.

Grote afbeelding schetsen (voor een grotere versie, druk op de afbeelding)

Designs

(voor een grotere versie, druk op de afbeelding)

Nadat mijn schetsen compleet waren, kon ik beginnen aan mijn designs. Al gauw voelde ik me lichtelijk geïrriteerd over dynamische functies die je niet kan verwerken in Adobe Photoshop. Dan heb ik het bijvoorbeeld over een bewegend achtergrond, animaties, en javascript acties. Ik hoop hier later nog een manier voor te vinden.

Gelukkig weet ik nu rekening te houden met de tussenruimtes van objecten. Dit heb ik geleerd met het project van Den Helder Texel. Door genoeg speling te geven, wordt het leesplezier groter en groter.

De functies van elke knop, slider of animatie moest ik maar even opschrijven. Het gaat hier bijvoorbeeld om:

  • Elke “ik”, moet een zwevende animatie krijgen.
  • De skillbar wil ik geanimeerd hebben tijdens het bezoeken van het respectievelijke gedeelte van de website.
  • Mijn werk items moeten zowel een filter als scroll-able gallerij functie hebben.
  • Als je op waar ben ik drukt, vervaagt het formulier en mijn contactgegevens, en zoem je in op mijn adres vanaf de wereld.

 

Website

Toen mocht alles over na een complete website! Allereerst begon ik met opzetten van de thema zelf. Dit deed ik met behulp van de tool van Yo! Door middel van een third-party generator van Yo, kon ik gelijk beginnen met het designen van elke pagina die je nodig zou hebben voor een thema van WordPress. Het tooltje levert alleen niet de wordpress installatie aan. Deze moet natuurlijk eerst even geïnstalleerd worden op een lokale developers omgeving.

Om het voor mezelf makkelijk te maken, heb ik sommige delen van mijn code opgesplitst in verschillende onderdelen. Hiernaast zie je een voorbeeld van mijn structuur hiervan. Dit idee komt ook deels uit het opsplitsen van een SCSS structuur. Hierbij doe je hetzelfde, namelijk een .SCSS bestand aanmaken voor bv. lettertype, naviagtie, components, lightbox etc.

(voor een grotere versie, druk op de afbeelding)
(voor een grotere versie, druk op de afbeelding)

Na het verwerken van alle kolommen, teksten en testafbeeldingen, kon ik beginnen met alle custom fields. Hiermee bedoel ik de velden van ACF. Deze helpen mij om een complete interface te bouwen waarbij ik alles van mijn portfolio (bij de backend) kan aanpassen. Ik mag mezelf natuurlijk vrijlaten op elk stukje aanpasbaarheid, maar het back-end-eindresultaat voor mijn hoofdpagina kun je hiernaast zien. In dit geval heb ik een thema optie aangemaakt, genaamd “Home Instellingen”.

Verder heb ik met behulp van custom post types, een nieuwe “post soort” aangemaakt waarbij ik mijn werk en blog kan bijhouden. Bij elke blog post kan je weer verschillende velden toepassen. Hiernaast is een voorbeeld van de blog post die je nu aan het lezen bent!

(voor een grotere versie, druk op de afbeelding)

Resultaat

(voor een grotere versie, druk op de afbeelding)

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *