Hi,

 

I'm trying to get into freelance web design/development. My portfolio is: www.lucygreenwood.net

 

What do you think? :/ I've been 'honing my skills', so to speak, for about two years, but known HTML since I was 13... so I'd like to think it doesn't look like a complete beginner made it :/

 

I'm intending to go around town in a few days to see if anyone wants a free website so I can fill it up a bit. Obviously, if it's really awful, I might delay that.

 

Also, would it be at all okay if I deleted the link after a while? I like to keep my privacy, and my info is all over the internet thanks to having a .net domain...

i like your site, though when you scroll normally it seems a bit weird having the page height space between each section.

Thanks for the feedback I've had someone else mention that as well. I only wanted to show one section of the page at a time, though, and that seemed the best way to do it :/

Edited May 30, 201511 yr by rhubarblover

nice concept and different also. add a logo. that will look nice

and add some more content .

Arvi - what sort of content would you suggest? I'm not sure what else there is to say on there.

It looks really nice! Good work! I hope you fill up your portfolio

Scrolling feels laggy / glitchy almost.

 

Not sure what animations are happening but i'm on a Macbook Pro and can feel it.

 

Might be something to look at.

Regarding the scrolling issue you've got some javascript that is constantly changing the opacity of two elements and adding / removing a huge transparent png background.. I have no idea why this is occurring because visually it does nothing, but it's killing performance. When I run a FPS meter in chrome dev tools I'm getting between 5-10 FPS - you should be aiming for 60FPS for a seamless experience.

 

When I scroll the page I can see that the full page is being repainted with every scroll, this is also adding to performance issues, looking at your page there should be noting painted in scroll - I see no visual scroll effects.

 

If you do need to add things to a scroll event it needs to be throttled as a scroll event will fire hundreds of times a second, executing whatever code you pass to the scroll handler every single time. So throttling will reduce the amount of times that code is executed.

 

The whole area of JS and scroll performance is a subject in itself, many plugins are very poorly written when it comes to JavaScript so it pays to learn the language and write your own - and know which existing ones are actually any good.

 

If you want to add scroll effects look into scrollr.js it's very beginner friendly and pretty performant.

 

Ditch the plugins you are currently using - As it stands I see no reason to use any JavaScript on your page.

 

 

As for clients forget about doing free websites you are massively underselling yourself - never EVER work for free - people will think you are not serious and take advantage, others will think you're not very good - otherwise why are you doing it for free? It doesn't instill any confidence.

 

Use your own site to demonstrate your abilities to clients. Perhaps for the first few offer them a 20% discount or something if they agree to a testimonial and maybe help promote your services, but do not do it for free!

Edited August 15, 201510 yr by rbrtsmith

rbrtsmith - Thank you for looking at my site and writing such a detailed post - I feel honoured that you've given me feedback on my Javascript

Okay, so, the Javascript - firstly, it's not a plugin, it's all mine - every last inefficient bit... well, someone on another forum gave me a few lines to add and the IE detecting script is from the internet - most of it, then. No libraries are being used, either.

I've been learning Javascript, so I thought my portfolio would be a good place to try and put it to use :/

So, onto what it's actually meant to be doing (there is honestly a purpose behind it all).

The background animation comprises of two layers and... um, I think 9-12 images (compressed, if that makes it any better). Each image has a variation on the original diamond pattern so parts of it fade in and out.
Each layer holds one of the images, and one layer fades it out while the other switches to a new image. If that makes sense.

The scroll effect is for the arrows at the side. If you click them it scrolls up and down the page, and also links on the page to the same page use it too.

I don't understand why you and Lovelock are getting lagginess when I'm not on an old laptop, and other computers tested had a little but not really noticeable amount. Yes, it's not very good code, but I thought my laptop was going to be the best indicator, being quite old, and unable to even run some new technology. :/

As for free clients, well, this was written a while ago - after exchanging PMs with you and realising free clients don't really take you seriously, I have mostly decided against it.

Edited August 15, 201510 yr by rhubarblover

