Kaj Rietberg

Front-end Ontwikkelaar

Portfolio

Front-end Kunde:

  • Website: kajrietberg.nl

    Screendump van kajrietberg.nl

    Voor mijn eigen website heb ik eerst gekeken wat het doel van mijn site is. Deze is laten zien aan bedrijven wat ik kan zodat ze mij als front-end kandidaat zien voor hun vacatures. Geïnteresseerde bedrijven moeten snel zien wat ik kan, welke kennis ik heb en welke tools ik gebruik. Dat ze daarna snel contact kunnen opnemen. Daarnaast deel ik graag wat ik leer met anderen daarom mijn artikelen deel. Het thema heb ik gebouwd met de Taiga Boilerplate waarvan ik een WordPress starters thema heb gebouwd. De site is Mobile First gebouwd.

  • Platform: SiteGeregeld

    Schermafdruk van de website SiteGeregeld.

    Voor SiteGeregeld heb ik verschillende klanten websites op basis van een standaard WordPress thema in elkaar gezet. Vaardigheid creativiteit was hierbij belangrijk. Verder heb ik het thema dat voor alle websites wordt gebruikt geoptimaliseerd qua performance; minder http requests, css inladen waar het nodig is, overbodige code er uit gehaald. De CSS van het thema heb ik overgezet naar Sass. Uiterlijke verbeteringen aan het thema doorgevoerd, een plugin verbouwd zodat het werkt met Twitter Bootstrap css om buttons, kolommen en panels via de TinyMCE tekst editor in te voeren en te kunnen zien.

  • Website: Pop A Question

    paq

    Opdrachtgever Thomas Jacobs kwam bij mij met een home pagina ontwerp. Het moest uiteindelijk een werkende website worden waarbij iemand een vragenlijst kan maken en deze via mail, facebook en twitter versturen naar contacten of anderen die dan antwoord geven op deze vragen. De antwoorden worden opgeslagen zodat de vragenmaker deze makkelijk kan terug zien. Ik heb de verschillende ontwerpen omgezet in een werkende site. Ik heb de eerste versie opgeleverd. Later zullen er meer functionaliteiten ingevoegd worden. Zie: popaquestion.com

  • Website: Bouwbedrijf Schipper

    bbs

    De eigenaren van Bouwbedrijf Schipper kwamen met de vraag van een website voor hun bedrijf. Met hun gekeken wat ze wilden laten zien aan hun klanten en wat klanten willen doen op hun website. Hieruit is een website gekomen die de gemaakte projecten toont en betrouwbaarheid wil uitstralen. Klanten zien met afbeeldingen en woorden wat Bouwbedrijf Schipper kan en kunnen daarna contact opnemen doordat de contact gegevens op duidelijke plekken terug komen in de website. Ze houden zelf de website bij, daarom heb ik een voorbeeld artikel geschreven zodat ze weten hoe ze het beste hun projecten kunnen tonen. Belangrijk bij deze website was de Interaction Design.  

  • Website: Verschillende

    WordPress logo with the word WordPress beneath it.

    Voor verschillende bedrijven en zelfstandigen heb ik hun oude website omgebouwd naar het WordPress CMS.

