SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Hybrid View

  1. #1
    SitePoint Member mirohristov's Avatar
    Join Date
    Jan 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Please critique my new portfolio website.

    I'd love to get some feedback while in beta:
    MiroHristov.com/beta

    All reviews are welcome.

    I'm still working on the copy (the text), the responsiveness, and adding more projects.

    Thank you.

  2. #2
    SitePoint Addict
    Join Date
    Jan 2005
    Location
    Hiding from the world
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    that's pretty awesome. worked nicely for me on FF and win7. wasn't too slow or anything.

    The only thing i would say is (and this may sound stupid) is that it might look too good! depending on your audience. I'm not sure who you are trying to get as clients so if you are getting clients with a high budget then i think you have it, if you are aiming for people with a bit less money, middle of the road, then they might be put off thinking you will be charging a lot.

    I hope you take that as a compliment as it really does look good and i would expect you to charge a lot for such a good site, hence my thinking above if that makes any sense.

    good work
    If i am a product of your imagination you should try harder!

  3. #3
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    Yes, there are some very beautiful effects on the site.
    Then the bad news :
    • The site is not accessible for visitors with javascript disabled, or with a non-javascript browser. There should be a fall-back for them!
    • The site is not accessible for visitors with a device that's not supporting Flash. There should be a fall-back for them!
    • The site is not accessible for visitors with a screen reader.
    • Somehow the loading process has an undesired loop: after loading the page, Firefox and Chrome still consume permanently a CPU-use of about 50% or more in my WinXPpro. Chrome is also showing the loading sign in the Tab of the page permanently. It did crash my browsers and the OS when I tested FF and Chrome simultaneously!
    • The files mirohristov.com/beta/js/jquery.gsap.min.js and mirohristov.com/beta/js/jquery.min.map are NotFound-404's.
    • There are 7 javascript calls in the <head>, slowing down the performance; I suppose at least some of them can be moved to just before the </body>.
    • All-in the homepage asks 3.3MB for the download > for slow connections not a top speed...
    • There are some html-errors.
    • Refreshing the Portfolio, About or Contact page is going back to the homepage.
    • It is impossible to make a bookmark (or send the web address to somebody by mail) of the individual Portfolio, About or Contact pages.
    • The right scrollbar is made very, very small. Some people should not see it as a scrollbar at all, others can have problems to use it with the mouse.
    • On the "Big Swordfish" portfolio page the "scroll down" button isn't working.

  4. #4
    SitePoint Member mirohristov's Avatar
    Join Date
    Jan 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Noppy View Post
    Hi,
    that's pretty awesome. worked nicely for me on FF and win7. wasn't too slow or anything.

    The only thing i would say is (and this may sound stupid) is that it might look too good! depending on your audience. I'm not sure who you are trying to get as clients so if you are getting clients with a high budget then i think you have it, if you are aiming for people with a bit less money, middle of the road, then they might be put off thinking you will be charging a lot.

    I hope you take that as a compliment as it really does look good and i would expect you to charge a lot for such a good site, hence my thinking above if that makes any sense.

    good work
    I'm glad it's running smooth for you.
    Haha, I hope to run into this problem. I have other domains to offer an 'economy package' -- wordpress, template based etc.
    Originally the purpose of the portfolio was to land me a job but I may have to back off from that and just do freelance.
    Thanks for the review and kind words Noppy. I appreciate it!



    Francky said:
    • The site is not accessible for visitors with javascript disabled, or with a non-javascript browser. There should be a fall-back for them!
      Relying on javascript does not mean the page is not accessible.
      I do agree that it's a good idea to have a fall-back or design by progressively enhancing. It's just not for me at this point.
      (I don't care about losing visitors (geeks and security-freaks) with disabled javascript. That's not who I cater for. They'll most likely never be my clients)
      ---
    • The site is not accessible for visitors with a device that's not supporting Flash. There should be a fall-back for them!
      What do you mean? The website is purely HTML,CSS jQuery.
      If you refer to some of the websites in the portfolio then yes.
      But I don't think I should redesign old portfolio projects and 'convert' them to html.
      ---
    • The site is not accessible for visitors with a screen reader.
      Screen readers are perfectly capable of running javascript.
      ---
    • Somehow the loading process has an undesired loop: after loading the page, Firefox and Chrome still consume permanently a CPU-use of about 50% or more in my WinXPpro. Chrome is also showing the loading sign in the Tab of the page permanently. It did crash my browsers and the OS when I tested FF and Chrome simultaneously!
      You are right. It does consume quite a bit of CPU. Especially if you don't have GPU acceleration. I'll see if getting rid of the flashing and bouncing effect on the balls will help it.
      As for the constant loading: I really don't know. Works fine on my side. I'm clueless to what it could be. I'd love to see your Network tab in chrome's developer tools.
      ---
    • The files mirohristov.com/beta/js/jquery.gsap.min.js and mirohristov.com/beta/js/jquery.min.map are NotFound-404's.
      Thanks! Fixed the gsap.min.js. As for the jquery.min.map -- I have no idea what that is since I don't use such file... are you sure it's not a plugin/extension on your side? That may be causing the constant loading too. Idk.
      ---
    • There are 7 javascript calls in the <head>, slowing down the performance; I suppose at least some of them can be moved to just before the </body>.
      You are right. I intend to run it with Google's PHP Minify. Reducing it to just 2 calls for both js and css.
      It's just easier to maintain separate files while in beta.
      ---
    • All-in the homepage asks 3.3MB for the download > for slow connections not a top speed...
      True. I have yet to run it trough TinyPNG and compress the jpgs even further. Hopefully that will knock off 20-30%.
      That's why we need new image formats.
      The average website is 1.2MB. Mine is 3x the average. My excuse is that I'm trying to impress and be above average
      Life of Pi is 20.4MB -- I think I'm safe
      ---
    • There are some html-errors.
      4 are caused by Vimeo's embed iframe so I can't help it. 2 were fixed. Thanks!
      ---
    • Refreshing the Portfolio, About or Contact page is going back to the homepage.
      I'm still working on the hash history/bookmarks.It will definitely be available. Good point.
      ---
    • It is impossible to make a bookmark (or send the web address to somebody by mail) of the individual Portfolio, About or Contact pages.
      (Same as above)
      ---
    • The right scrollbar is made very, very small. Some people should not see it as a scrollbar at all, others can have problems to use it with the mouse.
      I agree. I tinkered with it a lot. I'll probably just go with the default bar in the end.
      ---
    • On the "Big Swordfish" portfolio page the "scroll down" button isn't working.
      Bummer Fixed and added to all pages. Thanks.


    Thanks for the extensive feedback. It's greatly appreciated!
    -Miro

  5. #5
    SitePoint Addict
    Join Date
    Sep 2005
    Posts
    278
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    It is a really nice design! Why not have a lesser version that provides the basics for those who don't have JS or powerful machines xP?

  6. #6
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    Relying on javascript does not mean the page is not accessible.
    Indeed: not necessarily (with unobtrusive js), but in this site the javascript is obtrusive. Scriptless:

    Though it is accessible in a strict aspect, IMHO it is not very userfriendly.
    =======
    I don't care about losing visitors (geeks and security-freaks) with disabled javascript.
    It's not only geeks and security-freaks, but also visitors with pure text-browsers. But if you don't mind visually impaired people (not only for this site but also as clients), so be it.
    BTW:
    • New point: The buttons to the sub pages don't work for mouse-less control with the Tab-key. If you make a styled <input type="button" value="Portfolio"> instead, it's also accessible for visitors who use the Tab-key (by lack of fine motorics, see f.i. here).

    • New point. The site has not much text, it's more stenographic to support the visual experience:
      HELLO THERE! I'M MIRO.
      WEB DEVELOPER UX DESIGNER
      60% FRONT-END DEV - 30% UX & DESIGN - 10% BACK-END DEV
      Big Sword-
      fish
      Awesome short description goes here.
      View Details Launch Website Scroll Down
      Preloader / Intro / Animated Icons
      Custom Flash Image Viewer (CMS-Enabled)
      Play a game of ping-pong
      Homemade Flash CMS (PHP & MySQL Driven)
      4m Studio
      Awesome short description goes here.
      View Details Launch Website
      Some more awesome description goes here.
      ... etc.
      I think some awesome explaining and connecting (hidden) text between can stimulate Google also, who cannot see the visual beauty of the site!

    =======
    Flash: (...) But I don't think I should redesign old portfolio projects and 'convert' them to html.
    That's true; I didn't investigate where the Flash was on the site.
    =======
    Screen readers are perfectly capable of running javascript.
    True, my error, sorry.
    =======
    Loading process - (...) - I'd love to see your Network tab in chrome's developer tools.
    Here you are (The timeline was changing while taking different screenshots)

    =======
    As for the jquery.min.map -- I have no idea what that is since I don't use such file... are you sure it's not a plugin/extension on your side? That may be causing the constant loading too.
    I got'm!
    The only place this filename was mentioned in the site-files, was line 2 in the mirohristov.com/beta/js/jquery-1.9.1.min.js:
    Code:
    /*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license
    //@ sourceMappingURL=jquery.min.map
    I checked v1.9.1 in the jQuery download page, and it is just as it is in the original, not something you did wrong.
    But what happens?
    It appears the //@ (without space between) is the culprit. It seems Chrome doesn't see it as a real comment!!!
    I isolated this phenomenon:

    Strange and never remarked, but true!
    =======
    The average website is 1.2MB. Mine is 3x the average.
    The kB-eaters are the portfolio-images. If you split the 1-page-for-all in a homepage and 3 real other pages, the homepage will be a lot faster on screen. After loading/rendering the homepage you can preload the rest to save time.
    compress the jpgs even further.
    Indeed, without losing to much quality the bg-img f.i. can brought back from original 106kB to new 54kB.
    =======
    html-errors: 4 are caused by Vimeo's embed iframe so I can't help it.
    If you do this:
    HTML Code:
    <iframe src="//player.vimeo.com/video/75673243?title=0&amp;byline=0&amp;portrait=0&amp;color=8aebff" 
        style="width:100%; height:510px; border:0" allowfullscreen="allowfullscreen"></iframe>
    ... you'll lose the iframe-errors; are the "webkitallowfullscreen mozallowfullscreen" really needed? (anyway not for FF23 and Chrome30)
    =======
    I'm still working on the hash history/bookmarks.It will definitely be available. Good point.
    Splitting the page is melting this problem also. Do you think your "trying to impress and be above average" in a 1-page site instead of a 4 page site will be remarked by much visitors? In my opinion a fast, almost instant homepage is far more impressive, in particular for visitors with a slow connection. See actual speed report: analyze.websiteoptimization.com/authenticate.php?url=http://mirohristov.com/beta/.
    =======
    O, another new point. At a screen width of less then about 770px the circle-items in the #about-section don't shrink, but are floating downwards and overlap the honeycombs:

    In case you have nothing to do.

  7. #7
    SitePoint Zealot
    Join Date
    Sep 2005
    Location
    Perth, Australia
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Miro,

    Can I start by saying you have some made JS skills

    Found the portfolio section to be a little slow on my Macbook Pro using latest Chrome. I'm thinking this is due to all the content being hidden on the page. Also the content is quite large (the displays) but they do let you see all of your work in one frame which I liked.

    The home page is interesting, I love SciFi, kinda feel like I'm in the future somewhere very dark and mysterious

    I think the longer I spent on your site the more I enjoyed it. You have a good eye for design and coding...keep up the good work

  8. #8
    SitePoint Member mirohristov's Avatar
    Join Date
    Jan 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Francy - Thanks for the great review again. You went above and beyond!
    Here's what I've been working on as a result of what you suggested:
    • Hash deeplinking/bookmark/history is now in place
    • The images are now compressed -- saved about 40% off of Jpegs and over 70% off of pngs (using the free JPEGmini and TinyPNG)
    • Implemented 'lazy loading' for the project images.
    • The homepage is now 1.0MB on initial load. -- "trying to impress and be above average" -- I said this jokingly in reference to the size being above average
    • Removed the bounce effect and made it optional -- Your CPU should now be at normal load
    • Vimeo errors removed -- Thanks!
    • Did a quick'n'dirty fix for the about section (the screenshot). Although it really didn't matter since I have <meta name="viewport" content="width=900"> which makes it run ok on iPad/Phone and Android Phones.
      Only when you resize your browser, will you see this.


    I'm pretty stubborn about not splitting it into multiple pages at this point. Most likely will do it in next version (using wordpress)

    Again, Thanks a lot!


    ===============
    Motion, I'm glad you like the effects.
    Now that the bounce is gone the performance should be better.
    Thanks for the compliment! 'Made JS skills' is what i live for

    ===================

    Check out the music in the upper right. Should I remove that too? You think it's too much?

  9. #9
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    Yes, the site is going pretty fast now. Now the visitor can enjoy the experience without waiting!

    Maybe the only thing to do is to serve a fall back for IE8 (for the WinXP-users, who cannot upgrade to IE9+), see netrenderer.com.

    O, and the space for Chrome in the 2nd line of the mirohristov.com/beta/js/jquery-1.9.1.min.js still has to be added, I see.

  10. #10
    SitePoint Member mirohristov's Avatar
    Join Date
    Jan 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's now live.

    Fixed the jquery error - btw good job on nailing that one down. I wonder why I don't see it on my side though.

    Minified the .js and .css to a total of 3 requests.

    I wouldn't worry about ie8 at this point. With IE's global market share at 12% and IE8 at 4.6% of all IE users (that's 0.5% of the global share) I don't feel like spending any more time and effort.

    (make sure you view-source )

    Thank you!

  11. #11
    Non-Member
    Join Date
    Oct 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    after reviewing you site in detail. First of all I would say that your site has very less content. Its too simple site and interesting stuff in it. For getting traffic you need to add some stuff.

    Secondly side is not user friendly. It is very dark in color, color combination is not so good.

    Third backgrounds pix are good but no columns in site etc so pls take keen interest with these things

  12. #12
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    21 Post(s)
    Tagged
    0 Thread(s)
    Minified the .js and .css to a total of 3 requests.
    Splendid!
    =======
    (make sure you view-source )
    I did!
    I also viewed the html-validator : 23 Errors, 20 warnings
    The culprits:
    • The ASCI-drawing: consecutive hyphens -- inside a comment are forbidden; they can be replaced by: -~.
    • The ASCI-drawing: may not be placed before the charset ("A charset attribute on a meta element found after the first 512 bytes").
    • The vimeo <iframe>: the dimensions and border have to be set by css instead of in html attributes.
    • The <br class="break"/> between the <li>'s of the #about skills; I guess you can split the skills in 2 <ul>'s or something to get the desired effect.

    Test: miro-nw.htm (> melted html-validator)

  13. #13
    SitePoint Member mirohristov's Avatar
    Join Date
    Jan 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    Quote Originally Posted by Francky View Post
    Splendid!
    =======

    I did!
    I also viewed the html-validator : 23 Errors, 20 warnings
    The culprits:
    • The ASCI-drawing: consecutive hyphens -- inside a comment are forbidden; they can be replaced by: -~.
    • The ASCI-drawing: may not be placed before the charset ("A charset attribute on a meta element found after the first 512 bytes").
    • The vimeo <iframe>: the dimensions and border have to be set by css instead of in html attributes.
    • The <br class="break"/> between the <li>'s of the #about skills; I guess you can split the skills in 2 <ul>'s or something to get the desired effect.

    Test: miro-nw.htm (> melted html-validator)
    OMG shame on me

    Thanks so much for taking the time to clean up my code and demonstrate it (great use of the <base> tag too)

    I really appreciate your help. I'll add a back link of your choice on my site as recognition. Just PM or post it.

    Btw, thanks to all of yours help, the site got listed at One Page Love
    Still need to fix that buggy responsiveness

    =============
    ebcgroup - Thanks.

  14. #14
    SitePoint Member
    Join Date
    Oct 2013
    Location
    Uk
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its very cool.

    The only bit i'm not keen on its the movement of the background on the homepage. Doesn't quite do it for me, mostly personal taste not functional issue.

  15. #15
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    First of, the motion effect is awesome!
    You put some text in the bottom panel (60% FRONT-END DEV - 30% UX & DESIGN - 10% BACK-END DEV) and I think it would be better if you'd link them so they are clickable. TRy linking them to your portfolio or you can add another Menu for the Services that you offered with comprehensive information on it.
    From SEO point of view, the site is lacking some valuable Internal Linking
    Colors - Great
    Font Style - Great
    If you have Social Media Profile, such as Linkedin, consider adding them to your contact page as well.

    Nathan


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •