I det siste har jeg, innimellom all eksamenslesingen, sykdom og det som er, laget en portfolio på nett. Resultatet kan du se på hkjersem.com. Her vil jeg samle alt jeg har laget som jeg mener er verdt å få med seg. Siden tar i bruk CSS3, og inneholder ingen bilder i selvet designet. Jeg prøver å lage minimalistiske sider, både i uttrykk og reell filstørrelse. Istedet for bilder bruker jeg CSS3 og browser-spesifikke koder for å få ting til å se pent ut, samtidig som jeg forsikrer meg om at det skalerer bra i eldre nettlesere.

Planen var egentlig å utvikle et eget slideshow og andre artige funskjoner i jQuery, men jeg rakk ikke dette i førsteomgang pga eksamensperioden og sykdom. Jeg har valgt å publisere en tidligere versjon av siden hvor jeg bruker shadowbox istedet. I første omgang er det kun fade-in som er aktiv på siden når det kommer til egen javascript-kode. Dette var en relativt enkel affære. Først gjør jeg alle elementene jeg skal fade inn usynlige. Deretter animerer jeg de inn igjen, en etter en, ved hjelp av en teller. Koden ser slik ut:

//henter ut elementene og itererer over de
$('#fade1, #fade2, #introundertittel, #content').each(function(i) {

    //setter opacity til 0 på alle elementene slik at de blir usynlige
    $(this).css('opacity', 0);

    //fader inn elementene med delay, hvor delay-tiden øker med hvert element
    $(this).delay(i*1500).animate({opacity: 1}, 1500 );
});

Siden jeg bruker wordpress, la jeg også inn et lite triks slik at scriptet bare lastes inn dersom man er på forsiden. Hele koden ser da slik ut:

<?php if (is_front_page() ){ ?>
<script type="text/javascript">
    $('#fade1, #fade2, #introundertittel, #content').each(function(i) {
  	$(this).css('opacity', 0);
  	$(this).delay(i*1500).animate({opacity: 1}, 1500);
    });
</script>
<?php } ?>

Planen fremover vil være å gjøre ferdig min implementasjon av jQuery-slideshow og tilpasse siden forskjellige skjermstørrelser.