Front-end Kennis:

  • Workshop: Webrichtlijnen voor front-enders

    Jules Ernst geeft uitleg over de webrichtlijnen.

    Februari 2014 heb ik de workshop "Webrichtlijnen voor front-enders" gegeven door Jules Ernst gevolgd.

    Wat heb ik geleerd:

    • De verschillende obstakels op een website.
    • Hoe je goede alt-teksten toevoegt aan afbeeldingen.
    • Slider moet je kunnen stil zetten.
    • Formulieren moeten altijd een label hebben.
    • Denk aan bestandstype en de grootte van het bestand ivm slecht netwerk en apparaat waarop website bekeken wordt

  • Online Workshop Sass

    Het woord Sass geschreven in het roze. Dit is het logo van sass-lang.com

    December 2013 heb ik een online workshop van Sass meester Roy Tomeij gevolgd.

    Wat heb ik geleerd:

    • Beter inzicht wat Sass is.
    • Sass functies en variabelen.
    • Sass mixins.
    • Het verwerken van Media Queries in je Sass.
    • Hoe Compass Sass aanvult.
    • Het werken met sprites in compass.

  • Workshop: Planning and building a big Front-end

    Roze, rood vlak met rechts onderin de woorden CSS Wizardry

    Oktober 2013 heb ik de workshop dag, Planning and building a big Fron-end van Harry Roberts tijdens de Fronteers2013 conferentie gevolgd.

    Wat heb ik geleerd:

    • De BEM methode; hoe je classes benoemt in je CSS.
    • Hoe je het beste met sass kan werken om een duidelijke structuur in je CSS te krijgen.
    • Ik heb mijn eigen mappen structuur neergezet voor werken met Sass en CSS.
    • Een duidelijke structuur in je CSS is heel belangrijk voor snelheid in werken en bij samenwerken.

  • Workshop: jQuery Inception

    Logo van jQuery. Het woord jQuery is groot geschreven, klein geschreven is write less, do more

    September 2013: de cursus jQuery Inception. Deze cursusdag werd gegeven door Javascript Guru Arjan Eising van de vak vereniging voor Frontend ontwikkeling Fronteers. De dag begonnen met theorie over Javascript en jQuery. De middag gebruikt voor praktische opdrachten.  Ik heb bestaande jQuery code van mijn eigen website naar 25% teruggebracht.

    Wat heb ik geleerd:

    • Zoeken naar overeenkomsten en deze samen te pakken.
    • Gebruik te maken van variabelen
    • Een functie is een loop en hiervan kan je gebruik maken door boven in je script bepaalde zaken te benoemen en verder op een andere waarde aan te geven.

  • Training: Interactie Design

    lectricertificaat

    Augustus 2013 de 4-daagse Interactie Design training van Lectric gevolgd. Met conversie en UX Guru Eddy Boeve als docent. We hebben veel praktische informatie gekregen van Eddy. Deze informatie steeds toegepast op praktische voorbeelden die Eddy ons toonde.

    Wat heb ik geleerd:

    • Testen van een website
    • Doelgroep bepaling en betrekken van deze doelgroep bij ontwerp website
    • Omzetten van gegevens naar een ontwerp
    • Expert-review van een website
    • Wireframes maken
    • Betrouwbaarheid van website

Front-end Tools:

  • Twitter Bootstrap

    Purplu background. On foreground twitter bird and the word Bootstrap. This is from the Twitter Bootstrap framework.

    Twitter Bootstrap is een Framework dat handig is doordat het al veel standaard classes heeft waardoor je snel een website in elkaar kan zetten. Er zijn verschillende standaard HTML templates die Bootstrap aanbiedt om te gebruiken.

  • Expression Engine

    Expression Engine logo. Witte achtergrond, blauwe cirkel, letter e in het midden.

    Sinds mei 2013 werk ik met Expression Engine. Dit CMS geeft mij de flexibiliteit om complexe websites snel online te zetten. Voor EE worden er vele add-ons en plugins ontwikkeld, wat weer ontwikkeltijd scheelt.

  • HTML5

    HTML5 logo

    HTML gebruik is al een hele tijd, ooit begonnen met HTML 4.1, daarna mij bezig gehouden met XHTML en nu probeer ik zoveel mogelijk HTML5 te gebruiken. Dit is de nieuwe standaard voor mij. Met HTML zijn veel nieuwe technieken mogelijk die hele mooie dynamische websites laat zien.

  • CSS3

    CSS3

    Door de grafische mogelijkheden die CSS3 heeft en (gelukkig) door steeds meer webbrowsers ondersteund wordt, biedt het de mogelijkheid om een website zo licht mogelijk te bouwen waardoor een website sneller geladen wordt.

  • WordPress

    wordpress-logo-notext-rgb

    Sinds 2006 gebruik ik WordPress. Voor bedrijven en zzp-ers heb ik WordPress thema's gebouwd en bestaande thema's bewerkt. De kracht van WordPress zit in de communitie, deze bestaat uit mensen die elkaar verder helpen en van en met elkaar willen leren om hun klanten een betere WordPress ervaring te kunnen geven. Mijn bijdrage hierin was het organiseren van verschillende WordPress meetups  en heb ik de eerste 2 Nederlandse Wordcamps mede georganiseerd.