If you wanna do JavaScript animations look into GSAP http://greensock.com/gsap or velocity. As it happens there's a great workshop on these that's just launched http://ihatetomatoes.net/greensock-workshop-skrollr-combo-bonus/

 

You have to think about the hit these resources take, in this instance you're loading a bunch of images + js - this will impact on the page load time, consider if it's actually worth it - what does it add to the user experience, if it's just fluff then the extra page weight might not be worth it.

As a rule I keep all assets on a page as small as possible with a maximum budget of 500kb. This again is another subject in itself but try installing the y-slow plugin for chome and that will give you a good insight - as will google pagespeed insights.

 

As for testing run time and scroll performance use the chrome dev tools, don't just look at your website visually and assume all is well, the chome dev tools have a bunch of things to test all sorts of performance metrics - Again another subject in itself, Codeschool do a very good course on this.

 

For the arrows you don't need any scroll handlers. You need a click handler on the arrow that animates window.scrollto(); to the location of the linked hash when it's clicked.

 

If you wanna learn JavaScript properly I recommend CodeSchool - it really really helped me get a good grounding on the language. Once you're done doing this then spend time learning jQuery and the native DOM API

Edited August 15, 201510 yr by rbrtsmith

Thank you for posting those links, looks very helpful. I've removed the animated background for now - nobody was even really noticing it anyway, so as you say, it's not worth the performance decrease. I'll try out this GSAP thing and re-create it at some point.

I'll try the y-slow plugin. I did test with Google pagespeed and it gave the site 97/100 for Desktop, so that might not be much use...

 

For the arrows you don't need any scroll handlers. You need a click handler on the arrow that animates window.scrollto(); to the location of the linked hash when it's clicked.

Well, I'll see what I can do with that script when I've got some spare time. I think it does need the scroll event handler, but can't really remember how it works without looking at it again.

Edited August 17, 201510 yr by rhubarblover

I've built a similar thing myself from scratch - you definitely don't need to bind anything to the scroll event

var APPNAME = {}; // this should be a global that all your functions attach to.

APPNAME.scrollToHashLocations = function($) {
    'use strict';
    var fromThisPage,
        fromOtherPage,
        getOffset,
        initiateScroll;
    fromThisPage = function() {
        $('.js-scroll').on('click',function(e) {
            e.preventDefault();
            var el = $(this),
                currHash= el.attr('href');
            window.setTimeout(function() {
                if(el.attr('href').indexOf('#') === 0) {
                    getOffset(currHash);
                }
            },10);
            
        });
    };

    fromOtherPage = function() {
        setTimeout(function(){
            var currHash = $(location).attr('hash');
            if (currHash) {
                currHash = '#' + currHash.slice(2,currHash.length);
                getOffset(currHash);
            }
        },500);
    };

    getOffset = function(hash) {
        var dataOffset = $(hash).data('scroll-offset') || 0;
        initiateScroll(hash, dataOffset);
    };

    initiateScroll = function(hash, dataOffset) {
        if (hash && $(hash).length) {
            $('.js-navbar').each(function() {
                $(this).removeClass('open');
            });
            var hashOffset = ($(hash).offset().top - dataOffset);
            $('html, body').animate({
                scrollTop: hashOffset
            }, 1000, 'swing');
        }
    };

    fromThisPage();
    fromOtherPage();

    return this;
};

APPNAME.scrollToHashLocations($); /* this can go in a separate file, I have a main file where I make the calls to all my functions
e.g:

APPNAME.fn1($)
  .fn2($)
  .fn3($)
  .fn4($)
  .fn5($);

EXAMPLE HTML


Example for scroll to same page with offset -- Number normally
    equal to height of sticky items that might otherwise be obscuring the
    target object after the animation.

<a href="#hash" class="js-scroll">Foo</a>

    ...
    ...

    <div id="hash" data-scroll-offset="45"> 
        ...
    </div>






Example for scroll when the link is located on another page

    Page 1:
        <a href="#_hash">Foo</a>


    Page 2:
        <div id="hash">
            ...
        </div>
*/

Edited August 17, 201510 yr by rbrtsmith

Like your site, really look nice.