Please rate my new remake of my portfolio

Project Feedback
#1

https://isaacabrahamson.github.io/
Hey, here’s your chance to be critical - I want my project to be judged and problems exposed.
Reworked my portfolio page with optimizations and UX tweaks, please rate a few things as it is hard for me to fully test it.
On a scale of 1-10 how would you rate my:

  • Overall Usability and understanding of what I do
  • Video/Image load times
  • Video/Image quality (does it add or detract from content flow)
  • Overall design
  • Responsiveness (does work well on your phone)
    After looking at my portfolio, would you be more or less likely to hire me as a developer for a small business?
    Comments welcome please.
6 Likes
#2

It is best i have seen so far. Simply great.On a scale of 1-10 it is obviously a 10.

#3

Wow, looks great! One problem though: the animation doesn’t work on my phone so it appears just white which looks weird. Maybe it is just me, Nokia Lumia 520 Windows Phone 8.1. BTW I like your Twitch viewer!

EDIT: menu icon on mobile is not on the same line as the title and the scroll effect behaves strangly (but works).

#4

By animation, do you mean the background video? Also, I’m not familiar with Windows phones requirements for video, I’ll have to look that up thanks.

For the weird scrolling, is it behaving funny on just normal scroll, or when it scrolls from the menu?

#5

Yes, meant the background video and scrolling from the menu :slight_smile: I suppose it has some difficulty with the smooth scroll.

#6

See if the menu icon works now, added a media query for it. Thank you!

#7

This is amazing! How did you do the storming effects?? I would love to know. I give this site a 20

#8

Looks really nice. Is the font at the top the one from Alien?

One way you could improve the overall design is to really think about what fonts to use. It’s important to be consistent and usually there’s one font for headings, one for text and maybe one for links. And also sizing should be consistent. I just recently learned all that from a great little book called Professional Web Typography. It’s free though you can pay if you want to.

One thing that didn’t fit with the professional image is the font for the headings like “My Story”, especially when the “Twitch App” headings are different and larger.

The What I Do part becomes a bit long for scrolling on a smaller screen, like a tablet or mobile, so perhaps rework that a bit.

But other than those small qualms, I liked it. :slight_smile:

2 Likes
#9

Video autoplay is not working on mobile, I’ll have to look into that, but smooth scrolling does work on iPhone 6.
@joedun1984 it is a background video I purchased from niz.co (like $5 lol), and then I made it mp4 and optimized from 40mb to about 3mb. Then I hosted it with cloudinary.
@jvalonen thanks for the font and services suggestion, I’ll be sure to read that book! I got the fonts from fontspace, not sure if its from alien or not (name of font is battlefield if that helps).

#10

While I do think it looks great, there are a couple of things here and there–

  • Overall Usability and understanding of what I do: 9
  • Video/Image load times: 10 - except phone
  • Video/Image quality (does it add or detract from content flow): 10
  • Overall design: 6
  • Responsiveness (does work well on your phone): 6

More specific comments:
On my phone/in a collapsed browser:

  • Navbar icon is being squished by your name and it’s a couple of pixels lower than your name on the phone (not inline).
  • It’d be great extra for the collapsed nav bar to auto-collapse after you click something instead of hanging around.
  • The storm animation doesn’t load at all on my phone (iPhone), just shows a “play” button smack dab in the middle of it and won’t play even if you click it.

In general:

  • Your picture of yourself seems a little too small compared to the rest of the content on the page?
  • 110% agree with @jvalonen about the fonts. The font in the navbar, while maybe okay for your name/brand, is really hard to read for actual navigation. I also feel like it clashes with both of the “header” fonts.
  • I think you should spend a little more time thinking about what kind of image you want to portray and then cater all of the design elements to that–you have the dark, intense stormy feel with the beginning, then the high-techish feel with the navbar and the font/content at the top, then the lighter, playful feel with the picture of you and the light blue, and then the more “artsy” feel with the main header font, and by the end I as the user just wind up confused.

That’s my two cents. Good work so far and I’m excited to see what it becomes! :slight_smile:

2 Likes
#11

Great! Love the “cartoonish” look but I don’t like font in the navigation on the top.

I want to ask, how did you connect panels with that dashed line?

#12

Sorry, but that didn’t fix it.

#13

Thank you so much for the time spent reviewing my work - that means a lot.:grinning:

Navbar icon is being squished by your name and it’s a couple of pixels lower than your name on the phone (not inline).
Could you give me the pixel width or name of your phone, it should work to about > 250 pixels

It’d be great extra for the collapsed nav bar to auto-collapse after you click something instead of hanging around.
Great suggestion, I will definitely do this

Your picture of yourself seems a little too small compared to the rest of the content on the page?
I didn’t want to make the about section be too big and draw attention away from the main services

110% agree with @jvalonen about the fonts. The font in the navbar, while maybe okay for your name/brand, is really hard to read for actual navigation. I also feel like it clashes with both of the “header” fonts.
Yeah it is hard to read. I will definitely try to find a more uniform font for the site.

I think you should spend a little more time thinking about what kind of image you want to portray and then cater all of the design elements to that–you have the dark, intense stormy feel with the beginning, then the high-techish feel with the navbar and the font/content at the top, then the lighter, playful feel with the picture of you and the light blue, and then the more “artsy” feel with the main header font, and by the end I as the user just wind up confused.
Very informative. I will try to remove the playful feel of the sections. The color scheme is taken directly from the background video colors. I will try to make it more along the intense techie feel. Thank you so much!

@ipinfil take a look at the javascript I used on Github (You will need to go down, its at the bottom)
https://github.com/IsaacAbrahamson/IsaacAbrahamson.github.io/blob/master/js/index.js

1 Like
#14

Changed fonts and removed video on mobile, what do you think?

#15

I will be honest and give you 6 on 10.
No more, I thing the trend is to animate some element like here maybe:
http:artot.net

#16

Great job man. I’m gonna take a look at biz.co thanks!

#17

niz.co, they have plenty of free videos too.
@xavierartot which element is animated bad?

#18

Hey bro! It coming along good.

I don’t want to reiterate some of the points brought out before. So i’m just give my 2cents. The font size for your bio is pretty small and hard to read. Try as best for desktop fonts to not go small than 16px for normal text.

Keep it up!

1 Like
#19

I think 8 out of 10. You should always reach for the best

1 Like
#20

Looks great on mobile!

I agree with everyone about the fonts in the navbar - they clash badly with the fonts on the rest of the page. If you change that I think you have a very solid looking portfolio.

Keep up the good work!