Mijn oude portfolio-website was een website waar verouderde projecten op stonden en daarbij ook een WordPress-template dat ik zelfs maar amper had aangepast. Ook was het een website die ruim 5 jaar oud was en ook 5 jaar oude projecten als inhoud had. Om goed te laten zien waar ik goed in ben was het nodig om zelf een website te maken, en omdat ik ook erg gegroeid ben in het maken van WordPress-websites, besloot ik een WordPress-template te gaan maken from scratch.
Bekijk de code van dit project in de view source tool
Het wireframe van de hoofdpagina
Het low-fidelity prototype van de hoofdpagina
Mijn taak
Het maken van deze website was ontzettend lastig omdat het een website voor mezelf betrof. Bij andere klanten ondervroeg ik ze en maakten we samen schetsen, maar nu was ik zelf de ‘klant’. Het was dus eerst zaak om neer te zetten wat ik belangrijk vond en daarna met WordPress aan de slag te gaan om een goed werkend, dynamisch portfolio op te kunnen zetten. Mijn doel was om voor deze website zo min mogelijk JavaScript en WordPress plugins te gebruiken.
De uitgevoerde activiteiten
Ten eerste heb ik opgeschreven wat ik belangrijk vond om te laten zien op mijn website. Dit heb ik in een lijstje gezet:
- De bezoeker moet me kunnen leren kennen
- Ik beperk de inhoud tot de paar projecten waar ik trots op ben, niet (zoals op mijn oude website) bijna alles wat ik ooit gemaakt heb
- De bezoeker moet plezier kunnen hebben op de website door mooie en grappige effecten
- De (daarin geïnteresseerde) bezoeker moet kunnen zien wat mijn niveau van coderen is en de website moet dit accuraat kunnen weergeven
- De website moet qua User eXperience op een hoog niveau staan
- De bezoeker moet op een makkelijke manier contact met me op kunnen nemen
De grote afbeelding op de homepagina
Met deze ideeën in gedachten ben ik gaan schetsen. Omdat ik zelf erg geïnteresseerd ben in het maken van mooie en goed-werkende (perfect, als het heel even kan) oplossingen, wilde ik hier ook iets van laten zien. Iets wat uniek is op het web. Dat is altijd een lastige opgave, maar toen ik bedacht om bij het hoveren over een geblurde afbeelding deze scherp te maken, dacht ik iets te hebben gevonden wat ik zelf in ieder geval nog nooit op het web heb gezien. U wel? Ik ben benieuwd!
Toen het idee er was, was de uitwerking nog ver te zoeken. Ik heb geëxperimenteerd met SVG, maar kreeg alleen voor elkaar om een afbeelding te blurren waar de muis was. De huidige oplossing is veel gracieuzer, lichter, cross-browser, maar ook ontzettend simpel. Misschien hebt u het al gezien, maar ik heb twee afbeeldingen ingeladen: een geblurde en een niet-geblurde. Eerst was de geblurde versie gemaakt met behulp van CSS blur, maar dat werkt niet cross-browser en is ook erg langzaam en zwaar voor mobiele apparaten. Het maakt echter wel gebruik van background-attachment: fixed; wat helaas niet overal werkt en waarvan ook nog niet eens detecteerbaar is of het werkt. Zoek maar op…
De portfolio-weergave
Om de verschillende portfolio-items mooi weer te geven, maar ook hiërarchie duidelijk te maken, heb ik bedacht dat een grid wel mooi zou kunnen zijn. Echter vond ik alleen maar grids die met JavaScript werden opgezet en position: absolute; gebruikten. Ik vond dat niet zo nodig, dus heb in CSS zelf een grid-systeem gemaakt. Eerst voor mijn eigen website alleen, maar daarna heb ik het aangepast voor een breder gebruik.
De slider
Als idee voor de slider had ik iets compleet anders dan vrijwel iedere slider op het WWW. Ik wilde namelijk dat hij zou kunnen uitschuiven om de volledige afbeelding te laten zien. Het zou dan een interactieve weergave worden die mijns inziens veel meer op de UX was gericht dan de conventionele sliders die niet van hoogte kunnen veranderen.
Om dit te bereiken ben ik begonnen om het mogelijk te maken dat het plaatje uitschuift. De slider-functionaliteit heb ik zelf moeten maken aangezien ik niets op het internet kon vinden dat deed wat ik wilde. Dit was niet heel ingewikkeld, maar het zorgen dat de slider gesleept kon worden (zie Dragdealer.js) en het meegaan van de pijltjes bij een grotere, uitgeklapte afbeelding hadden meer berekeningen nodig. Dat laatste heb ik overigens ook nog nergens gezien.
Het resultaat
Persoonlijk vind ik het resultaat goed gelukt en denk ik dat het weergeeft wat ik graag wilde weergeven. Ik ben niet snel tevreden met iets, dus waarschijnlijk zal ik om de zoveel tijd iets wijzigen, maar ook dat zal ik dan hier laten zien en verantwoorden!
Goed weergegeven op desktop...
...en natuurlijk ook op telefoon
Bekijk de code van dit project in de view source tool
Kijk ook even op de 404-pagina!
